From d3d82294962e9bb7871832ac0b2c063ee343556e Mon Sep 17 00:00:00 2001 From: Harvey Zack Date: Mon, 27 Nov 2023 10:33:52 +0800 Subject: [PATCH] Delete unused font files --- docs/document/404.html | 14 +- docs/document/advanced/built-in.html | 340 ++-- docs/document/advanced/class.html | 30 +- docs/document/advanced/event.html | 623 ++++--- docs/document/advanced/global.html | 372 ++--- docs/document/advanced/plugin.html | 192 +-- docs/document/advanced/property.html | 705 ++++---- .../assets/advanced_built-in.md.2ab1addc.js | 187 --- .../advanced_built-in.md.2ab1addc.lean.js | 1 - .../assets/advanced_built-in.md.UYI3B-Hy.js | 187 +++ .../advanced_built-in.md.UYI3B-Hy.lean.js | 1 + .../assets/advanced_class.md.PUY15_yh.js | 8 + .../assets/advanced_class.md.PUY15_yh.lean.js | 1 + .../assets/advanced_class.md.e446539f.js | 8 - .../assets/advanced_class.md.e446539f.lean.js | 1 - .../assets/advanced_event.md.CMtflGLG.js | 341 ++++ .../assets/advanced_event.md.CMtflGLG.lean.js | 1 + .../assets/advanced_event.md.d7901aca.js | 348 ---- .../assets/advanced_event.md.d7901aca.lean.js | 1 - .../assets/advanced_global.md.7dd7211c.js | 217 --- .../advanced_global.md.7dd7211c.lean.js | 1 - .../assets/advanced_global.md.NO7cToKE.js | 217 +++ .../advanced_global.md.NO7cToKE.lean.js | 1 + .../assets/advanced_plugin.md.b71cd634.js | 99 -- .../advanced_plugin.md.b71cd634.lean.js | 1 - .../assets/advanced_plugin.md.u4SeaDpS.js | 99 ++ .../advanced_plugin.md.u4SeaDpS.lean.js | 1 + .../assets/advanced_property.md.9BAfOfTo.js | 383 +++++ .../advanced_property.md.9BAfOfTo.lean.js | 1 + .../assets/advanced_property.md.cb0d16e0.js | 392 ----- .../advanced_property.md.cb0d16e0.lean.js | 1 - docs/document/assets/app.0a6ef007.js | 1 - docs/document/assets/app.zV_Yzlp4.js | 7 + .../assets/chunks/framework.532b6b18.js | 2 - .../assets/chunks/framework.E60viAY0.js | 2 + docs/document/assets/chunks/theme.1nd7MJcP.js | 7 + docs/document/assets/chunks/theme.521bd55f.js | 7 - .../chunks/virtual_search-data.RJ-82FdL.js | 1366 +++++++++++++++ .../chunks/virtual_search-data.bdabb558.js | 1465 ----------------- .../component_contextmenu.md.fd4c8f42.js | 83 - .../component_contextmenu.md.fd4c8f42.lean.js | 1 - .../component_contextmenu.md.yUI36N-8.js | 83 + .../component_contextmenu.md.yUI36N-8.lean.js | 1 + .../assets/component_controls.md.1t7M5ddB.js | 130 ++ .../component_controls.md.1t7M5ddB.lean.js | 1 + .../assets/component_controls.md.5efc46cb.js | 130 -- .../component_controls.md.5efc46cb.lean.js | 1 - .../assets/component_layers.md.1b88e508.js | 102 -- .../component_layers.md.1b88e508.lean.js | 1 - .../assets/component_layers.md.PBLuSN2i.js | 102 ++ .../component_layers.md.PBLuSN2i.lean.js | 1 + .../assets/component_setting.md.YkhFuIfX.js | 207 +++ .../component_setting.md.YkhFuIfX.lean.js | 1 + .../assets/component_setting.md.b02da861.js | 207 --- .../component_setting.md.b02da861.lean.js | 1 - .../en_advanced_built-in.md.3d9da76b.js | 187 --- .../en_advanced_built-in.md.3d9da76b.lean.js | 1 - .../en_advanced_built-in.md.7TilV0EA.js | 187 +++ .../en_advanced_built-in.md.7TilV0EA.lean.js | 1 + .../assets/en_advanced_class.md.Xc4zvIqK.js | 8 + .../en_advanced_class.md.Xc4zvIqK.lean.js | 1 + .../assets/en_advanced_class.md.a47f0b69.js | 8 - .../en_advanced_class.md.a47f0b69.lean.js | 1 - .../assets/en_advanced_event.md.6-qAbCVg.js | 409 +++++ .../en_advanced_event.md.6-qAbCVg.lean.js | 1 + .../assets/en_advanced_event.md.6b9d4f68.js | 348 ---- .../en_advanced_event.md.6b9d4f68.lean.js | 1 - .../assets/en_advanced_global.md.15418f1d.js | 217 --- .../en_advanced_global.md.15418f1d.lean.js | 1 - .../assets/en_advanced_global.md.4oaAng9Z.js | 222 +++ .../en_advanced_global.md.4oaAng9Z.lean.js | 1 + .../assets/en_advanced_plugin.md.V5kifudd.js | 99 ++ .../en_advanced_plugin.md.V5kifudd.lean.js | 1 + .../assets/en_advanced_plugin.md.db33d004.js | 99 -- .../en_advanced_plugin.md.db33d004.lean.js | 1 - .../en_advanced_property.md.15b8758c.js | 383 ----- .../en_advanced_property.md.15b8758c.lean.js | 1 - .../en_advanced_property.md.q2kjLcep.js | 384 +++++ .../en_advanced_property.md.q2kjLcep.lean.js | 1 + .../en_component_contextmenu.md.R4YKVJzf.js | 83 + ..._component_contextmenu.md.R4YKVJzf.lean.js | 1 + .../en_component_contextmenu.md.dac57cfb.js | 83 - ..._component_contextmenu.md.dac57cfb.lean.js | 1 - .../en_component_controls.md.SXHbRPbx.js | 130 ++ .../en_component_controls.md.SXHbRPbx.lean.js | 1 + .../en_component_controls.md.c066e6b8.js | 130 -- .../en_component_controls.md.c066e6b8.lean.js | 1 - .../assets/en_component_layers.md.446fcd07.js | 102 -- .../en_component_layers.md.446fcd07.lean.js | 1 - .../assets/en_component_layers.md.J3naSppX.js | 102 ++ .../en_component_layers.md.J3naSppX.lean.js | 1 + .../en_component_setting.md.f8787f3a.js | 207 --- .../en_component_setting.md.f8787f3a.lean.js | 1 - .../en_component_setting.md.pCDzgQoQ.js | 207 +++ .../en_component_setting.md.pCDzgQoQ.lean.js | 1 + docs/document/assets/en_index.md.8bbfdcd3.js | 167 -- .../assets/en_index.md.8bbfdcd3.lean.js | 1 - docs/document/assets/en_index.md.lXlh_hOW.js | 167 ++ .../assets/en_index.md.lXlh_hOW.lean.js | 1 + .../assets/en_library_dash.md.3RbZeCcT.js | 24 + .../en_library_dash.md.3RbZeCcT.lean.js | 1 + .../assets/en_library_dash.md.d2caad85.js | 24 - .../en_library_dash.md.d2caad85.lean.js | 1 - .../assets/en_library_flv.md.7a295dcf.js | 25 - .../assets/en_library_flv.md.7a295dcf.lean.js | 1 - .../assets/en_library_flv.md.B8QlSimM.js | 25 + .../assets/en_library_flv.md.B8QlSimM.lean.js | 1 + .../assets/en_library_hls.md.YUdBjyH8.js | 27 + .../assets/en_library_hls.md.YUdBjyH8.lean.js | 1 + .../assets/en_library_hls.md.adcf9c67.js | 27 - .../assets/en_library_hls.md.adcf9c67.lean.js | 1 - .../assets/en_plugin_ads.md.4b93a290.js | 48 - .../assets/en_plugin_ads.md.4b93a290.lean.js | 1 - .../assets/en_plugin_ads.md.qIahpi8y.js | 48 + .../assets/en_plugin_ads.md.qIahpi8y.lean.js | 1 + .../en_plugin_control-ui.md.182a9399.js | 27 - .../en_plugin_control-ui.md.182a9399.lean.js | 1 - .../assets/en_plugin_danmuku.md.pycJIXGa.js | 284 ++++ .../en_plugin_danmuku.md.pycJIXGa.lean.js | 1 + .../en_plugin_dash-quality.md.ed691a8e.js | 1 - ...en_plugin_dash-quality.md.ed691a8e.lean.js | 1 - .../en_plugin_dash-quality.md.jzW8-qLV.js | 1 + ...en_plugin_dash-quality.md.jzW8-qLV.lean.js | 1 + .../en_plugin_hls-quality.md.8a5de55a.js | 1 - .../en_plugin_hls-quality.md.8a5de55a.lean.js | 1 - .../en_plugin_hls-quality.md.TidRTREF.js | 1 + .../en_plugin_hls-quality.md.TidRTREF.lean.js | 1 + .../assets/en_plugin_iframe.md.ae3ab65b.js | 166 -- .../en_plugin_iframe.md.ae3ab65b.lean.js | 1 - .../assets/en_plugin_iframe.md.ufbDiAl_.js | 168 ++ .../en_plugin_iframe.md.ufbDiAl_.lean.js | 1 + .../assets/en_start_i18n.md.63002da5.js | 52 - .../assets/en_start_i18n.md.63002da5.lean.js | 1 - .../assets/en_start_i18n.md.eJXPNaQ_.js | 52 + .../assets/en_start_i18n.md.eJXPNaQ_.lean.js | 1 + .../assets/en_start_option.md.096c4d13.js | 380 ----- .../en_start_option.md.096c4d13.lean.js | 1 - .../assets/en_start_option.md.BxS2mkxH.js | 380 +++++ .../en_start_option.md.BxS2mkxH.lean.js | 1 + ...go.2489261b.svg => flex-logo.SQNie4Vp.svg} | 0 docs/document/assets/index.md.48e77311.js | 167 -- .../document/assets/index.md.48e77311.lean.js | 1 - docs/document/assets/index.md._kFQgWbo.js | 167 ++ .../document/assets/index.md._kFQgWbo.lean.js | 1 + ... inter-italic-cyrillic-ext.OVycGSDq.woff2} | Bin ...2 => inter-italic-cyrillic.-nLMcIwj.woff2} | Bin ... => inter-italic-greek-ext.hznxWNZO.woff2} | Bin ...off2 => inter-italic-greek.PSfer2Kc.woff2} | Bin ... => inter-italic-latin-ext.RnFly65-.woff2} | Bin ...off2 => inter-italic-latin.27E69YJn.woff2} | Bin ...=> inter-italic-vietnamese.xzQHe1q1.woff2} | Bin ...> inter-roman-cyrillic-ext.8T9wMG5w.woff2} | Bin ...f2 => inter-roman-cyrillic.jIZ9REo5.woff2} | Bin ...2 => inter-roman-greek-ext.9JiNzaSO.woff2} | Bin ...woff2 => inter-roman-greek.Cb5wWeGA.woff2} | Bin ...2 => inter-roman-latin-ext.GZWE-KO4.woff2} | Bin ...woff2 => inter-roman-latin.bvIUbFQP.woff2} | Bin ... => inter-roman-vietnamese.paY3CzEB.woff2} | Bin .../assets/library_dash.md.6145d438.js | 24 - .../assets/library_dash.md.6145d438.lean.js | 1 - .../assets/library_dash.md.rQV5WaP2.js | 24 + .../assets/library_dash.md.rQV5WaP2.lean.js | 1 + .../assets/library_flv.md.a74cc017.js | 25 - .../assets/library_flv.md.a74cc017.lean.js | 1 - .../assets/library_flv.md.yXnwvlZv.js | 25 + .../assets/library_flv.md.yXnwvlZv.lean.js | 1 + .../assets/library_hls.md.29fb7b0e.js | 27 - .../assets/library_hls.md.29fb7b0e.lean.js | 1 - .../assets/library_hls.md.67A5_0ro.js | 27 + .../assets/library_hls.md.67A5_0ro.lean.js | 1 + .../document/assets/plugin_ads.md.12a970af.js | 48 - .../assets/plugin_ads.md.12a970af.lean.js | 1 - .../document/assets/plugin_ads.md.uajsmJ_k.js | 48 + .../assets/plugin_ads.md.uajsmJ_k.lean.js | 1 + .../assets/plugin_control-ui.md.cf85aeee.js | 27 - .../plugin_control-ui.md.cf85aeee.lean.js | 1 - .../assets/plugin_danmuku.md.fa90b3e1.js | 284 ---- .../assets/plugin_danmuku.md.fa90b3e1.lean.js | 1 - .../assets/plugin_danmuku.md.j9nErxGM.js | 284 ++++ .../assets/plugin_danmuku.md.j9nErxGM.lean.js | 1 + .../assets/plugin_dash-quality.md.90dd7335.js | 1 - .../plugin_dash-quality.md.90dd7335.lean.js | 1 - .../assets/plugin_dash-quality.md.MnopqkMN.js | 1 + .../plugin_dash-quality.md.MnopqkMN.lean.js | 1 + .../assets/plugin_hls-quality.md.GspGF35D.js | 1 + .../plugin_hls-quality.md.GspGF35D.lean.js | 1 + .../assets/plugin_hls-quality.md.b494718c.js | 1 - .../plugin_hls-quality.md.b494718c.lean.js | 1 - .../assets/plugin_iframe.md.62b646f4.js | 166 -- .../assets/plugin_iframe.md.62b646f4.lean.js | 1 - .../assets/plugin_iframe.md.Y3z3hB9z.js | 168 ++ .../assets/plugin_iframe.md.Y3z3hB9z.lean.js | 1 + .../document/assets/start_i18n.md.7503329d.js | 52 - .../assets/start_i18n.md.7503329d.lean.js | 1 - .../document/assets/start_i18n.md.eP6fmX5M.js | 52 + .../assets/start_i18n.md.eP6fmX5M.lean.js | 1 + .../assets/start_option.md.81dcd571.js | 380 ----- .../assets/start_option.md.81dcd571.lean.js | 1 - .../assets/start_option.md.FFLG77Kb.js | 380 +++++ .../assets/start_option.md.FFLG77Kb.lean.js | 1 + docs/document/assets/style.93a866ad.css | 1 - docs/document/assets/style.K1VI4RxB.css | 1 + docs/document/component/contextmenu.html | 166 +- docs/document/component/controls.html | 268 +-- docs/document/component/layers.html | 212 +-- docs/document/component/setting.html | 420 ++--- docs/document/en/advanced/built-in.html | 342 ++-- docs/document/en/advanced/class.html | 32 +- docs/document/en/advanced/event.html | 686 ++++---- docs/document/en/advanced/global.html | 379 ++--- docs/document/en/advanced/plugin.html | 194 +-- docs/document/en/advanced/property.html | 699 ++++---- docs/document/en/component/contextmenu.html | 168 +- docs/document/en/component/controls.html | 270 +-- docs/document/en/component/layers.html | 214 +-- docs/document/en/component/setting.html | 422 ++--- docs/document/en/index.html | 316 ++-- docs/document/en/library/dash.html | 64 +- docs/document/en/library/flv.html | 66 +- docs/document/en/library/hls.html | 70 +- docs/document/en/plugin/ads.html | 100 +- docs/document/en/plugin/control-ui.html | 51 - docs/document/en/plugin/danmuku.html | 310 ++++ docs/document/en/plugin/dash-quality.html | 22 +- docs/document/en/plugin/hls-quality.html | 22 +- docs/document/en/plugin/iframe.html | 338 ++-- docs/document/en/start/i18n.html | 118 +- docs/document/en/start/option.html | 772 ++++----- docs/document/hashmap.json | 2 +- docs/document/index.html | 314 ++-- docs/document/library/dash.html | 62 +- docs/document/library/flv.html | 64 +- docs/document/library/hls.html | 68 +- docs/document/plugin/ads.html | 98 +- docs/document/plugin/control-ui.html | 51 - docs/document/plugin/danmuku.html | 564 +++---- docs/document/plugin/dash-quality.html | 20 +- docs/document/plugin/hls-quality.html | 20 +- docs/document/plugin/iframe.html | 336 ++-- docs/document/start/i18n.html | 116 +- docs/document/start/option.html | 770 ++++----- 241 files changed, 13278 insertions(+), 12747 deletions(-) delete mode 100644 docs/document/assets/advanced_built-in.md.2ab1addc.js delete mode 100644 docs/document/assets/advanced_built-in.md.2ab1addc.lean.js create mode 100644 docs/document/assets/advanced_built-in.md.UYI3B-Hy.js create mode 100644 docs/document/assets/advanced_built-in.md.UYI3B-Hy.lean.js create mode 100644 docs/document/assets/advanced_class.md.PUY15_yh.js create mode 100644 docs/document/assets/advanced_class.md.PUY15_yh.lean.js delete mode 100644 docs/document/assets/advanced_class.md.e446539f.js delete mode 100644 docs/document/assets/advanced_class.md.e446539f.lean.js create mode 100644 docs/document/assets/advanced_event.md.CMtflGLG.js create mode 100644 docs/document/assets/advanced_event.md.CMtflGLG.lean.js delete mode 100644 docs/document/assets/advanced_event.md.d7901aca.js delete mode 100644 docs/document/assets/advanced_event.md.d7901aca.lean.js delete mode 100644 docs/document/assets/advanced_global.md.7dd7211c.js delete mode 100644 docs/document/assets/advanced_global.md.7dd7211c.lean.js create mode 100644 docs/document/assets/advanced_global.md.NO7cToKE.js create mode 100644 docs/document/assets/advanced_global.md.NO7cToKE.lean.js delete mode 100644 docs/document/assets/advanced_plugin.md.b71cd634.js delete mode 100644 docs/document/assets/advanced_plugin.md.b71cd634.lean.js create mode 100644 docs/document/assets/advanced_plugin.md.u4SeaDpS.js create mode 100644 docs/document/assets/advanced_plugin.md.u4SeaDpS.lean.js create mode 100644 docs/document/assets/advanced_property.md.9BAfOfTo.js create mode 100644 docs/document/assets/advanced_property.md.9BAfOfTo.lean.js delete mode 100644 docs/document/assets/advanced_property.md.cb0d16e0.js delete mode 100644 docs/document/assets/advanced_property.md.cb0d16e0.lean.js delete mode 100644 docs/document/assets/app.0a6ef007.js create mode 100644 docs/document/assets/app.zV_Yzlp4.js delete mode 100644 docs/document/assets/chunks/framework.532b6b18.js create mode 100644 docs/document/assets/chunks/framework.E60viAY0.js create mode 100644 docs/document/assets/chunks/theme.1nd7MJcP.js delete mode 100644 docs/document/assets/chunks/theme.521bd55f.js create mode 100644 docs/document/assets/chunks/virtual_search-data.RJ-82FdL.js delete mode 100644 docs/document/assets/chunks/virtual_search-data.bdabb558.js delete mode 100644 docs/document/assets/component_contextmenu.md.fd4c8f42.js delete mode 100644 docs/document/assets/component_contextmenu.md.fd4c8f42.lean.js create mode 100644 docs/document/assets/component_contextmenu.md.yUI36N-8.js create mode 100644 docs/document/assets/component_contextmenu.md.yUI36N-8.lean.js create mode 100644 docs/document/assets/component_controls.md.1t7M5ddB.js create mode 100644 docs/document/assets/component_controls.md.1t7M5ddB.lean.js delete mode 100644 docs/document/assets/component_controls.md.5efc46cb.js delete mode 100644 docs/document/assets/component_controls.md.5efc46cb.lean.js delete mode 100644 docs/document/assets/component_layers.md.1b88e508.js delete mode 100644 docs/document/assets/component_layers.md.1b88e508.lean.js create mode 100644 docs/document/assets/component_layers.md.PBLuSN2i.js create mode 100644 docs/document/assets/component_layers.md.PBLuSN2i.lean.js create mode 100644 docs/document/assets/component_setting.md.YkhFuIfX.js create mode 100644 docs/document/assets/component_setting.md.YkhFuIfX.lean.js delete mode 100644 docs/document/assets/component_setting.md.b02da861.js delete mode 100644 docs/document/assets/component_setting.md.b02da861.lean.js delete mode 100644 docs/document/assets/en_advanced_built-in.md.3d9da76b.js delete mode 100644 docs/document/assets/en_advanced_built-in.md.3d9da76b.lean.js create mode 100644 docs/document/assets/en_advanced_built-in.md.7TilV0EA.js create mode 100644 docs/document/assets/en_advanced_built-in.md.7TilV0EA.lean.js create mode 100644 docs/document/assets/en_advanced_class.md.Xc4zvIqK.js create mode 100644 docs/document/assets/en_advanced_class.md.Xc4zvIqK.lean.js delete mode 100644 docs/document/assets/en_advanced_class.md.a47f0b69.js delete mode 100644 docs/document/assets/en_advanced_class.md.a47f0b69.lean.js create mode 100644 docs/document/assets/en_advanced_event.md.6-qAbCVg.js create mode 100644 docs/document/assets/en_advanced_event.md.6-qAbCVg.lean.js delete mode 100644 docs/document/assets/en_advanced_event.md.6b9d4f68.js delete mode 100644 docs/document/assets/en_advanced_event.md.6b9d4f68.lean.js delete mode 100644 docs/document/assets/en_advanced_global.md.15418f1d.js delete mode 100644 docs/document/assets/en_advanced_global.md.15418f1d.lean.js create mode 100644 docs/document/assets/en_advanced_global.md.4oaAng9Z.js create mode 100644 docs/document/assets/en_advanced_global.md.4oaAng9Z.lean.js create mode 100644 docs/document/assets/en_advanced_plugin.md.V5kifudd.js create mode 100644 docs/document/assets/en_advanced_plugin.md.V5kifudd.lean.js delete mode 100644 docs/document/assets/en_advanced_plugin.md.db33d004.js delete mode 100644 docs/document/assets/en_advanced_plugin.md.db33d004.lean.js delete mode 100644 docs/document/assets/en_advanced_property.md.15b8758c.js delete mode 100644 docs/document/assets/en_advanced_property.md.15b8758c.lean.js create mode 100644 docs/document/assets/en_advanced_property.md.q2kjLcep.js create mode 100644 docs/document/assets/en_advanced_property.md.q2kjLcep.lean.js create mode 100644 docs/document/assets/en_component_contextmenu.md.R4YKVJzf.js create mode 100644 docs/document/assets/en_component_contextmenu.md.R4YKVJzf.lean.js delete mode 100644 docs/document/assets/en_component_contextmenu.md.dac57cfb.js delete mode 100644 docs/document/assets/en_component_contextmenu.md.dac57cfb.lean.js create mode 100644 docs/document/assets/en_component_controls.md.SXHbRPbx.js create mode 100644 docs/document/assets/en_component_controls.md.SXHbRPbx.lean.js delete mode 100644 docs/document/assets/en_component_controls.md.c066e6b8.js delete mode 100644 docs/document/assets/en_component_controls.md.c066e6b8.lean.js delete mode 100644 docs/document/assets/en_component_layers.md.446fcd07.js delete mode 100644 docs/document/assets/en_component_layers.md.446fcd07.lean.js create mode 100644 docs/document/assets/en_component_layers.md.J3naSppX.js create mode 100644 docs/document/assets/en_component_layers.md.J3naSppX.lean.js delete mode 100644 docs/document/assets/en_component_setting.md.f8787f3a.js delete mode 100644 docs/document/assets/en_component_setting.md.f8787f3a.lean.js create mode 100644 docs/document/assets/en_component_setting.md.pCDzgQoQ.js create mode 100644 docs/document/assets/en_component_setting.md.pCDzgQoQ.lean.js delete mode 100644 docs/document/assets/en_index.md.8bbfdcd3.js delete mode 100644 docs/document/assets/en_index.md.8bbfdcd3.lean.js create mode 100644 docs/document/assets/en_index.md.lXlh_hOW.js create mode 100644 docs/document/assets/en_index.md.lXlh_hOW.lean.js create mode 100644 docs/document/assets/en_library_dash.md.3RbZeCcT.js create mode 100644 docs/document/assets/en_library_dash.md.3RbZeCcT.lean.js delete mode 100644 docs/document/assets/en_library_dash.md.d2caad85.js delete mode 100644 docs/document/assets/en_library_dash.md.d2caad85.lean.js delete mode 100644 docs/document/assets/en_library_flv.md.7a295dcf.js delete mode 100644 docs/document/assets/en_library_flv.md.7a295dcf.lean.js create mode 100644 docs/document/assets/en_library_flv.md.B8QlSimM.js create mode 100644 docs/document/assets/en_library_flv.md.B8QlSimM.lean.js create mode 100644 docs/document/assets/en_library_hls.md.YUdBjyH8.js create mode 100644 docs/document/assets/en_library_hls.md.YUdBjyH8.lean.js delete mode 100644 docs/document/assets/en_library_hls.md.adcf9c67.js delete mode 100644 docs/document/assets/en_library_hls.md.adcf9c67.lean.js delete mode 100644 docs/document/assets/en_plugin_ads.md.4b93a290.js delete mode 100644 docs/document/assets/en_plugin_ads.md.4b93a290.lean.js create mode 100644 docs/document/assets/en_plugin_ads.md.qIahpi8y.js create mode 100644 docs/document/assets/en_plugin_ads.md.qIahpi8y.lean.js delete mode 100644 docs/document/assets/en_plugin_control-ui.md.182a9399.js delete mode 100644 docs/document/assets/en_plugin_control-ui.md.182a9399.lean.js create mode 100644 docs/document/assets/en_plugin_danmuku.md.pycJIXGa.js create mode 100644 docs/document/assets/en_plugin_danmuku.md.pycJIXGa.lean.js delete mode 100644 docs/document/assets/en_plugin_dash-quality.md.ed691a8e.js delete mode 100644 docs/document/assets/en_plugin_dash-quality.md.ed691a8e.lean.js create mode 100644 docs/document/assets/en_plugin_dash-quality.md.jzW8-qLV.js create mode 100644 docs/document/assets/en_plugin_dash-quality.md.jzW8-qLV.lean.js delete mode 100644 docs/document/assets/en_plugin_hls-quality.md.8a5de55a.js delete mode 100644 docs/document/assets/en_plugin_hls-quality.md.8a5de55a.lean.js create mode 100644 docs/document/assets/en_plugin_hls-quality.md.TidRTREF.js create mode 100644 docs/document/assets/en_plugin_hls-quality.md.TidRTREF.lean.js delete mode 100644 docs/document/assets/en_plugin_iframe.md.ae3ab65b.js delete mode 100644 docs/document/assets/en_plugin_iframe.md.ae3ab65b.lean.js create mode 100644 docs/document/assets/en_plugin_iframe.md.ufbDiAl_.js create mode 100644 docs/document/assets/en_plugin_iframe.md.ufbDiAl_.lean.js delete mode 100644 docs/document/assets/en_start_i18n.md.63002da5.js delete mode 100644 docs/document/assets/en_start_i18n.md.63002da5.lean.js create mode 100644 docs/document/assets/en_start_i18n.md.eJXPNaQ_.js create mode 100644 docs/document/assets/en_start_i18n.md.eJXPNaQ_.lean.js delete mode 100644 docs/document/assets/en_start_option.md.096c4d13.js delete mode 100644 docs/document/assets/en_start_option.md.096c4d13.lean.js create mode 100644 docs/document/assets/en_start_option.md.BxS2mkxH.js create mode 100644 docs/document/assets/en_start_option.md.BxS2mkxH.lean.js rename docs/document/assets/{flex-logo.2489261b.svg => flex-logo.SQNie4Vp.svg} (100%) delete mode 100644 docs/document/assets/index.md.48e77311.js delete mode 100644 docs/document/assets/index.md.48e77311.lean.js create mode 100644 docs/document/assets/index.md._kFQgWbo.js create mode 100644 docs/document/assets/index.md._kFQgWbo.lean.js rename docs/document/assets/{inter-italic-cyrillic-ext.33bd5a8e.woff2 => inter-italic-cyrillic-ext.OVycGSDq.woff2} (100%) rename docs/document/assets/{inter-italic-cyrillic.ea42a392.woff2 => inter-italic-cyrillic.-nLMcIwj.woff2} (100%) rename docs/document/assets/{inter-italic-greek-ext.4fbe9427.woff2 => inter-italic-greek-ext.hznxWNZO.woff2} (100%) rename docs/document/assets/{inter-italic-greek.8f4463c4.woff2 => inter-italic-greek.PSfer2Kc.woff2} (100%) rename docs/document/assets/{inter-italic-latin-ext.bd8920cc.woff2 => inter-italic-latin-ext.RnFly65-.woff2} (100%) rename docs/document/assets/{inter-italic-latin.bd3b6f56.woff2 => inter-italic-latin.27E69YJn.woff2} (100%) rename docs/document/assets/{inter-italic-vietnamese.6ce511fb.woff2 => inter-italic-vietnamese.xzQHe1q1.woff2} (100%) rename docs/document/assets/{inter-roman-cyrillic-ext.e75737ce.woff2 => inter-roman-cyrillic-ext.8T9wMG5w.woff2} (100%) rename docs/document/assets/{inter-roman-cyrillic.5f2c6c8c.woff2 => inter-roman-cyrillic.jIZ9REo5.woff2} (100%) rename docs/document/assets/{inter-roman-greek-ext.ab0619bc.woff2 => inter-roman-greek-ext.9JiNzaSO.woff2} (100%) rename docs/document/assets/{inter-roman-greek.d5a6d92a.woff2 => inter-roman-greek.Cb5wWeGA.woff2} (100%) rename docs/document/assets/{inter-roman-latin-ext.0030eebd.woff2 => inter-roman-latin-ext.GZWE-KO4.woff2} (100%) rename docs/document/assets/{inter-roman-latin.2ed14f66.woff2 => inter-roman-latin.bvIUbFQP.woff2} (100%) rename docs/document/assets/{inter-roman-vietnamese.14ce25a6.woff2 => inter-roman-vietnamese.paY3CzEB.woff2} (100%) delete mode 100644 docs/document/assets/library_dash.md.6145d438.js delete mode 100644 docs/document/assets/library_dash.md.6145d438.lean.js create mode 100644 docs/document/assets/library_dash.md.rQV5WaP2.js create mode 100644 docs/document/assets/library_dash.md.rQV5WaP2.lean.js delete mode 100644 docs/document/assets/library_flv.md.a74cc017.js delete mode 100644 docs/document/assets/library_flv.md.a74cc017.lean.js create mode 100644 docs/document/assets/library_flv.md.yXnwvlZv.js create mode 100644 docs/document/assets/library_flv.md.yXnwvlZv.lean.js delete mode 100644 docs/document/assets/library_hls.md.29fb7b0e.js delete mode 100644 docs/document/assets/library_hls.md.29fb7b0e.lean.js create mode 100644 docs/document/assets/library_hls.md.67A5_0ro.js create mode 100644 docs/document/assets/library_hls.md.67A5_0ro.lean.js delete mode 100644 docs/document/assets/plugin_ads.md.12a970af.js delete mode 100644 docs/document/assets/plugin_ads.md.12a970af.lean.js create mode 100644 docs/document/assets/plugin_ads.md.uajsmJ_k.js create mode 100644 docs/document/assets/plugin_ads.md.uajsmJ_k.lean.js delete mode 100644 docs/document/assets/plugin_control-ui.md.cf85aeee.js delete mode 100644 docs/document/assets/plugin_control-ui.md.cf85aeee.lean.js delete mode 100644 docs/document/assets/plugin_danmuku.md.fa90b3e1.js delete mode 100644 docs/document/assets/plugin_danmuku.md.fa90b3e1.lean.js create mode 100644 docs/document/assets/plugin_danmuku.md.j9nErxGM.js create mode 100644 docs/document/assets/plugin_danmuku.md.j9nErxGM.lean.js delete mode 100644 docs/document/assets/plugin_dash-quality.md.90dd7335.js delete mode 100644 docs/document/assets/plugin_dash-quality.md.90dd7335.lean.js create mode 100644 docs/document/assets/plugin_dash-quality.md.MnopqkMN.js create mode 100644 docs/document/assets/plugin_dash-quality.md.MnopqkMN.lean.js create mode 100644 docs/document/assets/plugin_hls-quality.md.GspGF35D.js create mode 100644 docs/document/assets/plugin_hls-quality.md.GspGF35D.lean.js delete mode 100644 docs/document/assets/plugin_hls-quality.md.b494718c.js delete mode 100644 docs/document/assets/plugin_hls-quality.md.b494718c.lean.js delete mode 100644 docs/document/assets/plugin_iframe.md.62b646f4.js delete mode 100644 docs/document/assets/plugin_iframe.md.62b646f4.lean.js create mode 100644 docs/document/assets/plugin_iframe.md.Y3z3hB9z.js create mode 100644 docs/document/assets/plugin_iframe.md.Y3z3hB9z.lean.js delete mode 100644 docs/document/assets/start_i18n.md.7503329d.js delete mode 100644 docs/document/assets/start_i18n.md.7503329d.lean.js create mode 100644 docs/document/assets/start_i18n.md.eP6fmX5M.js create mode 100644 docs/document/assets/start_i18n.md.eP6fmX5M.lean.js delete mode 100644 docs/document/assets/start_option.md.81dcd571.js delete mode 100644 docs/document/assets/start_option.md.81dcd571.lean.js create mode 100644 docs/document/assets/start_option.md.FFLG77Kb.js create mode 100644 docs/document/assets/start_option.md.FFLG77Kb.lean.js delete mode 100644 docs/document/assets/style.93a866ad.css create mode 100644 docs/document/assets/style.K1VI4RxB.css delete mode 100644 docs/document/en/plugin/control-ui.html create mode 100644 docs/document/en/plugin/danmuku.html delete mode 100644 docs/document/plugin/control-ui.html diff --git a/docs/document/404.html b/docs/document/404.html index a91a32442..8d9aaf343 100644 --- a/docs/document/404.html +++ b/docs/document/404.html @@ -5,18 +5,20 @@ 404 | Artplayer.js - + + - - + + - + + -
Artplayer.js

Appearance

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Take me home
- +
Artplayer.js

Appearance

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Take me home
+ \ No newline at end of file diff --git a/docs/document/advanced/built-in.html b/docs/document/advanced/built-in.html index 207d32cbb..784ece9c8 100644 --- a/docs/document/advanced/built-in.html +++ b/docs/document/advanced/built-in.html @@ -5,207 +5,209 @@ 高级属性 | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

高级属性 ​

这里的 高级属性 是指挂载在 实例 的 二级属性，比较少用

option ​

播放器的选项

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    
Artplayer.js
Appearance
高级属性 ​
这里的 高级属性 是指挂载在 实例 的 二级属性，比较少用
option ​
播放器的选项
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info(art.option);
提示
假如直接修改这个 option 对象，播放器不会马上做出响应
template ​
管理播放器所有的 DOM 元素
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+console.info(art.option);
提示
假如直接修改这个 option 对象，播放器不会马上做出响应
template ​
管理播放器所有的 DOM 元素
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info(art.template);
-console.info(art.template.$video);
提示
为了方便区别 DOM 元素和普通对象，播放器里的所有 DOM 元素都是以 $ 开头命名的
这是所有 DOM 元素的定义：artplayer/types/template.d.ts
events ​
管理播放器所有的 DOM 事件，实质上是代理了 addEventListener 和 removeEventListener, 当使用以下方法来处理事件，播放器销毁时也会自动销毁该事件
  • proxy 方法用于代理 DOM 事件
  • hover 方法用于代理自定义的 hover 事件
  • loadImg 方法用于监听图片的 load 加载事件
▶ Run Code
js
var container = document.querySelector('.artplayer-app');
+console.info(art.template);
+console.info(art.template.$video);
提示
为了方便区别 DOM 元素和普通对象，播放器里的所有 DOM 元素都是以 $ 开头命名的
这是所有 DOM 元素的定义：artplayer/types/template.d.ts
events ​
管理播放器所有的 DOM 事件，实质上是代理了 addEventListener 和 removeEventListener, 当使用以下方法来处理事件，播放器销毁时也会自动销毁该事件
  • proxy 方法用于代理 DOM 事件
  • hover 方法用于代理自定义的 hover 事件
  • loadImg 方法用于监听图片的 load 加载事件
▶ Run Code
js
var container = document.querySelector('.artplayer-app');
 
-var art = new Artplayer({
-    container: container,
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: container,
+    url: '/assets/sample/video.mp4',
+});
 
-art.events.proxy(container, 'click', event => {
-	console.info('click', event);
-});
+art.events.proxy(container, 'click', event => {
+	console.info('click', event);
+});
 
-art.events.hover(container, (event) => {
-    console.info('mouseenter', event);
-}, (event) => {
-    console.info('mouseleave', event);
-});
+art.events.hover(container, (event) => {
+    console.info('mouseenter', event);
+}, (event) => {
+    console.info('mouseleave', event);
+});
 
-art.events.loadImg('/assets/sample/poster.jpg').then(img => {
-    console.info('loadImg', img);
-});
提示
假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用这些函数，以避免造成内存泄漏
storage ​
管理播放器的本地存储
  • name 属性用于设置缓存的 key
  • set 方法用于设置缓存
  • get 方法用于获取缓存
  • del 方法用于删除缓存
  • clear 方法用于清空缓存
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.events.loadImg('/assets/sample/poster.jpg').then(img => {
+    console.info('loadImg', img);
+});
提示
假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用这些函数，以避免造成内存泄漏
storage ​
管理播放器的本地存储
  • name 属性用于设置缓存的 key
  • set 方法用于设置缓存
  • get 方法用于获取缓存
  • del 方法用于删除缓存
  • clear 方法用于清空缓存
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.storage.set('test', { foo: 'bar' });
-const test = art.storage.get('test');
-console.info(test);
-art.storage.del('test');
-art.storage.clear();
提示
默认所有播放器实例都是共享同一个 localStorage 的，而且默认的 key 是 artplayer_settings
如果你想不同的播放器使用不同的 localStorage，你可以修改 art.storage.name 即可
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.storage.set('test', { foo: 'bar' });
+const test = art.storage.get('test');
+console.info(test);
+art.storage.del('test');
+art.storage.clear();
提示
默认所有播放器实例都是共享同一个 localStorage 的，而且默认的 key 是 artplayer_settings
如果你想不同的播放器使用不同的 localStorage，你可以修改 art.storage.name 即可
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.storage.name = 'your-storage-key';
-art.storage.set('test', { foo: 'bar' });
icons ​
管理播放器所有的 svg 图标
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.storage.name = 'your-storage-key';
+art.storage.set('test', { foo: 'bar' });
icons ​
管理播放器所有的 svg 图标
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info(art.icons.loading);
这是所有图标的定义：
artplayer/types/icons.d.ts
i18n ​
管理播放器的 i18n
  • get 方法用于获取 i18n 的值
  • update 方法用于更新 i18n 对象
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+console.info(art.icons.loading);
这是所有图标的定义：
artplayer/types/icons.d.ts
i18n ​
管理播放器的 i18n
  • get 方法用于获取 i18n 的值
  • update 方法用于更新 i18n 对象
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info(art.i18n.get('Play'));
+console.info(art.i18n.get('Play'));
 
-art.i18n.update({
-    'zh-cn': {
-        Play: 'Your Play'
-    }
-});
WARNING
使用 art.i18n.update 只能更新实例化之后的 i18n，假如想在实例化之前更新 i18n，请使用基础选项的 i18n 来更新
notice ​
管理播放器的提示语，只有一个 show 属性用于显示提示语
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.i18n.update({
+    'zh-cn': {
+        Play: 'Your Play'
+    }
+});
WARNING
使用 art.i18n.update 只能更新实例化之后的 i18n，假如想在实例化之前更新 i18n，请使用基础选项的 i18n 来更新
notice ​
管理播放器的提示语，只有一个 show 属性用于显示提示语
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.notice.show = 'Video Ready To Play';
-})
WARNING
如果想马上隐藏 notice 的显示：art.notice.show = '';
layers ​
管理播放器的层
  • add 方法用于动态添加层
  • remove 方法用于动态删除层
  • update 方法用于动态更新层
  • show 属性用于设置是否显示全部层
  • toggle 方法用于切换是否显示全部层
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.notice.show = 'Video Ready To Play';
+})
WARNING
如果想马上隐藏 notice 的显示：art.notice.show = '';
layers ​
管理播放器的层
  • add 方法用于动态添加层
  • remove 方法用于动态删除层
  • update 方法用于动态更新层
  • show 属性用于设置是否显示全部层
  • toggle 方法用于切换是否显示全部层
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.layers.add({
-        html: 'Some Text',
-    });
+art.on('ready', () => {
+    art.layers.add({
+        html: 'Some Text',
+    });
 
-	setTimeout(() => {
-		art.layers.show = false;
-	}, 1000);
-});
组件配置 请参考以下地址：
/component/layers.html
controls ​
管理播放器的控制器
  • add 方法用于动态添加控制器
  • remove 方法用于动态删除控制器
  • update 方法用于动态更新控制器
  • show 属性用于设置是否显示全部控制器
  • toggle 方法用于切换是否显示全部控制器
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+	setTimeout(() => {
+		art.layers.show = false;
+	}, 1000);
+});
组件配置 请参考以下地址：
/component/layers.html
controls ​
管理播放器的控制器
  • add 方法用于动态添加控制器
  • remove 方法用于动态删除控制器
  • update 方法用于动态更新控制器
  • show 属性用于设置是否显示全部控制器
  • toggle 方法用于切换是否显示全部控制器
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.controls.add({
-        html: 'Some Text',
-        position: 'left',
-    });
+art.on('ready', () => {
+    art.controls.add({
+        html: 'Some Text',
+        position: 'left',
+    });
 
-	setTimeout(() => {
-		art.controls.show = false;
-	}, 1000);
-});
组件配置 请参考以下地址：
/component/controls.html
contextmenu ​
管理播放器的右键菜单
  • add 方法用于动态添加菜单
  • remove 方法用于动态删除菜单
  • update 方法用于动态更新菜单
  • show 属性用于设置是否显示全部菜单
  • toggle 方法用于切换是否显示全部菜单
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+	setTimeout(() => {
+		art.controls.show = false;
+	}, 1000);
+});
组件配置 请参考以下地址：
/component/controls.html
contextmenu ​
管理播放器的右键菜单
  • add 方法用于动态添加菜单
  • remove 方法用于动态删除菜单
  • update 方法用于动态更新菜单
  • show 属性用于设置是否显示全部菜单
  • toggle 方法用于切换是否显示全部菜单
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.contextmenu.add({
-        html: 'Some Text',
-    });
+art.on('ready', () => {
+    art.contextmenu.add({
+        html: 'Some Text',
+    });
 
-    art.contextmenu.show = true;
-	setTimeout(() => {
-		art.contextmenu.show = false;
-	}, 1000);
-});
组件配置 请参考以下地址：
/component/contextmenu.html
subtitle ​
管理播放器的字幕功能
  • url 属性设置和返回当前字幕地址
  • style 方法设置当前字幕的样式
  • switch 方法设置当前字幕地址和选项
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    art.contextmenu.show = true;
+	setTimeout(() => {
+		art.contextmenu.show = false;
+	}, 1000);
+});
组件配置 请参考以下地址：
/component/contextmenu.html
subtitle ​
管理播放器的字幕功能
  • url 属性设置和返回当前字幕地址
  • style 方法设置当前字幕的样式
  • switch 方法设置当前字幕地址和选项
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.subtitle.url = '/assets/sample/subtitle.srt'
-    art.subtitle.style({
-        color: 'red',
-    });
-});
loading ​
管理播放器的加载层
  • show 属性用于设置是否显示加载层
  • toggle 属性用于切换是否显示加载层
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.subtitle.url = '/assets/sample/subtitle.srt'
+    art.subtitle.style({
+        color: 'red',
+    });
+});
loading ​
管理播放器的加载层
  • show 属性用于设置是否显示加载层
  • toggle 属性用于切换是否显示加载层
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.loading.show = true;
-	setTimeout(() => {
-		art.loading.show = false;
-	}, 1000);
-});
hotkey ​
管理播放器的快捷键功能
  • add 方法用于添加快捷键
  • remove 方法用于删除快捷键
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.loading.show = true;
+	setTimeout(() => {
+		art.loading.show = false;
+	}, 1000);
+});
hotkey ​
管理播放器的快捷键功能
  • add 方法用于添加快捷键
  • remove 方法用于删除快捷键
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-function hotkeyEvent(event) {
-    console.info('click', event);
-}
+function hotkeyEvent(event) {
+    console.info('click', event);
+}
 
-art.on('ready', () => {
-    art.hotkey.add(32, hotkeyEvent);
-    setTimeout(() => {
-		art.hotkey.remove(32, hotkeyEvent);
-	}, 5000);
-});
提示
只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效
mask ​
管理播放器的遮罩层
  • show 属性用于设置是否显示遮罩层
  • toggle 属性用于切换是否显示遮罩层
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.hotkey.add(32, hotkeyEvent);
+    setTimeout(() => {
+		art.hotkey.remove(32, hotkeyEvent);
+	}, 5000);
+});
提示
只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效
mask ​
管理播放器的遮罩层
  • show 属性用于设置是否显示遮罩层
  • toggle 属性用于切换是否显示遮罩层
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.mask.show = false;
-	setTimeout(() => {
-		art.mask.show = true;
-	}, 1000);
-});
setting ​
管理播放器的设置面板
  • add 方法用于动态添加设置项
  • remove 方法用于动态删除设置项
  • update 方法用于动态更新设置项
  • show 属性用于设置是否显示全部设置项
  • toggle 方法用于切换是否显示全部设置项
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    subtitleOffset: true,
-});
+art.on('ready', () => {
+    art.mask.show = false;
+	setTimeout(() => {
+		art.mask.show = true;
+	}, 1000);
+});
setting ​
管理播放器的设置面板
  • add 方法用于动态添加设置项
  • remove 方法用于动态删除设置项
  • update 方法用于动态更新设置项
  • show 属性用于设置是否显示全部设置项
  • toggle 方法用于切换是否显示全部设置项
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+});
 
-art.on('ready', () => {
-    art.setting.show = true;
-	setTimeout(() => {
-		art.setting.show = false;
-	}, 1000);
-});
设置面板 请参考以下地址
/component/setting.html
plugins ​
管理播放器的插件功能，只有一个方法 add 用于动态添加插件
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.setting.show = true;
+	setTimeout(() => {
+		art.setting.show = false;
+	}, 1000);
+});
设置面板 请参考以下地址
/component/setting.html
plugins ​
管理播放器的插件功能，只有一个方法 add 用于动态添加插件
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
+function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
 
-art.on('ready', () => {
-    art.plugins.add(myPlugin);
-});

-    
+art.on('ready', () => {
+    art.plugins.add(myPlugin);
+});
+ \ No newline at end of file diff --git a/docs/document/advanced/class.html b/docs/document/advanced/class.html index 94fef404b..8e5e0f16e 100644 --- a/docs/document/advanced/class.html +++ b/docs/document/advanced/class.html @@ -5,28 +5,30 @@ 静态属性 | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

静态属性 ​

这里的 静态属性 是指挂载在 构造函数 的 一级属性，非常少使用

instances ​

返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性

▶ Run Code
js
console.info([...Artplayer.instances]);
+    
Artplayer.js
Appearance
静态属性 ​
这里的 静态属性 是指挂载在 构造函数 的 一级属性，非常少使用
instances ​
返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性
▶ Run Code
js
console.info([...Artplayer.instances]);
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info([...Artplayer.instances]);
version ​
返回播放器的版本信息
▶ Run Code
js
console.info(Artplayer.version);
env ​
返回播放器的环境变量
▶ Run Code
js
console.info(Artplayer.env);
build ​
返回播放器的打包时间
▶ Run Code
js
console.info(Artplayer.build);
config ​
返回视频的默认配置
▶ Run Code
js
console.info(Artplayer.config);
utils ​
返回播放器的工具函数集合
▶ Run Code
js
console.info(Artplayer.utils);
全部工具函数请参考以下地址：
artplayer/types/utils.d.ts
scheme ​
返回播放器选项的校验方案
▶ Run Code
js
console.info(Artplayer.scheme);
Emitter ​
返回事件分发器的构造函数
▶ Run Code
js
console.info(Artplayer.Emitter);
validator ​
返回选项的校验函数
▶ Run Code
js
console.info(Artplayer.validator);
kindOf ​
返回类型检测的函数工具
▶ Run Code
js
console.info(Artplayer.kindOf);
html ​
返回播放器所需的 html 字符串
▶ Run Code
js
console.info(Artplayer.html);
option ​
返回播放器的默认选项
▶ Run Code
js
console.info(Artplayer.option);

-    
+console.info([...Artplayer.instances]);

version ​

返回播放器的版本信息

▶ Run Code
js
console.info(Artplayer.version);

env ​

返回播放器的环境变量

▶ Run Code
js
console.info(Artplayer.env);

build ​

返回播放器的打包时间

▶ Run Code
js
console.info(Artplayer.build);

config ​

返回视频的默认配置

▶ Run Code
js
console.info(Artplayer.config);

utils ​

返回播放器的工具函数集合

▶ Run Code
js
console.info(Artplayer.utils);

全部工具函数请参考以下地址：

artplayer/types/utils.d.ts

scheme ​

返回播放器选项的校验方案

▶ Run Code
js
console.info(Artplayer.scheme);

Emitter ​

返回事件分发器的构造函数

▶ Run Code
js
console.info(Artplayer.Emitter);

validator ​

返回选项的校验函数

▶ Run Code
js
console.info(Artplayer.validator);

kindOf ​

返回类型检测的函数工具

▶ Run Code
js
console.info(Artplayer.kindOf);

html ​

返回播放器所需的 html 字符串

▶ Run Code
js
console.info(Artplayer.html);

option ​

返回播放器的默认选项

▶ Run Code
js
console.info(Artplayer.option);
+ \ No newline at end of file diff --git a/docs/document/advanced/event.html b/docs/document/advanced/event.html index 0d8e7886f..256d6aa1c 100644 --- a/docs/document/advanced/event.html +++ b/docs/document/advanced/event.html @@ -5,375 +5,370 @@ 实例事件 | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

实例事件 ​

播放器的事件分为两种，一种视频的 原生事件 (前缀 video:)，另外一种是 自定义事件

监听事件：

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    
Artplayer.js
Appearance
实例事件 ​
播放器的事件分为两种，一种视频的 原生事件 (前缀 video:)，另外一种是 自定义事件
监听事件：
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('video:canplay', () => {
-    console.info('video:canplay');
-});
只监听一次事件：
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('video:canplay', () => {
+    console.info('video:canplay');
+});
只监听一次事件：
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.once('video:canplay', () => {
-    console.info('video:canplay');
-});
手动触发事件：
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.once('video:canplay', () => {
+    console.info('video:canplay');
+});
手动触发事件：
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.emit('focus');
移除事件：
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.emit('focus');
移除事件：
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-const onReady = () => {
-    console.info('ready');
-    art.off('ready', onReady);
-}
+const onReady = () => {
+    console.info('ready');
+    art.off('ready', onReady);
+}
 
-art.on('ready', onReady);
全部事件请参考以下地址：
artplayer/types/events.d.ts
ready ​
当播放器首次可以播放器时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', onReady);
全部事件请参考以下地址：
artplayer/types/events.d.ts
ready ​
当播放器首次可以播放器时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info('ready');
-});
restart ​
当播放器切换地址后并可以播放时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info('ready');
+});
restart ​
当播放器切换地址后并可以播放时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.url = '/assets/sample/video.mp4'
-});
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4'
+});
 
-art.on('restart', (url) => {
-    console.info('restart', url);
-});
loop ​
当出现区间循环时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('restart', (url) => {
+    console.info('restart', url);
+});
pause ​
当播放器暂停时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('loop', (start, end) => {
-    console.info('loop', start, end);
-});
pause ​
当播放器暂停时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('pause', () => {
+    console.info('pause');
+});
play ​
当播放器播放时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('pause', () => {
-    console.info('pause');
-});
play ​
当播放器播放时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('play', () => {
+    console.info('play');
+});
hotkey ​
当播放器热键被按下时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('play', () => {
-    console.info('play');
-});
hotkey ​
当播放器热键被按下时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('hotkey', (event) => {
+    console.info('hotkey', event);
+});
destroy ​
当播放器销毁时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('hotkey', (event) => {
-    console.info('hotkey', event);
-});
destroy ​
当播放器销毁时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.destroy();
+});
 
-art.on('ready', () => {
-    art.destroy();
-});
+art.on('destroy', () => {
+    console.info('destroy');
+});
focus ​
当播放器获得焦点时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('destroy', () => {
-    console.info('destroy');
-});
focus ​
当播放器获得焦点时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('focus', (event) => {
+    console.info('focus', event);
+});
blur ​
当播放器失去焦点时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('focus', (event) => {
-    console.info('focus', event);
-});
blur ​
当播放器失去焦点时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('blur', (event) => {
+    console.info('blur', event);
+});
dblclick ​
当播放器被双击时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('blur', (event) => {
-    console.info('blur', event);
-});
dblclick ​
当播放器被双击时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('dblclick', (event) => {
+    console.info('dblclick', event);
+});
click ​
当播放器被单击时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('dblclick', (event) => {
-    console.info('dblclick', event);
-});
click ​
当播放器被单击时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('click', (event) => {
+    console.info('click', event);
+});
error ​
当播放器加载视频发生错误时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});
 
-art.on('click', (event) => {
-    console.info('click', event);
-});
error ​
当播放器加载视频发生错误时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});
+art.on('error', (error, reconnectTime) => {
+    console.info(error, reconnectTime);
+});
hover ​
当播放器被鼠标移出或者移入时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('error', (error, reconnectTime) => {
-    console.info(error, reconnectTime);
-});
hover ​
当播放器被鼠标移出或者移入时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('hover', (state, event) => {
+    console.info('hover', state, event);
+});
mousemove ​
当播放器被鼠标经过时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('hover', (state, event) => {
-    console.info('hover', state, event);
-});
mousemove ​
当播放器被鼠标经过时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('mousemove', (event) => {
+    console.info('mousemove', event);
+});
resize ​
当播放器尺寸变化时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('mousemove', (event) => {
-    console.info('mousemove', event);
-});
resize ​
当播放器尺寸变化时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('resize', () => {
+    console.info('resize');
+});
view ​
当播放器出现在视口时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('resize', () => {
-    console.info('resize');
-});
view ​
当播放器出现在视口时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('view', (state) => {
-    console.info('view', state);
-});
lock ​
在移动端，当锁定的状态发生变化时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lock: true,
-});
+art.on('view', (state) => {
+    console.info('view', state);
+});
lock ​
在移动端，当锁定的状态发生变化时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lock: true,
+});
 
-art.on('lock', (state) => {
-    console.info('lock', state);
-});
aspectRatio ​
当播放器长宽比变化时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    aspectRatio: true,
-    setting: true,
-});
+art.on('lock', (state) => {
+    console.info('lock', state);
+});
aspectRatio ​
当播放器长宽比变化时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    aspectRatio: true,
+    setting: true,
+});
 
-art.on('aspectRatio', (aspectRatio) => {
-    console.info('aspectRatio', aspectRatio);
-});
autoHeight ​
当播放器自动设置高度时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('aspectRatio', (aspectRatio) => {
+    console.info('aspectRatio', aspectRatio);
+});
autoHeight ​
当播放器自动设置高度时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.autoHeight();
-});
+art.on('ready', () => {
+    art.autoHeight();
+});
 
-art.on('autoHeight', (height) => {
-    console.info('autoHeight', height);
-});
autoSize ​
当播放器自动设置尺寸时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-});
+art.on('autoHeight', (height) => {
+    console.info('autoHeight', height);
+});
autoSize ​
当播放器自动设置尺寸时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+});
 
-art.on('autoSize', () => {
-    console.info('autoSize');
-});
flip ​
当播放器发生翻转时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    flip: true,
-    setting: true,
-});
+art.on('autoSize', () => {
+    console.info('autoSize');
+});
flip ​
当播放器发生翻转时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    flip: true,
+    setting: true,
+});
 
-art.on('flip', (flip) => {
-    console.info('flip', flip);
-});
fullscreen ​
当播放器发生窗口全屏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-});
+art.on('flip', (flip) => {
+    console.info('flip', flip);
+});
fullscreen ​
当播放器发生窗口全屏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+});
 
-art.on('fullscreen', (state) => {
-    console.info('fullscreen', state);
-});
fullscreenWeb ​
当播放器发生网页全屏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
+art.on('fullscreen', (state) => {
+    console.info('fullscreen', state);
+});
fullscreenWeb ​
当播放器发生网页全屏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
 
-art.on('fullscreenWeb', (state) => {
-    console.info('fullscreenWeb', state);
-});
mini ​
当播放器进入迷你模式时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('fullscreenWeb', (state) => {
+    console.info('fullscreenWeb', state);
+});
mini ​
当播放器进入迷你模式时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.mini = true;
-});
+art.on('ready', () => {
+    art.mini = true;
+});
 
-art.on('mini', (state) => {
-    console.info('mini', state);
-});
pip ​
当播放器进入画中画时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    pip: true,
-});
+art.on('mini', (state) => {
+    console.info('mini', state);
+});
pip ​
当播放器进入画中画时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    pip: true,
+});
 
-art.on('pip', (state) => {
-    console.info('pip', state);
-});
screenshot ​
当播放器被截图时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    screenshot: true,
-});
+art.on('pip', (state) => {
+    console.info('pip', state);
+});
screenshot ​
当播放器被截图时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
+});
 
-art.on('screenshot', (dataUri) => {
-    console.info('screenshot', dataUri);
-});
seek ​
当播放器发生时间跳转时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('screenshot', (dataUri) => {
+    console.info('screenshot', dataUri);
+});
seek ​
当播放器发生时间跳转时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('seek', (currentTime) => {
-    console.info('seek', currentTime);
-});
subtitleOffset ​
当播放器发生字幕偏移时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitleOffset: true,
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-    setting: true,
-});
+art.on('seek', (currentTime) => {
+    console.info('seek', currentTime);
+});
subtitleOffset ​
当播放器发生字幕偏移时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitleOffset: true,
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+    setting: true,
+});
 
-art.on('subtitleOffset', (offset) => {
-    console.info('subtitleOffset', offset);
-});
subtitleUpdate ​
当字幕更新时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
+art.on('subtitleOffset', (offset) => {
+    console.info('subtitleOffset', offset);
+});
subtitleUpdate ​
当字幕更新时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
 
-art.on('subtitleUpdate', (text) => {
-    console.info('subtitleUpdate', text);
-});
subtitleLoad ​
当字幕加载时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
+art.on('subtitleUpdate', (text) => {
+    console.info('subtitleUpdate', text);
+});
subtitleLoad ​
当字幕加载时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
 
-art.on('subtitleLoad', (url) => {
-    console.info('subtitleLoad', url);
-});
subtitleSwitch ​
当字幕切换时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
+art.on('subtitleLoad', (url) => {
+    console.info('subtitleLoad', url);
+});
subtitleSwitch ​
当字幕切换时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
 
-art.on('ready', () => {
-    art.subtitle.url = '/assets/sample/subtitle.ass';
-});
+art.on('ready', () => {
+    art.subtitle.url = '/assets/sample/subtitle.ass';
+});
 
-art.on('subtitleSwitch', (url) => {
-    console.info('subtitleSwitch', url);
-});
info ​
当信息面板显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('subtitleSwitch', (url) => {
+    console.info('subtitleSwitch', url);
+});
info ​
当信息面板显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('info', (state) => {
-    console.log(state);
-});
layer ​
当自定义层显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('info', (state) => {
+    console.log(state);
+});
layer ​
当自定义层显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('layer', (state) => {
-    console.log(state);
-});
loading ​
当加载器显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('layer', (state) => {
+    console.log(state);
+});
loading ​
当加载器显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('loading', (state) => {
-    console.log(state);
-});
mask ​
当遮罩层显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('loading', (state) => {
+    console.log(state);
+});
mask ​
当遮罩层显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('mask', (state) => {
-    console.log(state);
-});
subtitle ​
当字幕层显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('mask', (state) => {
+    console.log(state);
+});
subtitle ​
当字幕层显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('subtitle', (state) => {
-    console.log(state);
-});
contextmenu ​
当右键菜单显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('subtitle', (state) => {
+    console.log(state);
+});
contextmenu ​
当右键菜单显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('contextmenu', (state) => {
-    console.log(state);
-});
control ​
当控制器显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('contextmenu', (state) => {
+    console.log(state);
+});
control ​
当控制器显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('control', (state) => {
-    console.log(state);
-});
setting ​
当设置面板显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
+art.on('control', (state) => {
+    console.log(state);
+});
setting ​
当设置面板显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
 
-art.on('setting', (state) => {
-    console.log(state);
-});
muted ​
当静音的状态变化时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('setting', (state) => {
+    console.log(state);
+});
muted ​
当静音的状态变化时触发
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('muted', (state) => {
-    console.log(state);
-});
video:canplay ​
浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容
video:canplaythrough ​
浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束
video:complete ​
OfflineAudioContext 渲染完成
video:durationchange ​
duration 属性的值改变时触发
video:emptied ​
媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它
video:ended ​
视频停止播放，因为 media 已经到达结束点
video:error ​
获取媒体数据时出错，或者资源类型不是受支持的媒体格式
video:loadeddata ​
media 中的首帧已经完成加载
video:loadedmetadata ​
已加载元数据
video:pause ​
播放已暂停
video:play ​
播放已开始
video:playing ​
由于缺乏数据而暂停或延迟后，播放准备开始
video:progress ​
在浏览器加载资源时周期性触发
video:ratechange ​
播放速率发生变化
video:seeked ​
跳帧（seek）操作完成
video:seeking ​
跳帧（seek）操作开始
video:stalled ​
用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现
video:suspend ​
媒体数据加载已暂停
video:timeupdate ​
currentTime 属性指定的时间发生变化
video:volumechange ​
音量发生变化
video:waiting ​
由于暂时缺少数据，播放已停止

-    
+art.on('muted', (state) => {
+    console.log(state);
+});

video:canplay ​

浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容

video:canplaythrough ​

浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束

video:complete ​

OfflineAudioContext 渲染完成

video:durationchange ​

duration 属性的值改变时触发

video:emptied ​

媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它

video:ended ​

视频停止播放，因为 media 已经到达结束点

video:error ​

获取媒体数据时出错，或者资源类型不是受支持的媒体格式

video:loadeddata ​

media 中的首帧已经完成加载

video:loadedmetadata ​

已加载元数据

video:pause ​

播放已暂停

video:play ​

播放已开始

video:playing ​

由于缺乏数据而暂停或延迟后，播放准备开始

video:progress ​

在浏览器加载资源时周期性触发

video:ratechange ​

播放速率发生变化

video:seeked ​

跳帧（seek）操作完成

video:seeking ​

跳帧（seek）操作开始

video:stalled ​

用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现

video:suspend ​

媒体数据加载已暂停

video:timeupdate ​

currentTime 属性指定的时间发生变化

video:volumechange ​

音量发生变化

video:waiting ​

由于暂时缺少数据，播放已停止

+ \ No newline at end of file diff --git a/docs/document/advanced/global.html b/docs/document/advanced/global.html index f77305f2d..9aab68918 100644 --- a/docs/document/advanced/global.html +++ b/docs/document/advanced/global.html @@ -5,237 +5,239 @@ 全局属性 | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

全局属性 ​

这里的 全局属性 也是指挂载在 构造函数 的 一级属性，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到

DEBUG ​

是否开始 debug 模式，可以打印出视频全部的内置事件，默认关闭

▶ Run Code
js
Artplayer.DEBUG = true;
+    
Artplayer.js
Appearance
全局属性 ​
这里的 全局属性 也是指挂载在 构造函数 的 一级属性，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到
DEBUG ​
是否开始 debug 模式，可以打印出视频全部的内置事件，默认关闭
▶ Run Code
js
Artplayer.DEBUG = true;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
CONTEXTMENU ​
是否开启右键菜单，默认开启
▶ Run Code
js
Artplayer.CONTEXTMENU = false;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
CONTEXTMENU ​
是否开启右键菜单，默认开启
▶ Run Code
js
Artplayer.CONTEXTMENU = false;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
NOTICE_TIME ​
提示信息的显示时长，单位为毫秒，默认为 2000
▶ Run Code
js
Artplayer.NOTICE_TIME = 5000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
NOTICE_TIME ​
提示信息的显示时长，单位为毫秒，默认为 2000
▶ Run Code
js
Artplayer.NOTICE_TIME = 5000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
SETTING_WIDTH ​
设置面板的默认宽度，单位为像素，默认为 250
▶ Run Code
js
Artplayer.SETTING_WIDTH = 300;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
SETTING_WIDTH ​
设置面板的默认宽度，单位为像素，默认为 250
▶ Run Code
js
Artplayer.SETTING_WIDTH = 300;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});
SETTING_ITEM_WIDTH ​
设置面板的设置项的默认宽度，单位为像素，默认为 200
▶ Run Code
js
Artplayer.SETTING_ITEM_WIDTH = 300;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});
SETTING_ITEM_WIDTH ​
设置面板的设置项的默认宽度，单位为像素，默认为 200
▶ Run Code
js
Artplayer.SETTING_ITEM_WIDTH = 300;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});
SETTING_ITEM_HEIGHT ​
设置面板的设置项的默认高度，单位为像素，默认为 35
▶ Run Code
js
Artplayer.SETTING_ITEM_HEIGHT = 40;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});
SETTING_ITEM_HEIGHT ​
设置面板的设置项的默认高度，单位为像素，默认为 35
▶ Run Code
js
Artplayer.SETTING_ITEM_HEIGHT = 40;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});
RESIZE_TIME ​
resize 事件的节流时间，单位为毫秒，默认为 200
▶ Run Code
js
Artplayer.RESIZE_TIME = 500;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});
RESIZE_TIME ​
resize 事件的节流时间，单位为毫秒，默认为 200
▶ Run Code
js
Artplayer.RESIZE_TIME = 500;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('resize', () => {
-    console.log('resize');
-});
SCROLL_TIME ​
scroll 事件的节流时间，单位为毫秒，默认为 200
▶ Run Code
js
Artplayer.SCROLL_TIME = 500;
+art.on('resize', () => {
+    console.log('resize');
+});
SCROLL_TIME ​
scroll 事件的节流时间，单位为毫秒，默认为 200
▶ Run Code
js
Artplayer.SCROLL_TIME = 500;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('scroll', () => {
-    console.log('scroll');
-});
SCROLL_GAP ​
view 事件的边界容差距离，单位为像素，默认为 50
▶ Run Code
js
Artplayer.SCROLL_GAP = 100;
+art.on('scroll', () => {
+    console.log('scroll');
+});
SCROLL_GAP ​
view 事件的边界容差距离，单位为像素，默认为 50
▶ Run Code
js
Artplayer.SCROLL_GAP = 100;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('scroll', () => {
-    console.log('scroll');
-});
AUTO_PLAYBACK_MAX ​
自动回放功能的最大记录数，默认为 10
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_MAX = 20;
+art.on('scroll', () => {
+    console.log('scroll');
+});
AUTO_PLAYBACK_MAX ​
自动回放功能的最大记录数，默认为 10
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_MAX = 20;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});
AUTO_PLAYBACK_MIN ​
自动回放功能的最小记录时长，单位为秒，默认为 5
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_MIN = 10;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});
AUTO_PLAYBACK_MIN ​
自动回放功能的最小记录时长，单位为秒，默认为 5
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_MIN = 10;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});
AUTO_PLAYBACK_TIMEOUT ​
自动回放功能的隐藏延迟时长，单位为毫秒，默认为 3000
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});
AUTO_PLAYBACK_TIMEOUT ​
自动回放功能的隐藏延迟时长，单位为毫秒，默认为 3000
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});
RECONNECT_TIME_MAX ​
发生连接错误时，自动连接的最大次数，默认为 5
▶ Run Code
js
Artplayer.RECONNECT_TIME_MAX = 10;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});
RECONNECT_TIME_MAX ​
发生连接错误时，自动连接的最大次数，默认为 5
▶ Run Code
js
Artplayer.RECONNECT_TIME_MAX = 10;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});
RECONNECT_SLEEP_TIME ​
发生连接错误时，自动连接的延迟时间，单位为毫秒，默认为 1000
▶ Run Code
js
Artplayer.RECONNECT_SLEEP_TIME = 3000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});
RECONNECT_SLEEP_TIME ​
发生连接错误时，自动连接的延迟时间，单位为毫秒，默认为 1000
▶ Run Code
js
Artplayer.RECONNECT_SLEEP_TIME = 3000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});
CONTROL_HIDE_TIME ​
底部控制栏的自动隐藏的延迟时间，单位为毫秒，默认为 3000
▶ Run Code
js
Artplayer.CONTROL_HIDE_TIME = 5000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});
CONTROL_HIDE_TIME ​
底部控制栏的自动隐藏的延迟时间，单位为毫秒，默认为 3000
▶ Run Code
js
Artplayer.CONTROL_HIDE_TIME = 5000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
DBCLICK_TIME ​
双击事件的延迟事件，单位为毫秒，默认为 300
▶ Run Code
js
Artplayer.DBCLICK_TIME = 500;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
DBCLICK_TIME ​
双击事件的延迟事件，单位为毫秒，默认为 300
▶ Run Code
js
Artplayer.DBCLICK_TIME = 500;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('dblclick', () => {
-    console.log('dblclick');
-});
DBCLICK_FULLSCREEN ​
在桌面端，是否双击切换全屏，默认为 true
▶ Run Code
js
Artplayer.DBCLICK_FULLSCREEN = false;
+art.on('dblclick', () => {
+    console.log('dblclick');
+});
DBCLICK_FULLSCREEN ​
在桌面端，是否双击切换全屏，默认为 true
▶ Run Code
js
Artplayer.DBCLICK_FULLSCREEN = false;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
MOBILE_DBCLICK_PLAY ​
在移动端，是否双击切换播放暂停，默认为 true
▶ Run Code
js
Artplayer.MOBILE_DBCLICK_PLAY = false;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
MOBILE_DBCLICK_PLAY ​
在移动端，是否双击切换播放暂停，默认为 true
▶ Run Code
js
Artplayer.MOBILE_DBCLICK_PLAY = false;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
MOBILE_CLICK_PLAY ​
在移动端，是否单击切换播放暂停，默认为 false
▶ Run Code
js
Artplayer.MOBILE_CLICK_PLAY = true;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
MOBILE_CLICK_PLAY ​
在移动端，是否单击切换播放暂停，默认为 false
▶ Run Code
js
Artplayer.MOBILE_CLICK_PLAY = true;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
AUTO_ORIENTATION_TIME ​
在移动端，自动旋屏的延迟时间，单位为毫秒，默认为 200
▶ Run Code
js
Artplayer.AUTO_ORIENTATION_TIME = 500;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
AUTO_ORIENTATION_TIME ​
在移动端，自动旋屏的延迟时间，单位为毫秒，默认为 200
▶ Run Code
js
Artplayer.AUTO_ORIENTATION_TIME = 500;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoOrientation: true,
-});
INFO_LOOP_TIME ​
信息面板的刷新时间，单位为毫秒，默认为 1000
▶ Run Code
js
Artplayer.INFO_LOOP_TIME = 2000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoOrientation: true,
+});
INFO_LOOP_TIME ​
信息面板的刷新时间，单位为毫秒，默认为 1000
▶ Run Code
js
Artplayer.INFO_LOOP_TIME = 2000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.info.show = true;
FAST_FORWARD_VALUE ​
在移动端，长按加速的速率倍数，默认为 3
▶ Run Code
js
Artplayer.FAST_FORWARD_VALUE = 5;
+art.info.show = true;
FAST_FORWARD_VALUE ​
在移动端，长按加速的速率倍数，默认为 3
▶ Run Code
js
Artplayer.FAST_FORWARD_VALUE = 5;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});
FAST_FORWARD_TIME ​
在移动端，长按加速的延迟时间，单位为毫秒，默认为 1000
▶ Run Code
js
Artplayer.FAST_FORWARD_TIME = 2000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});
FAST_FORWARD_TIME ​
在移动端，长按加速的延迟时间，单位为毫秒，默认为 1000
▶ Run Code
js
Artplayer.FAST_FORWARD_TIME = 2000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});
TOUCH_MOVE_RATIO ​
在移动端，左右滑动进度的速率倍数，默认为 0.5
▶ Run Code
js
Artplayer.TOUCH_MOVE_RATIO = 1;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});
TOUCH_MOVE_RATIO ​
在移动端，左右滑动进度的速率倍数，默认为 0.5
▶ Run Code
js
Artplayer.TOUCH_MOVE_RATIO = 1;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
VOLUME_STEP ​
快捷键调节音量的幅度比例，默认为 0.1
▶ Run Code
js
Artplayer.VOLUME_STEP = 0.2;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
VOLUME_STEP ​
快捷键调节音量的幅度比例，默认为 0.1
▶ Run Code
js
Artplayer.VOLUME_STEP = 0.2;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
SEEK_STEP ​
快捷键调节播放进度的幅度，单位为秒，默认为 5
▶ Run Code
js
Artplayer.SEEK_STEP = 10;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
SEEK_STEP ​
快捷键调节播放进度的幅度，单位为秒，默认为 5
▶ Run Code
js
Artplayer.SEEK_STEP = 10;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
PLAYBACK_RATE ​
内置播放速率的列表，默认为 [0.5, 0.75, 1, 1.25, 1.5, 2]
▶ Run Code
js
Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
PLAYBACK_RATE ​
内置播放速率的列表，默认为 [0.5, 0.75, 1, 1.25, 1.5, 2]
▶ Run Code
js
Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    playbackRate: true,
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    playbackRate: true,
+});
 
-art.contextmenu.show = true;
-art.setting.show = true;
ASPECT_RATIO ​
内置视频长宽比的列表，默认为 ['default', '4:3', '16:9']
▶ Run Code
js
Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];
+art.contextmenu.show = true;
+art.setting.show = true;
ASPECT_RATIO ​
内置视频长宽比的列表，默认为 ['default', '4:3', '16:9']
▶ Run Code
js
Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    aspectRatio: true,
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    aspectRatio: true,
+});
 
-art.contextmenu.show = true;
-art.setting.show = true;
FLIP ​
内置视频翻转的列表，默认为 ['normal', 'horizontal', 'vertical']
▶ Run Code
js
Artplayer.FLIP = ['normal', 'horizontal'];
+art.contextmenu.show = true;
+art.setting.show = true;
FLIP ​
内置视频翻转的列表，默认为 ['normal', 'horizontal', 'vertical']
▶ Run Code
js
Artplayer.FLIP = ['normal', 'horizontal'];
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+});
 
-art.contextmenu.show = true;
-art.setting.show = true;
FULLSCREEN_WEB_IN_BODY ​
网页全屏时，是否把播放器挂在在 body 元素下，默认为 false
▶ Run Code
js
Artplayer.FULLSCREEN_WEB_IN_BODY = true;
+art.contextmenu.show = true;
+art.setting.show = true;
FULLSCREEN_WEB_IN_BODY ​
网页全屏时，是否把播放器挂在在 body 元素下，默认为 false
▶ Run Code
js
Artplayer.FULLSCREEN_WEB_IN_BODY = true;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
LOG_VERSION ​
设置是否打印播放器版本，默认为 true
▶ Run Code
js
Artplayer.LOG_VERSION = false;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
LOG_VERSION ​
设置是否打印播放器版本，默认为 true
▶ Run Code
js
Artplayer.LOG_VERSION = false;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
USE_RAF ​
设置是否使用 requestAnimationFrame ，默认为 false，目前主要用于进度条的平滑效果
▶ Run Code
js
Artplayer.USE_RAF = true;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
USE_RAF ​
设置是否使用 requestAnimationFrame ，默认为 false，目前主要用于进度条的平滑效果
▶ Run Code
js
Artplayer.USE_RAF = true;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    miniProgressBar: true,
-});

-    
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});
+ \ No newline at end of file diff --git a/docs/document/advanced/plugin.html b/docs/document/advanced/plugin.html index 4583fd1ea..cbf2dd9c2 100644 --- a/docs/document/advanced/plugin.html +++ b/docs/document/advanced/plugin.html @@ -5,119 +5,121 @@ 编写插件 | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

编写插件 ​

但你已经知道播放器的属性, 方法和事件后，再编写插件是非常简单的事

可以在实例化的时候加载插件的函数

▶ Run Code
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
+    
Artplayer.js
Appearance
编写插件 ​
但你已经知道播放器的属性, 方法和事件后，再编写插件是非常简单的事
可以在实例化的时候加载插件的函数
▶ Run Code
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [myPlugin],
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [myPlugin],
+});
 
-art.on('ready', () => {
-    console.info(art.plugins.myPlugin);
-});
可以在实例化之后再加载插件的函数
▶ Run Code
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
+art.on('ready', () => {
+    console.info(art.plugins.myPlugin);
+});
可以在实例化之后再加载插件的函数
▶ Run Code
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.plugins.add(myPlugin);
+art.plugins.add(myPlugin);
 
-art.on('ready', () => {
-    console.info(art.plugins.myPlugin);
-});
例如我想写一个在视频暂停后，显示一个图片广告的插件
▶ Run Code
js
function adsPlugin(option) {
-    return (art) => {
-        art.layers.add({
-            name: 'ads',
-            html: `<img style="width: 100px" src="${option.url}">`,
-            style: {
-                display: 'none',
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-            },
-        });
+art.on('ready', () => {
+    console.info(art.plugins.myPlugin);
+});
例如我想写一个在视频暂停后，显示一个图片广告的插件
▶ Run Code
js
function adsPlugin(option) {
+    return (art) => {
+        art.layers.add({
+            name: 'ads',
+            html: `<img style="width: 100px" src="${option.url}">`,
+            style: {
+                display: 'none',
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+            },
+        });
 
-        function show() {
-            art.layers.ads.style.display = 'block';
-        }
+        function show() {
+            art.layers.ads.style.display = 'block';
+        }
 
-        function hide() {
-            art.layers.ads.style.display = 'none';
-        }
+        function hide() {
+            art.layers.ads.style.display = 'none';
+        }
 
-        art.controls.add({
-            name: 'hide-ads',
-            position: 'right',
-            html: 'Hide Ads',
-            tooltip: 'Hide Ads',
-            click: hide,
-            style: {
-                marginRight: '20px'
-            }
-        });
+        art.controls.add({
+            name: 'hide-ads',
+            position: 'right',
+            html: 'Hide Ads',
+            tooltip: 'Hide Ads',
+            click: hide,
+            style: {
+                marginRight: '20px'
+            }
+        });
 
-        art.controls.add({
-            name: 'show-ads',
-            position: 'right',
-            html: 'Show Ads',
-            tooltip: 'Show Ads',
-            click: show,
-        });
+        art.controls.add({
+            name: 'show-ads',
+            position: 'right',
+            html: 'Show Ads',
+            tooltip: 'Show Ads',
+            click: show,
+        });
 
-        art.on('play', hide);
-        art.on('pause', show);
+        art.on('play', hide);
+        art.on('pause', show);
 
-        return {
-            name: 'adsPlugin',
-            show,
-            hide
-        };
-    }
-}
+        return {
+            name: 'adsPlugin',
+            show,
+            hide
+        };
+    }
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        adsPlugin({
-            url: '/assets/sample/layer.png'
-        })
-    ],
-});

-    
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        adsPlugin({
+            url: '/assets/sample/layer.png'
+        })
+    ],
+});
+ \ No newline at end of file diff --git a/docs/document/advanced/property.html b/docs/document/advanced/property.html index 5965ba6b9..c1898f031 100644 --- a/docs/document/advanced/property.html +++ b/docs/document/advanced/property.html @@ -5,412 +5,405 @@ 实例属性 | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

实例属性 ​

这里的 实例属性 是指挂载在 实例 的 一级属性，比较常用

play ​

  • Type: Function

播放视频

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+    
Artplayer.js
Appearance
实例属性 ​
这里的 实例属性 是指挂载在 实例 的 一级属性，比较常用
play ​
  • Type: Function
播放视频
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    art.play();
-});
pause ​
  • Type: Function
暂停视频
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+art.on('ready', () => {
+    art.play();
+});
pause ​
  • Type: Function
暂停视频
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    art.play();
+art.on('ready', () => {
+    art.play();
 
-    setTimeout(() => {
-        art.pause();
-    }, 3000);
-});
toggle ​
  • Type: Function
切换视频的播放和暂停
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+    setTimeout(() => {
+        art.pause();
+    }, 3000);
+});
toggle ​
  • Type: Function
切换视频的播放和暂停
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    art.toggle();
+art.on('ready', () => {
+    art.toggle();
 
-    setTimeout(() => {
-        art.toggle();
-    }, 3000);
-});
destroy ​
  • Type: Function
  • Parameter: Boolean
销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 html，默认为 true
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    setTimeout(() => {
+        art.toggle();
+    }, 3000);
+});
destroy ​
  • Type: Function
  • Parameter: Boolean
销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 html，默认为 true
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.destroy();
-});
seek ​
  • Type: Setter
  • Parameter: Number
视频时间跳转，单位秒
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.destroy();
+});
seek ​
  • Type: Setter
  • Parameter: Number
视频时间跳转，单位秒
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 5;
-});
forward ​
  • Type: Setter
  • Parameter: Number
视频时间快进，单位秒
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.seek = 5;
+});
forward ​
  • Type: Setter
  • Parameter: Number
视频时间快进，单位秒
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.forward = 5;
-});
backward ​
  • Type: Setter
  • Parameter: Number
视频时间快退，单位秒
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.forward = 5;
+});
backward ​
  • Type: Setter
  • Parameter: Number
视频时间快退，单位秒
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 5;
+art.on('ready', () => {
+    art.seek = 5;
 
-    setTimeout(() => {
-        art.backward = 2;
-    }, 3000);
-});
volume ​
  • Type: Setter/Getter
  • Parameter: Number
设置和获取视频音量，范围在：[0, 1]
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    setTimeout(() => {
+        art.backward = 2;
+    }, 3000);
+});
volume ​
  • Type: Setter/Getter
  • Parameter: Number
设置和获取视频音量，范围在：[0, 1]
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.volume);
-    art.volume = 0.5;
-    console.info(art.volume);
-});
url ​
  • Type: Setter/Getter
  • Parameter: String
设置和获取视频地址
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.volume);
+    art.volume = 0.5;
+    console.info(art.volume);
+});
url ​
  • Type: Setter/Getter
  • Parameter: String
设置和获取视频地址
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.url = '/assets/sample/video.mp4?t=0';
-});
switch ​
  • Type: Setter
  • Parameter: String
设置视频地址，设置时和 art.url 类似，但会执行一些优化操作
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4?t=0';
+});
switch ​
  • Type: Setter
  • Parameter: String
设置视频地址，设置时和 art.url 类似，但会执行一些优化操作
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switch = '/assets/sample/video.mp4?t=0';
-    }, 3000);
-});
switchUrl ​
  • Type: Function
  • Parameter: String
设置视频地址，设置时和 art.url 类似，但会执行一些优化操作
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switch = '/assets/sample/video.mp4?t=0';
+    }, 3000);
+});
switchUrl ​
  • Type: Function
  • Parameter: String
设置视频地址，设置时和 art.url 类似，但会执行一些优化操作
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switchUrl('/assets/sample/video.mp4?t=0');
-    }, 3000);
-});
提示
art.switch 和 art.switchUrl 的功能是一样的，只是 art.switchUrl 方法会返回 Promise，当 resolve 时表示新地址是可以播放，reject 时表示新地址加载错误
switchQuality ​
  • Type: Function
  • Parameter: String
设置视频画质地址，和 art.switchUrl 类似，但会带上之前的播放进度
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchUrl('/assets/sample/video.mp4?t=0');
+    }, 3000);
+});
提示
art.switch 和 art.switchUrl 的功能是一样的，只是 art.switchUrl 方法会返回 Promise，当 resolve 时表示新地址是可以播放，reject 时表示新地址加载错误
switchQuality ​
  • Type: Function
  • Parameter: String
设置视频画质地址，和 art.switchUrl 类似，但会带上之前的播放进度
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switchQuality('/assets/sample/video.mp4?t=0');
-    }, 3000);
-});
muted ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取视频是否静音
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchQuality('/assets/sample/video.mp4?t=0');
+    }, 3000);
+});
muted ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取视频是否静音
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.muted);
-    art.muted = true;
-    console.info(art.muted);
-});
currentTime ​
  • Type: Setter/Getter
  • Parameter: Number
设置和获取视频当前时间，设置时间时和 seek 类似，但它不会触发额外的事件
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.muted);
+    art.muted = true;
+    console.info(art.muted);
+});
currentTime ​
  • Type: Setter/Getter
  • Parameter: Number
设置和获取视频当前时间，设置时间时和 seek 类似，但它不会触发额外的事件
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.currentTime);
-    art.currentTime = 5;
-    console.info(art.currentTime);
-});
duration ​
  • Type: Getter
获取视频时长
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.currentTime);
+    art.currentTime = 5;
+    console.info(art.currentTime);
+});
duration ​
  • Type: Getter
获取视频时长
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.duration);
-});
提示
有的视频是没有时长的，例如直播中的视频或者没被解码完成的视频，这个时候获取的时长会是 0
screenshot ​
  • Type: Function
下载当前视频帧的截图
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.duration);
+});
提示
有的视频是没有时长的，例如直播中的视频或者没被解码完成的视频，这个时候获取的时长会是 0
screenshot ​
  • Type: Function
下载当前视频帧的截图
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.screenshot();
-});
getDataURL ​
  • Type: Function
获取当前视频帧的截图的base64地址，返回的是一个 Promise
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.screenshot();
+});
getDataURL ​
  • Type: Function
获取当前视频帧的截图的base64地址，返回的是一个 Promise
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', async () => {
-    const url = await art.getDataURL();
-	console.info(url)
-});
getBlobUrl ​
  • Type: Function
获取当前视频帧的截图的blob地址，返回的是一个 Promise
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', async () => {
+    const url = await art.getDataURL();
+	console.info(url)
+});
getBlobUrl ​
  • Type: Function
获取当前视频帧的截图的blob地址，返回的是一个 Promise
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', async () => {
-    const url = await art.getBlobUrl();
-    console.info(url);
-});
fullscreen ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取播放器窗口全屏
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'Fullscreen Switch',
-            click: function () {
-                art.fullscreen = !art.fullscreen;
-            },
-        },
-    ],
-});
提示
由于浏览器安全机制，触发窗口全屏前，页面必须先存在交互（例如用户点击过页面）
fullscreenWeb ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取播放器网页全屏
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
+art.on('ready', async () => {
+    const url = await art.getBlobUrl();
+    console.info(url);
+});
fullscreen ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取播放器窗口全屏
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'Fullscreen Switch',
+            click: function () {
+                art.fullscreen = !art.fullscreen;
+            },
+        },
+    ],
+});
提示
由于浏览器安全机制，触发窗口全屏前，页面必须先存在交互（例如用户点击过页面）
fullscreenWeb ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取播放器网页全屏
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
 
-art.on('ready', () => {
-    art.fullscreenWeb = true;
+art.on('ready', () => {
+    art.fullscreenWeb = true;
 
-    setTimeout(() => {
-        art.fullscreenWeb = false;
-    }, 3000);
-});
pip ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取播放器画中画模式
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'PIP',
-            click: function () {
-                art.pip = !art.pip;
-            },
-        },
-    ],
-});
提示
由于浏览器安全机制，触发画中画前，页面必须先存在交互（例如用户点击过页面）
poster ​
  • Type: Setter/Getter
  • Parameter: String
设置和获取视频海报，只有在视频播放前才能看到海报效果
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    poster: '/assets/sample/poster.jpg',
-});
+    setTimeout(() => {
+        art.fullscreenWeb = false;
+    }, 3000);
+});
pip ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取播放器画中画模式
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'PIP',
+            click: function () {
+                art.pip = !art.pip;
+            },
+        },
+    ],
+});
提示
由于浏览器安全机制，触发画中画前，页面必须先存在交互（例如用户点击过页面）
poster ​
  • Type: Setter/Getter
  • Parameter: String
设置和获取视频海报，只有在视频播放前才能看到海报效果
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    poster: '/assets/sample/poster.jpg',
+});
 
-art.on('ready', () => {
-    console.info(art.poster);
-    art.poster = '/assets/sample/poster.jpg?t=0';
-    console.info(art.poster);
-});
mini ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取播放器迷你模式
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.poster);
+    art.poster = '/assets/sample/poster.jpg?t=0';
+    console.info(art.poster);
+});
mini ​
  • Type: Setter/Getter
  • Parameter: Boolean
设置和获取播放器迷你模式
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.mini = true;
-});
playing ​
  • Type: Getter
  • Parameter: Boolean
获取视频是否正在播放中
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+art.on('ready', () => {
+    art.mini = true;
+});
playing ​
  • Type: Getter
  • Parameter: Boolean
获取视频是否正在播放中
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    console.info(art.playing);
-});
autoSize ​
  • Type: Function
设置视频是否自适应尺寸
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.playing);
+});
autoSize ​
  • Type: Function
设置视频是否自适应尺寸
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.autoSize();
-});
rect ​
  • Type: Getter
获取播放器的尺寸和坐标信息
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.autoSize();
+});
rect ​
  • Type: Getter
获取播放器的尺寸和坐标信息
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(JSON.stringify(art.rect));
-});
提示
尺寸和坐标信息是通过 getBoundingClientRect 获取的
flip ​
  • Type: Setter/Getter
  • Parameter: String
设置和获取播放器翻转，支持normal, horizontal, vertical
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(JSON.stringify(art.rect));
+});
提示
尺寸和坐标信息是通过 getBoundingClientRect 获取的
flip ​
  • Type: Setter/Getter
  • Parameter: String
设置和获取播放器翻转，支持normal, horizontal, vertical
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.flip);
-    art.flip = 'horizontal';
-    console.info(art.flip);
-});
playbackRate ​
  • Type: Setter/Getter
  • Parameter: Number
设置和获取播放器播放速度
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.flip);
+    art.flip = 'horizontal';
+    console.info(art.flip);
+});
playbackRate ​
  • Type: Setter/Getter
  • Parameter: Number
设置和获取播放器播放速度
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.playbackRate);
-    art.playbackRate = 2;
-    console.info(art.playbackRate);
-});
aspectRatio ​
  • Type: Setter/Getter
  • Parameter: String
设置和获取播放器长宽比
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.playbackRate);
+    art.playbackRate = 2;
+    console.info(art.playbackRate);
+});
aspectRatio ​
  • Type: Setter/Getter
  • Parameter: String
设置和获取播放器长宽比
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.aspectRatio);
-    art.aspectRatio = '16:9';
-    console.info(art.aspectRatio);
-});
loop ​
  • Type: Setter/Getter
  • Parameter: Array
设置和获取区间循序播放，单位秒
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.aspectRatio);
+    art.aspectRatio = '16:9';
+    console.info(art.aspectRatio);
+});
autoHeight ​
  • Type: Function
当容器只有宽度，该属性可以自动计算出并设置视频的高度
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.loop);
-    art.loop = [5, 10];
-    console.info(art.loop);
-});
提示
删除区间循环播放，只需要设置 loop 为 [] 即可
art.loop 与 art.option.loop 是两个不同的东西，请勿弄乱
autoHeight ​
  • Type: Function
当容器只有宽度，该属性可以自动计算出并设置视频的高度
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.autoHeight();
+});
 
-art.on('ready', () => {
-    art.autoHeight();
-});
+art.on('resize', () => {
+    art.autoHeight();
+});
提示
当你的容器只有宽度，但不知道具体高度时，这个属性很有用，它能自动计算出视频的高度，但你需要确定设置这个属性的时机
attr ​
  • Type: Function
  • Parameter: String
动态获取和设置 video 元素的属性
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('resize', () => {
-    art.autoHeight();
-});
提示
当你的容器只有宽度，但不知道具体高度时，这个属性很有用，它能自动计算出视频的高度，但你需要确定设置这个属性的时机
attr ​
  • Type: Function
  • Parameter: String
动态获取和设置 video 元素的属性
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.attr('playsInline'));
+    art.attr('playsInline', true);
+    console.info(art.attr('playsInline'));
+});
type ​
  • Type: Setter/Getter
  • Parameter: String
动态获取和设置视频类型
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.attr('playsInline'));
-    art.attr('playsInline', true);
-    console.info(art.attr('playsInline'));
-});
type ​
  • Type: Setter/Getter
  • Parameter: String
动态获取和设置视频类型
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.type);
+    art.type = 'm3u8';
+    console.info(art.type);
+});
theme ​
  • Type: Setter/Getter
  • Parameter: String
动态获取和设置播放器主题颜色
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.type);
-    art.type = 'm3u8';
-    console.info(art.type);
-});
theme ​
  • Type: Setter/Getter
  • Parameter: String
动态获取和设置播放器主题颜色
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.theme);
+    art.theme = '#000';
+    console.info(art.theme);
+});
airplay ​
  • Type: Function
开启隔空播放
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'AirPlay',
+            click: function () {
+                art.airplay();
+            },
+        },
+    ],
+});
loaded ​
  • Type: Getter
视频缓存的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.theme);
-    art.theme = '#000';
-    console.info(art.theme);
-});
airplay ​
  • Type: Function
开启隔空播放
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'AirPlay',
-            click: function () {
-                art.airplay();
-            },
-        },
-    ],
-});
loaded ​
  • Type: Getter
视频缓存的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('video:timeupdate', () => {
+    console.info(art.loaded);
+});
played ​
  • Type: Getter
视频播放的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('video:timeupdate', () => {
-    console.info(art.loaded);
-});
played ​
  • Type: Getter
视频播放的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('video:timeupdate', () => {
+    console.info(art.played);
+});
proxy ​
  • Type: Function
DOM 事件的代理函数，实质上代理了 addEventListener 和 removeEventListener, 当使用 proxy 来处理事件，播放器销毁时也会自动销毁该事件
▶ Run Code
js
var container = document.querySelector('.artplayer-app');
 
-art.on('video:timeupdate', () => {
-    console.info(art.played);
-});
proxy ​
  • Type: Function
DOM 事件的代理函数，实质上代理了 addEventListener 和 removeEventListener, 当使用 proxy 来处理事件，播放器销毁时也会自动销毁该事件
▶ Run Code
js
var container = document.querySelector('.artplayer-app');
+var art = new Artplayer({
+	container: container,
+	url: '/assets/sample/video.mp4',
+});
 
-var art = new Artplayer({
-	container: container,
-	url: '/assets/sample/video.mp4',
-});
+art.proxy(container, 'click', event => {
+	console.info(event);
+});
提示
假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用该函数，以避免造成内存泄漏
query ​
  • Type: Function
DOM 的查询函数，类似 document.querySelector，但被查询的对象局限于当前播放器内，可以避免同类名的错误
▶ Run Code
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
 
-art.proxy(container, 'click', event => {
-	console.info(event);
-});
提示
假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用该函数，以避免造成内存泄漏
query ​
  • Type: Function
DOM 的查询函数，类似 document.querySelector，但被查询的对象局限于当前播放器内，可以避免同类名的错误
▶ Run Code
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
+console.info(art.query('.art-video'));
video ​
  • Type: Element
快捷返回播放器的 video 元素
▶ Run Code
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
 
-console.info(art.query('.art-video'));
video ​
  • Type: Element
快捷返回播放器的 video 元素
▶ Run Code
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
+console.info(art.video);
cssVar ​
  • Type: Function
动态获取或设置 css 变量
▶ Run Code
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
 
-console.info(art.video);
cssVar ​
  • Type: Function
动态获取或设置 css 变量
▶ Run Code
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.log(art.cssVar('--art-theme'));
+    art.cssVar('--art-theme', 'green');
+    console.log(art.cssVar('--art-theme'));
+});
quality ​
  • Type: Setter
  • Parameter: Array
动态设置画质列表
▶ Run Code
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+	quality: [
+		{
+			default: true,
+			html: 'SD 480P',
+			url: '/assets/sample/video.mp4',
+		},
+		{
+			html: 'HD 720P',
+			url: '/assets/sample/video.mp4',
+		},
+	],
+});
 
-art.on('ready', () => {
-    console.log(art.cssVar('--art-theme'));
-    art.cssVar('--art-theme', 'green');
-    console.log(art.cssVar('--art-theme'));
-});
quality ​
  • Type: Setter
  • Parameter: Array
动态设置画质列表
▶ Run Code
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-	quality: [
-		{
-			default: true,
-			html: 'SD 480P',
-			url: '/assets/sample/video.mp4',
-		},
-		{
-			html: 'HD 720P',
-			url: '/assets/sample/video.mp4',
-		},
-	],
-});
-
-art.on('ready', () => {
-	setTimeout(() => {
-		art.quality = [
-			{
-				default: true,
-				html: '1080P',
-				url: '/assets/sample/video.mp4',
-			},
-			{
-				html: '4K',
-				url: '/assets/sample/video.mp4',
-			},
-		];
-	}, 3000);
-})

-    
+art.on('ready', () => {
+	setTimeout(() => {
+		art.quality = [
+			{
+				default: true,
+				html: '1080P',
+				url: '/assets/sample/video.mp4',
+			},
+			{
+				html: '4K',
+				url: '/assets/sample/video.mp4',
+			},
+		];
+	}, 3000);
+})
+ \ No newline at end of file diff --git a/docs/document/assets/advanced_built-in.md.2ab1addc.js b/docs/document/assets/advanced_built-in.md.2ab1addc.js deleted file mode 100644 index 3ecdb33b1..000000000 --- a/docs/document/assets/advanced_built-in.md.2ab1addc.js +++ /dev/null @@ -1,187 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const K=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/built-in.md","filePath":"advanced/built-in.md","lastUpdated":1683080086000}'),o={name:"advanced/built-in.md"},e=s('

高级属性 ​

这里的 高级属性 是指挂载在 实例 的 二级属性，比较少用

option ​

播放器的选项

',4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info(art.option);

提示

假如直接修改这个 option 对象，播放器不会马上做出响应

template ​

管理播放器所有的 DOM 元素

`,4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info(art.template);
-console.info(art.template.$video);

提示

为了方便区别 DOM 元素和普通对象，播放器里的所有 DOM 元素都是以 $ 开头命名的

这是所有 DOM 元素的定义：artplayer/types/template.d.ts

events ​

管理播放器所有的 DOM 事件，实质上是代理了 addEventListener 和 removeEventListener, 当使用以下方法来处理事件，播放器销毁时也会自动销毁该事件

`,5),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var container = document.querySelector('.artplayer-app');
-
-var art = new Artplayer({
-    container: container,
-    url: '/assets/sample/video.mp4',
-});
-
-art.events.proxy(container, 'click', event => {
-	console.info('click', event);
-});
-
-art.events.hover(container, (event) => {
-    console.info('mouseenter', event);
-}, (event) => {
-    console.info('mouseleave', event);
-});
-
-art.events.loadImg('/assets/sample/poster.jpg').then(img => {
-    console.info('loadImg', img);
-});

提示

假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用这些函数，以避免造成内存泄漏

storage ​

管理播放器的本地存储

`,5),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.storage.set('test', { foo: 'bar' });
-const test = art.storage.get('test');
-console.info(test);
-art.storage.del('test');
-art.storage.clear();

提示

默认所有播放器实例都是共享同一个 localStorage 的，而且默认的 key 是 artplayer_settings

如果你想不同的播放器使用不同的 localStorage，你可以修改 art.storage.name 即可

`,2),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.storage.name = 'your-storage-key';
-art.storage.set('test', { foo: 'bar' });

icons ​

管理播放器所有的 svg 图标

`,3),b=n("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info(art.icons.loading);

这是所有图标的定义：

artplayer/types/icons.d.ts

i18n ​

管理播放器的 i18n

`,5),m=n("div",{className:"run-code"},"▶ Run Code",-1),_=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info(art.i18n.get('Play'));
-
-art.i18n.update({
-    'zh-cn': {
-        Play: 'Your Play'
-    }
-});

WARNING

使用 art.i18n.update 只能更新实例化之后的 i18n，假如想在实例化之前更新 i18n，请使用基础选项的 i18n 来更新

notice ​

管理播放器的提示语，只有一个 show 属性用于显示提示语

`,4),h=n("div",{className:"run-code"},"▶ Run Code",-1),v=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.notice.show = 'Video Ready To Play';
-})

WARNING

如果想马上隐藏 notice 的显示：art.notice.show = '';

layers ​

管理播放器的层

`,5),g=n("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.layers.add({
-        html: 'Some Text',
-    });
-
-	setTimeout(() => {
-		art.layers.show = false;
-	}, 1000);
-});

组件配置 请参考以下地址：

/component/layers.html

controls ​

管理播放器的控制器

`,5),T=n("div",{className:"run-code"},"▶ Run Code",-1),k=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.controls.add({
-        html: 'Some Text',
-        position: 'left',
-    });
-
-	setTimeout(() => {
-		art.controls.show = false;
-	}, 1000);
-});

组件配置 请参考以下地址：

/component/controls.html

contextmenu ​

管理播放器的右键菜单

`,5),f=n("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.contextmenu.add({
-        html: 'Some Text',
-    });
-
-    art.contextmenu.show = true;
-	setTimeout(() => {
-		art.contextmenu.show = false;
-	}, 1000);
-});

组件配置 请参考以下地址：

/component/contextmenu.html

subtitle ​

管理播放器的字幕功能

`,5),S=n("div",{className:"run-code"},"▶ Run Code",-1),P=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.subtitle.url = '/assets/sample/subtitle.srt'
-    art.subtitle.style({
-        color: 'red',
-    });
-});

loading ​

管理播放器的加载层

`,4),I=n("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.loading.show = true;
-	setTimeout(() => {
-		art.loading.show = false;
-	}, 1000);
-});

hotkey ​

管理播放器的快捷键功能

`,4),R=n("div",{className:"run-code"},"▶ Run Code",-1),V=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-function hotkeyEvent(event) {
-    console.info('click', event);
-}
-
-art.on('ready', () => {
-    art.hotkey.add(32, hotkeyEvent);
-    setTimeout(() => {
-		art.hotkey.remove(32, hotkeyEvent);
-	}, 5000);
-});

提示

只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效

mask ​

管理播放器的遮罩层

`,5),j=n("div",{className:"run-code"},"▶ Run Code",-1),q=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.mask.show = false;
-	setTimeout(() => {
-		art.mask.show = true;
-	}, 1000);
-});

setting ​

管理播放器的设置面板

`,4),x=n("div",{className:"run-code"},"▶ Run Code",-1),O=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    subtitleOffset: true,
-});
-
-art.on('ready', () => {
-    art.setting.show = true;
-	setTimeout(() => {
-		art.setting.show = false;
-	}, 1000);
-});

设置面板 请参考以下地址

/component/setting.html

plugins ​

管理播放器的插件功能，只有一个方法 add 用于动态添加插件

`,4),M=n("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
-
-art.on('ready', () => {
-    art.plugins.add(myPlugin);
-});
`,1),z=[e,c,r,t,D,F,y,i,A,C,d,b,u,m,_,h,v,g,E,T,k,f,w,S,P,I,N,R,V,j,q,x,O,M,$];function B(G,L,W,J,U,Y){return l(),p("div",null,z)}const Q=a(o,[["render",B]]);export{K as __pageData,Q as default}; diff --git a/docs/document/assets/advanced_built-in.md.2ab1addc.lean.js b/docs/document/assets/advanced_built-in.md.2ab1addc.lean.js deleted file mode 100644 index 58649fb1a..000000000 --- a/docs/document/assets/advanced_built-in.md.2ab1addc.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const K=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/built-in.md","filePath":"advanced/built-in.md","lastUpdated":1683080086000}'),o={name:"advanced/built-in.md"},e=s("",4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",5),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",5),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",2),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s("",3),b=n("div",{className:"run-code"},"▶ Run Code",-1),u=s("",5),m=n("div",{className:"run-code"},"▶ Run Code",-1),_=s("",4),h=n("div",{className:"run-code"},"▶ Run Code",-1),v=s("",5),g=n("div",{className:"run-code"},"▶ Run Code",-1),E=s("",5),T=n("div",{className:"run-code"},"▶ Run Code",-1),k=s("",5),f=n("div",{className:"run-code"},"▶ Run Code",-1),w=s("",5),S=n("div",{className:"run-code"},"▶ Run Code",-1),P=s("",4),I=n("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),R=n("div",{className:"run-code"},"▶ Run Code",-1),V=s("",5),j=n("div",{className:"run-code"},"▶ Run Code",-1),q=s("",4),x=n("div",{className:"run-code"},"▶ Run Code",-1),O=s("",4),M=n("div",{className:"run-code"},"▶ Run Code",-1),$=s("",1),z=[e,c,r,t,D,F,y,i,A,C,d,b,u,m,_,h,v,g,E,T,k,f,w,S,P,I,N,R,V,j,q,x,O,M,$];function B(G,L,W,J,U,Y){return l(),p("div",null,z)}const Q=a(o,[["render",B]]);export{K as __pageData,Q as default}; diff --git a/docs/document/assets/advanced_built-in.md.UYI3B-Hy.js b/docs/document/assets/advanced_built-in.md.UYI3B-Hy.js new file mode 100644 index 000000000..1e5c89fec --- /dev/null +++ b/docs/document/assets/advanced_built-in.md.UYI3B-Hy.js @@ -0,0 +1,187 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const K=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/built-in.md","filePath":"advanced/built-in.md","lastUpdated":1683080086000}'),p={name:"advanced/built-in.md"},e=s('

高级属性 ​

这里的 高级属性 是指挂载在 实例 的 二级属性，比较少用

option ​

播放器的选项

',4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.option);

提示

假如直接修改这个 option 对象，播放器不会马上做出响应

template ​

管理播放器所有的 DOM 元素

`,4),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.template);
+console.info(art.template.$video);

提示

为了方便区别 DOM 元素和普通对象，播放器里的所有 DOM 元素都是以 $ 开头命名的

这是所有 DOM 元素的定义：artplayer/types/template.d.ts

events ​

管理播放器所有的 DOM 事件，实质上是代理了 addEventListener 和 removeEventListener, 当使用以下方法来处理事件，播放器销毁时也会自动销毁该事件

`,5),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var container = document.querySelector('.artplayer-app');
+
+var art = new Artplayer({
+    container: container,
+    url: '/assets/sample/video.mp4',
+});
+
+art.events.proxy(container, 'click', event => {
+	console.info('click', event);
+});
+
+art.events.hover(container, (event) => {
+    console.info('mouseenter', event);
+}, (event) => {
+    console.info('mouseleave', event);
+});
+
+art.events.loadImg('/assets/sample/poster.jpg').then(img => {
+    console.info('loadImg', img);
+});

提示

假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用这些函数，以避免造成内存泄漏

storage ​

管理播放器的本地存储

`,5),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.storage.set('test', { foo: 'bar' });
+const test = art.storage.get('test');
+console.info(test);
+art.storage.del('test');
+art.storage.clear();

提示

默认所有播放器实例都是共享同一个 localStorage 的，而且默认的 key 是 artplayer_settings

如果你想不同的播放器使用不同的 localStorage，你可以修改 art.storage.name 即可

`,2),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.storage.name = 'your-storage-key';
+art.storage.set('test', { foo: 'bar' });

icons ​

管理播放器所有的 svg 图标

`,3),b=i("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.icons.loading);

这是所有图标的定义：

artplayer/types/icons.d.ts

i18n ​

管理播放器的 i18n

`,5),F=i("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.i18n.get('Play'));
+
+art.i18n.update({
+    'zh-cn': {
+        Play: 'Your Play'
+    }
+});

WARNING

使用 art.i18n.update 只能更新实例化之后的 i18n，假如想在实例化之前更新 i18n，请使用基础选项的 i18n 来更新

notice ​

管理播放器的提示语，只有一个 show 属性用于显示提示语

`,4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.notice.show = 'Video Ready To Play';
+})

WARNING

如果想马上隐藏 notice 的显示：art.notice.show = '';

layers ​

管理播放器的层

`,5),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.layers.add({
+        html: 'Some Text',
+    });
+
+	setTimeout(() => {
+		art.layers.show = false;
+	}, 1000);
+});

组件配置 请参考以下地址：

/component/layers.html

controls ​

管理播放器的控制器

`,5),B=i("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.controls.add({
+        html: 'Some Text',
+        position: 'left',
+    });
+
+	setTimeout(() => {
+		art.controls.show = false;
+	}, 1000);
+});

组件配置 请参考以下地址：

/component/controls.html

contextmenu ​

管理播放器的右键菜单

`,5),T=i("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.contextmenu.add({
+        html: 'Some Text',
+    });
+
+    art.contextmenu.show = true;
+	setTimeout(() => {
+		art.contextmenu.show = false;
+	}, 1000);
+});

组件配置 请参考以下地址：

/component/contextmenu.html

subtitle ​

管理播放器的字幕功能

`,5),P=i("div",{className:"run-code"},"▶ Run Code",-1),S=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.subtitle.url = '/assets/sample/subtitle.srt'
+    art.subtitle.style({
+        color: 'red',
+    });
+});

loading ​

管理播放器的加载层

`,4),f=i("div",{className:"run-code"},"▶ Run Code",-1),I=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.loading.show = true;
+	setTimeout(() => {
+		art.loading.show = false;
+	}, 1000);
+});

hotkey ​

管理播放器的快捷键功能

`,4),N=i("div",{className:"run-code"},"▶ Run Code",-1),R=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+function hotkeyEvent(event) {
+    console.info('click', event);
+}
+
+art.on('ready', () => {
+    art.hotkey.add(32, hotkeyEvent);
+    setTimeout(() => {
+		art.hotkey.remove(32, hotkeyEvent);
+	}, 5000);
+});

提示

只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效

mask ​

管理播放器的遮罩层

`,5),V=i("div",{className:"run-code"},"▶ Run Code",-1),j=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.mask.show = false;
+	setTimeout(() => {
+		art.mask.show = true;
+	}, 1000);
+});

setting ​

管理播放器的设置面板

`,4),q=i("div",{className:"run-code"},"▶ Run Code",-1),x=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+});
+
+art.on('ready', () => {
+    art.setting.show = true;
+	setTimeout(() => {
+		art.setting.show = false;
+	}, 1000);
+});

设置面板 请参考以下地址

/component/setting.html

plugins ​

管理播放器的插件功能，只有一个方法 add 用于动态添加插件

`,4),O=i("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+art.on('ready', () => {
+    art.plugins.add(myPlugin);
+});
`,1),$=[e,h,t,k,r,E,d,c,o,g,y,b,u,F,m,_,C,v,A,B,D,T,w,P,S,f,I,N,R,V,j,q,x,O,M];function z(G,L,W,J,U,Y){return n(),l("div",null,$)}const Q=a(p,[["render",z]]);export{K as __pageData,Q as default}; diff --git a/docs/document/assets/advanced_built-in.md.UYI3B-Hy.lean.js b/docs/document/assets/advanced_built-in.md.UYI3B-Hy.lean.js new file mode 100644 index 000000000..211409dbe --- /dev/null +++ b/docs/document/assets/advanced_built-in.md.UYI3B-Hy.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const K=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/built-in.md","filePath":"advanced/built-in.md","lastUpdated":1683080086000}'),p={name:"advanced/built-in.md"},e=s("",4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",4),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s("",5),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",5),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s("",2),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s("",3),b=i("div",{className:"run-code"},"▶ Run Code",-1),u=s("",5),F=i("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s("",5),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s("",5),B=i("div",{className:"run-code"},"▶ Run Code",-1),D=s("",5),T=i("div",{className:"run-code"},"▶ Run Code",-1),w=s("",5),P=i("div",{className:"run-code"},"▶ Run Code",-1),S=s("",4),f=i("div",{className:"run-code"},"▶ Run Code",-1),I=s("",4),N=i("div",{className:"run-code"},"▶ Run Code",-1),R=s("",5),V=i("div",{className:"run-code"},"▶ Run Code",-1),j=s("",4),q=i("div",{className:"run-code"},"▶ Run Code",-1),x=s("",4),O=i("div",{className:"run-code"},"▶ Run Code",-1),M=s("",1),$=[e,h,t,k,r,E,d,c,o,g,y,b,u,F,m,_,C,v,A,B,D,T,w,P,S,f,I,N,R,V,j,q,x,O,M];function z(G,L,W,J,U,Y){return n(),l("div",null,$)}const Q=a(p,[["render",z]]);export{K as __pageData,Q as default}; diff --git a/docs/document/assets/advanced_class.md.PUY15_yh.js b/docs/document/assets/advanced_class.md.PUY15_yh.js new file mode 100644 index 000000000..7a352e77d --- /dev/null +++ b/docs/document/assets/advanced_class.md.PUY15_yh.js @@ -0,0 +1,8 @@ +import{_ as i,o as e,c as n,R as s,k as a}from"./chunks/framework.E60viAY0.js";const $=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/class.md","filePath":"advanced/class.md","lastUpdated":1682233868000}'),t={name:"advanced/class.md"},l=s('

静态属性 ​

这里的 静态属性 是指挂载在 构造函数 的 一级属性，非常少使用

instances ​

返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性

',4),p=a("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
console.info([...Artplayer.instances]);
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info([...Artplayer.instances]);

version ​

返回播放器的版本信息

`,3),h=a("div",{className:"run-code"},"▶ Run Code",-1),r=s('
js
console.info(Artplayer.version);

env ​

返回播放器的环境变量

',3),o=a("div",{className:"run-code"},"▶ Run Code",-1),c=s('
js
console.info(Artplayer.env);

build ​

返回播放器的打包时间

',3),k=a("div",{className:"run-code"},"▶ Run Code",-1),_=s('
js
console.info(Artplayer.build);

config ​

返回视频的默认配置

',3),u=a("div",{className:"run-code"},"▶ Run Code",-1),E=s('
js
console.info(Artplayer.config);

utils ​

返回播放器的工具函数集合

',3),b=a("div",{className:"run-code"},"▶ Run Code",-1),g=s('
js
console.info(Artplayer.utils);

全部工具函数请参考以下地址：

artplayer/types/utils.d.ts

scheme ​

返回播放器选项的校验方案

',4),m=a("div",{className:"run-code"},"▶ Run Code",-1),v=s('
js
console.info(Artplayer.scheme);

Emitter ​

返回事件分发器的构造函数

',3),y=a("div",{className:"run-code"},"▶ Run Code",-1),C=s('
js
console.info(Artplayer.Emitter);

validator ​

返回选项的校验函数

',3),T=a("div",{className:"run-code"},"▶ Run Code",-1),A=s('
js
console.info(Artplayer.validator);

kindOf ​

返回类型检测的函数工具

',3),f=a("div",{className:"run-code"},"▶ Run Code",-1),P=s('
js
console.info(Artplayer.kindOf);

html ​

返回播放器所需的 html 字符串

',3),S=a("div",{className:"run-code"},"▶ Run Code",-1),F=s('
js
console.info(Artplayer.html);

option ​

返回播放器的默认选项

',3),N=a("div",{className:"run-code"},"▶ Run Code",-1),V=s('
js
console.info(Artplayer.option);
',1),q=[l,p,d,h,r,o,c,k,_,u,E,b,g,m,v,y,C,T,A,f,P,S,F,N,V];function I(R,j,B,D,x,w){return e(),n("div",null,q)}const z=i(t,[["render",I]]);export{$ as __pageData,z as default}; diff --git a/docs/document/assets/advanced_class.md.PUY15_yh.lean.js b/docs/document/assets/advanced_class.md.PUY15_yh.lean.js new file mode 100644 index 000000000..1e256146e --- /dev/null +++ b/docs/document/assets/advanced_class.md.PUY15_yh.lean.js @@ -0,0 +1 @@ +import{_ as i,o as e,c as n,R as s,k as a}from"./chunks/framework.E60viAY0.js";const $=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/class.md","filePath":"advanced/class.md","lastUpdated":1682233868000}'),t={name:"advanced/class.md"},l=s("",4),p=a("div",{className:"run-code"},"▶ Run Code",-1),d=s("",3),h=a("div",{className:"run-code"},"▶ Run Code",-1),r=s("",3),o=a("div",{className:"run-code"},"▶ Run Code",-1),c=s("",3),k=a("div",{className:"run-code"},"▶ Run Code",-1),_=s("",3),u=a("div",{className:"run-code"},"▶ Run Code",-1),E=s("",3),b=a("div",{className:"run-code"},"▶ Run Code",-1),g=s("",4),m=a("div",{className:"run-code"},"▶ Run Code",-1),v=s("",3),y=a("div",{className:"run-code"},"▶ Run Code",-1),C=s("",3),T=a("div",{className:"run-code"},"▶ Run Code",-1),A=s("",3),f=a("div",{className:"run-code"},"▶ Run Code",-1),P=s("",3),S=a("div",{className:"run-code"},"▶ Run Code",-1),F=s("",3),N=a("div",{className:"run-code"},"▶ Run Code",-1),V=s("",1),q=[l,p,d,h,r,o,c,k,_,u,E,b,g,m,v,y,C,T,A,f,P,S,F,N,V];function I(R,j,B,D,x,w){return e(),n("div",null,q)}const z=i(t,[["render",I]]);export{$ as __pageData,z as default}; diff --git a/docs/document/assets/advanced_class.md.e446539f.js b/docs/document/assets/advanced_class.md.e446539f.js deleted file mode 100644 index c0779a88e..000000000 --- a/docs/document/assets/advanced_class.md.e446539f.js +++ /dev/null @@ -1,8 +0,0 @@ -import{_ as n,o as e,c as l,S as s,k as a}from"./chunks/framework.532b6b18.js";const B=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/class.md","filePath":"advanced/class.md","lastUpdated":1682233868000}'),o={name:"advanced/class.md"},p=s('

静态属性 ​

这里的 静态属性 是指挂载在 构造函数 的 一级属性，非常少使用

instances ​

返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性

',4),t=a("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
console.info([...Artplayer.instances]);
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info([...Artplayer.instances]);

version ​

返回播放器的版本信息

`,3),c=a("div",{className:"run-code"},"▶ Run Code",-1),i=s('
js
console.info(Artplayer.version);

env ​

返回播放器的环境变量

',3),d=a("div",{className:"run-code"},"▶ Run Code",-1),_=s('
js
console.info(Artplayer.env);

build ​

返回播放器的打包时间

',3),A=a("div",{className:"run-code"},"▶ Run Code",-1),D=s('
js
console.info(Artplayer.build);

config ​

返回视频的默认配置

',3),y=a("div",{className:"run-code"},"▶ Run Code",-1),C=s('
js
console.info(Artplayer.config);

utils ​

返回播放器的工具函数集合

',3),u=a("div",{className:"run-code"},"▶ Run Code",-1),h=s('
js
console.info(Artplayer.utils);

全部工具函数请参考以下地址：

artplayer/types/utils.d.ts

scheme ​

返回播放器选项的校验方案

',4),F=a("div",{className:"run-code"},"▶ Run Code",-1),m=s('
js
console.info(Artplayer.scheme);

Emitter ​

返回事件分发器的构造函数

',3),b=a("div",{className:"run-code"},"▶ Run Code",-1),v=s('
js
console.info(Artplayer.Emitter);

validator ​

返回选项的校验函数

',3),T=a("div",{className:"run-code"},"▶ Run Code",-1),g=s('
js
console.info(Artplayer.validator);

kindOf ​

返回类型检测的函数工具

',3),f=a("div",{className:"run-code"},"▶ Run Code",-1),P=s('
js
console.info(Artplayer.kindOf);

html ​

返回播放器所需的 html 字符串

',3),S=a("div",{className:"run-code"},"▶ Run Code",-1),k=s('
js
console.info(Artplayer.html);

option ​

返回播放器的默认选项

',3),N=a("div",{className:"run-code"},"▶ Run Code",-1),V=s('
js
console.info(Artplayer.option);
',1),q=[p,t,r,c,i,d,_,A,D,y,C,u,h,F,m,b,v,T,g,f,P,S,k,N,V];function I(R,j,E,x,w,O){return e(),l("div",null,q)}const z=n(o,[["render",I]]);export{B as __pageData,z as default}; diff --git a/docs/document/assets/advanced_class.md.e446539f.lean.js b/docs/document/assets/advanced_class.md.e446539f.lean.js deleted file mode 100644 index f11d9ca83..000000000 --- a/docs/document/assets/advanced_class.md.e446539f.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as n,o as e,c as l,S as s,k as a}from"./chunks/framework.532b6b18.js";const B=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/class.md","filePath":"advanced/class.md","lastUpdated":1682233868000}'),o={name:"advanced/class.md"},p=s("",4),t=a("div",{className:"run-code"},"▶ Run Code",-1),r=s("",3),c=a("div",{className:"run-code"},"▶ Run Code",-1),i=s("",3),d=a("div",{className:"run-code"},"▶ Run Code",-1),_=s("",3),A=a("div",{className:"run-code"},"▶ Run Code",-1),D=s("",3),y=a("div",{className:"run-code"},"▶ Run Code",-1),C=s("",3),u=a("div",{className:"run-code"},"▶ Run Code",-1),h=s("",4),F=a("div",{className:"run-code"},"▶ Run Code",-1),m=s("",3),b=a("div",{className:"run-code"},"▶ Run Code",-1),v=s("",3),T=a("div",{className:"run-code"},"▶ Run Code",-1),g=s("",3),f=a("div",{className:"run-code"},"▶ Run Code",-1),P=s("",3),S=a("div",{className:"run-code"},"▶ Run Code",-1),k=s("",3),N=a("div",{className:"run-code"},"▶ Run Code",-1),V=s("",1),q=[p,t,r,c,i,d,_,A,D,y,C,u,h,F,m,b,v,T,g,f,P,S,k,N,V];function I(R,j,E,x,w,O){return e(),l("div",null,q)}const z=n(o,[["render",I]]);export{B as __pageData,z as default}; diff --git a/docs/document/assets/advanced_event.md.CMtflGLG.js b/docs/document/assets/advanced_event.md.CMtflGLG.js new file mode 100644 index 000000000..7b8c8fc41 --- /dev/null +++ b/docs/document/assets/advanced_event.md.CMtflGLG.js @@ -0,0 +1,341 @@ +import{_ as n,o as l,c as p,k as s,a,R as i}from"./chunks/framework.E60viAY0.js";const Xs=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1700581325000}'),e={name:"advanced/event.md"},h=s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),t=s("p",null,[a("播放器的事件分为两种，一种视频的 "),s("code",null,"原生事件"),a(" (前缀 "),s("code",null,"video:"),a(")，另外一种是 "),s("code",null,"自定义事件")],-1),k=s("p",null,"监听事件：",-1),r=s("div",{className:"run-code"},"▶ Run Code",-1),E=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('video:canplay', () => {
+    console.info('video:canplay');
+});

只监听一次事件：

`,2),d=s("div",{className:"run-code"},"▶ Run Code",-1),c=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.once('video:canplay', () => {
+    console.info('video:canplay');
+});

手动触发事件：

`,2),g=s("div",{className:"run-code"},"▶ Run Code",-1),o=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.emit('focus');

移除事件：

`,2),y=s("div",{className:"run-code"},"▶ Run Code",-1),b=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+const onReady = () => {
+    console.info('ready');
+    art.off('ready', onReady);
+}
+
+art.on('ready', onReady);

全部事件请参考以下地址：

artplayer/types/events.d.ts

ready ​

当播放器首次可以播放器时触发

`,4),u=s("div",{className:"run-code"},"▶ Run Code",-1),F=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info('ready');
+});

restart ​

当播放器切换地址后并可以播放时触发

`,3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4'
+});
+
+art.on('restart', (url) => {
+    console.info('restart', url);
+});

pause ​

当播放器暂停时触发

`,3),v=s("div",{className:"run-code"},"▶ Run Code",-1),C=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('pause', () => {
+    console.info('pause');
+});

play ​

当播放器播放时触发

`,3),A=s("div",{className:"run-code"},"▶ Run Code",-1),B=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('play', () => {
+    console.info('play');
+});

hotkey ​

当播放器热键被按下时触发

`,3),T=s("div",{className:"run-code"},"▶ Run Code",-1),D=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('hotkey', (event) => {
+    console.info('hotkey', event);
+});

destroy ​

当播放器销毁时触发

`,3),f=s("div",{className:"run-code"},"▶ Run Code",-1),P=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.destroy();
+});
+
+art.on('destroy', () => {
+    console.info('destroy');
+});

focus ​

当播放器获得焦点时触发

`,3),S=s("div",{className:"run-code"},"▶ Run Code",-1),q=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('focus', (event) => {
+    console.info('focus', event);
+});

blur ​

当播放器失去焦点时触发

`,3),w=s("div",{className:"run-code"},"▶ Run Code",-1),R=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('blur', (event) => {
+    console.info('blur', event);
+});

dblclick ​

当播放器被双击时触发

`,3),N=s("div",{className:"run-code"},"▶ Run Code",-1),V=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('dblclick', (event) => {
+    console.info('dblclick', event);
+});

click ​

当播放器被单击时触发

`,3),j=s("div",{className:"run-code"},"▶ Run Code",-1),I=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('click', (event) => {
+    console.info('click', event);
+});

error ​

当播放器加载视频发生错误时触发

`,3),x=s("div",{className:"run-code"},"▶ Run Code",-1),z=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});
+
+art.on('error', (error, reconnectTime) => {
+    console.info(error, reconnectTime);
+});

hover ​

当播放器被鼠标移出或者移入时触发

`,3),O=s("div",{className:"run-code"},"▶ Run Code",-1),U=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('hover', (state, event) => {
+    console.info('hover', state, event);
+});

mousemove ​

当播放器被鼠标经过时触发

`,3),H=s("div",{className:"run-code"},"▶ Run Code",-1),W=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('mousemove', (event) => {
+    console.info('mousemove', event);
+});

resize ​

当播放器尺寸变化时触发

`,3),L=s("div",{className:"run-code"},"▶ Run Code",-1),$=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('resize', () => {
+    console.info('resize');
+});

view ​

当播放器出现在视口时触发

`,3),J=s("div",{className:"run-code"},"▶ Run Code",-1),G=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('view', (state) => {
+    console.info('view', state);
+});

lock ​

在移动端，当锁定的状态发生变化时触发

`,3),K=s("div",{className:"run-code"},"▶ Run Code",-1),M=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lock: true,
+});
+
+art.on('lock', (state) => {
+    console.info('lock', state);
+});

aspectRatio ​

当播放器长宽比变化时触发

`,3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    aspectRatio: true,
+    setting: true,
+});
+
+art.on('aspectRatio', (aspectRatio) => {
+    console.info('aspectRatio', aspectRatio);
+});

autoHeight ​

当播放器自动设置高度时触发

`,3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.autoHeight();
+});
+
+art.on('autoHeight', (height) => {
+    console.info('autoHeight', height);
+});

autoSize ​

当播放器自动设置尺寸时触发

`,3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),is=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+});
+
+art.on('autoSize', () => {
+    console.info('autoSize');
+});

flip ​

当播放器发生翻转时触发

`,3),as=s("div",{className:"run-code"},"▶ Run Code",-1),ns=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    flip: true,
+    setting: true,
+});
+
+art.on('flip', (flip) => {
+    console.info('flip', flip);
+});

fullscreen ​

当播放器发生窗口全屏时触发

`,3),ls=s("div",{className:"run-code"},"▶ Run Code",-1),ps=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+});
+
+art.on('fullscreen', (state) => {
+    console.info('fullscreen', state);
+});

fullscreenWeb ​

当播放器发生网页全屏时触发

`,3),es=s("div",{className:"run-code"},"▶ Run Code",-1),hs=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
+
+art.on('fullscreenWeb', (state) => {
+    console.info('fullscreenWeb', state);
+});

mini ​

当播放器进入迷你模式时触发

`,3),ts=s("div",{className:"run-code"},"▶ Run Code",-1),ks=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.mini = true;
+});
+
+art.on('mini', (state) => {
+    console.info('mini', state);
+});

pip ​

当播放器进入画中画时触发

`,3),rs=s("div",{className:"run-code"},"▶ Run Code",-1),Es=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    pip: true,
+});
+
+art.on('pip', (state) => {
+    console.info('pip', state);
+});

screenshot ​

当播放器被截图时触发

`,3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),cs=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
+});
+
+art.on('screenshot', (dataUri) => {
+    console.info('screenshot', dataUri);
+});

seek ​

当播放器发生时间跳转时触发

`,3),gs=s("div",{className:"run-code"},"▶ Run Code",-1),os=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('seek', (currentTime) => {
+    console.info('seek', currentTime);
+});

subtitleOffset ​

当播放器发生字幕偏移时触发

`,3),ys=s("div",{className:"run-code"},"▶ Run Code",-1),bs=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitleOffset: true,
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+    setting: true,
+});
+
+art.on('subtitleOffset', (offset) => {
+    console.info('subtitleOffset', offset);
+});

subtitleUpdate ​

当字幕更新时触发

`,3),us=s("div",{className:"run-code"},"▶ Run Code",-1),Fs=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
+
+art.on('subtitleUpdate', (text) => {
+    console.info('subtitleUpdate', text);
+});

subtitleLoad ​

当字幕加载时触发

`,3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
+
+art.on('subtitleLoad', (url) => {
+    console.info('subtitleLoad', url);
+});

subtitleSwitch ​

当字幕切换时触发

`,3),vs=s("div",{className:"run-code"},"▶ Run Code",-1),Cs=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
+
+art.on('ready', () => {
+    art.subtitle.url = '/assets/sample/subtitle.ass';
+});
+
+art.on('subtitleSwitch', (url) => {
+    console.info('subtitleSwitch', url);
+});

info ​

当信息面板显示或隐藏时触发

`,3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Bs=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('info', (state) => {
+    console.log(state);
+});

layer ​

当自定义层显示或隐藏时触发

`,3),Ts=s("div",{className:"run-code"},"▶ Run Code",-1),Ds=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('layer', (state) => {
+    console.log(state);
+});

loading ​

当加载器显示或隐藏时触发

`,3),fs=s("div",{className:"run-code"},"▶ Run Code",-1),Ps=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('loading', (state) => {
+    console.log(state);
+});

mask ​

当遮罩层显示或隐藏时触发

`,3),Ss=s("div",{className:"run-code"},"▶ Run Code",-1),qs=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('mask', (state) => {
+    console.log(state);
+});

subtitle ​

当字幕层显示或隐藏时触发

`,3),ws=s("div",{className:"run-code"},"▶ Run Code",-1),Rs=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('subtitle', (state) => {
+    console.log(state);
+});

contextmenu ​

当右键菜单显示或隐藏时触发

`,3),Ns=s("div",{className:"run-code"},"▶ Run Code",-1),Vs=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('contextmenu', (state) => {
+    console.log(state);
+});

control ​

当控制器显示或隐藏时触发

`,3),js=s("div",{className:"run-code"},"▶ Run Code",-1),Is=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('control', (state) => {
+    console.log(state);
+});

setting ​

当设置面板显示或隐藏时触发

`,3),xs=s("div",{className:"run-code"},"▶ Run Code",-1),zs=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
+
+art.on('setting', (state) => {
+    console.log(state);
+});

muted ​

当静音的状态变化时触发

`,3),Os=s("div",{className:"run-code"},"▶ Run Code",-1),Us=i('
js
var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n});\n\nart.on('muted', (state) => {\n    console.log(state);\n});

video:canplay ​

浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容

video:canplaythrough ​

浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束

video:complete ​

OfflineAudioContext 渲染完成

video:durationchange ​

duration 属性的值改变时触发

video:emptied ​

媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它

video:ended ​

视频停止播放，因为 media 已经到达结束点

video:error ​

获取媒体数据时出错，或者资源类型不是受支持的媒体格式

video:loadeddata ​

media 中的首帧已经完成加载

video:loadedmetadata ​

已加载元数据

video:pause ​

播放已暂停

video:play ​

播放已开始

video:playing ​

由于缺乏数据而暂停或延迟后，播放准备开始

video:progress ​

在浏览器加载资源时周期性触发

video:ratechange ​

播放速率发生变化

video:seeked ​

跳帧（seek）操作完成

video:seeking ​

跳帧（seek）操作开始

video:stalled ​

用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现

video:suspend ​

媒体数据加载已暂停

video:timeupdate ​

currentTime 属性指定的时间发生变化

video:volumechange ​

音量发生变化

video:waiting ​

由于暂时缺少数据，播放已停止

',43),Hs=[h,t,k,r,E,d,c,g,o,y,b,u,F,m,_,v,C,A,B,T,D,f,P,S,q,w,R,N,V,j,I,x,z,O,U,H,W,L,$,J,G,K,M,Q,X,Y,Z,ss,is,as,ns,ls,ps,es,hs,ts,ks,rs,Es,ds,cs,gs,os,ys,bs,us,Fs,ms,_s,vs,Cs,As,Bs,Ts,Ds,fs,Ps,Ss,qs,ws,Rs,Ns,Vs,js,Is,xs,zs,Os,Us];function Ws(Ls,$s,Js,Gs,Ks,Ms){return l(),p("div",null,Hs)}const Ys=n(e,[["render",Ws]]);export{Xs as __pageData,Ys as default}; diff --git a/docs/document/assets/advanced_event.md.CMtflGLG.lean.js b/docs/document/assets/advanced_event.md.CMtflGLG.lean.js new file mode 100644 index 000000000..352acfb9b --- /dev/null +++ b/docs/document/assets/advanced_event.md.CMtflGLG.lean.js @@ -0,0 +1 @@ +import{_ as n,o as l,c as p,k as s,a,R as i}from"./chunks/framework.E60viAY0.js";const Xs=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1700581325000}'),e={name:"advanced/event.md"},h=s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),t=s("p",null,[a("播放器的事件分为两种，一种视频的 "),s("code",null,"原生事件"),a(" (前缀 "),s("code",null,"video:"),a(")，另外一种是 "),s("code",null,"自定义事件")],-1),k=s("p",null,"监听事件：",-1),r=s("div",{className:"run-code"},"▶ Run Code",-1),E=i("",2),d=s("div",{className:"run-code"},"▶ Run Code",-1),c=i("",2),g=s("div",{className:"run-code"},"▶ Run Code",-1),o=i("",2),y=s("div",{className:"run-code"},"▶ Run Code",-1),b=i("",4),u=s("div",{className:"run-code"},"▶ Run Code",-1),F=i("",3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=i("",3),v=s("div",{className:"run-code"},"▶ Run Code",-1),C=i("",3),A=s("div",{className:"run-code"},"▶ Run Code",-1),B=i("",3),T=s("div",{className:"run-code"},"▶ Run Code",-1),D=i("",3),f=s("div",{className:"run-code"},"▶ Run Code",-1),P=i("",3),S=s("div",{className:"run-code"},"▶ Run Code",-1),q=i("",3),w=s("div",{className:"run-code"},"▶ Run Code",-1),R=i("",3),N=s("div",{className:"run-code"},"▶ Run Code",-1),V=i("",3),j=s("div",{className:"run-code"},"▶ Run Code",-1),I=i("",3),x=s("div",{className:"run-code"},"▶ Run Code",-1),z=i("",3),O=s("div",{className:"run-code"},"▶ Run Code",-1),U=i("",3),H=s("div",{className:"run-code"},"▶ Run Code",-1),W=i("",3),L=s("div",{className:"run-code"},"▶ Run Code",-1),$=i("",3),J=s("div",{className:"run-code"},"▶ Run Code",-1),G=i("",3),K=s("div",{className:"run-code"},"▶ Run Code",-1),M=i("",3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=i("",3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=i("",3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),is=i("",3),as=s("div",{className:"run-code"},"▶ Run Code",-1),ns=i("",3),ls=s("div",{className:"run-code"},"▶ Run Code",-1),ps=i("",3),es=s("div",{className:"run-code"},"▶ Run Code",-1),hs=i("",3),ts=s("div",{className:"run-code"},"▶ Run Code",-1),ks=i("",3),rs=s("div",{className:"run-code"},"▶ Run Code",-1),Es=i("",3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),cs=i("",3),gs=s("div",{className:"run-code"},"▶ Run Code",-1),os=i("",3),ys=s("div",{className:"run-code"},"▶ Run Code",-1),bs=i("",3),us=s("div",{className:"run-code"},"▶ Run Code",-1),Fs=i("",3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=i("",3),vs=s("div",{className:"run-code"},"▶ Run Code",-1),Cs=i("",3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Bs=i("",3),Ts=s("div",{className:"run-code"},"▶ Run Code",-1),Ds=i("",3),fs=s("div",{className:"run-code"},"▶ Run Code",-1),Ps=i("",3),Ss=s("div",{className:"run-code"},"▶ Run Code",-1),qs=i("",3),ws=s("div",{className:"run-code"},"▶ Run Code",-1),Rs=i("",3),Ns=s("div",{className:"run-code"},"▶ Run Code",-1),Vs=i("",3),js=s("div",{className:"run-code"},"▶ Run Code",-1),Is=i("",3),xs=s("div",{className:"run-code"},"▶ Run Code",-1),zs=i("",3),Os=s("div",{className:"run-code"},"▶ Run Code",-1),Us=i("",43),Hs=[h,t,k,r,E,d,c,g,o,y,b,u,F,m,_,v,C,A,B,T,D,f,P,S,q,w,R,N,V,j,I,x,z,O,U,H,W,L,$,J,G,K,M,Q,X,Y,Z,ss,is,as,ns,ls,ps,es,hs,ts,ks,rs,Es,ds,cs,gs,os,ys,bs,us,Fs,ms,_s,vs,Cs,As,Bs,Ts,Ds,fs,Ps,Ss,qs,ws,Rs,Ns,Vs,js,Is,xs,zs,Os,Us];function Ws(Ls,$s,Js,Gs,Ks,Ms){return l(),p("div",null,Hs)}const Ys=n(e,[["render",Ws]]);export{Xs as __pageData,Ys as default}; diff --git a/docs/document/assets/advanced_event.md.d7901aca.js b/docs/document/assets/advanced_event.md.d7901aca.js deleted file mode 100644 index 879a33181..000000000 --- a/docs/document/assets/advanced_event.md.d7901aca.js +++ /dev/null @@ -1,348 +0,0 @@ -import{_ as l,o as p,c as o,k as s,a as n,S as a}from"./chunks/framework.532b6b18.js";const Zs=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1688046273000}'),e={name:"advanced/event.md"},r=s("h1",{id:"实例事件",tabindex:"-1"},[n("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),c=s("p",null,[n("播放器的事件分为两种，一种视频的 "),s("code",null,"原生事件"),n(" (前缀 "),s("code",null,"video:"),n(")，另外一种是 "),s("code",null,"自定义事件")],-1),t=s("p",null,"监听事件：",-1),D=s("div",{className:"run-code"},"▶ Run Code",-1),y=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('video:canplay', () => {
-    console.info('video:canplay');
-});

只监听一次事件：

`,2),F=s("div",{className:"run-code"},"▶ Run Code",-1),i=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.once('video:canplay', () => {
-    console.info('video:canplay');
-});

手动触发事件：

`,2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.emit('focus');

移除事件：

`,2),d=s("div",{className:"run-code"},"▶ Run Code",-1),b=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-const onReady = () => {
-    console.info('ready');
-    art.off('ready', onReady);
-}
-
-art.on('ready', onReady);

全部事件请参考以下地址：

artplayer/types/events.d.ts

ready ​

当播放器首次可以播放器时触发

`,4),u=s("div",{className:"run-code"},"▶ Run Code",-1),h=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info('ready');
-});

restart ​

当播放器切换地址后并可以播放时触发

`,3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.url = '/assets/sample/video.mp4'
-});
-
-art.on('restart', (url) => {
-    console.info('restart', url);
-});

loop ​

当出现区间循环时触发

`,3),g=s("div",{className:"run-code"},"▶ Run Code",-1),v=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('loop', (start, end) => {
-    console.info('loop', start, end);
-});

pause ​

当播放器暂停时触发

`,3),E=s("div",{className:"run-code"},"▶ Run Code",-1),T=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('pause', () => {
-    console.info('pause');
-});

play ​

当播放器播放时触发

`,3),f=s("div",{className:"run-code"},"▶ Run Code",-1),k=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('play', () => {
-    console.info('play');
-});

hotkey ​

当播放器热键被按下时触发

`,3),P=s("div",{className:"run-code"},"▶ Run Code",-1),S=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('hotkey', (event) => {
-    console.info('hotkey', event);
-});

destroy ​

当播放器销毁时触发

`,3),q=s("div",{className:"run-code"},"▶ Run Code",-1),w=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.destroy();
-});
-
-art.on('destroy', () => {
-    console.info('destroy');
-});

focus ​

当播放器获得焦点时触发

`,3),R=s("div",{className:"run-code"},"▶ Run Code",-1),N=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('focus', (event) => {
-    console.info('focus', event);
-});

blur ​

当播放器失去焦点时触发

`,3),V=s("div",{className:"run-code"},"▶ Run Code",-1),j=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('blur', (event) => {
-    console.info('blur', event);
-});

dblclick ​

当播放器被双击时触发

`,3),I=s("div",{className:"run-code"},"▶ Run Code",-1),x=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('dblclick', (event) => {
-    console.info('dblclick', event);
-});

click ​

当播放器被单击时触发

`,3),z=s("div",{className:"run-code"},"▶ Run Code",-1),O=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('click', (event) => {
-    console.info('click', event);
-});

error ​

当播放器加载视频发生错误时触发

`,3),U=s("div",{className:"run-code"},"▶ Run Code",-1),H=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});
-
-art.on('error', (error, reconnectTime) => {
-    console.info(error, reconnectTime);
-});

hover ​

当播放器被鼠标移出或者移入时触发

`,3),W=s("div",{className:"run-code"},"▶ Run Code",-1),L=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('hover', (state, event) => {
-    console.info('hover', state, event);
-});

mousemove ​

当播放器被鼠标经过时触发

`,3),$=s("div",{className:"run-code"},"▶ Run Code",-1),B=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('mousemove', (event) => {
-    console.info('mousemove', event);
-});

resize ​

当播放器尺寸变化时触发

`,3),J=s("div",{className:"run-code"},"▶ Run Code",-1),G=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('resize', () => {
-    console.info('resize');
-});

view ​

当播放器出现在视口时触发

`,3),K=s("div",{className:"run-code"},"▶ Run Code",-1),M=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('view', (state) => {
-    console.info('view', state);
-});

lock ​

在移动端，当锁定的状态发生变化时触发

`,3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lock: true,
-});
-
-art.on('lock', (state) => {
-    console.info('lock', state);
-});

aspectRatio ​

当播放器长宽比变化时触发

`,3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    aspectRatio: true,
-    setting: true,
-});
-
-art.on('aspectRatio', (aspectRatio) => {
-    console.info('aspectRatio', aspectRatio);
-});

autoHeight ​

当播放器自动设置高度时触发

`,3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),as=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.autoHeight();
-});
-
-art.on('autoHeight', (height) => {
-    console.info('autoHeight', height);
-});

autoSize ​

当播放器自动设置尺寸时触发

`,3),ns=s("div",{className:"run-code"},"▶ Run Code",-1),ls=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-});
-
-art.on('autoSize', () => {
-    console.info('autoSize');
-});

flip ​

当播放器发生翻转时触发

`,3),ps=s("div",{className:"run-code"},"▶ Run Code",-1),os=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    flip: true,
-    setting: true,
-});
-
-art.on('flip', (flip) => {
-    console.info('flip', flip);
-});

fullscreen ​

当播放器发生窗口全屏时触发

`,3),es=s("div",{className:"run-code"},"▶ Run Code",-1),rs=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-});
-
-art.on('fullscreen', (state) => {
-    console.info('fullscreen', state);
-});

fullscreenWeb ​

当播放器发生网页全屏时触发

`,3),cs=s("div",{className:"run-code"},"▶ Run Code",-1),ts=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
-
-art.on('fullscreenWeb', (state) => {
-    console.info('fullscreenWeb', state);
-});

mini ​

当播放器进入迷你模式时触发

`,3),Ds=s("div",{className:"run-code"},"▶ Run Code",-1),ys=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.mini = true;
-});
-
-art.on('mini', (state) => {
-    console.info('mini', state);
-});

pip ​

当播放器进入画中画时触发

`,3),Fs=s("div",{className:"run-code"},"▶ Run Code",-1),is=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    pip: true,
-});
-
-art.on('pip', (state) => {
-    console.info('pip', state);
-});

screenshot ​

当播放器被截图时触发

`,3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Cs=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    screenshot: true,
-});
-
-art.on('screenshot', (dataUri) => {
-    console.info('screenshot', dataUri);
-});

seek ​

当播放器发生时间跳转时触发

`,3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),bs=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('seek', (currentTime) => {
-    console.info('seek', currentTime);
-});

subtitleOffset ​

当播放器发生字幕偏移时触发

`,3),us=s("div",{className:"run-code"},"▶ Run Code",-1),hs=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitleOffset: true,
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-    setting: true,
-});
-
-art.on('subtitleOffset', (offset) => {
-    console.info('subtitleOffset', offset);
-});

subtitleUpdate ​

当字幕更新时触发

`,3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
-
-art.on('subtitleUpdate', (text) => {
-    console.info('subtitleUpdate', text);
-});

subtitleLoad ​

当字幕加载时触发

`,3),gs=s("div",{className:"run-code"},"▶ Run Code",-1),vs=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
-
-art.on('subtitleLoad', (url) => {
-    console.info('subtitleLoad', url);
-});

subtitleSwitch ​

当字幕切换时触发

`,3),Es=s("div",{className:"run-code"},"▶ Run Code",-1),Ts=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
-
-art.on('ready', () => {
-    art.subtitle.url = '/assets/sample/subtitle.ass';
-});
-
-art.on('subtitleSwitch', (url) => {
-    console.info('subtitleSwitch', url);
-});

info ​

当信息面板显示或隐藏时触发

`,3),fs=s("div",{className:"run-code"},"▶ Run Code",-1),ks=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('info', (state) => {
-    console.log(state);
-});

layer ​

当自定义层显示或隐藏时触发

`,3),Ps=s("div",{className:"run-code"},"▶ Run Code",-1),Ss=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('layer', (state) => {
-    console.log(state);
-});

loading ​

当加载器显示或隐藏时触发

`,3),qs=s("div",{className:"run-code"},"▶ Run Code",-1),ws=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('loading', (state) => {
-    console.log(state);
-});

mask ​

当遮罩层显示或隐藏时触发

`,3),Rs=s("div",{className:"run-code"},"▶ Run Code",-1),Ns=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('mask', (state) => {
-    console.log(state);
-});

subtitle ​

当字幕层显示或隐藏时触发

`,3),Vs=s("div",{className:"run-code"},"▶ Run Code",-1),js=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('subtitle', (state) => {
-    console.log(state);
-});

contextmenu ​

当右键菜单显示或隐藏时触发

`,3),Is=s("div",{className:"run-code"},"▶ Run Code",-1),xs=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('contextmenu', (state) => {
-    console.log(state);
-});

control ​

当控制器显示或隐藏时触发

`,3),zs=s("div",{className:"run-code"},"▶ Run Code",-1),Os=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('control', (state) => {
-    console.log(state);
-});

setting ​

当设置面板显示或隐藏时触发

`,3),Us=s("div",{className:"run-code"},"▶ Run Code",-1),Hs=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
-
-art.on('setting', (state) => {
-    console.log(state);
-});

muted ​

当静音的状态变化时触发

`,3),Ws=s("div",{className:"run-code"},"▶ Run Code",-1),Ls=a('
js
var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n});\n\nart.on('muted', (state) => {\n    console.log(state);\n});

video:canplay ​

浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容

video:canplaythrough ​

浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束

video:complete ​

OfflineAudioContext 渲染完成

video:durationchange ​

duration 属性的值改变时触发

video:emptied ​

媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它

video:ended ​

视频停止播放，因为 media 已经到达结束点

video:error ​

获取媒体数据时出错，或者资源类型不是受支持的媒体格式

video:loadeddata ​

media 中的首帧已经完成加载

video:loadedmetadata ​

已加载元数据

video:pause ​

播放已暂停

video:play ​

播放已开始

video:playing ​

由于缺乏数据而暂停或延迟后，播放准备开始

video:progress ​

在浏览器加载资源时周期性触发

video:ratechange ​

播放速率发生变化

video:seeked ​

跳帧（seek）操作完成

video:seeking ​

跳帧（seek）操作开始

video:stalled ​

用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现

video:suspend ​

媒体数据加载已暂停

video:timeupdate ​

currentTime 属性指定的时间发生变化

video:volumechange ​

音量发生变化

video:waiting ​

由于暂时缺少数据，播放已停止

',43),$s=[r,c,t,D,y,F,i,A,C,d,b,u,h,m,_,g,v,E,T,f,k,P,S,q,w,R,N,V,j,I,x,z,O,U,H,W,L,$,B,J,G,K,M,Q,X,Y,Z,ss,as,ns,ls,ps,os,es,rs,cs,ts,Ds,ys,Fs,is,As,Cs,ds,bs,us,hs,ms,_s,gs,vs,Es,Ts,fs,ks,Ps,Ss,qs,ws,Rs,Ns,Vs,js,Is,xs,zs,Os,Us,Hs,Ws,Ls];function Bs(Js,Gs,Ks,Ms,Qs,Xs){return p(),o("div",null,$s)}const sa=l(e,[["render",Bs]]);export{Zs as __pageData,sa as default}; diff --git a/docs/document/assets/advanced_event.md.d7901aca.lean.js b/docs/document/assets/advanced_event.md.d7901aca.lean.js deleted file mode 100644 index 908e3c917..000000000 --- a/docs/document/assets/advanced_event.md.d7901aca.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as l,o as p,c as o,k as s,a as n,S as a}from"./chunks/framework.532b6b18.js";const Zs=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1688046273000}'),e={name:"advanced/event.md"},r=s("h1",{id:"实例事件",tabindex:"-1"},[n("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),c=s("p",null,[n("播放器的事件分为两种，一种视频的 "),s("code",null,"原生事件"),n(" (前缀 "),s("code",null,"video:"),n(")，另外一种是 "),s("code",null,"自定义事件")],-1),t=s("p",null,"监听事件：",-1),D=s("div",{className:"run-code"},"▶ Run Code",-1),y=a("",2),F=s("div",{className:"run-code"},"▶ Run Code",-1),i=a("",2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a("",2),d=s("div",{className:"run-code"},"▶ Run Code",-1),b=a("",4),u=s("div",{className:"run-code"},"▶ Run Code",-1),h=a("",3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=a("",3),g=s("div",{className:"run-code"},"▶ Run Code",-1),v=a("",3),E=s("div",{className:"run-code"},"▶ Run Code",-1),T=a("",3),f=s("div",{className:"run-code"},"▶ Run Code",-1),k=a("",3),P=s("div",{className:"run-code"},"▶ Run Code",-1),S=a("",3),q=s("div",{className:"run-code"},"▶ Run Code",-1),w=a("",3),R=s("div",{className:"run-code"},"▶ Run Code",-1),N=a("",3),V=s("div",{className:"run-code"},"▶ Run Code",-1),j=a("",3),I=s("div",{className:"run-code"},"▶ Run Code",-1),x=a("",3),z=s("div",{className:"run-code"},"▶ Run Code",-1),O=a("",3),U=s("div",{className:"run-code"},"▶ Run Code",-1),H=a("",3),W=s("div",{className:"run-code"},"▶ Run Code",-1),L=a("",3),$=s("div",{className:"run-code"},"▶ Run Code",-1),B=a("",3),J=s("div",{className:"run-code"},"▶ Run Code",-1),G=a("",3),K=s("div",{className:"run-code"},"▶ Run Code",-1),M=a("",3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=a("",3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=a("",3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),as=a("",3),ns=s("div",{className:"run-code"},"▶ Run Code",-1),ls=a("",3),ps=s("div",{className:"run-code"},"▶ Run Code",-1),os=a("",3),es=s("div",{className:"run-code"},"▶ Run Code",-1),rs=a("",3),cs=s("div",{className:"run-code"},"▶ Run Code",-1),ts=a("",3),Ds=s("div",{className:"run-code"},"▶ Run Code",-1),ys=a("",3),Fs=s("div",{className:"run-code"},"▶ Run Code",-1),is=a("",3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Cs=a("",3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),bs=a("",3),us=s("div",{className:"run-code"},"▶ Run Code",-1),hs=a("",3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=a("",3),gs=s("div",{className:"run-code"},"▶ Run Code",-1),vs=a("",3),Es=s("div",{className:"run-code"},"▶ Run Code",-1),Ts=a("",3),fs=s("div",{className:"run-code"},"▶ Run Code",-1),ks=a("",3),Ps=s("div",{className:"run-code"},"▶ Run Code",-1),Ss=a("",3),qs=s("div",{className:"run-code"},"▶ Run Code",-1),ws=a("",3),Rs=s("div",{className:"run-code"},"▶ Run Code",-1),Ns=a("",3),Vs=s("div",{className:"run-code"},"▶ Run Code",-1),js=a("",3),Is=s("div",{className:"run-code"},"▶ Run Code",-1),xs=a("",3),zs=s("div",{className:"run-code"},"▶ Run Code",-1),Os=a("",3),Us=s("div",{className:"run-code"},"▶ Run Code",-1),Hs=a("",3),Ws=s("div",{className:"run-code"},"▶ Run Code",-1),Ls=a("",43),$s=[r,c,t,D,y,F,i,A,C,d,b,u,h,m,_,g,v,E,T,f,k,P,S,q,w,R,N,V,j,I,x,z,O,U,H,W,L,$,B,J,G,K,M,Q,X,Y,Z,ss,as,ns,ls,ps,os,es,rs,cs,ts,Ds,ys,Fs,is,As,Cs,ds,bs,us,hs,ms,_s,gs,vs,Es,Ts,fs,ks,Ps,Ss,qs,ws,Rs,Ns,Vs,js,Is,xs,zs,Os,Us,Hs,Ws,Ls];function Bs(Js,Gs,Ks,Ms,Qs,Xs){return p(),o("div",null,$s)}const sa=l(e,[["render",Bs]]);export{Zs as __pageData,sa as default}; diff --git a/docs/document/assets/advanced_global.md.7dd7211c.js b/docs/document/assets/advanced_global.md.7dd7211c.js deleted file mode 100644 index a53a30dbf..000000000 --- a/docs/document/assets/advanced_global.md.7dd7211c.js +++ /dev/null @@ -1,217 +0,0 @@ -import{_ as n,o as l,c as p,S as s,k as a}from"./chunks/framework.532b6b18.js";const gs=JSON.parse('{"title":"全局属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/global.md","filePath":"advanced/global.md","lastUpdated":1692979406000}'),o={name:"advanced/global.md"},e=s('

全局属性 ​

这里的 全局属性 也是指挂载在 构造函数 的 一级属性，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到

DEBUG ​

是否开始 debug 模式，可以打印出视频全部的内置事件，默认关闭

',4),r=a("div",{className:"run-code"},"▶ Run Code",-1),c=s(`
js
Artplayer.DEBUG = true;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

CONTEXTMENU ​

是否开启右键菜单，默认开启

`,3),t=a("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
Artplayer.CONTEXTMENU = false;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

NOTICE_TIME ​

提示信息的显示时长，单位为毫秒，默认为 2000

`,3),y=a("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
Artplayer.NOTICE_TIME = 5000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

SETTING_WIDTH ​

设置面板的默认宽度，单位为像素，默认为 250

`,3),C=a("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
Artplayer.SETTING_WIDTH = 300;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});

SETTING_ITEM_WIDTH ​

设置面板的设置项的默认宽度，单位为像素，默认为 200

`,3),i=a("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
Artplayer.SETTING_ITEM_WIDTH = 300;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});

SETTING_ITEM_HEIGHT ​

设置面板的设置项的默认高度，单位为像素，默认为 35

`,3),b=a("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
Artplayer.SETTING_ITEM_HEIGHT = 40;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});

RESIZE_TIME ​

resize 事件的节流时间，单位为毫秒，默认为 200

`,3),_=a("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
Artplayer.RESIZE_TIME = 500;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('resize', () => {
-    console.log('resize');
-});

SCROLL_TIME ​

scroll 事件的节流时间，单位为毫秒，默认为 200

`,3),h=a("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
Artplayer.SCROLL_TIME = 500;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('scroll', () => {
-    console.log('scroll');
-});

SCROLL_GAP ​

view 事件的边界容差距离，单位为像素，默认为 50

`,3),E=a("div",{className:"run-code"},"▶ Run Code",-1),v=s(`
js
Artplayer.SCROLL_GAP = 100;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('scroll', () => {
-    console.log('scroll');
-});

AUTO_PLAYBACK_MAX ​

自动回放功能的最大记录数，默认为 10

`,3),I=a("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
Artplayer.AUTO_PLAYBACK_MAX = 20;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});

AUTO_PLAYBACK_MIN ​

自动回放功能的最小记录时长，单位为秒，默认为 5

`,3),S=a("div",{className:"run-code"},"▶ Run Code",-1),P=s(`
js
Artplayer.AUTO_PLAYBACK_MIN = 10;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});

AUTO_PLAYBACK_TIMEOUT ​

自动回放功能的隐藏延迟时长，单位为毫秒，默认为 3000

`,3),R=a("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});

RECONNECT_TIME_MAX ​

发生连接错误时，自动连接的最大次数，默认为 5

`,3),k=a("div",{className:"run-code"},"▶ Run Code",-1),O=s(`
js
Artplayer.RECONNECT_TIME_MAX = 10;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});

RECONNECT_SLEEP_TIME ​

发生连接错误时，自动连接的延迟时间，单位为毫秒，默认为 1000

`,3),w=a("div",{className:"run-code"},"▶ Run Code",-1),L=s(`
js
Artplayer.RECONNECT_SLEEP_TIME = 3000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});

CONTROL_HIDE_TIME ​

底部控制栏的自动隐藏的延迟时间，单位为毫秒，默认为 3000

`,3),V=a("div",{className:"run-code"},"▶ Run Code",-1),f=s(`
js
Artplayer.CONTROL_HIDE_TIME = 5000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

DBCLICK_TIME ​

双击事件的延迟事件，单位为毫秒，默认为 300

`,3),q=a("div",{className:"run-code"},"▶ Run Code",-1),j=s(`
js
Artplayer.DBCLICK_TIME = 500;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('dblclick', () => {
-    console.log('dblclick');
-});

DBCLICK_FULLSCREEN ​

在桌面端，是否双击切换全屏，默认为 true

`,3),M=a("div",{className:"run-code"},"▶ Run Code",-1),x=s(`
js
Artplayer.DBCLICK_FULLSCREEN = false;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

MOBILE_DBCLICK_PLAY ​

在移动端，是否双击切换播放暂停，默认为 true

`,3),B=a("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
Artplayer.MOBILE_DBCLICK_PLAY = false;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

MOBILE_CLICK_PLAY ​

在移动端，是否单击切换播放暂停，默认为 false

`,3),K=a("div",{className:"run-code"},"▶ Run Code",-1),G=s(`
js
Artplayer.MOBILE_CLICK_PLAY = true;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

AUTO_ORIENTATION_TIME ​

在移动端，自动旋屏的延迟时间，单位为毫秒，默认为 200

`,3),Y=a("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
Artplayer.AUTO_ORIENTATION_TIME = 500;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoOrientation: true,
-});

INFO_LOOP_TIME ​

信息面板的刷新时间，单位为毫秒，默认为 1000

`,3),W=a("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
Artplayer.INFO_LOOP_TIME = 2000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.info.show = true;

FAST_FORWARD_VALUE ​

在移动端，长按加速的速率倍数，默认为 3

`,3),z=a("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
Artplayer.FAST_FORWARD_VALUE = 5;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});

FAST_FORWARD_TIME ​

在移动端，长按加速的延迟时间，单位为毫秒，默认为 1000

`,3),Z=a("div",{className:"run-code"},"▶ Run Code",-1),J=s(`
js
Artplayer.FAST_FORWARD_TIME = 2000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});

TOUCH_MOVE_RATIO ​

在移动端，左右滑动进度的速率倍数，默认为 0.5

`,3),Q=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
Artplayer.TOUCH_MOVE_RATIO = 1;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

VOLUME_STEP ​

快捷键调节音量的幅度比例，默认为 0.1

`,3),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s(`
js
Artplayer.VOLUME_STEP = 0.2;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

SEEK_STEP ​

快捷键调节播放进度的幅度，单位为秒，默认为 5

`,3),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
Artplayer.SEEK_STEP = 10;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

PLAYBACK_RATE ​

内置播放速率的列表，默认为 [0.5, 0.75, 1, 1.25, 1.5, 2]

`,3),os=a("div",{className:"run-code"},"▶ Run Code",-1),es=s(`
js
Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    playbackRate: true,
-});
-
-art.contextmenu.show = true;
-art.setting.show = true;

ASPECT_RATIO ​

内置视频长宽比的列表，默认为 ['default', '4:3', '16:9']

`,3),rs=a("div",{className:"run-code"},"▶ Run Code",-1),cs=s(`
js
Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    aspectRatio: true,
-});
-
-art.contextmenu.show = true;
-art.setting.show = true;

FLIP ​

内置视频翻转的列表，默认为 ['normal', 'horizontal', 'vertical']

`,3),ts=a("div",{className:"run-code"},"▶ Run Code",-1),Ds=s(`
js
Artplayer.FLIP = ['normal', 'horizontal'];
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-});
-
-art.contextmenu.show = true;
-art.setting.show = true;

FULLSCREEN_WEB_IN_BODY ​

网页全屏时，是否把播放器挂在在 body 元素下，默认为 false

`,3),ys=a("div",{className:"run-code"},"▶ Run Code",-1),Fs=s(`
js
Artplayer.FULLSCREEN_WEB_IN_BODY = true;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});

LOG_VERSION ​

设置是否打印播放器版本，默认为 true

`,3),Cs=a("div",{className:"run-code"},"▶ Run Code",-1),As=s(`
js
Artplayer.LOG_VERSION = false;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

USE_RAF ​

设置是否使用 requestAnimationFrame ，默认为 false，目前主要用于进度条的平滑效果

`,3),is=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
Artplayer.USE_RAF = true;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    miniProgressBar: true,
-});
`,1),bs=[e,r,c,t,D,y,F,C,A,i,d,b,u,_,m,h,T,E,v,I,g,S,P,R,N,k,O,w,L,V,f,q,j,M,x,B,U,K,G,Y,H,W,X,z,$,Z,J,Q,ss,as,ns,ls,ps,os,es,rs,cs,ts,Ds,ys,Fs,Cs,As,is,ds];function us(_s,ms,hs,Ts,Es,vs){return l(),p("div",null,bs)}const Ss=n(o,[["render",us]]);export{gs as __pageData,Ss as default}; diff --git a/docs/document/assets/advanced_global.md.7dd7211c.lean.js b/docs/document/assets/advanced_global.md.7dd7211c.lean.js deleted file mode 100644 index 5d10cc66b..000000000 --- a/docs/document/assets/advanced_global.md.7dd7211c.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as n,o as l,c as p,S as s,k as a}from"./chunks/framework.532b6b18.js";const gs=JSON.parse('{"title":"全局属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/global.md","filePath":"advanced/global.md","lastUpdated":1692979406000}'),o={name:"advanced/global.md"},e=s("",4),r=a("div",{className:"run-code"},"▶ Run Code",-1),c=s("",3),t=a("div",{className:"run-code"},"▶ Run Code",-1),D=s("",3),y=a("div",{className:"run-code"},"▶ Run Code",-1),F=s("",3),C=a("div",{className:"run-code"},"▶ Run Code",-1),A=s("",3),i=a("div",{className:"run-code"},"▶ Run Code",-1),d=s("",3),b=a("div",{className:"run-code"},"▶ Run Code",-1),u=s("",3),_=a("div",{className:"run-code"},"▶ Run Code",-1),m=s("",3),h=a("div",{className:"run-code"},"▶ Run Code",-1),T=s("",3),E=a("div",{className:"run-code"},"▶ Run Code",-1),v=s("",3),I=a("div",{className:"run-code"},"▶ Run Code",-1),g=s("",3),S=a("div",{className:"run-code"},"▶ Run Code",-1),P=s("",3),R=a("div",{className:"run-code"},"▶ Run Code",-1),N=s("",3),k=a("div",{className:"run-code"},"▶ Run Code",-1),O=s("",3),w=a("div",{className:"run-code"},"▶ Run Code",-1),L=s("",3),V=a("div",{className:"run-code"},"▶ Run Code",-1),f=s("",3),q=a("div",{className:"run-code"},"▶ Run Code",-1),j=s("",3),M=a("div",{className:"run-code"},"▶ Run Code",-1),x=s("",3),B=a("div",{className:"run-code"},"▶ Run Code",-1),U=s("",3),K=a("div",{className:"run-code"},"▶ Run Code",-1),G=s("",3),Y=a("div",{className:"run-code"},"▶ Run Code",-1),H=s("",3),W=a("div",{className:"run-code"},"▶ Run Code",-1),X=s("",3),z=a("div",{className:"run-code"},"▶ Run Code",-1),$=s("",3),Z=a("div",{className:"run-code"},"▶ Run Code",-1),J=s("",3),Q=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",3),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s("",3),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",3),os=a("div",{className:"run-code"},"▶ Run Code",-1),es=s("",3),rs=a("div",{className:"run-code"},"▶ Run Code",-1),cs=s("",3),ts=a("div",{className:"run-code"},"▶ Run Code",-1),Ds=s("",3),ys=a("div",{className:"run-code"},"▶ Run Code",-1),Fs=s("",3),Cs=a("div",{className:"run-code"},"▶ Run Code",-1),As=s("",3),is=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",1),bs=[e,r,c,t,D,y,F,C,A,i,d,b,u,_,m,h,T,E,v,I,g,S,P,R,N,k,O,w,L,V,f,q,j,M,x,B,U,K,G,Y,H,W,X,z,$,Z,J,Q,ss,as,ns,ls,ps,os,es,rs,cs,ts,Ds,ys,Fs,Cs,As,is,ds];function us(_s,ms,hs,Ts,Es,vs){return l(),p("div",null,bs)}const Ss=n(o,[["render",us]]);export{gs as __pageData,Ss as default}; diff --git a/docs/document/assets/advanced_global.md.NO7cToKE.js b/docs/document/assets/advanced_global.md.NO7cToKE.js new file mode 100644 index 000000000..af6dfb5a3 --- /dev/null +++ b/docs/document/assets/advanced_global.md.NO7cToKE.js @@ -0,0 +1,217 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const Bs=JSON.parse('{"title":"全局属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/global.md","filePath":"advanced/global.md","lastUpdated":1692979406000}'),p={name:"advanced/global.md"},e=s('

全局属性 ​

这里的 全局属性 也是指挂载在 构造函数 的 一级属性，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到

DEBUG ​

是否开始 debug 模式，可以打印出视频全部的内置事件，默认关闭

',4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
Artplayer.DEBUG = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

CONTEXTMENU ​

是否开启右键菜单，默认开启

`,3),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
Artplayer.CONTEXTMENU = false;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

NOTICE_TIME ​

提示信息的显示时长，单位为毫秒，默认为 2000

`,3),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
Artplayer.NOTICE_TIME = 5000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

SETTING_WIDTH ​

设置面板的默认宽度，单位为像素，默认为 250

`,3),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
Artplayer.SETTING_WIDTH = 300;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});

SETTING_ITEM_WIDTH ​

设置面板的设置项的默认宽度，单位为像素，默认为 200

`,3),y=i("div",{className:"run-code"},"▶ Run Code",-1),o=s(`
js
Artplayer.SETTING_ITEM_WIDTH = 300;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});

SETTING_ITEM_HEIGHT ​

设置面板的设置项的默认高度，单位为像素，默认为 35

`,3),b=i("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
Artplayer.SETTING_ITEM_HEIGHT = 40;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});

RESIZE_TIME ​

resize 事件的节流时间，单位为毫秒，默认为 200

`,3),F=i("div",{className:"run-code"},"▶ Run Code",-1),_=s(`
js
Artplayer.RESIZE_TIME = 500;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('resize', () => {
+    console.log('resize');
+});

SCROLL_TIME ​

scroll 事件的节流时间，单位为毫秒，默认为 200

`,3),m=i("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
Artplayer.SCROLL_TIME = 500;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('scroll', () => {
+    console.log('scroll');
+});

SCROLL_GAP ​

view 事件的边界容差距离，单位为像素，默认为 50

`,3),A=i("div",{className:"run-code"},"▶ Run Code",-1),v=s(`
js
Artplayer.SCROLL_GAP = 100;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('scroll', () => {
+    console.log('scroll');
+});

AUTO_PLAYBACK_MAX ​

自动回放功能的最大记录数，默认为 10

`,3),T=i("div",{className:"run-code"},"▶ Run Code",-1),B=s(`
js
Artplayer.AUTO_PLAYBACK_MAX = 20;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});

AUTO_PLAYBACK_MIN ​

自动回放功能的最小记录时长，单位为秒，默认为 5

`,3),D=i("div",{className:"run-code"},"▶ Run Code",-1),I=s(`
js
Artplayer.AUTO_PLAYBACK_MIN = 10;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});

AUTO_PLAYBACK_TIMEOUT ​

自动回放功能的隐藏延迟时长，单位为毫秒，默认为 3000

`,3),S=i("div",{className:"run-code"},"▶ Run Code",-1),P=s(`
js
Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});

RECONNECT_TIME_MAX ​

发生连接错误时，自动连接的最大次数，默认为 5

`,3),R=i("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
Artplayer.RECONNECT_TIME_MAX = 10;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});

RECONNECT_SLEEP_TIME ​

发生连接错误时，自动连接的延迟时间，单位为毫秒，默认为 1000

`,3),O=i("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
Artplayer.RECONNECT_SLEEP_TIME = 3000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});

CONTROL_HIDE_TIME ​

底部控制栏的自动隐藏的延迟时间，单位为毫秒，默认为 3000

`,3),L=i("div",{className:"run-code"},"▶ Run Code",-1),V=s(`
js
Artplayer.CONTROL_HIDE_TIME = 5000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

DBCLICK_TIME ​

双击事件的延迟事件，单位为毫秒，默认为 300

`,3),f=i("div",{className:"run-code"},"▶ Run Code",-1),q=s(`
js
Artplayer.DBCLICK_TIME = 500;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('dblclick', () => {
+    console.log('dblclick');
+});

DBCLICK_FULLSCREEN ​

在桌面端，是否双击切换全屏，默认为 true

`,3),j=i("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
Artplayer.DBCLICK_FULLSCREEN = false;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

MOBILE_DBCLICK_PLAY ​

在移动端，是否双击切换播放暂停，默认为 true

`,3),x=i("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
Artplayer.MOBILE_DBCLICK_PLAY = false;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

MOBILE_CLICK_PLAY ​

在移动端，是否单击切换播放暂停，默认为 false

`,3),K=i("div",{className:"run-code"},"▶ Run Code",-1),G=s(`
js
Artplayer.MOBILE_CLICK_PLAY = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

AUTO_ORIENTATION_TIME ​

在移动端，自动旋屏的延迟时间，单位为毫秒，默认为 200

`,3),Y=i("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
Artplayer.AUTO_ORIENTATION_TIME = 500;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoOrientation: true,
+});

INFO_LOOP_TIME ​

信息面板的刷新时间，单位为毫秒，默认为 1000

`,3),W=i("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
Artplayer.INFO_LOOP_TIME = 2000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.info.show = true;

FAST_FORWARD_VALUE ​

在移动端，长按加速的速率倍数，默认为 3

`,3),z=i("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
Artplayer.FAST_FORWARD_VALUE = 5;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});

FAST_FORWARD_TIME ​

在移动端，长按加速的延迟时间，单位为毫秒，默认为 1000

`,3),Z=i("div",{className:"run-code"},"▶ Run Code",-1),J=s(`
js
Artplayer.FAST_FORWARD_TIME = 2000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});

TOUCH_MOVE_RATIO ​

在移动端，左右滑动进度的速率倍数，默认为 0.5

`,3),Q=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
Artplayer.TOUCH_MOVE_RATIO = 1;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

VOLUME_STEP ​

快捷键调节音量的幅度比例，默认为 0.1

`,3),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s(`
js
Artplayer.VOLUME_STEP = 0.2;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

SEEK_STEP ​

快捷键调节播放进度的幅度，单位为秒，默认为 5

`,3),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s(`
js
Artplayer.SEEK_STEP = 10;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

PLAYBACK_RATE ​

内置播放速率的列表，默认为 [0.5, 0.75, 1, 1.25, 1.5, 2]

`,3),ps=i("div",{className:"run-code"},"▶ Run Code",-1),es=s(`
js
Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    playbackRate: true,
+});
+
+art.contextmenu.show = true;
+art.setting.show = true;

ASPECT_RATIO ​

内置视频长宽比的列表，默认为 ['default', '4:3', '16:9']

`,3),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s(`
js
Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    aspectRatio: true,
+});
+
+art.contextmenu.show = true;
+art.setting.show = true;

FLIP ​

内置视频翻转的列表，默认为 ['normal', 'horizontal', 'vertical']

`,3),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s(`
js
Artplayer.FLIP = ['normal', 'horizontal'];
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+});
+
+art.contextmenu.show = true;
+art.setting.show = true;

FULLSCREEN_WEB_IN_BODY ​

网页全屏时，是否把播放器挂在在 body 元素下，默认为 false

`,3),Es=i("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
Artplayer.FULLSCREEN_WEB_IN_BODY = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});

LOG_VERSION ​

设置是否打印播放器版本，默认为 true

`,3),cs=i("div",{className:"run-code"},"▶ Run Code",-1),gs=s(`
js
Artplayer.LOG_VERSION = false;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

USE_RAF ​

设置是否使用 requestAnimationFrame ，默认为 false，目前主要用于进度条的平滑效果

`,3),ys=i("div",{className:"run-code"},"▶ Run Code",-1),os=s(`
js
Artplayer.USE_RAF = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});
`,1),bs=[e,h,t,k,r,E,d,c,g,y,o,b,u,F,_,m,C,A,v,T,B,D,I,S,P,R,N,O,w,L,V,f,q,j,M,x,U,K,G,Y,H,W,X,z,$,Z,J,Q,ss,is,as,ns,ls,ps,es,hs,ts,ks,rs,Es,ds,cs,gs,ys,os];function us(Fs,_s,ms,Cs,As,vs){return n(),l("div",null,bs)}const Ds=a(p,[["render",us]]);export{Bs as __pageData,Ds as default}; diff --git a/docs/document/assets/advanced_global.md.NO7cToKE.lean.js b/docs/document/assets/advanced_global.md.NO7cToKE.lean.js new file mode 100644 index 000000000..213cc5d48 --- /dev/null +++ b/docs/document/assets/advanced_global.md.NO7cToKE.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const Bs=JSON.parse('{"title":"全局属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/global.md","filePath":"advanced/global.md","lastUpdated":1692979406000}'),p={name:"advanced/global.md"},e=s("",4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",3),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s("",3),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",3),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s("",3),y=i("div",{className:"run-code"},"▶ Run Code",-1),o=s("",3),b=i("div",{className:"run-code"},"▶ Run Code",-1),u=s("",3),F=i("div",{className:"run-code"},"▶ Run Code",-1),_=s("",3),m=i("div",{className:"run-code"},"▶ Run Code",-1),C=s("",3),A=i("div",{className:"run-code"},"▶ Run Code",-1),v=s("",3),T=i("div",{className:"run-code"},"▶ Run Code",-1),B=s("",3),D=i("div",{className:"run-code"},"▶ Run Code",-1),I=s("",3),S=i("div",{className:"run-code"},"▶ Run Code",-1),P=s("",3),R=i("div",{className:"run-code"},"▶ Run Code",-1),N=s("",3),O=i("div",{className:"run-code"},"▶ Run Code",-1),w=s("",3),L=i("div",{className:"run-code"},"▶ Run Code",-1),V=s("",3),f=i("div",{className:"run-code"},"▶ Run Code",-1),q=s("",3),j=i("div",{className:"run-code"},"▶ Run Code",-1),M=s("",3),x=i("div",{className:"run-code"},"▶ Run Code",-1),U=s("",3),K=i("div",{className:"run-code"},"▶ Run Code",-1),G=s("",3),Y=i("div",{className:"run-code"},"▶ Run Code",-1),H=s("",3),W=i("div",{className:"run-code"},"▶ Run Code",-1),X=s("",3),z=i("div",{className:"run-code"},"▶ Run Code",-1),$=s("",3),Z=i("div",{className:"run-code"},"▶ Run Code",-1),J=s("",3),Q=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",3),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s("",3),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s("",3),ps=i("div",{className:"run-code"},"▶ Run Code",-1),es=s("",3),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s("",3),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s("",3),Es=i("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",3),cs=i("div",{className:"run-code"},"▶ Run Code",-1),gs=s("",3),ys=i("div",{className:"run-code"},"▶ Run Code",-1),os=s("",1),bs=[e,h,t,k,r,E,d,c,g,y,o,b,u,F,_,m,C,A,v,T,B,D,I,S,P,R,N,O,w,L,V,f,q,j,M,x,U,K,G,Y,H,W,X,z,$,Z,J,Q,ss,is,as,ns,ls,ps,es,hs,ts,ks,rs,Es,ds,cs,gs,ys,os];function us(Fs,_s,ms,Cs,As,vs){return n(),l("div",null,bs)}const Ds=a(p,[["render",us]]);export{Bs as __pageData,Ds as default}; diff --git a/docs/document/assets/advanced_plugin.md.b71cd634.js b/docs/document/assets/advanced_plugin.md.b71cd634.js deleted file mode 100644 index 8d44ad58c..000000000 --- a/docs/document/assets/advanced_plugin.md.b71cd634.js +++ /dev/null @@ -1,99 +0,0 @@ -import{_ as l,o as p,c as o,k as s,a as n,S as a}from"./chunks/framework.532b6b18.js";const v=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/plugin.md","filePath":"advanced/plugin.md","lastUpdated":1673441101000}'),e={name:"advanced/plugin.md"},r=s("h1",{id:"编写插件",tabindex:"-1"},[n("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-label":'Permalink to "编写插件"'},"​")],-1),c=s("p",null,[n("但你已经知道播放器的"),s("code",null,"属性"),n(", "),s("code",null,"方法"),n("和"),s("code",null,"事件"),n("后，再编写插件是非常简单的事")],-1),t=s("p",null,"可以在实例化的时候加载插件的函数",-1),F=s("div",{className:"run-code"},"▶ Run Code",-1),D=a(`
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [myPlugin],
-});
-
-art.on('ready', () => {
-    console.info(art.plugins.myPlugin);
-});

可以在实例化之后再加载插件的函数

`,2),y=s("div",{className:"run-code"},"▶ Run Code",-1),i=a(`
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.plugins.add(myPlugin);
-
-art.on('ready', () => {
-    console.info(art.plugins.myPlugin);
-});

例如我想写一个在视频暂停后，显示一个图片广告的插件

`,2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a(`
js
function adsPlugin(option) {
-    return (art) => {
-        art.layers.add({
-            name: 'ads',
-            html: \`<img style="width: 100px" src="\${option.url}">\`,
-            style: {
-                display: 'none',
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-            },
-        });
-
-        function show() {
-            art.layers.ads.style.display = 'block';
-        }
-
-        function hide() {
-            art.layers.ads.style.display = 'none';
-        }
-
-        art.controls.add({
-            name: 'hide-ads',
-            position: 'right',
-            html: 'Hide Ads',
-            tooltip: 'Hide Ads',
-            click: hide,
-            style: {
-                marginRight: '20px'
-            }
-        });
-
-        art.controls.add({
-            name: 'show-ads',
-            position: 'right',
-            html: 'Show Ads',
-            tooltip: 'Show Ads',
-            click: show,
-        });
-
-        art.on('play', hide);
-        art.on('pause', show);
-
-        return {
-            name: 'adsPlugin',
-            show,
-            hide
-        };
-    }
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        adsPlugin({
-            url: '/assets/sample/layer.png'
-        })
-    ],
-});
`,1),b=[r,c,t,F,D,y,i,A,C];function u(m,d,h,_,g,E){return p(),o("div",null,b)}const P=l(e,[["render",u]]);export{v as __pageData,P as default}; diff --git a/docs/document/assets/advanced_plugin.md.b71cd634.lean.js b/docs/document/assets/advanced_plugin.md.b71cd634.lean.js deleted file mode 100644 index d2bbd704c..000000000 --- a/docs/document/assets/advanced_plugin.md.b71cd634.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as l,o as p,c as o,k as s,a as n,S as a}from"./chunks/framework.532b6b18.js";const v=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/plugin.md","filePath":"advanced/plugin.md","lastUpdated":1673441101000}'),e={name:"advanced/plugin.md"},r=s("h1",{id:"编写插件",tabindex:"-1"},[n("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-label":'Permalink to "编写插件"'},"​")],-1),c=s("p",null,[n("但你已经知道播放器的"),s("code",null,"属性"),n(", "),s("code",null,"方法"),n("和"),s("code",null,"事件"),n("后，再编写插件是非常简单的事")],-1),t=s("p",null,"可以在实例化的时候加载插件的函数",-1),F=s("div",{className:"run-code"},"▶ Run Code",-1),D=a("",2),y=s("div",{className:"run-code"},"▶ Run Code",-1),i=a("",2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a("",1),b=[r,c,t,F,D,y,i,A,C];function u(m,d,h,_,g,E){return p(),o("div",null,b)}const P=l(e,[["render",u]]);export{v as __pageData,P as default}; diff --git a/docs/document/assets/advanced_plugin.md.u4SeaDpS.js b/docs/document/assets/advanced_plugin.md.u4SeaDpS.js new file mode 100644 index 000000000..27f02d2cd --- /dev/null +++ b/docs/document/assets/advanced_plugin.md.u4SeaDpS.js @@ -0,0 +1,99 @@ +import{_ as n,o as l,c as p,k as s,a as i,R as a}from"./chunks/framework.E60viAY0.js";const v=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/plugin.md","filePath":"advanced/plugin.md","lastUpdated":1673441101000}'),h={name:"advanced/plugin.md"},e=s("h1",{id:"编写插件",tabindex:"-1"},[i("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-label":'Permalink to "编写插件"'},"​")],-1),k=s("p",null,[i("但你已经知道播放器的"),s("code",null,"属性"),i(", "),s("code",null,"方法"),i("和"),s("code",null,"事件"),i("后，再编写插件是非常简单的事")],-1),t=s("p",null,"可以在实例化的时候加载插件的函数",-1),E=s("div",{className:"run-code"},"▶ Run Code",-1),r=a(`
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [myPlugin],
+});
+
+art.on('ready', () => {
+    console.info(art.plugins.myPlugin);
+});

可以在实例化之后再加载插件的函数

`,2),d=s("div",{className:"run-code"},"▶ Run Code",-1),g=a(`
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.plugins.add(myPlugin);
+
+art.on('ready', () => {
+    console.info(art.plugins.myPlugin);
+});

例如我想写一个在视频暂停后，显示一个图片广告的插件

`,2),c=s("div",{className:"run-code"},"▶ Run Code",-1),y=a(`
js
function adsPlugin(option) {
+    return (art) => {
+        art.layers.add({
+            name: 'ads',
+            html: \`<img style="width: 100px" src="\${option.url}">\`,
+            style: {
+                display: 'none',
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+            },
+        });
+
+        function show() {
+            art.layers.ads.style.display = 'block';
+        }
+
+        function hide() {
+            art.layers.ads.style.display = 'none';
+        }
+
+        art.controls.add({
+            name: 'hide-ads',
+            position: 'right',
+            html: 'Hide Ads',
+            tooltip: 'Hide Ads',
+            click: hide,
+            style: {
+                marginRight: '20px'
+            }
+        });
+
+        art.controls.add({
+            name: 'show-ads',
+            position: 'right',
+            html: 'Show Ads',
+            tooltip: 'Show Ads',
+            click: show,
+        });
+
+        art.on('play', hide);
+        art.on('pause', show);
+
+        return {
+            name: 'adsPlugin',
+            show,
+            hide
+        };
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        adsPlugin({
+            url: '/assets/sample/layer.png'
+        })
+    ],
+});
`,1),b=[e,k,t,E,r,d,g,c,y];function F(u,m,o,C,B,_){return l(),p("div",null,b)}const D=n(h,[["render",F]]);export{v as __pageData,D as default}; diff --git a/docs/document/assets/advanced_plugin.md.u4SeaDpS.lean.js b/docs/document/assets/advanced_plugin.md.u4SeaDpS.lean.js new file mode 100644 index 000000000..c9a8ee1b4 --- /dev/null +++ b/docs/document/assets/advanced_plugin.md.u4SeaDpS.lean.js @@ -0,0 +1 @@ +import{_ as n,o as l,c as p,k as s,a as i,R as a}from"./chunks/framework.E60viAY0.js";const v=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/plugin.md","filePath":"advanced/plugin.md","lastUpdated":1673441101000}'),h={name:"advanced/plugin.md"},e=s("h1",{id:"编写插件",tabindex:"-1"},[i("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-label":'Permalink to "编写插件"'},"​")],-1),k=s("p",null,[i("但你已经知道播放器的"),s("code",null,"属性"),i(", "),s("code",null,"方法"),i("和"),s("code",null,"事件"),i("后，再编写插件是非常简单的事")],-1),t=s("p",null,"可以在实例化的时候加载插件的函数",-1),E=s("div",{className:"run-code"},"▶ Run Code",-1),r=a("",2),d=s("div",{className:"run-code"},"▶ Run Code",-1),g=a("",2),c=s("div",{className:"run-code"},"▶ Run Code",-1),y=a("",1),b=[e,k,t,E,r,d,g,c,y];function F(u,m,o,C,B,_){return l(),p("div",null,b)}const D=n(h,[["render",F]]);export{v as __pageData,D as default}; diff --git a/docs/document/assets/advanced_property.md.9BAfOfTo.js b/docs/document/assets/advanced_property.md.9BAfOfTo.js new file mode 100644 index 000000000..fbd20b2cc --- /dev/null +++ b/docs/document/assets/advanced_property.md.9BAfOfTo.js @@ -0,0 +1,383 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const Os=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/property.md","filePath":"advanced/property.md","lastUpdated":1700581325000}'),p={name:"advanced/property.md"},e=s('

实例属性 ​

这里的 实例属性 是指挂载在 实例 的 一级属性，比较常用

play ​

播放视频

',5),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.play();
+});

pause ​

暂停视频

`,4),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.play();
+
+    setTimeout(() => {
+        art.pause();
+    }, 3000);
+});

toggle ​

切换视频的播放和暂停

`,4),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.toggle();
+
+    setTimeout(() => {
+        art.toggle();
+    }, 3000);
+});

destroy ​

销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 html，默认为 true

`,4),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.destroy();
+});

seek ​

视频时间跳转，单位秒

`,4),y=i("div",{className:"run-code"},"▶ Run Code",-1),o=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 5;
+});

forward ​

视频时间快进，单位秒

`,4),b=i("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.forward = 5;
+});

backward ​

视频时间快退，单位秒

`,4),F=i("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 5;
+
+    setTimeout(() => {
+        art.backward = 2;
+    }, 3000);
+});

volume ​

设置和获取视频音量，范围在：[0, 1]

`,4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.volume);
+    art.volume = 0.5;
+    console.info(art.volume);
+});

url ​

设置和获取视频地址

`,4),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4?t=0';
+});

switch ​

设置视频地址，设置时和 art.url 类似，但会执行一些优化操作

`,4),B=i("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switch = '/assets/sample/video.mp4?t=0';
+    }, 3000);
+});

switchUrl ​

设置视频地址，设置时和 art.url 类似，但会执行一些优化操作

`,4),D=i("div",{className:"run-code"},"▶ Run Code",-1),S=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchUrl('/assets/sample/video.mp4?t=0');
+    }, 3000);
+});

提示

art.switch 和 art.switchUrl 的功能是一样的，只是 art.switchUrl 方法会返回 Promise，当 resolve 时表示新地址是可以播放，reject 时表示新地址加载错误

switchQuality ​

设置视频画质地址，和 art.switchUrl 类似，但会带上之前的播放进度

`,5),P=i("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchQuality('/assets/sample/video.mp4?t=0');
+    }, 3000);
+});

muted ​

设置和获取视频是否静音

`,4),f=i("div",{className:"run-code"},"▶ Run Code",-1),q=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.muted);
+    art.muted = true;
+    console.info(art.muted);
+});

currentTime ​

设置和获取视频当前时间，设置时间时和 seek 类似，但它不会触发额外的事件

`,4),R=i("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.currentTime);
+    art.currentTime = 5;
+    console.info(art.currentTime);
+});

duration ​

获取视频时长

`,4),V=i("div",{className:"run-code"},"▶ Run Code",-1),I=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.duration);
+});

提示

有的视频是没有时长的，例如直播中的视频或者没被解码完成的视频，这个时候获取的时长会是 0

screenshot ​

下载当前视频帧的截图

`,5),j=i("div",{className:"run-code"},"▶ Run Code",-1),x=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.screenshot();
+});

getDataURL ​

获取当前视频帧的截图的base64地址，返回的是一个 Promise

`,4),G=i("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', async () => {
+    const url = await art.getDataURL();
+	console.info(url)
+});

getBlobUrl ​

获取当前视频帧的截图的blob地址，返回的是一个 Promise

`,4),z=i("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', async () => {
+    const url = await art.getBlobUrl();
+    console.info(url);
+});

fullscreen ​

设置和获取播放器窗口全屏

`,4),L=i("div",{className:"run-code"},"▶ Run Code",-1),O=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'Fullscreen Switch',
+            click: function () {
+                art.fullscreen = !art.fullscreen;
+            },
+        },
+    ],
+});

提示

由于浏览器安全机制，触发窗口全屏前，页面必须先存在交互（例如用户点击过页面）

fullscreenWeb ​

设置和获取播放器网页全屏

`,5),W=i("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
+
+art.on('ready', () => {
+    art.fullscreenWeb = true;
+
+    setTimeout(() => {
+        art.fullscreenWeb = false;
+    }, 3000);
+});

pip ​

设置和获取播放器画中画模式

`,4),M=i("div",{className:"run-code"},"▶ Run Code",-1),Q=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'PIP',
+            click: function () {
+                art.pip = !art.pip;
+            },
+        },
+    ],
+});

提示

由于浏览器安全机制，触发画中画前，页面必须先存在交互（例如用户点击过页面）

poster ​

设置和获取视频海报，只有在视频播放前才能看到海报效果

`,5),J=i("div",{className:"run-code"},"▶ Run Code",-1),K=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    poster: '/assets/sample/poster.jpg',
+});
+
+art.on('ready', () => {
+    console.info(art.poster);
+    art.poster = '/assets/sample/poster.jpg?t=0';
+    console.info(art.poster);
+});

mini ​

设置和获取播放器迷你模式

`,4),X=i("div",{className:"run-code"},"▶ Run Code",-1),Y=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.mini = true;
+});

playing ​

获取视频是否正在播放中

`,4),Z=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    console.info(art.playing);
+});

autoSize ​

设置视频是否自适应尺寸

`,4),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.autoSize();
+});

rect ​

获取播放器的尺寸和坐标信息

`,4),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(JSON.stringify(art.rect));
+});

提示

尺寸和坐标信息是通过 getBoundingClientRect 获取的

flip ​

设置和获取播放器翻转，支持normal, horizontal, vertical

`,5),ps=i("div",{className:"run-code"},"▶ Run Code",-1),es=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.flip);
+    art.flip = 'horizontal';
+    console.info(art.flip);
+});

playbackRate ​

设置和获取播放器播放速度

`,4),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.playbackRate);
+    art.playbackRate = 2;
+    console.info(art.playbackRate);
+});

aspectRatio ​

设置和获取播放器长宽比

`,4),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.aspectRatio);
+    art.aspectRatio = '16:9';
+    console.info(art.aspectRatio);
+});

autoHeight ​

当容器只有宽度，该属性可以自动计算出并设置视频的高度

`,4),Es=i("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.autoHeight();
+});
+
+art.on('resize', () => {
+    art.autoHeight();
+});

提示

当你的容器只有宽度，但不知道具体高度时，这个属性很有用，它能自动计算出视频的高度，但你需要确定设置这个属性的时机

attr ​

动态获取和设置 video 元素的属性

`,5),cs=i("div",{className:"run-code"},"▶ Run Code",-1),gs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.attr('playsInline'));
+    art.attr('playsInline', true);
+    console.info(art.attr('playsInline'));
+});

type ​

动态获取和设置视频类型

`,4),ys=i("div",{className:"run-code"},"▶ Run Code",-1),os=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.type);
+    art.type = 'm3u8';
+    console.info(art.type);
+});

theme ​

动态获取和设置播放器主题颜色

`,4),bs=i("div",{className:"run-code"},"▶ Run Code",-1),us=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.theme);
+    art.theme = '#000';
+    console.info(art.theme);
+});

airplay ​

开启隔空播放

`,4),Fs=i("div",{className:"run-code"},"▶ Run Code",-1),ms=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'AirPlay',
+            click: function () {
+                art.airplay();
+            },
+        },
+    ],
+});

loaded ​

视频缓存的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用

`,4),_s=i("div",{className:"run-code"},"▶ Run Code",-1),Cs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('video:timeupdate', () => {
+    console.info(art.loaded);
+});

played ​

视频播放的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用

`,4),vs=i("div",{className:"run-code"},"▶ Run Code",-1),As=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('video:timeupdate', () => {
+    console.info(art.played);
+});

proxy ​

DOM 事件的代理函数，实质上代理了 addEventListener 和 removeEventListener, 当使用 proxy 来处理事件，播放器销毁时也会自动销毁该事件

`,4),Bs=i("div",{className:"run-code"},"▶ Run Code",-1),Ts=s(`
js
var container = document.querySelector('.artplayer-app');
+
+var art = new Artplayer({
+	container: container,
+	url: '/assets/sample/video.mp4',
+});
+
+art.proxy(container, 'click', event => {
+	console.info(event);
+});

提示

假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用该函数，以避免造成内存泄漏

query ​

DOM 的查询函数，类似 document.querySelector，但被查询的对象局限于当前播放器内，可以避免同类名的错误

`,5),Ds=i("div",{className:"run-code"},"▶ Run Code",-1),Ss=s(`
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
+
+console.info(art.query('.art-video'));

video ​

快捷返回播放器的 video 元素

`,4),Ps=i("div",{className:"run-code"},"▶ Run Code",-1),ws=s(`
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
+
+console.info(art.video);

cssVar ​

动态获取或设置 css 变量

`,4),fs=i("div",{className:"run-code"},"▶ Run Code",-1),qs=s(`
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.log(art.cssVar('--art-theme'));
+    art.cssVar('--art-theme', 'green');
+    console.log(art.cssVar('--art-theme'));
+});

quality ​

动态设置画质列表

`,4),Rs=i("div",{className:"run-code"},"▶ Run Code",-1),Ns=s(`
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+	quality: [
+		{
+			default: true,
+			html: 'SD 480P',
+			url: '/assets/sample/video.mp4',
+		},
+		{
+			html: 'HD 720P',
+			url: '/assets/sample/video.mp4',
+		},
+	],
+});
+
+art.on('ready', () => {
+	setTimeout(() => {
+		art.quality = [
+			{
+				default: true,
+				html: '1080P',
+				url: '/assets/sample/video.mp4',
+			},
+			{
+				html: '4K',
+				url: '/assets/sample/video.mp4',
+			},
+		];
+	}, 3000);
+})
`,1),Vs=[e,h,t,k,r,E,d,c,g,y,o,b,u,F,m,_,C,v,A,B,T,D,S,P,w,f,q,R,N,V,I,j,x,G,U,z,H,L,O,W,$,M,Q,J,K,X,Y,Z,ss,is,as,ns,ls,ps,es,hs,ts,ks,rs,Es,ds,cs,gs,ys,os,bs,us,Fs,ms,_s,Cs,vs,As,Bs,Ts,Ds,Ss,Ps,ws,fs,qs,Rs,Ns];function Is(js,xs,Gs,Us,zs,Hs){return n(),l("div",null,Vs)}const Ws=a(p,[["render",Is]]);export{Os as __pageData,Ws as default}; diff --git a/docs/document/assets/advanced_property.md.9BAfOfTo.lean.js b/docs/document/assets/advanced_property.md.9BAfOfTo.lean.js new file mode 100644 index 000000000..cd7533556 --- /dev/null +++ b/docs/document/assets/advanced_property.md.9BAfOfTo.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const Os=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/property.md","filePath":"advanced/property.md","lastUpdated":1700581325000}'),p={name:"advanced/property.md"},e=s("",5),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",4),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s("",4),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",4),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s("",4),y=i("div",{className:"run-code"},"▶ Run Code",-1),o=s("",4),b=i("div",{className:"run-code"},"▶ Run Code",-1),u=s("",4),F=i("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s("",4),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),B=i("div",{className:"run-code"},"▶ Run Code",-1),T=s("",4),D=i("div",{className:"run-code"},"▶ Run Code",-1),S=s("",5),P=i("div",{className:"run-code"},"▶ Run Code",-1),w=s("",4),f=i("div",{className:"run-code"},"▶ Run Code",-1),q=s("",4),R=i("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),V=i("div",{className:"run-code"},"▶ Run Code",-1),I=s("",5),j=i("div",{className:"run-code"},"▶ Run Code",-1),x=s("",4),G=i("div",{className:"run-code"},"▶ Run Code",-1),U=s("",4),z=i("div",{className:"run-code"},"▶ Run Code",-1),H=s("",4),L=i("div",{className:"run-code"},"▶ Run Code",-1),O=s("",5),W=i("div",{className:"run-code"},"▶ Run Code",-1),$=s("",4),M=i("div",{className:"run-code"},"▶ Run Code",-1),Q=s("",5),J=i("div",{className:"run-code"},"▶ Run Code",-1),K=s("",4),X=i("div",{className:"run-code"},"▶ Run Code",-1),Y=s("",4),Z=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s("",4),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s("",5),ps=i("div",{className:"run-code"},"▶ Run Code",-1),es=s("",4),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s("",4),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s("",4),Es=i("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",5),cs=i("div",{className:"run-code"},"▶ Run Code",-1),gs=s("",4),ys=i("div",{className:"run-code"},"▶ Run Code",-1),os=s("",4),bs=i("div",{className:"run-code"},"▶ Run Code",-1),us=s("",4),Fs=i("div",{className:"run-code"},"▶ Run Code",-1),ms=s("",4),_s=i("div",{className:"run-code"},"▶ Run Code",-1),Cs=s("",4),vs=i("div",{className:"run-code"},"▶ Run Code",-1),As=s("",4),Bs=i("div",{className:"run-code"},"▶ Run Code",-1),Ts=s("",5),Ds=i("div",{className:"run-code"},"▶ Run Code",-1),Ss=s("",4),Ps=i("div",{className:"run-code"},"▶ Run Code",-1),ws=s("",4),fs=i("div",{className:"run-code"},"▶ Run Code",-1),qs=s("",4),Rs=i("div",{className:"run-code"},"▶ Run Code",-1),Ns=s("",1),Vs=[e,h,t,k,r,E,d,c,g,y,o,b,u,F,m,_,C,v,A,B,T,D,S,P,w,f,q,R,N,V,I,j,x,G,U,z,H,L,O,W,$,M,Q,J,K,X,Y,Z,ss,is,as,ns,ls,ps,es,hs,ts,ks,rs,Es,ds,cs,gs,ys,os,bs,us,Fs,ms,_s,Cs,vs,As,Bs,Ts,Ds,Ss,Ps,ws,fs,qs,Rs,Ns];function Is(js,xs,Gs,Us,zs,Hs){return n(),l("div",null,Vs)}const Ws=a(p,[["render",Is]]);export{Os as __pageData,Ws as default}; diff --git a/docs/document/assets/advanced_property.md.cb0d16e0.js b/docs/document/assets/advanced_property.md.cb0d16e0.js deleted file mode 100644 index 9c2749b1d..000000000 --- a/docs/document/assets/advanced_property.md.cb0d16e0.js +++ /dev/null @@ -1,392 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const $s=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/property.md","filePath":"advanced/property.md","lastUpdated":1683989304000}'),o={name:"advanced/property.md"},e=s('

实例属性 ​

这里的 实例属性 是指挂载在 实例 的 一级属性，比较常用

play ​

播放视频

',5),r=n("div",{className:"run-code"},"▶ Run Code",-1),c=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    art.play();
-});

pause ​

暂停视频

`,4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    art.play();
-
-    setTimeout(() => {
-        art.pause();
-    }, 3000);
-});

toggle ​

切换视频的播放和暂停

`,4),y=n("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    art.toggle();
-
-    setTimeout(() => {
-        art.toggle();
-    }, 3000);
-});

destroy ​

销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 html，默认为 true

`,4),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.destroy();
-});

seek ​

视频时间跳转，单位秒

`,4),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 5;
-});

forward ​

视频时间快进，单位秒

`,4),b=n("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.forward = 5;
-});

backward ​

视频时间快退，单位秒

`,4),m=n("div",{className:"run-code"},"▶ Run Code",-1),h=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 5;
-
-    setTimeout(() => {
-        art.backward = 2;
-    }, 3000);
-});

volume ​

设置和获取视频音量，范围在：[0, 1]

`,4),_=n("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.volume);
-    art.volume = 0.5;
-    console.info(art.volume);
-});

url ​

设置和获取视频地址

`,4),v=n("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.url = '/assets/sample/video.mp4?t=0';
-});

switch ​

设置视频地址，设置时和 art.url 类似，但会执行一些优化操作

`,4),E=n("div",{className:"run-code"},"▶ Run Code",-1),S=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switch = '/assets/sample/video.mp4?t=0';
-    }, 3000);
-});

switchUrl ​

设置视频地址，设置时和 art.url 类似，但会执行一些优化操作

`,4),P=n("div",{className:"run-code"},"▶ Run Code",-1),k=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switchUrl('/assets/sample/video.mp4?t=0');
-    }, 3000);
-});

提示

art.switch 和 art.switchUrl 的功能是一样的，只是 art.switchUrl 方法会返回 Promise，当 resolve 时表示新地址是可以播放，reject 时表示新地址加载错误

switchQuality ​

设置视频画质地址，和 art.switchUrl 类似，但会带上之前的播放进度

`,5),w=n("div",{className:"run-code"},"▶ Run Code",-1),f=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switchQuality('/assets/sample/video.mp4?t=0');
-    }, 3000);
-});

muted ​

设置和获取视频是否静音

`,4),q=n("div",{className:"run-code"},"▶ Run Code",-1),R=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.muted);
-    art.muted = true;
-    console.info(art.muted);
-});

currentTime ​

设置和获取视频当前时间，设置时间时和 seek 类似，但它不会触发额外的事件

`,4),N=n("div",{className:"run-code"},"▶ Run Code",-1),V=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.currentTime);
-    art.currentTime = 5;
-    console.info(art.currentTime);
-});

duration ​

获取视频时长

`,4),I=n("div",{className:"run-code"},"▶ Run Code",-1),j=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.duration);
-});

提示

有的视频是没有时长的，例如直播中的视频或者没被解码完成的视频，这个时候获取的时长会是 0

screenshot ​

下载当前视频帧的截图

`,5),x=n("div",{className:"run-code"},"▶ Run Code",-1),G=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.screenshot();
-});

getDataURL ​

获取当前视频帧的截图的base64地址，返回的是一个 Promise

`,4),B=n("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', async () => {
-    const url = await art.getDataURL();
-	console.info(url)
-});

getBlobUrl ​

获取当前视频帧的截图的blob地址，返回的是一个 Promise

`,4),z=n("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', async () => {
-    const url = await art.getBlobUrl();
-    console.info(url);
-});

fullscreen ​

设置和获取播放器窗口全屏

`,4),L=n("div",{className:"run-code"},"▶ Run Code",-1),O=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'Fullscreen Switch',
-            click: function () {
-                art.fullscreen = !art.fullscreen;
-            },
-        },
-    ],
-});

提示

由于浏览器安全机制，触发窗口全屏前，页面必须先存在交互（例如用户点击过页面）

fullscreenWeb ​

设置和获取播放器网页全屏

`,5),W=n("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
-
-art.on('ready', () => {
-    art.fullscreenWeb = true;
-
-    setTimeout(() => {
-        art.fullscreenWeb = false;
-    }, 3000);
-});

pip ​

设置和获取播放器画中画模式

`,4),M=n("div",{className:"run-code"},"▶ Run Code",-1),Q=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'PIP',
-            click: function () {
-                art.pip = !art.pip;
-            },
-        },
-    ],
-});

提示

由于浏览器安全机制，触发画中画前，页面必须先存在交互（例如用户点击过页面）

poster ​

设置和获取视频海报，只有在视频播放前才能看到海报效果

`,5),J=n("div",{className:"run-code"},"▶ Run Code",-1),K=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    poster: '/assets/sample/poster.jpg',
-});
-
-art.on('ready', () => {
-    console.info(art.poster);
-    art.poster = '/assets/sample/poster.jpg?t=0';
-    console.info(art.poster);
-});

mini ​

设置和获取播放器迷你模式

`,4),X=n("div",{className:"run-code"},"▶ Run Code",-1),Y=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.mini = true;
-});

playing ​

获取视频是否正在播放中

`,4),Z=n("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    console.info(art.playing);
-});

autoSize ​

设置视频是否自适应尺寸

`,4),ns=n("div",{className:"run-code"},"▶ Run Code",-1),as=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.autoSize();
-});

rect ​

获取播放器的尺寸和坐标信息

`,4),ls=n("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(JSON.stringify(art.rect));
-});

提示

尺寸和坐标信息是通过 getBoundingClientRect 获取的

flip ​

设置和获取播放器翻转，支持normal, horizontal, vertical

`,5),os=n("div",{className:"run-code"},"▶ Run Code",-1),es=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.flip);
-    art.flip = 'horizontal';
-    console.info(art.flip);
-});

playbackRate ​

设置和获取播放器播放速度

`,4),rs=n("div",{className:"run-code"},"▶ Run Code",-1),cs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.playbackRate);
-    art.playbackRate = 2;
-    console.info(art.playbackRate);
-});

aspectRatio ​

设置和获取播放器长宽比

`,4),ts=n("div",{className:"run-code"},"▶ Run Code",-1),Ds=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.aspectRatio);
-    art.aspectRatio = '16:9';
-    console.info(art.aspectRatio);
-});

loop ​

设置和获取区间循序播放，单位秒

`,4),ys=n("div",{className:"run-code"},"▶ Run Code",-1),Fs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.loop);
-    art.loop = [5, 10];
-    console.info(art.loop);
-});

提示

删除区间循环播放，只需要设置 loop 为 [] 即可

art.loop 与 art.option.loop 是两个不同的东西，请勿弄乱

autoHeight ​

当容器只有宽度，该属性可以自动计算出并设置视频的高度

`,5),is=n("div",{className:"run-code"},"▶ Run Code",-1),As=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.autoHeight();
-});
-
-art.on('resize', () => {
-    art.autoHeight();
-});

提示

当你的容器只有宽度，但不知道具体高度时，这个属性很有用，它能自动计算出视频的高度，但你需要确定设置这个属性的时机

attr ​

动态获取和设置 video 元素的属性

`,5),Cs=n("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.attr('playsInline'));
-    art.attr('playsInline', true);
-    console.info(art.attr('playsInline'));
-});

type ​

动态获取和设置视频类型

`,4),bs=n("div",{className:"run-code"},"▶ Run Code",-1),us=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.type);
-    art.type = 'm3u8';
-    console.info(art.type);
-});

theme ​

动态获取和设置播放器主题颜色

`,4),ms=n("div",{className:"run-code"},"▶ Run Code",-1),hs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.theme);
-    art.theme = '#000';
-    console.info(art.theme);
-});

airplay ​

开启隔空播放

`,4),_s=n("div",{className:"run-code"},"▶ Run Code",-1),gs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'AirPlay',
-            click: function () {
-                art.airplay();
-            },
-        },
-    ],
-});

loaded ​

视频缓存的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用

`,4),vs=n("div",{className:"run-code"},"▶ Run Code",-1),Ts=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('video:timeupdate', () => {
-    console.info(art.loaded);
-});

played ​

视频播放的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用

`,4),Es=n("div",{className:"run-code"},"▶ Run Code",-1),Ss=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('video:timeupdate', () => {
-    console.info(art.played);
-});

proxy ​

DOM 事件的代理函数，实质上代理了 addEventListener 和 removeEventListener, 当使用 proxy 来处理事件，播放器销毁时也会自动销毁该事件

`,4),Ps=n("div",{className:"run-code"},"▶ Run Code",-1),ks=s(`
js
var container = document.querySelector('.artplayer-app');
-
-var art = new Artplayer({
-	container: container,
-	url: '/assets/sample/video.mp4',
-});
-
-art.proxy(container, 'click', event => {
-	console.info(event);
-});

提示

假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用该函数，以避免造成内存泄漏

query ​

DOM 的查询函数，类似 document.querySelector，但被查询的对象局限于当前播放器内，可以避免同类名的错误

`,5),ws=n("div",{className:"run-code"},"▶ Run Code",-1),fs=s(`
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
-
-console.info(art.query('.art-video'));

video ​

快捷返回播放器的 video 元素

`,4),qs=n("div",{className:"run-code"},"▶ Run Code",-1),Rs=s(`
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
-
-console.info(art.video);

cssVar ​

动态获取或设置 css 变量

`,4),Ns=n("div",{className:"run-code"},"▶ Run Code",-1),Vs=s(`
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.log(art.cssVar('--art-theme'));
-    art.cssVar('--art-theme', 'green');
-    console.log(art.cssVar('--art-theme'));
-});

quality ​

动态设置画质列表

`,4),Is=n("div",{className:"run-code"},"▶ Run Code",-1),js=s(`
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-	quality: [
-		{
-			default: true,
-			html: 'SD 480P',
-			url: '/assets/sample/video.mp4',
-		},
-		{
-			html: 'HD 720P',
-			url: '/assets/sample/video.mp4',
-		},
-	],
-});
-
-art.on('ready', () => {
-	setTimeout(() => {
-		art.quality = [
-			{
-				default: true,
-				html: '1080P',
-				url: '/assets/sample/video.mp4',
-			},
-			{
-				html: '4K',
-				url: '/assets/sample/video.mp4',
-			},
-		];
-	}, 3000);
-})
`,1),xs=[e,r,c,t,D,y,F,i,A,C,d,b,u,m,h,_,g,v,T,E,S,P,k,w,f,q,R,N,V,I,j,x,G,B,U,z,H,L,O,W,$,M,Q,J,K,X,Y,Z,ss,ns,as,ls,ps,os,es,rs,cs,ts,Ds,ys,Fs,is,As,Cs,ds,bs,us,ms,hs,_s,gs,vs,Ts,Es,Ss,Ps,ks,ws,fs,qs,Rs,Ns,Vs,Is,js];function Gs(Bs,Us,zs,Hs,Ls,Os){return l(),p("div",null,xs)}const Ms=a(o,[["render",Gs]]);export{$s as __pageData,Ms as default}; diff --git a/docs/document/assets/advanced_property.md.cb0d16e0.lean.js b/docs/document/assets/advanced_property.md.cb0d16e0.lean.js deleted file mode 100644 index 04185544c..000000000 --- a/docs/document/assets/advanced_property.md.cb0d16e0.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const $s=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/property.md","filePath":"advanced/property.md","lastUpdated":1683989304000}'),o={name:"advanced/property.md"},e=s("",5),r=n("div",{className:"run-code"},"▶ Run Code",-1),c=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",4),y=n("div",{className:"run-code"},"▶ Run Code",-1),F=s("",4),i=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s("",4),b=n("div",{className:"run-code"},"▶ Run Code",-1),u=s("",4),m=n("div",{className:"run-code"},"▶ Run Code",-1),h=s("",4),_=n("div",{className:"run-code"},"▶ Run Code",-1),g=s("",4),v=n("div",{className:"run-code"},"▶ Run Code",-1),T=s("",4),E=n("div",{className:"run-code"},"▶ Run Code",-1),S=s("",4),P=n("div",{className:"run-code"},"▶ Run Code",-1),k=s("",5),w=n("div",{className:"run-code"},"▶ Run Code",-1),f=s("",4),q=n("div",{className:"run-code"},"▶ Run Code",-1),R=s("",4),N=n("div",{className:"run-code"},"▶ Run Code",-1),V=s("",4),I=n("div",{className:"run-code"},"▶ Run Code",-1),j=s("",5),x=n("div",{className:"run-code"},"▶ Run Code",-1),G=s("",4),B=n("div",{className:"run-code"},"▶ Run Code",-1),U=s("",4),z=n("div",{className:"run-code"},"▶ Run Code",-1),H=s("",4),L=n("div",{className:"run-code"},"▶ Run Code",-1),O=s("",5),W=n("div",{className:"run-code"},"▶ Run Code",-1),$=s("",4),M=n("div",{className:"run-code"},"▶ Run Code",-1),Q=s("",5),J=n("div",{className:"run-code"},"▶ Run Code",-1),K=s("",4),X=n("div",{className:"run-code"},"▶ Run Code",-1),Y=s("",4),Z=n("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),ns=n("div",{className:"run-code"},"▶ Run Code",-1),as=s("",4),ls=n("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",5),os=n("div",{className:"run-code"},"▶ Run Code",-1),es=s("",4),rs=n("div",{className:"run-code"},"▶ Run Code",-1),cs=s("",4),ts=n("div",{className:"run-code"},"▶ Run Code",-1),Ds=s("",4),ys=n("div",{className:"run-code"},"▶ Run Code",-1),Fs=s("",5),is=n("div",{className:"run-code"},"▶ Run Code",-1),As=s("",5),Cs=n("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",4),bs=n("div",{className:"run-code"},"▶ Run Code",-1),us=s("",4),ms=n("div",{className:"run-code"},"▶ Run Code",-1),hs=s("",4),_s=n("div",{className:"run-code"},"▶ Run Code",-1),gs=s("",4),vs=n("div",{className:"run-code"},"▶ Run Code",-1),Ts=s("",4),Es=n("div",{className:"run-code"},"▶ Run Code",-1),Ss=s("",4),Ps=n("div",{className:"run-code"},"▶ Run Code",-1),ks=s("",5),ws=n("div",{className:"run-code"},"▶ Run Code",-1),fs=s("",4),qs=n("div",{className:"run-code"},"▶ Run Code",-1),Rs=s("",4),Ns=n("div",{className:"run-code"},"▶ Run Code",-1),Vs=s("",4),Is=n("div",{className:"run-code"},"▶ Run Code",-1),js=s("",1),xs=[e,r,c,t,D,y,F,i,A,C,d,b,u,m,h,_,g,v,T,E,S,P,k,w,f,q,R,N,V,I,j,x,G,B,U,z,H,L,O,W,$,M,Q,J,K,X,Y,Z,ss,ns,as,ls,ps,os,es,rs,cs,ts,Ds,ys,Fs,is,As,Cs,ds,bs,us,ms,hs,_s,gs,vs,Ts,Es,Ss,Ps,ks,ws,fs,qs,Rs,Ns,Vs,Is,js];function Gs(Bs,Us,zs,Hs,Ls,Os){return l(),p("div",null,xs)}const Ms=a(o,[["render",Gs]]);export{$s as __pageData,Ms as default}; diff --git a/docs/document/assets/app.0a6ef007.js b/docs/document/assets/app.0a6ef007.js deleted file mode 100644 index 6f8251957..000000000 --- a/docs/document/assets/app.0a6ef007.js +++ /dev/null @@ -1 +0,0 @@ -import{A as s,a5 as i,a6 as p,a7 as u,a8 as c,a9 as l,aa as f,ab as d,ac as m,ad as h,ae as A,W as g,d as P,u as v,j as y,x as C,af as w,ag as _,ah as b,ai as E}from"./chunks/framework.532b6b18.js";import{t as R}from"./chunks/theme.521bd55f.js";function r(e){if(e.extends){const a=r(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const o=r(R),D=P({name:"VitePressApp",setup(){const{site:e}=v();return y(()=>{C(()=>{document.documentElement.lang=e.value.lang,document.documentElement.dir=e.value.dir})}),w(),_(),b(),o.setup&&o.setup(),()=>E(o.Layout)}});async function j(){const e=O(),a=x();a.provide(p,e);const t=u(e.route);return a.provide(c,t),a.component("Content",l),a.component("ClientOnly",f),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),o.enhanceApp&&await o.enhanceApp({app:a,router:e,siteData:d}),{app:a,router:e,data:t}}function x(){return m(D)}function O(){let e=s,a;return h(t=>{let n=A(t);return n?(e&&(a=n),(e||a===n)&&(n=n.replace(/\.js$/,".lean.js")),s&&(e=!1),g(()=>import(n),[])):null},o.NotFound)}s&&j().then(({app:e,router:a,data:t})=>{a.go().then(()=>{i(a.route,t.site),e.mount("#app")})});export{j as createApp}; diff --git a/docs/document/assets/app.zV_Yzlp4.js b/docs/document/assets/app.zV_Yzlp4.js new file mode 100644 index 000000000..cc0440748 --- /dev/null +++ b/docs/document/assets/app.zV_Yzlp4.js @@ -0,0 +1,7 @@ +import{v as s,a4 as i,a5 as u,a6 as c,a7 as l,a8 as f,a9 as d,aa as m,ab as h,ac as A,ad as g,U as v,d as P,u as y,j as C,z as w,ae as _,af as b,ag as E,ah as R}from"./chunks/framework.E60viAY0.js";import{t as D}from"./chunks/theme.1nd7MJcP.js";function p(e){if(e.extends){const a=p(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const o=p(D),j=P({name:"VitePressApp",setup(){const{site:e}=y();return C(()=>{w(()=>{document.documentElement.lang=e.value.lang,document.documentElement.dir=e.value.dir})}),e.value.router.prefetchLinks&&_(),b(),E(),o.setup&&o.setup(),()=>R(o.Layout)}});async function L(){const e=S(),a=O();a.provide(u,e);const t=c(e.route);return a.provide(l,t),a.component("Content",f),a.component("ClientOnly",d),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),o.enhanceApp&&await o.enhanceApp({app:a,router:e,siteData:m}),{app:a,router:e,data:t}}function O(){return h(j)}function S(){let e=s,a;return A(t=>{let n=g(t),r=null;return n&&(e&&(a=n),(e||a===n)&&(n=n.replace(/\.js$/,".lean.js")),r=v(()=>import(n),__vite__mapDeps([]))),s&&(e=!1),r},o.NotFound)}s&&L().then(({app:e,router:a,data:t})=>{a.go().then(()=>{i(a.route,t.site),e.mount("#app")})});export{L as createApp}; +function __vite__mapDeps(indexes) { + if (!__vite__mapDeps.viteFileDeps) { + __vite__mapDeps.viteFileDeps = [] + } + return indexes.map((i) => __vite__mapDeps.viteFileDeps[i]) +} \ No newline at end of file diff --git a/docs/document/assets/chunks/framework.532b6b18.js b/docs/document/assets/chunks/framework.532b6b18.js deleted file mode 100644 index 96bc33843..000000000 --- a/docs/document/assets/chunks/framework.532b6b18.js +++ /dev/null @@ -1,2 +0,0 @@ -function Qn(e,t){const n=Object.create(null),s=e.split(",");for(let r=0;r!!n[r.toLowerCase()]:r=>!!n[r]}const ee={},at=[],Ie=()=>{},Si=()=>!1,Ni=/^on[^a-z]/,Bt=e=>Ni.test(e),Gn=e=>e.startsWith("onUpdate:"),ie=Object.assign,es=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},$i=Object.prototype.hasOwnProperty,Y=(e,t)=>$i.call(e,t),N=Array.isArray,ut=e=>un(e)==="[object Map]",wr=e=>un(e)==="[object Set]",k=e=>typeof e=="function",se=e=>typeof e=="string",ts=e=>typeof e=="symbol",te=e=>e!==null&&typeof e=="object",Cr=e=>te(e)&&k(e.then)&&k(e.catch),xr=Object.prototype.toString,un=e=>xr.call(e),Hi=e=>un(e).slice(8,-1),Er=e=>un(e)==="[object Object]",ns=e=>se(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,At=Qn(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),dn=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},Bi=/-(\w)/g,Le=dn(e=>e.replace(Bi,(t,n)=>n?n.toUpperCase():"")),Ui=/\B([A-Z])/g,it=dn(e=>e.replace(Ui,"-$1").toLowerCase()),hn=dn(e=>e.charAt(0).toUpperCase()+e.slice(1)),Zt=dn(e=>e?`on${hn(e)}`:""),Mt=(e,t)=>!Object.is(e,t),Qt=(e,t)=>{for(let n=0;n{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},$n=e=>{const t=parseFloat(e);return isNaN(t)?e:t},ji=e=>{const t=se(e)?Number(e):NaN;return isNaN(t)?e:t};let Ts;const Hn=()=>Ts||(Ts=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});function ss(e){if(N(e)){const t={};for(let n=0;n{if(n){const s=n.split(Ki);s.length>1&&(t[s[0].trim()]=s[1].trim())}}),t}function rs(e){let t="";if(se(e))t=e;else if(N(e))for(let n=0;nse(e)?e:e==null?"":N(e)||te(e)&&(e.toString===xr||!k(e.toString))?JSON.stringify(e,Tr,2):String(e),Tr=(e,t)=>t&&t.__v_isRef?Tr(e,t.value):ut(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[s,r])=>(n[`${s} =>`]=r,n),{})}:wr(t)?{[`Set(${t.size})`]:[...t.values()]}:te(t)&&!N(t)&&!Er(t)?String(t):t;let _e;class zi{constructor(t=!1){this.detached=t,this._active=!0,this.effects=[],this.cleanups=[],this.parent=_e,!t&&_e&&(this.index=(_e.scopes||(_e.scopes=[])).push(this)-1)}get active(){return this._active}run(t){if(this._active){const n=_e;try{return _e=this,t()}finally{_e=n}}}on(){_e=this}off(){_e=this.parent}stop(t){if(this._active){let n,s;for(n=0,s=this.effects.length;n{const t=new Set(e);return t.w=0,t.n=0,t},Ar=e=>(e.w&Ve)>0,Pr=e=>(e.n&Ve)>0,Xi=({deps:e})=>{if(e.length)for(let t=0;t{const{deps:t}=e;if(t.length){let n=0;for(let s=0;s{(d==="length"||d>=c)&&l.push(a)})}else switch(n!==void 0&&l.push(o.get(n)),t){case"add":N(e)?ns(n)&&l.push(o.get("length")):(l.push(o.get(st)),ut(e)&&l.push(o.get(jn)));break;case"delete":N(e)||(l.push(o.get(st)),ut(e)&&l.push(o.get(jn)));break;case"set":ut(e)&&l.push(o.get(st));break}if(l.length===1)l[0]&&Dn(l[0]);else{const c=[];for(const a of l)a&&c.push(...a);Dn(is(c))}}function Dn(e,t){const n=N(e)?e:[...e];for(const s of n)s.computed&&Ps(s);for(const s of n)s.computed||Ps(s)}function Ps(e,t){(e!==Ae||e.allowRecurse)&&(e.scheduler?e.scheduler():e.run())}const Qi=Qn("__proto__,__v_isRef,__isVue"),Fr=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(ts)),Gi=ls(),eo=ls(!1,!0),to=ls(!0),Is=no();function no(){const e={};return["includes","indexOf","lastIndexOf"].forEach(t=>{e[t]=function(...n){const s=J(this);for(let i=0,o=this.length;i{e[t]=function(...n){yt();const s=J(this)[t].apply(this,n);return wt(),s}}),e}function so(e){const t=J(this);return pe(t,"has",e),t.hasOwnProperty(e)}function ls(e=!1,t=!1){return function(s,r,i){if(r==="__v_isReactive")return!e;if(r==="__v_isReadonly")return e;if(r==="__v_isShallow")return t;if(r==="__v_raw"&&i===(e?t?wo:Nr:t?Sr:Lr).get(s))return s;const o=N(s);if(!e){if(o&&Y(Is,r))return Reflect.get(Is,r,i);if(r==="hasOwnProperty")return so}const l=Reflect.get(s,r,i);return(ts(r)?Fr.has(r):Qi(r))||(e||pe(s,"get",r),t)?l:ae(l)?o&&ns(r)?l:l.value:te(l)?e?$r(l):gn(l):l}}const ro=Rr(),io=Rr(!0);function Rr(e=!1){return function(n,s,r,i){let o=n[s];if(mt(o)&&ae(o)&&!ae(r))return!1;if(!e&&(!sn(r)&&!mt(r)&&(o=J(o),r=J(r)),!N(n)&&ae(o)&&!ae(r)))return o.value=r,!0;const l=N(n)&&ns(s)?Number(s)e,pn=e=>Reflect.getPrototypeOf(e);function Dt(e,t,n=!1,s=!1){e=e.__v_raw;const r=J(e),i=J(t);n||(t!==i&&pe(r,"get",t),pe(r,"get",i));const{has:o}=pn(r),l=s?cs:n?us:Lt;if(o.call(r,t))return l(e.get(t));if(o.call(r,i))return l(e.get(i));e!==r&&e.get(t)}function Kt(e,t=!1){const n=this.__v_raw,s=J(n),r=J(e);return t||(e!==r&&pe(s,"has",e),pe(s,"has",r)),e===r?n.has(e):n.has(e)||n.has(r)}function kt(e,t=!1){return e=e.__v_raw,!t&&pe(J(e),"iterate",st),Reflect.get(e,"size",e)}function Os(e){e=J(e);const t=J(this);return pn(t).has.call(t,e)||(t.add(e),$e(t,"add",e,e)),this}function Fs(e,t){t=J(t);const n=J(this),{has:s,get:r}=pn(n);let i=s.call(n,e);i||(e=J(e),i=s.call(n,e));const o=r.call(n,e);return n.set(e,t),i?Mt(t,o)&&$e(n,"set",e,t):$e(n,"add",e,t),this}function Rs(e){const t=J(this),{has:n,get:s}=pn(t);let r=n.call(t,e);r||(e=J(e),r=n.call(t,e)),s&&s.call(t,e);const i=t.delete(e);return r&&$e(t,"delete",e,void 0),i}function Ms(){const e=J(this),t=e.size!==0,n=e.clear();return t&&$e(e,"clear",void 0,void 0),n}function Wt(e,t){return function(s,r){const i=this,o=i.__v_raw,l=J(o),c=t?cs:e?us:Lt;return!e&&pe(l,"iterate",st),o.forEach((a,d)=>s.call(r,c(a),c(d),i))}}function Vt(e,t,n){return function(...s){const r=this.__v_raw,i=J(r),o=ut(i),l=e==="entries"||e===Symbol.iterator&&o,c=e==="keys"&&o,a=r[e](...s),d=n?cs:t?us:Lt;return!t&&pe(i,"iterate",c?jn:st),{next(){const{value:h,done:g}=a.next();return g?{value:h,done:g}:{value:l?[d(h[0]),d(h[1])]:d(h),done:g}},[Symbol.iterator](){return this}}}}function Be(e){return function(...t){return e==="delete"?!1:this}}function uo(){const e={get(i){return Dt(this,i)},get size(){return kt(this)},has:Kt,add:Os,set:Fs,delete:Rs,clear:Ms,forEach:Wt(!1,!1)},t={get(i){return Dt(this,i,!1,!0)},get size(){return kt(this)},has:Kt,add:Os,set:Fs,delete:Rs,clear:Ms,forEach:Wt(!1,!0)},n={get(i){return Dt(this,i,!0)},get size(){return kt(this,!0)},has(i){return Kt.call(this,i,!0)},add:Be("add"),set:Be("set"),delete:Be("delete"),clear:Be("clear"),forEach:Wt(!0,!1)},s={get(i){return Dt(this,i,!0,!0)},get size(){return kt(this,!0)},has(i){return Kt.call(this,i,!0)},add:Be("add"),set:Be("set"),delete:Be("delete"),clear:Be("clear"),forEach:Wt(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(i=>{e[i]=Vt(i,!1,!1),n[i]=Vt(i,!0,!1),t[i]=Vt(i,!1,!0),s[i]=Vt(i,!0,!0)}),[e,n,t,s]}const[ho,po,go,mo]=uo();function fs(e,t){const n=t?e?mo:go:e?po:ho;return(s,r,i)=>r==="__v_isReactive"?!e:r==="__v_isReadonly"?e:r==="__v_raw"?s:Reflect.get(Y(n,r)&&r in s?n:s,r,i)}const _o={get:fs(!1,!1)},bo={get:fs(!1,!0)},yo={get:fs(!0,!1)},Lr=new WeakMap,Sr=new WeakMap,Nr=new WeakMap,wo=new WeakMap;function Co(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function xo(e){return e.__v_skip||!Object.isExtensible(e)?0:Co(Hi(e))}function gn(e){return mt(e)?e:as(e,!1,Mr,_o,Lr)}function Eo(e){return as(e,!1,ao,bo,Sr)}function $r(e){return as(e,!0,fo,yo,Nr)}function as(e,t,n,s,r){if(!te(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const i=r.get(e);if(i)return i;const o=xo(e);if(o===0)return e;const l=new Proxy(e,o===2?s:n);return r.set(e,l),l}function dt(e){return mt(e)?dt(e.__v_raw):!!(e&&e.__v_isReactive)}function mt(e){return!!(e&&e.__v_isReadonly)}function sn(e){return!!(e&&e.__v_isShallow)}function Hr(e){return dt(e)||mt(e)}function J(e){const t=e&&e.__v_raw;return t?J(t):e}function Pt(e){return nn(e,"__v_skip",!0),e}const Lt=e=>te(e)?gn(e):e,us=e=>te(e)?$r(e):e;function Br(e){ke&&Ae&&(e=J(e),Or(e.dep||(e.dep=is())))}function Ur(e,t){e=J(e);const n=e.dep;n&&Dn(n)}function ae(e){return!!(e&&e.__v_isRef===!0)}function jr(e){return Dr(e,!1)}function vo(e){return Dr(e,!0)}function Dr(e,t){return ae(e)?e:new To(e,t)}class To{constructor(t,n){this.__v_isShallow=n,this.dep=void 0,this.__v_isRef=!0,this._rawValue=n?t:J(t),this._value=n?t:Lt(t)}get value(){return Br(this),this._value}set value(t){const n=this.__v_isShallow||sn(t)||mt(t);t=n?t:J(t),Mt(t,this._rawValue)&&(this._rawValue=t,this._value=n?t:Lt(t),Ur(this))}}function Ao(e){return ae(e)?e.value:e}const Po={get:(e,t,n)=>Ao(Reflect.get(e,t,n)),set:(e,t,n,s)=>{const r=e[t];return ae(r)&&!ae(n)?(r.value=n,!0):Reflect.set(e,t,n,s)}};function Kr(e){return dt(e)?e:new Proxy(e,Po)}class Io{constructor(t,n,s,r){this._setter=n,this.dep=void 0,this.__v_isRef=!0,this.__v_isReadonly=!1,this._dirty=!0,this.effect=new os(t,()=>{this._dirty||(this._dirty=!0,Ur(this))}),this.effect.computed=this,this.effect.active=this._cacheable=!r,this.__v_isReadonly=s}get value(){const t=J(this);return Br(t),(t._dirty||!t._cacheable)&&(t._dirty=!1,t._value=t.effect.run()),t._value}set value(t){this._setter(t)}}function Oo(e,t,n=!1){let s,r;const i=k(e);return i?(s=e,r=Ie):(s=e.get,r=e.set),new Io(s,r,i||!r,n)}function We(e,t,n,s){let r;try{r=s?e(...s):e()}catch(i){mn(i,t,n)}return r}function xe(e,t,n,s){if(k(e)){const i=We(e,t,n,s);return i&&Cr(i)&&i.catch(o=>{mn(o,t,n)}),i}const r=[];for(let i=0;i>>1;Nt(fe[s])Me&&fe.splice(t,1)}function Lo(e){N(e)?ht.push(...e):(!Ne||!Ne.includes(e,e.allowRecurse?Qe+1:Qe))&&ht.push(e),Vr()}function Ls(e,t=St?Me+1:0){for(;tNt(n)-Nt(s)),Qe=0;Qee.id==null?1/0:e.id,So=(e,t)=>{const n=Nt(e)-Nt(t);if(n===0){if(e.pre&&!t.pre)return-1;if(t.pre&&!e.pre)return 1}return n};function qr(e){Kn=!1,St=!0,fe.sort(So);const t=Ie;try{for(Me=0;Mese(T)?T.trim():T)),h&&(r=n.map($n))}let l,c=s[l=Zt(t)]||s[l=Zt(Le(t))];!c&&i&&(c=s[l=Zt(it(t))]),c&&xe(c,e,6,r);const a=s[l+"Once"];if(a){if(!e.emitted)e.emitted={};else if(e.emitted[l])return;e.emitted[l]=!0,xe(a,e,6,r)}}function zr(e,t,n=!1){const s=t.emitsCache,r=s.get(e);if(r!==void 0)return r;const i=e.emits;let o={},l=!1;if(!k(e)){const c=a=>{const d=zr(a,t,!0);d&&(l=!0,ie(o,d))};!n&&t.mixins.length&&t.mixins.forEach(c),e.extends&&c(e.extends),e.mixins&&e.mixins.forEach(c)}return!i&&!l?(te(e)&&s.set(e,null),null):(N(i)?i.forEach(c=>o[c]=null):ie(o,i),te(e)&&s.set(e,o),o)}function _n(e,t){return!e||!Bt(t)?!1:(t=t.slice(2).replace(/Once$/,""),Y(e,t[0].toLowerCase()+t.slice(1))||Y(e,it(t))||Y(e,t))}let le=null,bn=null;function on(e){const t=le;return le=e,bn=e&&e.type.__scopeId||null,t}function jc(e){bn=e}function Dc(){bn=null}function $o(e,t=le,n){if(!t||e._n)return e;const s=(...r)=>{s._d&&qs(-1);const i=on(t);let o;try{o=e(...r)}finally{on(i),s._d&&qs(1)}return o};return s._n=!0,s._c=!0,s._d=!0,s}function In(e){const{type:t,vnode:n,proxy:s,withProxy:r,props:i,propsOptions:[o],slots:l,attrs:c,emit:a,render:d,renderCache:h,data:g,setupState:T,ctx:S,inheritAttrs:F}=e;let K,b;const w=on(e);try{if(n.shapeFlag&4){const P=r||s;K=Te(d.call(P,P,h,i,T,g,S)),b=c}else{const P=t;K=Te(P.length>1?P(i,{attrs:c,slots:l,emit:a}):P(i,null)),b=t.props?c:Ho(c)}}catch(P){Rt.length=0,mn(P,e,1),K=ce(be)}let $=K;if(b&&F!==!1){const P=Object.keys(b),{shapeFlag:j}=$;P.length&&j&7&&(o&&P.some(Gn)&&(b=Bo(b,o)),$=qe($,b))}return n.dirs&&($=qe($),$.dirs=$.dirs?$.dirs.concat(n.dirs):n.dirs),n.transition&&($.transition=n.transition),K=$,on(w),K}const Ho=e=>{let t;for(const n in e)(n==="class"||n==="style"||Bt(n))&&((t||(t={}))[n]=e[n]);return t},Bo=(e,t)=>{const n={};for(const s in e)(!Gn(s)||!(s.slice(9)in t))&&(n[s]=e[s]);return n};function Uo(e,t,n){const{props:s,children:r,component:i}=e,{props:o,children:l,patchFlag:c}=t,a=i.emitsOptions;if(t.dirs||t.transition)return!0;if(n&&c>=0){if(c&1024)return!0;if(c&16)return s?Ss(s,o,a):!!o;if(c&8){const d=t.dynamicProps;for(let h=0;he.__isSuspense;function Yr(e,t){t&&t.pendingBranch?N(e)?t.effects.push(...e):t.effects.push(e):Lo(e)}function Ko(e,t){return yn(e,null,t)}function Kc(e,t){return yn(e,null,{flush:"post"})}const qt={};function Gt(e,t,n){return yn(e,t,n)}function yn(e,t,{immediate:n,deep:s,flush:r,onTrack:i,onTrigger:o}=ee){var l;const c=Ji()===((l=oe)==null?void 0:l.scope)?oe:null;let a,d=!1,h=!1;if(ae(e)?(a=()=>e.value,d=sn(e)):dt(e)?(a=()=>e,s=!0):N(e)?(h=!0,d=e.some(P=>dt(P)||sn(P)),a=()=>e.map(P=>{if(ae(P))return P.value;if(dt(P))return tt(P);if(k(P))return We(P,c,2)})):k(e)?t?a=()=>We(e,c,2):a=()=>{if(!(c&&c.isUnmounted))return g&&g(),xe(e,c,3,[T])}:a=Ie,t&&s){const P=a;a=()=>tt(P())}let g,T=P=>{g=w.onStop=()=>{We(P,c,4)}},S;if(Ht)if(T=Ie,t?n&&xe(t,c,3,[a(),h?[]:void 0,T]):a(),r==="sync"){const P=Bl();S=P.__watcherHandles||(P.__watcherHandles=[])}else return Ie;let F=h?new Array(e.length).fill(qt):qt;const K=()=>{if(w.active)if(t){const P=w.run();(s||d||(h?P.some((j,q)=>Mt(j,F[q])):Mt(P,F)))&&(g&&g(),xe(t,c,3,[P,F===qt?void 0:h&&F[0]===qt?[]:F,T]),F=P)}else w.run()};K.allowRecurse=!!t;let b;r==="sync"?b=K:r==="post"?b=()=>de(K,c&&c.suspense):(K.pre=!0,c&&(K.id=c.uid),b=()=>hs(K));const w=new os(a,b);t?n?K():F=w.run():r==="post"?de(w.run.bind(w),c&&c.suspense):w.run();const $=()=>{w.stop(),c&&c.scope&&es(c.scope.effects,w)};return S&&S.push($),$}function ko(e,t,n){const s=this.proxy,r=se(e)?e.includes(".")?Jr(s,e):()=>s[e]:e.bind(s,s);let i;k(t)?i=t:(i=t.handler,n=t);const o=oe;bt(this);const l=yn(r,i.bind(s),n);return o?bt(o):rt(),l}function Jr(e,t){const n=t.split(".");return()=>{let s=e;for(let r=0;r{tt(n,t)});else if(Er(e))for(const n in e)tt(e[n],t);return e}function kc(e,t){const n=le;if(n===null)return e;const s=Tn(n)||n.proxy,r=e.dirs||(e.dirs=[]);for(let i=0;i{e.isMounted=!0}),ti(()=>{e.isUnmounting=!0}),e}const ye=[Function,Array],Xr={mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:ye,onEnter:ye,onAfterEnter:ye,onEnterCancelled:ye,onBeforeLeave:ye,onLeave:ye,onAfterLeave:ye,onLeaveCancelled:ye,onBeforeAppear:ye,onAppear:ye,onAfterAppear:ye,onAppearCancelled:ye},Vo={name:"BaseTransition",props:Xr,setup(e,{slots:t}){const n=yi(),s=Wo();let r;return()=>{const i=t.default&&Qr(t.default(),!0);if(!i||!i.length)return;let o=i[0];if(i.length>1){for(const F of i)if(F.type!==be){o=F;break}}const l=J(e),{mode:c}=l;if(s.isLeaving)return On(o);const a=Ns(o);if(!a)return On(o);const d=kn(a,l,s,n);Wn(a,d);const h=n.subTree,g=h&&Ns(h);let T=!1;const{getTransitionKey:S}=a.type;if(S){const F=S();r===void 0?r=F:F!==r&&(r=F,T=!0)}if(g&&g.type!==be&&(!Ge(a,g)||T)){const F=kn(g,l,s,n);if(Wn(g,F),c==="out-in")return s.isLeaving=!0,F.afterLeave=()=>{s.isLeaving=!1,n.update.active!==!1&&n.update()},On(o);c==="in-out"&&a.type!==be&&(F.delayLeave=(K,b,w)=>{const $=Zr(s,g);$[String(g.key)]=g,K._leaveCb=()=>{b(),K._leaveCb=void 0,delete d.delayedLeave},d.delayedLeave=w})}return o}}},qo=Vo;function Zr(e,t){const{leavingVNodes:n}=e;let s=n.get(t.type);return s||(s=Object.create(null),n.set(t.type,s)),s}function kn(e,t,n,s){const{appear:r,mode:i,persisted:o=!1,onBeforeEnter:l,onEnter:c,onAfterEnter:a,onEnterCancelled:d,onBeforeLeave:h,onLeave:g,onAfterLeave:T,onLeaveCancelled:S,onBeforeAppear:F,onAppear:K,onAfterAppear:b,onAppearCancelled:w}=t,$=String(e.key),P=Zr(n,e),j=(E,B)=>{E&&xe(E,s,9,B)},q=(E,B)=>{const H=B[1];j(E,B),N(E)?E.every(W=>W.length<=1)&&H():E.length<=1&&H()},D={mode:i,persisted:o,beforeEnter(E){let B=l;if(!n.isMounted)if(r)B=F||l;else return;E._leaveCb&&E._leaveCb(!0);const H=P[$];H&&Ge(e,H)&&H.el._leaveCb&&H.el._leaveCb(),j(B,[E])},enter(E){let B=c,H=a,W=d;if(!n.isMounted)if(r)B=K||c,H=b||a,W=w||d;else return;let I=!1;const V=E._enterCb=R=>{I||(I=!0,R?j(W,[E]):j(H,[E]),D.delayedLeave&&D.delayedLeave(),E._enterCb=void 0)};B?q(B,[E,V]):V()},leave(E,B){const H=String(e.key);if(E._enterCb&&E._enterCb(!0),n.isUnmounting)return B();j(h,[E]);let W=!1;const I=E._leaveCb=V=>{W||(W=!0,B(),V?j(S,[E]):j(T,[E]),E._leaveCb=void 0,P[H]===e&&delete P[H])};P[H]=e,g?q(g,[E,I]):I()},clone(E){return kn(E,t,n,s)}};return D}function On(e){if(wn(e))return e=qe(e),e.children=null,e}function Ns(e){return wn(e)?e.children?e.children[0]:void 0:e}function Wn(e,t){e.shapeFlag&6&&e.component?Wn(e.component.subTree,t):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function Qr(e,t=!1,n){let s=[],r=0;for(let i=0;i1)for(let i=0;iie({name:e.name},t,{setup:e}))():e}const pt=e=>!!e.type.__asyncLoader,wn=e=>e.type.__isKeepAlive;function zo(e,t){ei(e,"a",t)}function Yo(e,t){ei(e,"da",t)}function ei(e,t,n=oe){const s=e.__wdc||(e.__wdc=()=>{let r=n;for(;r;){if(r.isDeactivated)return;r=r.parent}return e()});if(Cn(t,s,n),n){let r=n.parent;for(;r&&r.parent;)wn(r.parent.vnode)&&Jo(s,t,n,r),r=r.parent}}function Jo(e,t,n,s){const r=Cn(t,e,s,!0);En(()=>{es(s[t],r)},n)}function Cn(e,t,n=oe,s=!1){if(n){const r=n[e]||(n[e]=[]),i=t.__weh||(t.__weh=(...o)=>{if(n.isUnmounted)return;yt(),bt(n);const l=xe(t,n,e,o);return rt(),wt(),l});return s?r.unshift(i):r.push(i),i}}const He=e=>(t,n=oe)=>(!Ht||e==="sp")&&Cn(e,(...s)=>t(...s),n),Xo=He("bm"),xn=He("m"),Zo=He("bu"),Qo=He("u"),ti=He("bum"),En=He("um"),Go=He("sp"),el=He("rtg"),tl=He("rtc");function nl(e,t=oe){Cn("ec",e,t)}const ps="components";function Wc(e,t){return si(ps,e,!0,t)||e}const ni=Symbol.for("v-ndc");function Vc(e){return se(e)?si(ps,e,!1)||e:e||ni}function si(e,t,n=!0,s=!1){const r=le||oe;if(r){const i=r.type;if(e===ps){const l=Nl(i,!1);if(l&&(l===t||l===Le(t)||l===hn(Le(t))))return i}const o=$s(r[e]||i[e],t)||$s(r.appContext[e],t);return!o&&s?i:o}}function $s(e,t){return e&&(e[t]||e[Le(t)]||e[hn(Le(t))])}function qc(e,t,n,s){let r;const i=n&&n[s];if(N(e)||se(e)){r=new Array(e.length);for(let o=0,l=e.length;ot(o,l,void 0,i&&i[l]));else{const o=Object.keys(e);r=new Array(o.length);for(let l=0,c=o.length;lan(t)?!(t.type===be||t.type===he&&!ri(t.children)):!0)?e:null}function Yc(e,t){const n={};for(const s in e)n[t&&/[A-Z]/.test(s)?`on:${s}`:Zt(s)]=e[s];return n}const Vn=e=>e?wi(e)?Tn(e)||e.proxy:Vn(e.parent):null,It=ie(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>Vn(e.parent),$root:e=>Vn(e.root),$emit:e=>e.emit,$options:e=>gs(e),$forceUpdate:e=>e.f||(e.f=()=>hs(e.update)),$nextTick:e=>e.n||(e.n=Wr.bind(e.proxy)),$watch:e=>ko.bind(e)}),Fn=(e,t)=>e!==ee&&!e.__isScriptSetup&&Y(e,t),sl={get({_:e},t){const{ctx:n,setupState:s,data:r,props:i,accessCache:o,type:l,appContext:c}=e;let a;if(t[0]!=="$"){const T=o[t];if(T!==void 0)switch(T){case 1:return s[t];case 2:return r[t];case 4:return n[t];case 3:return i[t]}else{if(Fn(s,t))return o[t]=1,s[t];if(r!==ee&&Y(r,t))return o[t]=2,r[t];if((a=e.propsOptions[0])&&Y(a,t))return o[t]=3,i[t];if(n!==ee&&Y(n,t))return o[t]=4,n[t];qn&&(o[t]=0)}}const d=It[t];let h,g;if(d)return t==="$attrs"&&pe(e,"get",t),d(e);if((h=l.__cssModules)&&(h=h[t]))return h;if(n!==ee&&Y(n,t))return o[t]=4,n[t];if(g=c.config.globalProperties,Y(g,t))return g[t]},set({_:e},t,n){const{data:s,setupState:r,ctx:i}=e;return Fn(r,t)?(r[t]=n,!0):s!==ee&&Y(s,t)?(s[t]=n,!0):Y(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(i[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:s,appContext:r,propsOptions:i}},o){let l;return!!n[o]||e!==ee&&Y(e,o)||Fn(t,o)||(l=i[0])&&Y(l,o)||Y(s,o)||Y(It,o)||Y(r.config.globalProperties,o)},defineProperty(e,t,n){return n.get!=null?e._.accessCache[t]=0:Y(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}};function Jc(){return rl().slots}function rl(){const e=yi();return e.setupContext||(e.setupContext=xi(e))}function Hs(e){return N(e)?e.reduce((t,n)=>(t[n]=null,t),{}):e}let qn=!0;function il(e){const t=gs(e),n=e.proxy,s=e.ctx;qn=!1,t.beforeCreate&&Bs(t.beforeCreate,e,"bc");const{data:r,computed:i,methods:o,watch:l,provide:c,inject:a,created:d,beforeMount:h,mounted:g,beforeUpdate:T,updated:S,activated:F,deactivated:K,beforeDestroy:b,beforeUnmount:w,destroyed:$,unmounted:P,render:j,renderTracked:q,renderTriggered:D,errorCaptured:E,serverPrefetch:B,expose:H,inheritAttrs:W,components:I,directives:V,filters:R}=t;if(a&&ol(a,s,null),o)for(const ne in o){const Q=o[ne];k(Q)&&(s[ne]=Q.bind(n))}if(r){const ne=r.call(n,n);te(ne)&&(e.data=gn(ne))}if(qn=!0,i)for(const ne in i){const Q=i[ne],ze=k(Q)?Q.bind(n,n):k(Q.get)?Q.get.bind(n,n):Ie,Ut=!k(Q)&&k(Q.set)?Q.set.bind(n):Ie,Ye=ve({get:ze,set:Ut});Object.defineProperty(s,ne,{enumerable:!0,configurable:!0,get:()=>Ye.value,set:Oe=>Ye.value=Oe})}if(l)for(const ne in l)ii(l[ne],s,n,ne);if(c){const ne=k(c)?c.call(n):c;Reflect.ownKeys(ne).forEach(Q=>{dl(Q,ne[Q])})}d&&Bs(d,e,"c");function X(ne,Q){N(Q)?Q.forEach(ze=>ne(ze.bind(n))):Q&&ne(Q.bind(n))}if(X(Xo,h),X(xn,g),X(Zo,T),X(Qo,S),X(zo,F),X(Yo,K),X(nl,E),X(tl,q),X(el,D),X(ti,w),X(En,P),X(Go,B),N(H))if(H.length){const ne=e.exposed||(e.exposed={});H.forEach(Q=>{Object.defineProperty(ne,Q,{get:()=>n[Q],set:ze=>n[Q]=ze})})}else e.exposed||(e.exposed={});j&&e.render===Ie&&(e.render=j),W!=null&&(e.inheritAttrs=W),I&&(e.components=I),V&&(e.directives=V)}function ol(e,t,n=Ie){N(e)&&(e=zn(e));for(const s in e){const r=e[s];let i;te(r)?"default"in r?i=gt(r.from||s,r.default,!0):i=gt(r.from||s):i=gt(r),ae(i)?Object.defineProperty(t,s,{enumerable:!0,configurable:!0,get:()=>i.value,set:o=>i.value=o}):t[s]=i}}function Bs(e,t,n){xe(N(e)?e.map(s=>s.bind(t.proxy)):e.bind(t.proxy),t,n)}function ii(e,t,n,s){const r=s.includes(".")?Jr(n,s):()=>n[s];if(se(e)){const i=t[e];k(i)&&Gt(r,i)}else if(k(e))Gt(r,e.bind(n));else if(te(e))if(N(e))e.forEach(i=>ii(i,t,n,s));else{const i=k(e.handler)?e.handler.bind(n):t[e.handler];k(i)&&Gt(r,i,e)}}function gs(e){const t=e.type,{mixins:n,extends:s}=t,{mixins:r,optionsCache:i,config:{optionMergeStrategies:o}}=e.appContext,l=i.get(t);let c;return l?c=l:!r.length&&!n&&!s?c=t:(c={},r.length&&r.forEach(a=>ln(c,a,o,!0)),ln(c,t,o)),te(t)&&i.set(t,c),c}function ln(e,t,n,s=!1){const{mixins:r,extends:i}=t;i&&ln(e,i,n,!0),r&&r.forEach(o=>ln(e,o,n,!0));for(const o in t)if(!(s&&o==="expose")){const l=ll[o]||n&&n[o];e[o]=l?l(e[o],t[o]):t[o]}return e}const ll={data:Us,props:js,emits:js,methods:Tt,computed:Tt,beforeCreate:ue,created:ue,beforeMount:ue,mounted:ue,beforeUpdate:ue,updated:ue,beforeDestroy:ue,beforeUnmount:ue,destroyed:ue,unmounted:ue,activated:ue,deactivated:ue,errorCaptured:ue,serverPrefetch:ue,components:Tt,directives:Tt,watch:fl,provide:Us,inject:cl};function Us(e,t){return t?e?function(){return ie(k(e)?e.call(this,this):e,k(t)?t.call(this,this):t)}:t:e}function cl(e,t){return Tt(zn(e),zn(t))}function zn(e){if(N(e)){const t={};for(let n=0;n1)return n&&k(t)?t.call(s&&s.proxy):t}}function hl(e,t,n,s=!1){const r={},i={};nn(i,vn,1),e.propsDefaults=Object.create(null),li(e,t,r,i);for(const o in e.propsOptions[0])o in r||(r[o]=void 0);n?e.props=s?r:Eo(r):e.type.props?e.props=r:e.props=i,e.attrs=i}function pl(e,t,n,s){const{props:r,attrs:i,vnode:{patchFlag:o}}=e,l=J(r),[c]=e.propsOptions;let a=!1;if((s||o>0)&&!(o&16)){if(o&8){const d=e.vnode.dynamicProps;for(let h=0;h{c=!0;const[g,T]=ci(h,t,!0);ie(o,g),T&&l.push(...T)};!n&&t.mixins.length&&t.mixins.forEach(d),e.extends&&d(e.extends),e.mixins&&e.mixins.forEach(d)}if(!i&&!c)return te(e)&&s.set(e,at),at;if(N(i))for(let d=0;d-1,T[1]=F<0||S-1||Y(T,"default"))&&l.push(h)}}}const a=[o,l];return te(e)&&s.set(e,a),a}function Ds(e){return e[0]!=="$"}function Ks(e){const t=e&&e.toString().match(/^\s*(function|class) (\w+)/);return t?t[2]:e===null?"null":""}function ks(e,t){return Ks(e)===Ks(t)}function Ws(e,t){return N(t)?t.findIndex(n=>ks(n,e)):k(t)&&ks(t,e)?0:-1}const fi=e=>e[0]==="_"||e==="$stable",ms=e=>N(e)?e.map(Te):[Te(e)],gl=(e,t,n)=>{if(t._n)return t;const s=$o((...r)=>ms(t(...r)),n);return s._c=!1,s},ai=(e,t,n)=>{const s=e._ctx;for(const r in e){if(fi(r))continue;const i=e[r];if(k(i))t[r]=gl(r,i,s);else if(i!=null){const o=ms(i);t[r]=()=>o}}},ui=(e,t)=>{const n=ms(t);e.slots.default=()=>n},ml=(e,t)=>{if(e.vnode.shapeFlag&32){const n=t._;n?(e.slots=J(t),nn(t,"_",n)):ai(t,e.slots={})}else e.slots={},t&&ui(e,t);nn(e.slots,vn,1)},_l=(e,t,n)=>{const{vnode:s,slots:r}=e;let i=!0,o=ee;if(s.shapeFlag&32){const l=t._;l?n&&l===1?i=!1:(ie(r,t),!n&&l===1&&delete r._):(i=!t.$stable,ai(t,r)),o=t}else t&&(ui(e,t),o={default:1});if(i)for(const l in r)!fi(l)&&!(l in o)&&delete r[l]};function fn(e,t,n,s,r=!1){if(N(e)){e.forEach((g,T)=>fn(g,t&&(N(t)?t[T]:t),n,s,r));return}if(pt(s)&&!r)return;const i=s.shapeFlag&4?Tn(s.component)||s.component.proxy:s.el,o=r?null:i,{i:l,r:c}=e,a=t&&t.r,d=l.refs===ee?l.refs={}:l.refs,h=l.setupState;if(a!=null&&a!==c&&(se(a)?(d[a]=null,Y(h,a)&&(h[a]=null)):ae(a)&&(a.value=null)),k(c))We(c,l,12,[o,d]);else{const g=se(c),T=ae(c);if(g||T){const S=()=>{if(e.f){const F=g?Y(h,c)?h[c]:d[c]:c.value;r?N(F)&&es(F,i):N(F)?F.includes(i)||F.push(i):g?(d[c]=[i],Y(h,c)&&(h[c]=d[c])):(c.value=[i],e.k&&(d[e.k]=c.value))}else g?(d[c]=o,Y(h,c)&&(h[c]=o)):T&&(c.value=o,e.k&&(d[e.k]=o))};o?(S.id=-1,de(S,n)):S()}}}let Ue=!1;const zt=e=>/svg/.test(e.namespaceURI)&&e.tagName!=="foreignObject",Yt=e=>e.nodeType===8;function bl(e){const{mt:t,p:n,o:{patchProp:s,createText:r,nextSibling:i,parentNode:o,remove:l,insert:c,createComment:a}}=e,d=(b,w)=>{if(!w.hasChildNodes()){n(null,b,w),rn(),w._vnode=b;return}Ue=!1,h(w.firstChild,b,null,null,null),rn(),w._vnode=b,Ue&&console.error("Hydration completed but contains mismatches.")},h=(b,w,$,P,j,q=!1)=>{const D=Yt(b)&&b.data==="[",E=()=>F(b,w,$,P,j,D),{type:B,ref:H,shapeFlag:W,patchFlag:I}=w;let V=b.nodeType;w.el=b,I===-2&&(q=!1,w.dynamicChildren=null);let R=null;switch(B){case _t:V!==3?w.children===""?(c(w.el=r(""),o(b),b),R=b):R=E():(b.data!==w.children&&(Ue=!0,b.data=w.children),R=i(b));break;case be:V!==8||D?R=E():R=i(b);break;case Ft:if(D&&(b=i(b),V=b.nodeType),V===1||V===3){R=b;const ge=!w.children.length;for(let X=0;X{q=q||!!w.dynamicChildren;const{type:D,props:E,patchFlag:B,shapeFlag:H,dirs:W}=w,I=D==="input"&&W||D==="option";if(I||B!==-1){if(W&&Re(w,null,$,"created"),E)if(I||!q||B&48)for(const R in E)(I&&R.endsWith("value")||Bt(R)&&!At(R))&&s(b,R,null,E[R],!1,void 0,$);else E.onClick&&s(b,"onClick",null,E.onClick,!1,void 0,$);let V;if((V=E&&E.onVnodeBeforeMount)&&we(V,$,w),W&&Re(w,null,$,"beforeMount"),((V=E&&E.onVnodeMounted)||W)&&Yr(()=>{V&&we(V,$,w),W&&Re(w,null,$,"mounted")},P),H&16&&!(E&&(E.innerHTML||E.textContent))){let R=T(b.firstChild,w,b,$,P,j,q);for(;R;){Ue=!0;const ge=R;R=R.nextSibling,l(ge)}}else H&8&&b.textContent!==w.children&&(Ue=!0,b.textContent=w.children)}return b.nextSibling},T=(b,w,$,P,j,q,D)=>{D=D||!!w.dynamicChildren;const E=w.children,B=E.length;for(let H=0;H{const{slotScopeIds:D}=w;D&&(j=j?j.concat(D):D);const E=o(b),B=T(i(b),w,E,$,P,j,q);return B&&Yt(B)&&B.data==="]"?i(w.anchor=B):(Ue=!0,c(w.anchor=a("]"),E,B),B)},F=(b,w,$,P,j,q)=>{if(Ue=!0,w.el=null,q){const B=K(b);for(;;){const H=i(b);if(H&&H!==B)l(H);else break}}const D=i(b),E=o(b);return l(b),n(null,w,E,D,$,P,zt(E),j),D},K=b=>{let w=0;for(;b;)if(b=i(b),b&&Yt(b)&&(b.data==="["&&w++,b.data==="]")){if(w===0)return i(b);w--}return b};return[d,h]}const de=Yr;function yl(e){return wl(e,bl)}function wl(e,t){const n=Hn();n.__VUE__=!0;const{insert:s,remove:r,patchProp:i,createElement:o,createText:l,createComment:c,setText:a,setElementText:d,parentNode:h,nextSibling:g,setScopeId:T=Ie,insertStaticContent:S}=e,F=(f,u,p,_=null,m=null,x=null,A=!1,C=null,v=!!u.dynamicChildren)=>{if(f===u)return;f&&!Ge(f,u)&&(_=jt(f),Oe(f,m,x,!0),f=null),u.patchFlag===-2&&(v=!1,u.dynamicChildren=null);const{type:y,ref:M,shapeFlag:O}=u;switch(y){case _t:K(f,u,p,_);break;case be:b(f,u,p,_);break;case Ft:f==null&&w(u,p,_,A);break;case he:I(f,u,p,_,m,x,A,C,v);break;default:O&1?j(f,u,p,_,m,x,A,C,v):O&6?V(f,u,p,_,m,x,A,C,v):(O&64||O&128)&&y.process(f,u,p,_,m,x,A,C,v,ot)}M!=null&&m&&fn(M,f&&f.ref,x,u||f,!u)},K=(f,u,p,_)=>{if(f==null)s(u.el=l(u.children),p,_);else{const m=u.el=f.el;u.children!==f.children&&a(m,u.children)}},b=(f,u,p,_)=>{f==null?s(u.el=c(u.children||""),p,_):u.el=f.el},w=(f,u,p,_)=>{[f.el,f.anchor]=S(f.children,u,p,_,f.el,f.anchor)},$=({el:f,anchor:u},p,_)=>{let m;for(;f&&f!==u;)m=g(f),s(f,p,_),f=m;s(u,p,_)},P=({el:f,anchor:u})=>{let p;for(;f&&f!==u;)p=g(f),r(f),f=p;r(u)},j=(f,u,p,_,m,x,A,C,v)=>{A=A||u.type==="svg",f==null?q(u,p,_,m,x,A,C,v):B(f,u,m,x,A,C,v)},q=(f,u,p,_,m,x,A,C)=>{let v,y;const{type:M,props:O,shapeFlag:L,transition:U,dirs:z}=f;if(v=f.el=o(f.type,x,O&&O.is,O),L&8?d(v,f.children):L&16&&E(f.children,v,null,_,m,x&&M!=="foreignObject",A,C),z&&Re(f,null,_,"created"),D(v,f,f.scopeId,A,_),O){for(const Z in O)Z!=="value"&&!At(Z)&&i(v,Z,null,O[Z],x,f.children,_,m,Se);"value"in O&&i(v,"value",null,O.value),(y=O.onVnodeBeforeMount)&&we(y,_,f)}z&&Re(f,null,_,"beforeMount");const G=(!m||m&&!m.pendingBranch)&&U&&!U.persisted;G&&U.beforeEnter(v),s(v,u,p),((y=O&&O.onVnodeMounted)||G||z)&&de(()=>{y&&we(y,_,f),G&&U.enter(v),z&&Re(f,null,_,"mounted")},m)},D=(f,u,p,_,m)=>{if(p&&T(f,p),_)for(let x=0;x<_.length;x++)T(f,_[x]);if(m){let x=m.subTree;if(u===x){const A=m.vnode;D(f,A,A.scopeId,A.slotScopeIds,m.parent)}}},E=(f,u,p,_,m,x,A,C,v=0)=>{for(let y=v;y{const C=u.el=f.el;let{patchFlag:v,dynamicChildren:y,dirs:M}=u;v|=f.patchFlag&16;const O=f.props||ee,L=u.props||ee;let U;p&&Je(p,!1),(U=L.onVnodeBeforeUpdate)&&we(U,p,u,f),M&&Re(u,f,p,"beforeUpdate"),p&&Je(p,!0);const z=m&&u.type!=="foreignObject";if(y?H(f.dynamicChildren,y,C,p,_,z,x):A||Q(f,u,C,null,p,_,z,x,!1),v>0){if(v&16)W(C,u,O,L,p,_,m);else if(v&2&&O.class!==L.class&&i(C,"class",null,L.class,m),v&4&&i(C,"style",O.style,L.style,m),v&8){const G=u.dynamicProps;for(let Z=0;Z{U&&we(U,p,u,f),M&&Re(u,f,p,"updated")},_)},H=(f,u,p,_,m,x,A)=>{for(let C=0;C{if(p!==_){if(p!==ee)for(const C in p)!At(C)&&!(C in _)&&i(f,C,p[C],null,A,u.children,m,x,Se);for(const C in _){if(At(C))continue;const v=_[C],y=p[C];v!==y&&C!=="value"&&i(f,C,y,v,A,u.children,m,x,Se)}"value"in _&&i(f,"value",p.value,_.value)}},I=(f,u,p,_,m,x,A,C,v)=>{const y=u.el=f?f.el:l(""),M=u.anchor=f?f.anchor:l("");let{patchFlag:O,dynamicChildren:L,slotScopeIds:U}=u;U&&(C=C?C.concat(U):U),f==null?(s(y,p,_),s(M,p,_),E(u.children,p,M,m,x,A,C,v)):O>0&&O&64&&L&&f.dynamicChildren?(H(f.dynamicChildren,L,p,m,x,A,C),(u.key!=null||m&&u===m.subTree)&&_s(f,u,!0)):Q(f,u,p,M,m,x,A,C,v)},V=(f,u,p,_,m,x,A,C,v)=>{u.slotScopeIds=C,f==null?u.shapeFlag&512?m.ctx.activate(u,p,_,A,v):R(u,p,_,m,x,A,v):ge(f,u,v)},R=(f,u,p,_,m,x,A)=>{const C=f.component=Rl(f,_,m);if(wn(f)&&(C.ctx.renderer=ot),Ml(C),C.asyncDep){if(m&&m.registerDep(C,X),!f.el){const v=C.subTree=ce(be);b(null,v,u,p)}return}X(C,f,u,p,m,x,A)},ge=(f,u,p)=>{const _=u.component=f.component;if(Uo(f,u,p))if(_.asyncDep&&!_.asyncResolved){ne(_,u,p);return}else _.next=u,Mo(_.update),_.update();else u.el=f.el,_.vnode=u},X=(f,u,p,_,m,x,A)=>{const C=()=>{if(f.isMounted){let{next:M,bu:O,u:L,parent:U,vnode:z}=f,G=M,Z;Je(f,!1),M?(M.el=z.el,ne(f,M,A)):M=z,O&&Qt(O),(Z=M.props&&M.props.onVnodeBeforeUpdate)&&we(Z,U,M,z),Je(f,!0);const re=In(f),Ee=f.subTree;f.subTree=re,F(Ee,re,h(Ee.el),jt(Ee),f,m,x),M.el=re.el,G===null&&jo(f,re.el),L&&de(L,m),(Z=M.props&&M.props.onVnodeUpdated)&&de(()=>we(Z,U,M,z),m)}else{let M;const{el:O,props:L}=u,{bm:U,m:z,parent:G}=f,Z=pt(u);if(Je(f,!1),U&&Qt(U),!Z&&(M=L&&L.onVnodeBeforeMount)&&we(M,G,u),Je(f,!0),O&&Pn){const re=()=>{f.subTree=In(f),Pn(O,f.subTree,f,m,null)};Z?u.type.__asyncLoader().then(()=>!f.isUnmounted&&re()):re()}else{const re=f.subTree=In(f);F(null,re,p,_,f,m,x),u.el=re.el}if(z&&de(z,m),!Z&&(M=L&&L.onVnodeMounted)){const re=u;de(()=>we(M,G,re),m)}(u.shapeFlag&256||G&&pt(G.vnode)&&G.vnode.shapeFlag&256)&&f.a&&de(f.a,m),f.isMounted=!0,u=p=_=null}},v=f.effect=new os(C,()=>hs(y),f.scope),y=f.update=()=>v.run();y.id=f.uid,Je(f,!0),y()},ne=(f,u,p)=>{u.component=f;const _=f.vnode.props;f.vnode=u,f.next=null,pl(f,u.props,_,p),_l(f,u.children,p),yt(),Ls(),wt()},Q=(f,u,p,_,m,x,A,C,v=!1)=>{const y=f&&f.children,M=f?f.shapeFlag:0,O=u.children,{patchFlag:L,shapeFlag:U}=u;if(L>0){if(L&128){Ut(y,O,p,_,m,x,A,C,v);return}else if(L&256){ze(y,O,p,_,m,x,A,C,v);return}}U&8?(M&16&&Se(y,m,x),O!==y&&d(p,O)):M&16?U&16?Ut(y,O,p,_,m,x,A,C,v):Se(y,m,x,!0):(M&8&&d(p,""),U&16&&E(O,p,_,m,x,A,C,v))},ze=(f,u,p,_,m,x,A,C,v)=>{f=f||at,u=u||at;const y=f.length,M=u.length,O=Math.min(y,M);let L;for(L=0;LM?Se(f,m,x,!0,!1,O):E(u,p,_,m,x,A,C,v,O)},Ut=(f,u,p,_,m,x,A,C,v)=>{let y=0;const M=u.length;let O=f.length-1,L=M-1;for(;y<=O&&y<=L;){const U=f[y],z=u[y]=v?Ke(u[y]):Te(u[y]);if(Ge(U,z))F(U,z,p,null,m,x,A,C,v);else break;y++}for(;y<=O&&y<=L;){const U=f[O],z=u[L]=v?Ke(u[L]):Te(u[L]);if(Ge(U,z))F(U,z,p,null,m,x,A,C,v);else break;O--,L--}if(y>O){if(y<=L){const U=L+1,z=UL)for(;y<=O;)Oe(f[y],m,x,!0),y++;else{const U=y,z=y,G=new Map;for(y=z;y<=L;y++){const me=u[y]=v?Ke(u[y]):Te(u[y]);me.key!=null&&G.set(me.key,y)}let Z,re=0;const Ee=L-z+1;let lt=!1,xs=0;const Ct=new Array(Ee);for(y=0;y=Ee){Oe(me,m,x,!0);continue}let Fe;if(me.key!=null)Fe=G.get(me.key);else for(Z=z;Z<=L;Z++)if(Ct[Z-z]===0&&Ge(me,u[Z])){Fe=Z;break}Fe===void 0?Oe(me,m,x,!0):(Ct[Fe-z]=y+1,Fe>=xs?xs=Fe:lt=!0,F(me,u[Fe],p,null,m,x,A,C,v),re++)}const Es=lt?Cl(Ct):at;for(Z=Es.length-1,y=Ee-1;y>=0;y--){const me=z+y,Fe=u[me],vs=me+1{const{el:x,type:A,transition:C,children:v,shapeFlag:y}=f;if(y&6){Ye(f.component.subTree,u,p,_);return}if(y&128){f.suspense.move(u,p,_);return}if(y&64){A.move(f,u,p,ot);return}if(A===he){s(x,u,p);for(let O=0;OC.enter(x),m);else{const{leave:O,delayLeave:L,afterLeave:U}=C,z=()=>s(x,u,p),G=()=>{O(x,()=>{z(),U&&U()})};L?L(x,z,G):G()}else s(x,u,p)},Oe=(f,u,p,_=!1,m=!1)=>{const{type:x,props:A,ref:C,children:v,dynamicChildren:y,shapeFlag:M,patchFlag:O,dirs:L}=f;if(C!=null&&fn(C,null,p,f,!0),M&256){u.ctx.deactivate(f);return}const U=M&1&&L,z=!pt(f);let G;if(z&&(G=A&&A.onVnodeBeforeUnmount)&&we(G,u,f),M&6)Li(f.component,p,_);else{if(M&128){f.suspense.unmount(p,_);return}U&&Re(f,null,u,"beforeUnmount"),M&64?f.type.remove(f,u,p,m,ot,_):y&&(x!==he||O>0&&O&64)?Se(y,u,p,!1,!0):(x===he&&O&384||!m&&M&16)&&Se(v,u,p),_&&ws(f)}(z&&(G=A&&A.onVnodeUnmounted)||U)&&de(()=>{G&&we(G,u,f),U&&Re(f,null,u,"unmounted")},p)},ws=f=>{const{type:u,el:p,anchor:_,transition:m}=f;if(u===he){Mi(p,_);return}if(u===Ft){P(f);return}const x=()=>{r(p),m&&!m.persisted&&m.afterLeave&&m.afterLeave()};if(f.shapeFlag&1&&m&&!m.persisted){const{leave:A,delayLeave:C}=m,v=()=>A(p,x);C?C(f.el,x,v):v()}else x()},Mi=(f,u)=>{let p;for(;f!==u;)p=g(f),r(f),f=p;r(u)},Li=(f,u,p)=>{const{bum:_,scope:m,update:x,subTree:A,um:C}=f;_&&Qt(_),m.stop(),x&&(x.active=!1,Oe(A,f,u,p)),C&&de(C,u),de(()=>{f.isUnmounted=!0},u),u&&u.pendingBranch&&!u.isUnmounted&&f.asyncDep&&!f.asyncResolved&&f.suspenseId===u.pendingId&&(u.deps--,u.deps===0&&u.resolve())},Se=(f,u,p,_=!1,m=!1,x=0)=>{for(let A=x;Af.shapeFlag&6?jt(f.component.subTree):f.shapeFlag&128?f.suspense.next():g(f.anchor||f.el),Cs=(f,u,p)=>{f==null?u._vnode&&Oe(u._vnode,null,null,!0):F(u._vnode||null,f,u,null,null,null,p),Ls(),rn(),u._vnode=f},ot={p:F,um:Oe,m:Ye,r:ws,mt:R,mc:E,pc:Q,pbc:H,n:jt,o:e};let An,Pn;return t&&([An,Pn]=t(ot)),{render:Cs,hydrate:An,createApp:ul(Cs,An)}}function Je({effect:e,update:t},n){e.allowRecurse=t.allowRecurse=n}function _s(e,t,n=!1){const s=e.children,r=t.children;if(N(s)&&N(r))for(let i=0;i>1,e[n[l]]0&&(t[s]=n[i-1]),n[i]=s)}}for(i=n.length,o=n[i-1];i-- >0;)n[i]=o,o=t[o];return n}const xl=e=>e.__isTeleport,Ot=e=>e&&(e.disabled||e.disabled===""),Vs=e=>typeof SVGElement<"u"&&e instanceof SVGElement,Jn=(e,t)=>{const n=e&&e.to;return se(n)?t?t(n):null:n},El={__isTeleport:!0,process(e,t,n,s,r,i,o,l,c,a){const{mc:d,pc:h,pbc:g,o:{insert:T,querySelector:S,createText:F,createComment:K}}=a,b=Ot(t.props);let{shapeFlag:w,children:$,dynamicChildren:P}=t;if(e==null){const j=t.el=F(""),q=t.anchor=F("");T(j,n,s),T(q,n,s);const D=t.target=Jn(t.props,S),E=t.targetAnchor=F("");D&&(T(E,D),o=o||Vs(D));const B=(H,W)=>{w&16&&d($,H,W,r,i,o,l,c)};b?B(n,q):D&&B(D,E)}else{t.el=e.el;const j=t.anchor=e.anchor,q=t.target=e.target,D=t.targetAnchor=e.targetAnchor,E=Ot(e.props),B=E?n:q,H=E?j:D;if(o=o||Vs(q),P?(g(e.dynamicChildren,P,B,r,i,o,l),_s(e,t,!0)):c||h(e,t,B,H,r,i,o,l,!1),b)E||Jt(t,n,j,a,1);else if((t.props&&t.props.to)!==(e.props&&e.props.to)){const W=t.target=Jn(t.props,S);W&&Jt(t,W,null,a,0)}else E&&Jt(t,q,D,a,1)}di(t)},remove(e,t,n,s,{um:r,o:{remove:i}},o){const{shapeFlag:l,children:c,anchor:a,targetAnchor:d,target:h,props:g}=e;if(h&&i(d),(o||!Ot(g))&&(i(a),l&16))for(let T=0;T0?Pe||at:null,Tl(),$t>0&&Pe&&Pe.push(e),e}function Zc(e,t,n,s,r,i){return pi(_i(e,t,n,s,r,i,!0))}function gi(e,t,n,s,r){return pi(ce(e,t,n,s,r,!0))}function an(e){return e?e.__v_isVNode===!0:!1}function Ge(e,t){return e.type===t.type&&e.key===t.key}const vn="__vInternal",mi=({key:e})=>e??null,en=({ref:e,ref_key:t,ref_for:n})=>(typeof e=="number"&&(e=""+e),e!=null?se(e)||ae(e)||k(e)?{i:le,r:e,k:t,f:!!n}:e:null);function _i(e,t=null,n=null,s=0,r=null,i=e===he?0:1,o=!1,l=!1){const c={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&mi(t),ref:t&&en(t),scopeId:bn,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:i,patchFlag:s,dynamicProps:r,dynamicChildren:null,appContext:null,ctx:le};return l?(bs(c,n),i&128&&e.normalize(c)):n&&(c.shapeFlag|=se(n)?8:16),$t>0&&!o&&Pe&&(c.patchFlag>0||i&6)&&c.patchFlag!==32&&Pe.push(c),c}const ce=Al;function Al(e,t=null,n=null,s=0,r=null,i=!1){if((!e||e===ni)&&(e=be),an(e)){const l=qe(e,t,!0);return n&&bs(l,n),$t>0&&!i&&Pe&&(l.shapeFlag&6?Pe[Pe.indexOf(e)]=l:Pe.push(l)),l.patchFlag|=-2,l}if($l(e)&&(e=e.__vccOpts),t){t=Pl(t);let{class:l,style:c}=t;l&&!se(l)&&(t.class=rs(l)),te(c)&&(Hr(c)&&!N(c)&&(c=ie({},c)),t.style=ss(c))}const o=se(e)?1:Do(e)?128:xl(e)?64:te(e)?4:k(e)?2:0;return _i(e,t,n,s,r,o,i,!0)}function Pl(e){return e?Hr(e)||vn in e?ie({},e):e:null}function qe(e,t,n=!1){const{props:s,ref:r,patchFlag:i,children:o}=e,l=t?Il(s||{},t):s;return{__v_isVNode:!0,__v_skip:!0,type:e.type,props:l,key:l&&mi(l),ref:t&&t.ref?n&&r?N(r)?r.concat(en(t)):[r,en(t)]:en(t):r,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:o,target:e.target,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==he?i===-1?16:i|16:i,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:e.transition,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&qe(e.ssContent),ssFallback:e.ssFallback&&qe(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce}}function bi(e=" ",t=0){return ce(_t,null,e,t)}function Qc(e,t){const n=ce(Ft,null,e);return n.staticCount=t,n}function Gc(e="",t=!1){return t?(hi(),gi(be,null,e)):ce(be,null,e)}function Te(e){return e==null||typeof e=="boolean"?ce(be):N(e)?ce(he,null,e.slice()):typeof e=="object"?Ke(e):ce(_t,null,String(e))}function Ke(e){return e.el===null&&e.patchFlag!==-1||e.memo?e:qe(e)}function bs(e,t){let n=0;const{shapeFlag:s}=e;if(t==null)t=null;else if(N(t))n=16;else if(typeof t=="object")if(s&65){const r=t.default;r&&(r._c&&(r._d=!1),bs(e,r()),r._c&&(r._d=!0));return}else{n=32;const r=t._;!r&&!(vn in t)?t._ctx=le:r===3&&le&&(le.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else k(t)?(t={default:t,_ctx:le},n=32):(t=String(t),s&64?(n=16,t=[bi(t)]):n=8);e.children=t,e.shapeFlag|=n}function Il(...e){const t={};for(let n=0;noe||le;let ys,ct,zs="__VUE_INSTANCE_SETTERS__";(ct=Hn()[zs])||(ct=Hn()[zs]=[]),ct.push(e=>oe=e),ys=e=>{ct.length>1?ct.forEach(t=>t(e)):ct[0](e)};const bt=e=>{ys(e),e.scope.on()},rt=()=>{oe&&oe.scope.off(),ys(null)};function wi(e){return e.vnode.shapeFlag&4}let Ht=!1;function Ml(e,t=!1){Ht=t;const{props:n,children:s}=e.vnode,r=wi(e);hl(e,n,r,t),ml(e,s);const i=r?Ll(e,t):void 0;return Ht=!1,i}function Ll(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=Pt(new Proxy(e.ctx,sl));const{setup:s}=n;if(s){const r=e.setupContext=s.length>1?xi(e):null;bt(e),yt();const i=We(s,e,0,[e.props,r]);if(wt(),rt(),Cr(i)){if(i.then(rt,rt),t)return i.then(o=>{Ys(e,o,t)}).catch(o=>{mn(o,e,0)});e.asyncDep=i}else Ys(e,i,t)}else Ci(e,t)}function Ys(e,t,n){k(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:te(t)&&(e.setupState=Kr(t)),Ci(e,n)}let Js;function Ci(e,t,n){const s=e.type;if(!e.render){if(!t&&Js&&!s.render){const r=s.template||gs(e).template;if(r){const{isCustomElement:i,compilerOptions:o}=e.appContext.config,{delimiters:l,compilerOptions:c}=s,a=ie(ie({isCustomElement:i,delimiters:l},o),c);s.render=Js(r,a)}}e.render=s.render||Ie}bt(e),yt(),il(e),wt(),rt()}function Sl(e){return e.attrsProxy||(e.attrsProxy=new Proxy(e.attrs,{get(t,n){return pe(e,"get","$attrs"),t[n]}}))}function xi(e){const t=n=>{e.exposed=n||{}};return{get attrs(){return Sl(e)},slots:e.slots,emit:e.emit,expose:t}}function Tn(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy(Kr(Pt(e.exposed)),{get(t,n){if(n in t)return t[n];if(n in It)return It[n](e)},has(t,n){return n in t||n in It}}))}function Nl(e,t=!0){return k(e)?e.displayName||e.name:e.name||t&&e.__name}function $l(e){return k(e)&&"__vccOpts"in e}const ve=(e,t)=>Oo(e,t,Ht);function Xn(e,t,n){const s=arguments.length;return s===2?te(t)&&!N(t)?an(t)?ce(e,null,[t]):ce(e,t):ce(e,null,t):(s>3?n=Array.prototype.slice.call(arguments,2):s===3&&an(n)&&(n=[n]),ce(e,t,n))}const Hl=Symbol.for("v-scx"),Bl=()=>gt(Hl),Ul="3.3.4",jl="http://www.w3.org/2000/svg",et=typeof document<"u"?document:null,Xs=et&&et.createElement("template"),Dl={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,s)=>{const r=t?et.createElementNS(jl,e):et.createElement(e,n?{is:n}:void 0);return e==="select"&&s&&s.multiple!=null&&r.setAttribute("multiple",s.multiple),r},createText:e=>et.createTextNode(e),createComment:e=>et.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>et.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,s,r,i){const o=n?n.previousSibling:t.lastChild;if(r&&(r===i||r.nextSibling))for(;t.insertBefore(r.cloneNode(!0),n),!(r===i||!(r=r.nextSibling)););else{Xs.innerHTML=s?`${e}`:e;const l=Xs.content;if(s){const c=l.firstChild;for(;c.firstChild;)l.appendChild(c.firstChild);l.removeChild(c)}t.insertBefore(l,n)}return[o?o.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}};function Kl(e,t,n){const s=e._vtc;s&&(t=(t?[t,...s]:[...s]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}function kl(e,t,n){const s=e.style,r=se(n);if(n&&!r){if(t&&!se(t))for(const i in t)n[i]==null&&Zn(s,i,"");for(const i in n)Zn(s,i,n[i])}else{const i=s.display;r?t!==n&&(s.cssText=n):t&&e.removeAttribute("style"),"_vod"in e&&(s.display=i)}}const Zs=/\s*!important$/;function Zn(e,t,n){if(N(n))n.forEach(s=>Zn(e,t,s));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const s=Wl(e,t);Zs.test(n)?e.setProperty(it(s),n.replace(Zs,""),"important"):e[s]=n}}const Qs=["Webkit","Moz","ms"],Rn={};function Wl(e,t){const n=Rn[t];if(n)return n;let s=Le(t);if(s!=="filter"&&s in e)return Rn[t]=s;s=hn(s);for(let r=0;rMn||(Xl.then(()=>Mn=0),Mn=Date.now());function Ql(e,t){const n=s=>{if(!s._vts)s._vts=Date.now();else if(s._vts<=n.attached)return;xe(Gl(s,n.value),t,5,[s])};return n.value=e,n.attached=Zl(),n}function Gl(e,t){if(N(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(s=>r=>!r._stopped&&s&&s(r))}else return t}const tr=/^on[a-z]/,ec=(e,t,n,s,r=!1,i,o,l,c)=>{t==="class"?Kl(e,s,r):t==="style"?kl(e,n,s):Bt(t)?Gn(t)||Yl(e,t,n,s,o):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):tc(e,t,s,r))?ql(e,t,s,i,o,l,c):(t==="true-value"?e._trueValue=s:t==="false-value"&&(e._falseValue=s),Vl(e,t,s,r))};function tc(e,t,n,s){return s?!!(t==="innerHTML"||t==="textContent"||t in e&&tr.test(t)&&k(n)):t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA"||tr.test(t)&&se(n)?!1:t in e}const je="transition",xt="animation",Ei=(e,{slots:t})=>Xn(qo,nc(e),t);Ei.displayName="Transition";const vi={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};Ei.props=ie({},Xr,vi);const Xe=(e,t=[])=>{N(e)?e.forEach(n=>n(...t)):e&&e(...t)},nr=e=>e?N(e)?e.some(t=>t.length>1):e.length>1:!1;function nc(e){const t={};for(const I in e)I in vi||(t[I]=e[I]);if(e.css===!1)return t;const{name:n="v",type:s,duration:r,enterFromClass:i=`${n}-enter-from`,enterActiveClass:o=`${n}-enter-active`,enterToClass:l=`${n}-enter-to`,appearFromClass:c=i,appearActiveClass:a=o,appearToClass:d=l,leaveFromClass:h=`${n}-leave-from`,leaveActiveClass:g=`${n}-leave-active`,leaveToClass:T=`${n}-leave-to`}=e,S=sc(r),F=S&&S[0],K=S&&S[1],{onBeforeEnter:b,onEnter:w,onEnterCancelled:$,onLeave:P,onLeaveCancelled:j,onBeforeAppear:q=b,onAppear:D=w,onAppearCancelled:E=$}=t,B=(I,V,R)=>{Ze(I,V?d:l),Ze(I,V?a:o),R&&R()},H=(I,V)=>{I._isLeaving=!1,Ze(I,h),Ze(I,T),Ze(I,g),V&&V()},W=I=>(V,R)=>{const ge=I?D:w,X=()=>B(V,I,R);Xe(ge,[V,X]),sr(()=>{Ze(V,I?c:i),De(V,I?d:l),nr(ge)||rr(V,s,F,X)})};return ie(t,{onBeforeEnter(I){Xe(b,[I]),De(I,i),De(I,o)},onBeforeAppear(I){Xe(q,[I]),De(I,c),De(I,a)},onEnter:W(!1),onAppear:W(!0),onLeave(I,V){I._isLeaving=!0;const R=()=>H(I,V);De(I,h),oc(),De(I,g),sr(()=>{I._isLeaving&&(Ze(I,h),De(I,T),nr(P)||rr(I,s,K,R))}),Xe(P,[I,R])},onEnterCancelled(I){B(I,!1),Xe($,[I])},onAppearCancelled(I){B(I,!0),Xe(E,[I])},onLeaveCancelled(I){H(I),Xe(j,[I])}})}function sc(e){if(e==null)return null;if(te(e))return[Ln(e.enter),Ln(e.leave)];{const t=Ln(e);return[t,t]}}function Ln(e){return ji(e)}function De(e,t){t.split(/\s+/).forEach(n=>n&&e.classList.add(n)),(e._vtc||(e._vtc=new Set)).add(t)}function Ze(e,t){t.split(/\s+/).forEach(s=>s&&e.classList.remove(s));const{_vtc:n}=e;n&&(n.delete(t),n.size||(e._vtc=void 0))}function sr(e){requestAnimationFrame(()=>{requestAnimationFrame(e)})}let rc=0;function rr(e,t,n,s){const r=e._endId=++rc,i=()=>{r===e._endId&&s()};if(n)return setTimeout(i,n);const{type:o,timeout:l,propCount:c}=ic(e,t);if(!o)return s();const a=o+"end";let d=0;const h=()=>{e.removeEventListener(a,g),i()},g=T=>{T.target===e&&++d>=c&&h()};setTimeout(()=>{d(n[S]||"").split(", "),r=s(`${je}Delay`),i=s(`${je}Duration`),o=ir(r,i),l=s(`${xt}Delay`),c=s(`${xt}Duration`),a=ir(l,c);let d=null,h=0,g=0;t===je?o>0&&(d=je,h=o,g=i.length):t===xt?a>0&&(d=xt,h=a,g=c.length):(h=Math.max(o,a),d=h>0?o>a?je:xt:null,g=d?d===je?i.length:c.length:0);const T=d===je&&/\b(transform|all)(,|$)/.test(s(`${je}Property`).toString());return{type:d,timeout:h,propCount:g,hasTransform:T}}function ir(e,t){for(;e.lengthor(n)+or(e[s])))}function or(e){return Number(e.slice(0,-1).replace(",","."))*1e3}function oc(){return document.body.offsetHeight}const lr=e=>{const t=e.props["onUpdate:modelValue"]||!1;return N(t)?n=>Qt(t,n):t};function lc(e){e.target.composing=!0}function cr(e){const t=e.target;t.composing&&(t.composing=!1,t.dispatchEvent(new Event("input")))}const ef={created(e,{modifiers:{lazy:t,trim:n,number:s}},r){e._assign=lr(r);const i=s||r.props&&r.props.type==="number";ft(e,t?"change":"input",o=>{if(o.target.composing)return;let l=e.value;n&&(l=l.trim()),i&&(l=$n(l)),e._assign(l)}),n&&ft(e,"change",()=>{e.value=e.value.trim()}),t||(ft(e,"compositionstart",lc),ft(e,"compositionend",cr),ft(e,"change",cr))},mounted(e,{value:t}){e.value=t??""},beforeUpdate(e,{value:t,modifiers:{lazy:n,trim:s,number:r}},i){if(e._assign=lr(i),e.composing||document.activeElement===e&&e.type!=="range"&&(n||s&&e.value.trim()===t||(r||e.type==="number")&&$n(e.value)===t))return;const o=t??"";e.value!==o&&(e.value=o)}},cc=["ctrl","shift","alt","meta"],fc={stop:e=>e.stopPropagation(),prevent:e=>e.preventDefault(),self:e=>e.target!==e.currentTarget,ctrl:e=>!e.ctrlKey,shift:e=>!e.shiftKey,alt:e=>!e.altKey,meta:e=>!e.metaKey,left:e=>"button"in e&&e.button!==0,middle:e=>"button"in e&&e.button!==1,right:e=>"button"in e&&e.button!==2,exact:(e,t)=>cc.some(n=>e[`${n}Key`]&&!t.includes(n))},tf=(e,t)=>(n,...s)=>{for(let r=0;rn=>{if(!("key"in n))return;const s=it(n.key);if(t.some(r=>r===s||ac[r]===s))return e(n)},sf={beforeMount(e,{value:t},{transition:n}){e._vod=e.style.display==="none"?"":e.style.display,n&&t?n.beforeEnter(e):Et(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e)},updated(e,{value:t,oldValue:n},{transition:s}){!t!=!n&&(s?t?(s.beforeEnter(e),Et(e,!0),s.enter(e)):s.leave(e,()=>{Et(e,!1)}):Et(e,t))},beforeUnmount(e,{value:t}){Et(e,t)}};function Et(e,t){e.style.display=t?e._vod:"none"}const uc=ie({patchProp:ec},Dl);let Sn,fr=!1;function dc(){return Sn=fr?Sn:yl(uc),fr=!0,Sn}const rf=(...e)=>{const t=dc().createApp(...e),{mount:n}=t;return t.mount=s=>{const r=hc(s);if(r)return n(r,!0,r instanceof SVGElement)},t};function hc(e){return se(e)?document.querySelector(e):e}const of=(e,t)=>{const n=e.__vccOpts||e;for(const[s,r]of t)n[s]=r;return n},pc="modulepreload",gc=function(e){return"/document/"+e},ar={},lf=function(t,n,s){if(!n||n.length===0)return t();const r=document.getElementsByTagName("link");return Promise.all(n.map(i=>{if(i=gc(i),i in ar)return;ar[i]=!0;const o=i.endsWith(".css"),l=o?'[rel="stylesheet"]':"";if(!!s)for(let d=r.length-1;d>=0;d--){const h=r[d];if(h.href===i&&(!o||h.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${i}"]${l}`))return;const a=document.createElement("link");if(a.rel=o?"stylesheet":pc,o||(a.as="script",a.crossOrigin=""),a.href=i,document.head.appendChild(a),o)return new Promise((d,h)=>{a.addEventListener("load",d),a.addEventListener("error",()=>h(new Error(`Unable to preload CSS for ${i}`)))})})).then(()=>t()).catch(i=>{const o=new Event("vite:preloadError",{cancelable:!0});if(o.payload=i,window.dispatchEvent(o),!o.defaultPrevented)throw i})},mc=window.__VP_SITE_DATA__,Ti=/^[a-z]+:/i,cf=/^pathname:\/\//,ff="vitepress-theme-appearance",Ai=/#.*$/,_c=/(index)?\.(md|html)$/,Ce=typeof document<"u",Pi={relativePath:"",filePath:"",title:"404",description:"Not Found",headers:[],frontmatter:{sidebar:!1,layout:"page"},lastUpdated:0,isNotFound:!0};function bc(e,t,n=!1){if(t===void 0)return!1;if(e=ur(`/${e}`),n)return new RegExp(t).test(e);if(ur(t)!==e)return!1;const s=t.match(Ai);return s?(Ce?location.hash:"")===s[0]:!0}function ur(e){return decodeURI(e).replace(Ai,"").replace(_c,"")}function yc(e){return Ti.test(e)}function wc(e,t){var s,r,i,o,l,c,a;const n=Object.keys(e.locales).find(d=>d!=="root"&&!yc(d)&&bc(t,`/${d}/`,!0))||"root";return Object.assign({},e,{localeIndex:n,lang:((s=e.locales[n])==null?void 0:s.lang)??e.lang,dir:((r=e.locales[n])==null?void 0:r.dir)??e.dir,title:((i=e.locales[n])==null?void 0:i.title)??e.title,titleTemplate:((o=e.locales[n])==null?void 0:o.titleTemplate)??e.titleTemplate,description:((l=e.locales[n])==null?void 0:l.description)??e.description,head:Oi(e.head,((c=e.locales[n])==null?void 0:c.head)??[]),themeConfig:{...e.themeConfig,...(a=e.locales[n])==null?void 0:a.themeConfig}})}function Ii(e,t){const n=t.title||e.title,s=t.titleTemplate??e.titleTemplate;if(typeof s=="string"&&s.includes(":title"))return s.replace(/:title/g,n);const r=Cc(e.title,s);return`${n}${r}`}function Cc(e,t){return t===!1?"":t===!0||t===void 0?` | ${e}`:e===t?"":` | ${t}`}function xc(e,t){const[n,s]=t;if(n!=="meta")return!1;const r=Object.entries(s)[0];return r==null?!1:e.some(([i,o])=>i===n&&o[r[0]]===r[1])}function Oi(e,t){return[...e.filter(n=>!xc(t,n)),...t]}const Ec=/[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g,vc=/^[a-z]:/i;function dr(e){const t=vc.exec(e),n=t?t[0]:"";return n+e.slice(n.length).replace(Ec,"_").replace(/(^|\/)_+(?=[^/]*$)/,"$1")}const Tc=Symbol(),nt=vo(mc);function af(e){const t=ve(()=>wc(nt.value,e.data.relativePath));return{site:t,theme:ve(()=>t.value.themeConfig),page:ve(()=>e.data),frontmatter:ve(()=>e.data.frontmatter),params:ve(()=>e.data.params),lang:ve(()=>t.value.lang),dir:ve(()=>t.value.dir),localeIndex:ve(()=>t.value.localeIndex||"root"),title:ve(()=>Ii(t.value,e.data)),description:ve(()=>e.data.description||t.value.description),isDark:jr(!1)}}function Ac(){const e=gt(Tc);if(!e)throw new Error("vitepress data not properly injected in app");return e}function Pc(e,t){return`${e}${t}`.replace(/\/+/g,"/")}function hr(e){return Ti.test(e)||e.startsWith(".")?e:Pc(nt.value.base,e)}function Ic(e){let t=e.replace(/\.html$/,"");if(t=decodeURIComponent(t),t=t.replace(/\/$/,"/index"),Ce){const n="/document/";t=dr(t.slice(n.length).replace(/\//g,"_")||"index")+".md";let s=__VP_HASH_MAP__[t.toLowerCase()];if(s||(t=t.endsWith("_index.md")?t.slice(0,-9)+".md":t.slice(0,-3)+"_index.md",s=__VP_HASH_MAP__[t.toLowerCase()]),!s)return null;t=`${n}assets/${t}.${s}.js`}else t=`./${dr(t.slice(1).replace(/\//g,"_"))}.md.js`;return t}let tn=[];function uf(e){tn.push(e),En(()=>{tn=tn.filter(t=>t!==e)})}const Oc=Symbol(),pr="http://a.com",Fc=()=>({path:"/",component:null,data:Pi});function df(e,t){const n=gn(Fc()),s={route:n,go:r};async function r(l=Ce?location.href:"/"){var a,d;if(await((a=s.onBeforeRouteChange)==null?void 0:a.call(s,l))===!1)return;const c=new URL(l,pr);nt.value.cleanUrls||!c.pathname.endsWith("/")&&!c.pathname.endsWith(".html")&&(c.pathname+=".html",l=c.pathname+c.search+c.hash),_r(l),await o(l),await((d=s.onAfterRouteChanged)==null?void 0:d.call(s,l))}let i=null;async function o(l,c=0,a=!1){var g;if(await((g=s.onBeforePageLoad)==null?void 0:g.call(s,l))===!1)return;const d=new URL(l,pr),h=i=d.pathname;try{let T=await e(h);if(!T)throw new Error(`Page not found: ${h}`);if(i===h){i=null;const{default:S,__pageData:F}=T;if(!S)throw new Error(`Invalid route component: ${S}`);n.path=Ce?h:hr(h),n.component=Pt(S),n.data=Pt(F),Ce&&Wr(()=>{let K=nt.value.base+F.relativePath.replace(/(?:(^|\/)index)?\.md$/,"$1");if(!nt.value.cleanUrls&&!K.endsWith("/")&&(K+=".html"),K!==d.pathname&&(d.pathname=K,l=K+d.search+d.hash,history.replaceState(null,"",l)),d.hash&&!c){let b=null;try{b=document.getElementById(decodeURIComponent(d.hash).slice(1))}catch(w){console.warn(w)}if(b){gr(b,d.hash);return}}window.scrollTo(0,c)})}}catch(T){if(!/fetch|Page not found/.test(T.message)&&!/^\/404(\.html|\/)?$/.test(l)&&console.error(T),!a)try{const S=await fetch(nt.value.base+"hashmap.json");window.__VP_HASH_MAP__=await S.json(),await o(l,c,!0);return}catch{}i===h&&(i=null,n.path=Ce?h:hr(h),n.component=t?Pt(t):null,n.data=Pi)}}return Ce&&(window.addEventListener("click",l=>{if(l.target.closest("button"))return;const a=l.target.closest("a");if(a&&!a.closest(".vp-raw")&&(a instanceof SVGElement||!a.download)){const{target:d}=a,{href:h,origin:g,pathname:T,hash:S,search:F}=new URL(a.href instanceof SVGAnimatedString?a.href.animVal:a.href,a.baseURI),K=window.location,b=T.match(/\.\w+$/);!l.ctrlKey&&!l.shiftKey&&!l.altKey&&!l.metaKey&&!d&&g===K.origin&&!(b&&b[0]!==".html")&&(l.preventDefault(),T===K.pathname&&F===K.search?(S!==K.hash&&(history.pushState(null,"",S),window.dispatchEvent(new Event("hashchange"))),S?gr(a,S,a.classList.contains("header-anchor")):(_r(h),window.scrollTo(0,0))):r(h))}},{capture:!0}),window.addEventListener("popstate",l=>{o(location.href,l.state&&l.state.scrollPosition||0)}),window.addEventListener("hashchange",l=>{l.preventDefault()})),s}function Rc(){const e=gt(Oc);if(!e)throw new Error("useRouter() is called without provider.");return e}function Fi(){return Rc().route}function gr(e,t,n=!1){let s=null;try{s=e.classList.contains("header-anchor")?e:document.getElementById(decodeURIComponent(t).slice(1))}catch(r){console.warn(r)}if(s){let a=function(){!n||Math.abs(c-window.scrollY)>window.innerHeight?window.scrollTo(0,c):window.scrollTo({left:0,top:c,behavior:"smooth"})},r=nt.value.scrollOffset,i=0,o=24;if(typeof r=="object"&&"padding"in r&&(o=r.padding,r=r.selector),typeof r=="number")i=r;else if(typeof r=="string")i=mr(r,o);else if(Array.isArray(r))for(const d of r){const h=mr(d,o);if(h){i=h;break}}const l=parseInt(window.getComputedStyle(s).paddingTop,10),c=window.scrollY+s.getBoundingClientRect().top-i+l;requestAnimationFrame(a)}}function mr(e,t){const n=document.querySelector(e);if(!n)return 0;const s=n.getBoundingClientRect().bottom;return s<0?0:s+t}function _r(e){Ce&&e!==location.href&&(history.replaceState({scrollPosition:window.scrollY},document.title),history.pushState(null,"",e))}const br=()=>tn.forEach(e=>e()),hf=Gr({name:"VitePressContent",props:{as:{type:[Object,String],default:"div"}},setup(e){const t=Fi(),{site:n}=Ac();return()=>Xn(e.as,n.value.contentProps??{style:{position:"relative"}},[t.component?Xn(t.component,{onVnodeMounted:br,onVnodeUpdated:br}):"404 Page Not Found"])}}),pf=Gr({setup(e,{slots:t}){const n=jr(!1);return xn(()=>{n.value=!0}),()=>n.value&&t.default?t.default():null}});function gf(){Ce&&window.addEventListener("click",e=>{var n;const t=e.target;if(t.matches(".vp-code-group input")){const s=(n=t.parentElement)==null?void 0:n.parentElement;if(!s)return;const r=Array.from(s.querySelectorAll("input")).indexOf(t);if(r<0)return;const i=s.querySelector(".blocks");if(!i)return;const o=Array.from(i.children).find(a=>a.classList.contains("active"));if(!o)return;const l=i.children[r];if(!l||o===l)return;o.classList.remove("active"),l.classList.add("active");const c=s==null?void 0:s.querySelector(`label[for="${t.id}"]`);c==null||c.scrollIntoView({block:"nearest"})}})}function mf(){if(Ce){const e=new WeakMap;window.addEventListener("click",t=>{var s;const n=t.target;if(n.matches('div[class*="language-"] > button.copy')){const r=n.parentElement,i=(s=n.nextElementSibling)==null?void 0:s.nextElementSibling;if(!r||!i)return;const o=/language-(shellscript|shell|bash|sh|zsh)/.test(r.className);let l="";i.querySelectorAll("span.line:not(.diff.remove)").forEach(c=>l+=(c.textContent||"")+` -`),l=l.slice(0,-1),o&&(l=l.replace(/^ *(\$|>) /gm,"").trim()),Mc(l).then(()=>{n.classList.add("copied"),clearTimeout(e.get(n));const c=setTimeout(()=>{n.classList.remove("copied"),n.blur(),e.delete(n)},2e3);e.set(n,c)})}})}}async function Mc(e){try{return navigator.clipboard.writeText(e)}catch{const t=document.createElement("textarea"),n=document.activeElement;t.value=e,t.setAttribute("readonly",""),t.style.contain="strict",t.style.position="absolute",t.style.left="-9999px",t.style.fontSize="12pt";const s=document.getSelection(),r=s?s.rangeCount>0&&s.getRangeAt(0):null;document.body.appendChild(t),t.select(),t.selectionStart=0,t.selectionEnd=e.length,document.execCommand("copy"),document.body.removeChild(t),r&&(s.removeAllRanges(),s.addRange(r)),n&&n.focus()}}function _f(e,t){let n=[],s=!0;const r=i=>{if(s){s=!1;return}n.forEach(o=>document.head.removeChild(o)),n=[],i.forEach(o=>{const l=yr(o);document.head.appendChild(l),n.push(l)})};Ko(()=>{const i=e.data,o=t.value,l=i&&i.description,c=i&&i.frontmatter.head||[];document.title=Ii(o,i);const a=l||o.description;let d=document.querySelector("meta[name=description]");d?d.setAttribute("content",a):yr(["meta",{name:"description",content:a}]),r(Oi(o.head,Sc(c)))})}function yr([e,t,n]){const s=document.createElement(e);for(const r in t)s.setAttribute(r,t[r]);return n&&(s.innerHTML=n),s}function Lc(e){return e[0]==="meta"&&e[1]&&e[1].name==="description"}function Sc(e){return e.filter(t=>!Lc(t))}const Nn=new Set,Ri=()=>document.createElement("link"),Nc=e=>{const t=Ri();t.rel="prefetch",t.href=e,document.head.appendChild(t)},$c=e=>{const t=new XMLHttpRequest;t.open("GET",e,t.withCredentials=!0),t.send()};let Xt;const Hc=Ce&&(Xt=Ri())&&Xt.relList&&Xt.relList.supports&&Xt.relList.supports("prefetch")?Nc:$c;function bf(){if(!Ce||!window.IntersectionObserver)return;let e;if((e=navigator.connection)&&(e.saveData||/2g/.test(e.effectiveType)))return;const t=window.requestIdleCallback||setTimeout;let n=null;const s=()=>{n&&n.disconnect(),n=new IntersectionObserver(i=>{i.forEach(o=>{if(o.isIntersecting){const l=o.target;n.unobserve(l);const{pathname:c}=l;if(!Nn.has(c)){Nn.add(c);const a=Ic(c);a&&Hc(a)}}})}),t(()=>{document.querySelectorAll("#app a").forEach(i=>{const{hostname:o,pathname:l}=new URL(i.href instanceof SVGAnimatedString?i.href.animVal:i.href,i.baseURI),c=l.match(/\.\w+$/);c&&c[0]!==".html"||i.target!=="_blank"&&o===location.hostname&&(l!==location.pathname?n.observe(i):Nn.add(l))})})};xn(s);const r=Fi();Gt(()=>r.path,s),En(()=>{n&&n.disconnect()})}export{ef as $,Ce as A,En as B,Kc as C,Qo as D,Wc as E,he as F,qc as G,vo as H,uf as I,ce as J,Vc as K,Ti as L,Fi as M,Il as N,gt as O,cf as P,ss as Q,Wr as R,Qc as S,Ei as T,ff as U,$r as V,lf as W,kc as X,sf as Y,tf as Z,of as _,bi as a,Xc as a0,dl as a1,nf as a2,Yc as a3,Jc as a4,_f as a5,Oc as a6,af as a7,Tc as a8,hf as a9,pf as aa,nt as ab,rf as ac,df as ad,Ic as ae,bf as af,mf as ag,gf as ah,Xn as ai,gi as b,Zc as c,Gr as d,Gc as e,hr as f,ve as g,jr as h,yc as i,xn as j,_i as k,Ao as l,Dc as m,rs as n,hi as o,jc as p,Ji as q,zc as r,Uc as s,Bc as t,Ac as u,Gt as v,$o as w,Ko as x,yi as y,bc as z}; diff --git a/docs/document/assets/chunks/framework.E60viAY0.js b/docs/document/assets/chunks/framework.E60viAY0.js new file mode 100644 index 000000000..026996cc5 --- /dev/null +++ b/docs/document/assets/chunks/framework.E60viAY0.js @@ -0,0 +1,2 @@ +function hi(e,t){const n=Object.create(null),i=e.split(",");for(let o=0;o!!n[o.toLowerCase()]:o=>!!n[o]}const te={},ht=[],Me=()=>{},fr=()=>!1,ur=/^on[^a-z]/,qt=e=>ur.test(e),gi=e=>e.startsWith("onUpdate:"),re=Object.assign,xi=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},pr=Object.prototype.hasOwnProperty,X=(e,t)=>pr.call(e,t),B=Array.isArray,gt=e=>En(e)==="[object Map]",Bs=e=>En(e)==="[object Set]",q=e=>typeof e=="function",ne=e=>typeof e=="string",Cn=e=>typeof e=="symbol",ee=e=>e!==null&&typeof e=="object",Us=e=>(ee(e)||q(e))&&q(e.then)&&q(e.catch),Ks=Object.prototype.toString,En=e=>Ks.call(e),dr=e=>En(e).slice(8,-1),Ws=e=>En(e)==="[object Object]",yi=e=>ne(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,Mt=hi(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),Tn=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},mr=/-(\w)/g,Ie=Tn(e=>e.replace(mr,(t,n)=>n?n.toUpperCase():"")),hr=/\B([A-Z])/g,ft=Tn(e=>e.replace(hr,"-$1").toLowerCase()),An=Tn(e=>e.charAt(0).toUpperCase()+e.slice(1)),cn=Tn(e=>e?`on${An(e)}`:""),ct=(e,t)=>!Object.is(e,t),fn=(e,t)=>{for(let n=0;n{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},Gn=e=>{const t=parseFloat(e);return isNaN(t)?e:t},gr=e=>{const t=ne(e)?Number(e):NaN;return isNaN(t)?e:t};let Wi;const ei=()=>Wi||(Wi=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});function vi(e){if(B(e)){const t={};for(let n=0;n{if(n){const i=n.split(yr);i.length>1&&(t[i[0].trim()]=i[1].trim())}}),t}function bi(e){let t="";if(ne(e))t=e;else if(B(e))for(let n=0;nne(e)?e:e==null?"":B(e)||ee(e)&&(e.toString===Ks||!q(e.toString))?JSON.stringify(e,Vs,2):String(e),Vs=(e,t)=>t&&t.__v_isRef?Vs(e,t.value):gt(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[i,o])=>(n[`${i} =>`]=o,n),{})}:Bs(t)?{[`Set(${t.size})`]:[...t.values()]}:ee(t)&&!B(t)&&!Ws(t)?String(t):t;let ve;class Cr{constructor(t=!1){this.detached=t,this._active=!0,this.effects=[],this.cleanups=[],this.parent=ve,!t&&ve&&(this.index=(ve.scopes||(ve.scopes=[])).push(this)-1)}get active(){return this._active}run(t){if(this._active){const n=ve;try{return ve=this,t()}finally{ve=n}}}on(){ve=this}off(){ve=this.parent}stop(t){if(this._active){let n,i;for(n=0,i=this.effects.length;n{const t=new Set(e);return t.w=0,t.n=0,t},Ys=e=>(e.w&Je)>0,Js=e=>(e.n&Je)>0,Ar=({deps:e})=>{if(e.length)for(let t=0;t{const{deps:t}=e;if(t.length){let n=0;for(let i=0;i{(p==="length"||!Cn(p)&&p>=a)&&l.push(c)})}else switch(n!==void 0&&l.push(r.get(n)),t){case"add":B(e)?yi(n)&&l.push(r.get("length")):(l.push(r.get(ot)),gt(e)&&l.push(r.get(ni)));break;case"delete":B(e)||(l.push(r.get(ot)),gt(e)&&l.push(r.get(ni)));break;case"set":gt(e)&&l.push(r.get(ot));break}if(l.length===1)l[0]&&ii(l[0]);else{const a=[];for(const c of l)c&&a.push(...c);ii(_i(a))}}function ii(e,t){const n=B(e)?e:[...e];for(const i of n)i.computed&&Vi(i);for(const i of n)i.computed||Vi(i)}function Vi(e,t){(e!==je||e.allowRecurse)&&(e.scheduler?e.scheduler():e.run())}function Sr(e,t){var n;return(n=mn.get(e))==null?void 0:n.get(t)}const Or=hi("__proto__,__v_isRef,__isVue"),Zs=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(Cn)),zi=Rr();function Rr(){const e={};return["includes","indexOf","lastIndexOf"].forEach(t=>{e[t]=function(...n){const i=Q(this);for(let s=0,r=this.length;s{e[t]=function(...n){Tt();const i=Q(this)[t].apply(this,n);return At(),i}}),e}function Pr(e){const t=Q(this);return xe(t,"has",e),t.hasOwnProperty(e)}class Gs{constructor(t=!1,n=!1){this._isReadonly=t,this._shallow=n}get(t,n,i){const o=this._isReadonly,s=this._shallow;if(n==="__v_isReactive")return!o;if(n==="__v_isReadonly")return o;if(n==="__v_isShallow")return s;if(n==="__v_raw"&&i===(o?s?Wr:io:s?no:to).get(t))return t;const r=B(t);if(!o){if(r&&X(zi,n))return Reflect.get(zi,n,i);if(n==="hasOwnProperty")return Pr}const l=Reflect.get(t,n,i);return(Cn(n)?Zs.has(n):Or(n))||(o||xe(t,"get",n),s)?l:ae(l)?r&&yi(n)?l:l.value:ee(l)?o?On(l):Sn(l):l}}class eo extends Gs{constructor(t=!1){super(!1,t)}set(t,n,i,o){let s=t[n];if(_t(s)&&ae(s)&&!ae(i))return!1;if(!this._shallow&&(!hn(i)&&!_t(i)&&(s=Q(s),i=Q(i)),!B(t)&&ae(s)&&!ae(i)))return s.value=i,!0;const r=B(t)&&yi(n)?Number(n)e,jn=e=>Reflect.getPrototypeOf(e);function Yt(e,t,n=!1,i=!1){e=e.__v_raw;const o=Q(e),s=Q(t);n||(ct(t,s)&&xe(o,"get",t),xe(o,"get",s));const{has:r}=jn(o),l=i?Ci:n?Ai:$t;if(r.call(o,t))return l(e.get(t));if(r.call(o,s))return l(e.get(s));e!==o&&e.get(t)}function Jt(e,t=!1){const n=this.__v_raw,i=Q(n),o=Q(e);return t||(ct(e,o)&&xe(i,"has",e),xe(i,"has",o)),e===o?n.has(e):n.has(e)||n.has(o)}function Xt(e,t=!1){return e=e.__v_raw,!t&&xe(Q(e),"iterate",ot),Reflect.get(e,"size",e)}function Yi(e){e=Q(e);const t=Q(this);return jn(t).has.call(t,e)||(t.add(e),He(t,"add",e,e)),this}function Ji(e,t){t=Q(t);const n=Q(this),{has:i,get:o}=jn(n);let s=i.call(n,e);s||(e=Q(e),s=i.call(n,e));const r=o.call(n,e);return n.set(e,t),s?ct(t,r)&&He(n,"set",e,t):He(n,"add",e,t),this}function Xi(e){const t=Q(this),{has:n,get:i}=jn(t);let o=n.call(t,e);o||(e=Q(e),o=n.call(t,e)),i&&i.call(t,e);const s=t.delete(e);return o&&He(t,"delete",e,void 0),s}function Qi(){const e=Q(this),t=e.size!==0,n=e.clear();return t&&He(e,"clear",void 0,void 0),n}function Qt(e,t){return function(i,o){const s=this,r=s.__v_raw,l=Q(r),a=t?Ci:e?Ai:$t;return!e&&xe(l,"iterate",ot),r.forEach((c,p)=>i.call(o,a(c),a(p),s))}}function Zt(e,t,n){return function(...i){const o=this.__v_raw,s=Q(o),r=gt(s),l=e==="entries"||e===Symbol.iterator&&r,a=e==="keys"&&r,c=o[e](...i),p=n?Ci:t?Ai:$t;return!t&&xe(s,"iterate",a?ni:ot),{next(){const{value:d,done:x}=c.next();return x?{value:d,done:x}:{value:l?[p(d[0]),p(d[1])]:p(d),done:x}},[Symbol.iterator](){return this}}}}function De(e){return function(...t){return e==="delete"?!1:e==="clear"?void 0:this}}function kr(){const e={get(s){return Yt(this,s)},get size(){return Xt(this)},has:Jt,add:Yi,set:Ji,delete:Xi,clear:Qi,forEach:Qt(!1,!1)},t={get(s){return Yt(this,s,!1,!0)},get size(){return Xt(this)},has:Jt,add:Yi,set:Ji,delete:Xi,clear:Qi,forEach:Qt(!1,!0)},n={get(s){return Yt(this,s,!0)},get size(){return Xt(this,!0)},has(s){return Jt.call(this,s,!0)},add:De("add"),set:De("set"),delete:De("delete"),clear:De("clear"),forEach:Qt(!0,!1)},i={get(s){return Yt(this,s,!0,!0)},get size(){return Xt(this,!0)},has(s){return Jt.call(this,s,!0)},add:De("add"),set:De("set"),delete:De("delete"),clear:De("clear"),forEach:Qt(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(s=>{e[s]=Zt(s,!1,!1),n[s]=Zt(s,!0,!1),t[s]=Zt(s,!1,!0),i[s]=Zt(s,!0,!0)}),[e,n,t,i]}const[Nr,Hr,$r,Dr]=kr();function Ei(e,t){const n=t?e?Dr:$r:e?Hr:Nr;return(i,o,s)=>o==="__v_isReactive"?!e:o==="__v_isReadonly"?e:o==="__v_raw"?i:Reflect.get(X(n,o)&&o in i?n:i,o,s)}const Br={get:Ei(!1,!1)},Ur={get:Ei(!1,!0)},Kr={get:Ei(!0,!1)},to=new WeakMap,no=new WeakMap,io=new WeakMap,Wr=new WeakMap;function qr(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function Vr(e){return e.__v_skip||!Object.isExtensible(e)?0:qr(dr(e))}function Sn(e){return _t(e)?e:Ti(e,!1,Mr,Br,to)}function zr(e){return Ti(e,!1,Lr,Ur,no)}function On(e){return Ti(e,!0,Ir,Kr,io)}function Ti(e,t,n,i,o){if(!ee(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const s=o.get(e);if(s)return s;const r=Vr(e);if(r===0)return e;const l=new Proxy(e,r===2?i:n);return o.set(e,l),l}function xt(e){return _t(e)?xt(e.__v_raw):!!(e&&e.__v_isReactive)}function _t(e){return!!(e&&e.__v_isReadonly)}function hn(e){return!!(e&&e.__v_isShallow)}function so(e){return xt(e)||_t(e)}function Q(e){const t=e&&e.__v_raw;return t?Q(t):e}function It(e){return dn(e,"__v_skip",!0),e}const $t=e=>ee(e)?Sn(e):e,Ai=e=>ee(e)?On(e):e;function ji(e){Ve&&je&&(e=Q(e),Qs(e.dep||(e.dep=_i())))}function Si(e,t){e=Q(e);const n=e.dep;n&&ii(n)}function ae(e){return!!(e&&e.__v_isRef===!0)}function ge(e){return ro(e,!1)}function oo(e){return ro(e,!0)}function ro(e,t){return ae(e)?e:new Yr(e,t)}class Yr{constructor(t,n){this.__v_isShallow=n,this.dep=void 0,this.__v_isRef=!0,this._rawValue=n?t:Q(t),this._value=n?t:$t(t)}get value(){return ji(this),this._value}set value(t){const n=this.__v_isShallow||hn(t)||_t(t);t=n?t:Q(t),ct(t,this._rawValue)&&(this._rawValue=t,this._value=n?t:$t(t),Si(this))}}function lo(e){return ae(e)?e.value:e}const Jr={get:(e,t,n)=>lo(Reflect.get(e,t,n)),set:(e,t,n,i)=>{const o=e[t];return ae(o)&&!ae(n)?(o.value=n,!0):Reflect.set(e,t,n,i)}};function ao(e){return xt(e)?e:new Proxy(e,Jr)}class Xr{constructor(t){this.dep=void 0,this.__v_isRef=!0;const{get:n,set:i}=t(()=>ji(this),()=>Si(this));this._get=n,this._set=i}get value(){return this._get()}set value(t){this._set(t)}}function Qr(e){return new Xr(e)}class Zr{constructor(t,n,i){this._object=t,this._key=n,this._defaultValue=i,this.__v_isRef=!0}get value(){const t=this._object[this._key];return t===void 0?this._defaultValue:t}set value(t){this._object[this._key]=t}get dep(){return Sr(Q(this._object),this._key)}}class Gr{constructor(t){this._getter=t,this.__v_isRef=!0,this.__v_isReadonly=!0}get value(){return this._getter()}}function el(e,t,n){return ae(e)?e:q(e)?new Gr(e):ee(e)&&arguments.length>1?tl(e,t,n):ge(e)}function tl(e,t,n){const i=e[t];return ae(i)?i:new Zr(e,t,n)}class nl{constructor(t,n,i,o){this._setter=n,this.dep=void 0,this.__v_isRef=!0,this.__v_isReadonly=!1,this._dirty=!0,this.effect=new wi(t,()=>{this._dirty||(this._dirty=!0,Si(this))}),this.effect.computed=this,this.effect.active=this._cacheable=!o,this.__v_isReadonly=i}get value(){const t=Q(this);return ji(t),(t._dirty||!t._cacheable)&&(t._dirty=!1,t._value=t.effect.run()),t._value}set value(t){this._setter(t)}}function il(e,t,n=!1){let i,o;const s=q(e);return s?(i=e,o=Me):(i=e.get,o=e.set),new nl(i,o,s||!o,n)}function ze(e,t,n,i){let o;try{o=i?e(...i):e()}catch(s){Rn(s,t,n)}return o}function Ee(e,t,n,i){if(q(e)){const s=ze(e,t,n,i);return s&&Us(s)&&s.catch(r=>{Rn(r,t,n)}),s}const o=[];for(let s=0;s>>1,o=pe[i],s=Bt(o);sFe&&pe.splice(t,1)}function ll(e){B(e)?yt.push(...e):(!Ne||!Ne.includes(e,e.allowRecurse?tt+1:tt))&&yt.push(e),fo()}function Zi(e,t=Dt?Fe+1:0){for(;tBt(n)-Bt(i)),tt=0;tte.id==null?1/0:e.id,al=(e,t)=>{const n=Bt(e)-Bt(t);if(n===0){if(e.pre&&!t.pre)return-1;if(t.pre&&!e.pre)return 1}return n};function uo(e){si=!1,Dt=!0,pe.sort(al);try{for(Fe=0;Fene(w)?w.trim():w)),d&&(o=n.map(Gn))}let l,a=i[l=cn(t)]||i[l=cn(Ie(t))];!a&&s&&(a=i[l=cn(ft(t))]),a&&Ee(a,e,6,o);const c=i[l+"Once"];if(c){if(!e.emitted)e.emitted={};else if(e.emitted[l])return;e.emitted[l]=!0,Ee(c,e,6,o)}}function po(e,t,n=!1){const i=t.emitsCache,o=i.get(e);if(o!==void 0)return o;const s=e.emits;let r={},l=!1;if(!q(e)){const a=c=>{const p=po(c,t,!0);p&&(l=!0,re(r,p))};!n&&t.mixins.length&&t.mixins.forEach(a),e.extends&&a(e.extends),e.mixins&&e.mixins.forEach(a)}return!s&&!l?(ee(e)&&i.set(e,null),null):(B(s)?s.forEach(a=>r[a]=null):re(r,s),ee(e)&&i.set(e,r),r)}function Fn(e,t){return!e||!qt(t)?!1:(t=t.slice(2).replace(/Once$/,""),X(e,t[0].toLowerCase()+t.slice(1))||X(e,ft(t))||X(e,t))}let fe=null,Mn=null;function xn(e){const t=fe;return fe=e,Mn=e&&e.type.__scopeId||null,t}function Ic(e){Mn=e}function Lc(){Mn=null}function fl(e,t=fe,n){if(!t||e._n)return e;const i=(...o)=>{i._d&&us(-1);const s=xn(t);let r;try{r=e(...o)}finally{xn(s),i._d&&us(1)}return r};return i._n=!0,i._c=!0,i._d=!0,i}function Kn(e){const{type:t,vnode:n,proxy:i,withProxy:o,props:s,propsOptions:[r],slots:l,attrs:a,emit:c,render:p,renderCache:d,data:x,setupState:w,ctx:F,inheritAttrs:S}=e;let $,W;const V=xn(e);try{if(n.shapeFlag&4){const m=o||i,P=m;$=Ae(p.call(P,m,d,s,w,x,F)),W=a}else{const m=t;$=Ae(m.length>1?m(s,{attrs:a,slots:l,emit:c}):m(s,null)),W=t.props?a:ul(a)}}catch(m){Ht.length=0,Rn(m,e,1),$=ue(be)}let g=$;if(W&&S!==!1){const m=Object.keys(W),{shapeFlag:P}=g;m.length&&P&7&&(r&&m.some(gi)&&(W=pl(W,r)),g=Xe(g,W))}return n.dirs&&(g=Xe(g),g.dirs=g.dirs?g.dirs.concat(n.dirs):n.dirs),n.transition&&(g.transition=n.transition),$=g,xn(V),$}const ul=e=>{let t;for(const n in e)(n==="class"||n==="style"||qt(n))&&((t||(t={}))[n]=e[n]);return t},pl=(e,t)=>{const n={};for(const i in e)(!gi(i)||!(i.slice(9)in t))&&(n[i]=e[i]);return n};function dl(e,t,n){const{props:i,children:o,component:s}=e,{props:r,children:l,patchFlag:a}=t,c=s.emitsOptions;if(t.dirs||t.transition)return!0;if(n&&a>=0){if(a&1024)return!0;if(a&16)return i?Gi(i,r,c):!!r;if(a&8){const p=t.dynamicProps;for(let d=0;de.__isSuspense;function go(e,t){t&&t.pendingBranch?B(e)?t.effects.push(...e):t.effects.push(e):ll(e)}function xo(e,t){return In(e,null,t)}function Hc(e,t){return In(e,null,{flush:"post"})}const Gt={};function Ye(e,t,n){return In(e,t,n)}function In(e,t,{immediate:n,deep:i,flush:o,onTrack:s,onTrigger:r}=te){var l;const a=zs()===((l=le)==null?void 0:l.scope)?le:null;let c,p=!1,d=!1;if(ae(e)?(c=()=>e.value,p=hn(e)):xt(e)?(c=()=>e,i=!0):B(e)?(d=!0,p=e.some(m=>xt(m)||hn(m)),c=()=>e.map(m=>{if(ae(m))return m.value;if(xt(m))return st(m);if(q(m))return ze(m,a,2)})):q(e)?t?c=()=>ze(e,a,2):c=()=>{if(!(a&&a.isUnmounted))return x&&x(),Ee(e,a,3,[w])}:c=Me,t&&i){const m=c;c=()=>st(m())}let x,w=m=>{x=V.onStop=()=>{ze(m,a,4),x=V.onStop=void 0}},F;if(Kt)if(w=Me,t?n&&Ee(t,a,3,[c(),d?[]:void 0,w]):c(),o==="sync"){const m=ua();F=m.__watcherHandles||(m.__watcherHandles=[])}else return Me;let S=d?new Array(e.length).fill(Gt):Gt;const $=()=>{if(V.active)if(t){const m=V.run();(i||p||(d?m.some((P,D)=>ct(P,S[D])):ct(m,S)))&&(x&&x(),Ee(t,a,3,[m,S===Gt?void 0:d&&S[0]===Gt?[]:S,w]),S=m)}else V.run()};$.allowRecurse=!!t;let W;o==="sync"?W=$:o==="post"?W=()=>me($,a&&a.suspense):($.pre=!0,a&&($.id=a.uid),W=()=>Ri($));const V=new wi(c,W);t?n?$():S=V.run():o==="post"?me(V.run.bind(V),a&&a.suspense):V.run();const g=()=>{V.stop(),a&&a.scope&&xi(a.scope.effects,V)};return F&&F.push(g),g}function gl(e,t,n){const i=this.proxy,o=ne(e)?e.includes(".")?yo(i,e):()=>i[e]:e.bind(i,i);let s;q(t)?s=t:(s=t.handler,n=t);const r=le;Ct(this);const l=In(o,s.bind(i),n);return r?Ct(r):rt(),l}function yo(e,t){const n=t.split(".");return()=>{let i=e;for(let o=0;o{st(n,t)});else if(Ws(e))for(const n in e)st(e[n],t);return e}function $c(e,t){const n=fe;if(n===null)return e;const i=Dn(n)||n.proxy,o=e.dirs||(e.dirs=[]);for(let s=0;s{e.isMounted=!0}),Eo(()=>{e.isUnmounting=!0}),e}const _e=[Function,Array],vo={mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:_e,onEnter:_e,onAfterEnter:_e,onEnterCancelled:_e,onBeforeLeave:_e,onLeave:_e,onAfterLeave:_e,onLeaveCancelled:_e,onBeforeAppear:_e,onAppear:_e,onAfterAppear:_e,onAppearCancelled:_e},yl={name:"BaseTransition",props:vo,setup(e,{slots:t}){const n=$n(),i=xl();let o;return()=>{const s=t.default&&_o(t.default(),!0);if(!s||!s.length)return;let r=s[0];if(s.length>1){for(const S of s)if(S.type!==be){r=S;break}}const l=Q(e),{mode:a}=l;if(i.isLeaving)return Wn(r);const c=ts(r);if(!c)return Wn(r);const p=oi(c,l,i,n);ri(c,p);const d=n.subTree,x=d&&ts(d);let w=!1;const{getTransitionKey:F}=c.type;if(F){const S=F();o===void 0?o=S:S!==o&&(o=S,w=!0)}if(x&&x.type!==be&&(!nt(c,x)||w)){const S=oi(x,l,i,n);if(ri(x,S),a==="out-in")return i.isLeaving=!0,S.afterLeave=()=>{i.isLeaving=!1,n.update.active!==!1&&n.update()},Wn(r);a==="in-out"&&c.type!==be&&(S.delayLeave=($,W,V)=>{const g=bo(i,x);g[String(x.key)]=x,$[We]=()=>{W(),$[We]=void 0,delete p.delayedLeave},p.delayedLeave=V})}return r}}},vl=yl;function bo(e,t){const{leavingVNodes:n}=e;let i=n.get(t.type);return i||(i=Object.create(null),n.set(t.type,i)),i}function oi(e,t,n,i){const{appear:o,mode:s,persisted:r=!1,onBeforeEnter:l,onEnter:a,onAfterEnter:c,onEnterCancelled:p,onBeforeLeave:d,onLeave:x,onAfterLeave:w,onLeaveCancelled:F,onBeforeAppear:S,onAppear:$,onAfterAppear:W,onAppearCancelled:V}=t,g=String(e.key),m=bo(n,e),P=(A,C)=>{A&&Ee(A,i,9,C)},D=(A,C)=>{const T=C[1];P(A,C),B(A)?A.every(U=>U.length<=1)&&T():A.length<=1&&T()},I={mode:s,persisted:r,beforeEnter(A){let C=l;if(!n.isMounted)if(o)C=S||l;else return;A[We]&&A[We](!0);const T=m[g];T&&nt(e,T)&&T.el[We]&&T.el[We](),P(C,[A])},enter(A){let C=a,T=c,U=p;if(!n.isMounted)if(o)C=$||a,T=W||c,U=V||p;else return;let O=!1;const z=A[en]=se=>{O||(O=!0,se?P(U,[A]):P(T,[A]),I.delayedLeave&&I.delayedLeave(),A[en]=void 0)};C?D(C,[A,z]):z()},leave(A,C){const T=String(e.key);if(A[en]&&A[en](!0),n.isUnmounting)return C();P(d,[A]);let U=!1;const O=A[We]=z=>{U||(U=!0,C(),z?P(F,[A]):P(w,[A]),A[We]=void 0,m[T]===e&&delete m[T])};m[T]=e,x?D(x,[A,O]):O()},clone(A){return oi(A,t,n,i)}};return I}function Wn(e){if(Ln(e))return e=Xe(e),e.children=null,e}function ts(e){return Ln(e)?e.children?e.children[0]:void 0:e}function ri(e,t){e.shapeFlag&6&&e.component?ri(e.component.subTree,t):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function _o(e,t=!1,n){let i=[],o=0;for(let s=0;s1)for(let s=0;s!!e.type.__asyncLoader,Ln=e=>e.type.__isKeepAlive;function bl(e,t){Co(e,"a",t)}function _l(e,t){Co(e,"da",t)}function Co(e,t,n=le){const i=e.__wdc||(e.__wdc=()=>{let o=n;for(;o;){if(o.isDeactivated)return;o=o.parent}return e()});if(kn(t,i,n),n){let o=n.parent;for(;o&&o.parent;)Ln(o.parent.vnode)&&wl(i,t,n,o),o=o.parent}}function wl(e,t,n,i){const o=kn(t,e,i,!0);Nn(()=>{xi(i[t],o)},n)}function kn(e,t,n=le,i=!1){if(n){const o=n[e]||(n[e]=[]),s=t.__weh||(t.__weh=(...r)=>{if(n.isUnmounted)return;Tt(),Ct(n);const l=Ee(t,n,e,r);return rt(),At(),l});return i?o.unshift(s):o.push(s),s}}const $e=e=>(t,n=le)=>(!Kt||e==="sp")&&kn(e,(...i)=>t(...i),n),Cl=$e("bm"),jt=$e("m"),El=$e("bu"),Tl=$e("u"),Eo=$e("bum"),Nn=$e("um"),Al=$e("sp"),jl=$e("rtg"),Sl=$e("rtc");function Ol(e,t=le){kn("ec",e,t)}function Dc(e,t,n,i){let o;const s=n&&n[i];if(B(e)||ne(e)){o=new Array(e.length);for(let r=0,l=e.length;rt(r,l,void 0,s&&s[l]));else{const r=Object.keys(e);o=new Array(r.length);for(let l=0,a=r.length;l_n(t)?!(t.type===be||t.type===he&&!To(t.children)):!0)?e:null}function Uc(e,t){const n={};for(const i in e)n[t&&/[A-Z]/.test(i)?`on:${i}`:cn(i)]=e[i];return n}const li=e=>e?Bo(e)?Dn(e)||e.proxy:li(e.parent):null,Lt=re(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>li(e.parent),$root:e=>li(e.root),$emit:e=>e.emit,$options:e=>Fi(e),$forceUpdate:e=>e.f||(e.f=()=>Ri(e.update)),$nextTick:e=>e.n||(e.n=Pn.bind(e.proxy)),$watch:e=>gl.bind(e)}),qn=(e,t)=>e!==te&&!e.__isScriptSetup&&X(e,t),Rl={get({_:e},t){const{ctx:n,setupState:i,data:o,props:s,accessCache:r,type:l,appContext:a}=e;let c;if(t[0]!=="$"){const w=r[t];if(w!==void 0)switch(w){case 1:return i[t];case 2:return o[t];case 4:return n[t];case 3:return s[t]}else{if(qn(i,t))return r[t]=1,i[t];if(o!==te&&X(o,t))return r[t]=2,o[t];if((c=e.propsOptions[0])&&X(c,t))return r[t]=3,s[t];if(n!==te&&X(n,t))return r[t]=4,n[t];ai&&(r[t]=0)}}const p=Lt[t];let d,x;if(p)return t==="$attrs"&&xe(e,"get",t),p(e);if((d=l.__cssModules)&&(d=d[t]))return d;if(n!==te&&X(n,t))return r[t]=4,n[t];if(x=a.config.globalProperties,X(x,t))return x[t]},set({_:e},t,n){const{data:i,setupState:o,ctx:s}=e;return qn(o,t)?(o[t]=n,!0):i!==te&&X(i,t)?(i[t]=n,!0):X(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(s[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:i,appContext:o,propsOptions:s}},r){let l;return!!n[r]||e!==te&&X(e,r)||qn(t,r)||(l=s[0])&&X(l,r)||X(i,r)||X(Lt,r)||X(o.config.globalProperties,r)},defineProperty(e,t,n){return n.get!=null?e._.accessCache[t]=0:X(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}};function Kc(){return Pl().slots}function Pl(){const e=$n();return e.setupContext||(e.setupContext=Ko(e))}function ns(e){return B(e)?e.reduce((t,n)=>(t[n]=null,t),{}):e}let ai=!0;function Fl(e){const t=Fi(e),n=e.proxy,i=e.ctx;ai=!1,t.beforeCreate&&is(t.beforeCreate,e,"bc");const{data:o,computed:s,methods:r,watch:l,provide:a,inject:c,created:p,beforeMount:d,mounted:x,beforeUpdate:w,updated:F,activated:S,deactivated:$,beforeDestroy:W,beforeUnmount:V,destroyed:g,unmounted:m,render:P,renderTracked:D,renderTriggered:I,errorCaptured:A,serverPrefetch:C,expose:T,inheritAttrs:U,components:O,directives:z,filters:se}=t;if(c&&Ml(c,i,null),r)for(const J in r){const k=r[J];q(k)&&(i[J]=k.bind(n))}if(o){const J=o.call(n,n);ee(J)&&(e.data=Sn(J))}if(ai=!0,s)for(const J in s){const k=s[J],Le=q(k)?k.bind(n,n):q(k.get)?k.get.bind(n,n):Me,Vt=!q(k)&&q(k.set)?k.set.bind(n):Me,Qe=oe({get:Le,set:Vt});Object.defineProperty(i,J,{enumerable:!0,configurable:!0,get:()=>Qe.value,set:Oe=>Qe.value=Oe})}if(l)for(const J in l)Ao(l[J],i,n,J);if(a){const J=q(a)?a.call(n):a;Reflect.ownKeys(J).forEach(k=>{$l(k,J[k])})}p&&is(p,e,"c");function L(J,k){B(k)?k.forEach(Le=>J(Le.bind(n))):k&&J(k.bind(n))}if(L(Cl,d),L(jt,x),L(El,w),L(Tl,F),L(bl,S),L(_l,$),L(Ol,A),L(Sl,D),L(jl,I),L(Eo,V),L(Nn,m),L(Al,C),B(T))if(T.length){const J=e.exposed||(e.exposed={});T.forEach(k=>{Object.defineProperty(J,k,{get:()=>n[k],set:Le=>n[k]=Le})})}else e.exposed||(e.exposed={});P&&e.render===Me&&(e.render=P),U!=null&&(e.inheritAttrs=U),O&&(e.components=O),z&&(e.directives=z)}function Ml(e,t,n=Me){B(e)&&(e=ci(e));for(const i in e){const o=e[i];let s;ee(o)?"default"in o?s=bt(o.from||i,o.default,!0):s=bt(o.from||i):s=bt(o),ae(s)?Object.defineProperty(t,i,{enumerable:!0,configurable:!0,get:()=>s.value,set:r=>s.value=r}):t[i]=s}}function is(e,t,n){Ee(B(e)?e.map(i=>i.bind(t.proxy)):e.bind(t.proxy),t,n)}function Ao(e,t,n,i){const o=i.includes(".")?yo(n,i):()=>n[i];if(ne(e)){const s=t[e];q(s)&&Ye(o,s)}else if(q(e))Ye(o,e.bind(n));else if(ee(e))if(B(e))e.forEach(s=>Ao(s,t,n,i));else{const s=q(e.handler)?e.handler.bind(n):t[e.handler];q(s)&&Ye(o,s,e)}}function Fi(e){const t=e.type,{mixins:n,extends:i}=t,{mixins:o,optionsCache:s,config:{optionMergeStrategies:r}}=e.appContext,l=s.get(t);let a;return l?a=l:!o.length&&!n&&!i?a=t:(a={},o.length&&o.forEach(c=>yn(a,c,r,!0)),yn(a,t,r)),ee(t)&&s.set(t,a),a}function yn(e,t,n,i=!1){const{mixins:o,extends:s}=t;s&&yn(e,s,n,!0),o&&o.forEach(r=>yn(e,r,n,!0));for(const r in t)if(!(i&&r==="expose")){const l=Il[r]||n&&n[r];e[r]=l?l(e[r],t[r]):t[r]}return e}const Il={data:ss,props:os,emits:os,methods:Ft,computed:Ft,beforeCreate:de,created:de,beforeMount:de,mounted:de,beforeUpdate:de,updated:de,beforeDestroy:de,beforeUnmount:de,destroyed:de,unmounted:de,activated:de,deactivated:de,errorCaptured:de,serverPrefetch:de,components:Ft,directives:Ft,watch:kl,provide:ss,inject:Ll};function ss(e,t){return t?e?function(){return re(q(e)?e.call(this,this):e,q(t)?t.call(this,this):t)}:t:e}function Ll(e,t){return Ft(ci(e),ci(t))}function ci(e){if(B(e)){const t={};for(let n=0;n1)return n&&q(t)?t.call(i&&i.proxy):t}}function Dl(e,t,n,i=!1){const o={},s={};dn(s,Hn,1),e.propsDefaults=Object.create(null),So(e,t,o,s);for(const r in e.propsOptions[0])r in o||(o[r]=void 0);n?e.props=i?o:zr(o):e.type.props?e.props=o:e.props=s,e.attrs=s}function Bl(e,t,n,i){const{props:o,attrs:s,vnode:{patchFlag:r}}=e,l=Q(o),[a]=e.propsOptions;let c=!1;if((i||r>0)&&!(r&16)){if(r&8){const p=e.vnode.dynamicProps;for(let d=0;d{a=!0;const[x,w]=Oo(d,t,!0);re(r,x),w&&l.push(...w)};!n&&t.mixins.length&&t.mixins.forEach(p),e.extends&&p(e.extends),e.mixins&&e.mixins.forEach(p)}if(!s&&!a)return ee(e)&&i.set(e,ht),ht;if(B(s))for(let p=0;p-1,w[1]=S<0||F-1||X(w,"default"))&&l.push(d)}}}const c=[r,l];return ee(e)&&i.set(e,c),c}function rs(e){return e[0]!=="$"}function ls(e){const t=e&&e.toString().match(/^\s*(function|class) (\w+)/);return t?t[2]:e===null?"null":""}function as(e,t){return ls(e)===ls(t)}function cs(e,t){return B(t)?t.findIndex(n=>as(n,e)):q(t)&&as(t,e)?0:-1}const Ro=e=>e[0]==="_"||e==="$stable",Mi=e=>B(e)?e.map(Ae):[Ae(e)],Ul=(e,t,n)=>{if(t._n)return t;const i=fl((...o)=>Mi(t(...o)),n);return i._c=!1,i},Po=(e,t,n)=>{const i=e._ctx;for(const o in e){if(Ro(o))continue;const s=e[o];if(q(s))t[o]=Ul(o,s,i);else if(s!=null){const r=Mi(s);t[o]=()=>r}}},Fo=(e,t)=>{const n=Mi(t);e.slots.default=()=>n},Kl=(e,t)=>{if(e.vnode.shapeFlag&32){const n=t._;n?(e.slots=Q(t),dn(t,"_",n)):Po(t,e.slots={})}else e.slots={},t&&Fo(e,t);dn(e.slots,Hn,1)},Wl=(e,t,n)=>{const{vnode:i,slots:o}=e;let s=!0,r=te;if(i.shapeFlag&32){const l=t._;l?n&&l===1?s=!1:(re(o,t),!n&&l===1&&delete o._):(s=!t.$stable,Po(t,o)),r=t}else t&&(Fo(e,t),r={default:1});if(s)for(const l in o)!Ro(l)&&r[l]==null&&delete o[l]};function bn(e,t,n,i,o=!1){if(B(e)){e.forEach((x,w)=>bn(x,t&&(B(t)?t[w]:t),n,i,o));return}if(vt(i)&&!o)return;const s=i.shapeFlag&4?Dn(i.component)||i.component.proxy:i.el,r=o?null:s,{i:l,r:a}=e,c=t&&t.r,p=l.refs===te?l.refs={}:l.refs,d=l.setupState;if(c!=null&&c!==a&&(ne(c)?(p[c]=null,X(d,c)&&(d[c]=null)):ae(c)&&(c.value=null)),q(a))ze(a,l,12,[r,p]);else{const x=ne(a),w=ae(a);if(x||w){const F=()=>{if(e.f){const S=x?X(d,a)?d[a]:p[a]:a.value;o?B(S)&&xi(S,s):B(S)?S.includes(s)||S.push(s):x?(p[a]=[s],X(d,a)&&(d[a]=p[a])):(a.value=[s],e.k&&(p[e.k]=a.value))}else x?(p[a]=r,X(d,a)&&(d[a]=r)):w&&(a.value=r,e.k&&(p[e.k]=r))};r?(F.id=-1,me(F,n)):F()}}}let Be=!1;const tn=e=>/svg/.test(e.namespaceURI)&&e.tagName!=="foreignObject",nn=e=>e.nodeType===8;function ql(e){const{mt:t,p:n,o:{patchProp:i,createText:o,nextSibling:s,parentNode:r,remove:l,insert:a,createComment:c}}=e,p=(g,m)=>{if(!m.hasChildNodes()){n(null,g,m),gn(),m._vnode=g;return}Be=!1,d(m.firstChild,g,null,null,null),gn(),m._vnode=g,Be&&console.error("Hydration completed but contains mismatches.")},d=(g,m,P,D,I,A=!1)=>{const C=nn(g)&&g.data==="[",T=()=>S(g,m,P,D,I,C),{type:U,ref:O,shapeFlag:z,patchFlag:se}=m;let ce=g.nodeType;m.el=g,se===-2&&(A=!1,m.dynamicChildren=null);let L=null;switch(U){case wt:ce!==3?m.children===""?(a(m.el=o(""),r(g),g),L=g):L=T():(g.data!==m.children&&(Be=!0,g.data=m.children),L=s(g));break;case be:V(g)?(L=s(g),W(m.el=g.content.firstChild,g,P)):ce!==8||C?L=T():L=s(g);break;case Nt:if(C&&(g=s(g),ce=g.nodeType),ce===1||ce===3){L=g;const J=!m.children.length;for(let k=0;k{A=A||!!m.dynamicChildren;const{type:C,props:T,patchFlag:U,shapeFlag:O,dirs:z,transition:se}=m,ce=C==="input"||C==="option";if(ce||U!==-1){if(z&&Pe(m,null,P,"created"),T)if(ce||!A||U&48)for(const k in T)(ce&&(k.endsWith("value")||k==="indeterminate")||qt(k)&&!Mt(k)||k[0]===".")&&i(g,k,null,T[k],!1,void 0,P);else T.onClick&&i(g,"onClick",null,T.onClick,!1,void 0,P);let L;(L=T&&T.onVnodeBeforeMount)&&we(L,P,m);let J=!1;if(V(g)){J=Mo(D,se)&&P&&P.vnode.props&&P.vnode.props.appear;const k=g.content.firstChild;J&&se.beforeEnter(k),W(k,g,P),m.el=g=k}if(z&&Pe(m,null,P,"beforeMount"),((L=T&&T.onVnodeMounted)||z||J)&&go(()=>{L&&we(L,P,m),J&&se.enter(g),z&&Pe(m,null,P,"mounted")},D),O&16&&!(T&&(T.innerHTML||T.textContent))){let k=w(g.firstChild,m,g,P,D,I,A);for(;k;){Be=!0;const Le=k;k=k.nextSibling,l(Le)}}else O&8&&g.textContent!==m.children&&(Be=!0,g.textContent=m.children)}return g.nextSibling},w=(g,m,P,D,I,A,C)=>{C=C||!!m.dynamicChildren;const T=m.children,U=T.length;for(let O=0;O{const{slotScopeIds:C}=m;C&&(I=I?I.concat(C):C);const T=r(g),U=w(s(g),m,T,P,D,I,A);return U&&nn(U)&&U.data==="]"?s(m.anchor=U):(Be=!0,a(m.anchor=c("]"),T,U),U)},S=(g,m,P,D,I,A)=>{if(Be=!0,m.el=null,A){const U=$(g);for(;;){const O=s(g);if(O&&O!==U)l(O);else break}}const C=s(g),T=r(g);return l(g),n(null,m,T,C,P,D,tn(T),I),C},$=(g,m="[",P="]")=>{let D=0;for(;g;)if(g=s(g),g&&nn(g)&&(g.data===m&&D++,g.data===P)){if(D===0)return s(g);D--}return g},W=(g,m,P)=>{const D=m.parentNode;D&&D.replaceChild(g,m);let I=P;for(;I;)I.vnode.el===m&&(I.vnode.el=I.subTree.el=g),I=I.parent},V=g=>g.nodeType===1&&g.tagName.toLowerCase()==="template";return[p,d]}const me=go;function Vl(e){return zl(e,ql)}function zl(e,t){const n=ei();n.__VUE__=!0;const{insert:i,remove:o,patchProp:s,createElement:r,createText:l,createComment:a,setText:c,setElementText:p,parentNode:d,nextSibling:x,setScopeId:w=Me,insertStaticContent:F}=e,S=(f,u,h,y=null,v=null,E=null,R=!1,_=null,j=!!u.dynamicChildren)=>{if(f===u)return;f&&!nt(f,u)&&(y=zt(f),Oe(f,v,E,!0),f=null),u.patchFlag===-2&&(j=!1,u.dynamicChildren=null);const{type:b,ref:N,shapeFlag:M}=u;switch(b){case wt:$(f,u,h,y);break;case be:W(f,u,h,y);break;case Nt:f==null&&V(u,h,y,R);break;case he:O(f,u,h,y,v,E,R,_,j);break;default:M&1?P(f,u,h,y,v,E,R,_,j):M&6?z(f,u,h,y,v,E,R,_,j):(M&64||M&128)&&b.process(f,u,h,y,v,E,R,_,j,ut)}N!=null&&v&&bn(N,f&&f.ref,E,u||f,!u)},$=(f,u,h,y)=>{if(f==null)i(u.el=l(u.children),h,y);else{const v=u.el=f.el;u.children!==f.children&&c(v,u.children)}},W=(f,u,h,y)=>{f==null?i(u.el=a(u.children||""),h,y):u.el=f.el},V=(f,u,h,y)=>{[f.el,f.anchor]=F(f.children,u,h,y,f.el,f.anchor)},g=({el:f,anchor:u},h,y)=>{let v;for(;f&&f!==u;)v=x(f),i(f,h,y),f=v;i(u,h,y)},m=({el:f,anchor:u})=>{let h;for(;f&&f!==u;)h=x(f),o(f),f=h;o(u)},P=(f,u,h,y,v,E,R,_,j)=>{R=R||u.type==="svg",f==null?D(u,h,y,v,E,R,_,j):C(f,u,v,E,R,_,j)},D=(f,u,h,y,v,E,R,_)=>{let j,b;const{type:N,props:M,shapeFlag:H,transition:K,dirs:Y}=f;if(j=f.el=r(f.type,E,M&&M.is,M),H&8?p(j,f.children):H&16&&A(f.children,j,null,y,v,E&&N!=="foreignObject",R,_),Y&&Pe(f,null,y,"created"),I(j,f,f.scopeId,R,y),M){for(const Z in M)Z!=="value"&&!Mt(Z)&&s(j,Z,null,M[Z],E,f.children,y,v,ke);"value"in M&&s(j,"value",null,M.value),(b=M.onVnodeBeforeMount)&&we(b,y,f)}Y&&Pe(f,null,y,"beforeMount");const G=Mo(v,K);G&&K.beforeEnter(j),i(j,u,h),((b=M&&M.onVnodeMounted)||G||Y)&&me(()=>{b&&we(b,y,f),G&&K.enter(j),Y&&Pe(f,null,y,"mounted")},v)},I=(f,u,h,y,v)=>{if(h&&w(f,h),y)for(let E=0;E{for(let b=j;b{const _=u.el=f.el;let{patchFlag:j,dynamicChildren:b,dirs:N}=u;j|=f.patchFlag&16;const M=f.props||te,H=u.props||te;let K;h&&Ze(h,!1),(K=H.onVnodeBeforeUpdate)&&we(K,h,u,f),N&&Pe(u,f,h,"beforeUpdate"),h&&Ze(h,!0);const Y=v&&u.type!=="foreignObject";if(b?T(f.dynamicChildren,b,_,h,y,Y,E):R||k(f,u,_,null,h,y,Y,E,!1),j>0){if(j&16)U(_,u,M,H,h,y,v);else if(j&2&&M.class!==H.class&&s(_,"class",null,H.class,v),j&4&&s(_,"style",M.style,H.style,v),j&8){const G=u.dynamicProps;for(let Z=0;Z{K&&we(K,h,u,f),N&&Pe(u,f,h,"updated")},y)},T=(f,u,h,y,v,E,R)=>{for(let _=0;_{if(h!==y){if(h!==te)for(const _ in h)!Mt(_)&&!(_ in y)&&s(f,_,h[_],null,R,u.children,v,E,ke);for(const _ in y){if(Mt(_))continue;const j=y[_],b=h[_];j!==b&&_!=="value"&&s(f,_,b,j,R,u.children,v,E,ke)}"value"in y&&s(f,"value",h.value,y.value)}},O=(f,u,h,y,v,E,R,_,j)=>{const b=u.el=f?f.el:l(""),N=u.anchor=f?f.anchor:l("");let{patchFlag:M,dynamicChildren:H,slotScopeIds:K}=u;K&&(_=_?_.concat(K):K),f==null?(i(b,h,y),i(N,h,y),A(u.children,h,N,v,E,R,_,j)):M>0&&M&64&&H&&f.dynamicChildren?(T(f.dynamicChildren,H,h,v,E,R,_),(u.key!=null||v&&u===v.subTree)&&Ii(f,u,!0)):k(f,u,h,N,v,E,R,_,j)},z=(f,u,h,y,v,E,R,_,j)=>{u.slotScopeIds=_,f==null?u.shapeFlag&512?v.ctx.activate(u,h,y,R,j):se(u,h,y,v,E,R,j):ce(f,u,j)},se=(f,u,h,y,v,E,R)=>{const _=f.component=sa(f,y,v);if(Ln(f)&&(_.ctx.renderer=ut),oa(_),_.asyncDep){if(v&&v.registerDep(_,L),!f.el){const j=_.subTree=ue(be);W(null,j,u,h)}return}L(_,f,u,h,v,E,R)},ce=(f,u,h)=>{const y=u.component=f.component;if(dl(f,u,h))if(y.asyncDep&&!y.asyncResolved){J(y,u,h);return}else y.next=u,rl(y.update),y.update();else u.el=f.el,y.vnode=u},L=(f,u,h,y,v,E,R)=>{const _=()=>{if(f.isMounted){let{next:N,bu:M,u:H,parent:K,vnode:Y}=f,G=N,Z;Ze(f,!1),N?(N.el=Y.el,J(f,N,R)):N=Y,M&&fn(M),(Z=N.props&&N.props.onVnodeBeforeUpdate)&&we(Z,K,N,Y),Ze(f,!0);const ie=Kn(f),Te=f.subTree;f.subTree=ie,S(Te,ie,d(Te.el),zt(Te),f,v,E),N.el=ie.el,G===null&&ml(f,ie.el),H&&me(H,v),(Z=N.props&&N.props.onVnodeUpdated)&&me(()=>we(Z,K,N,Y),v)}else{let N;const{el:M,props:H}=u,{bm:K,m:Y,parent:G}=f,Z=vt(u);if(Ze(f,!1),K&&fn(K),!Z&&(N=H&&H.onVnodeBeforeMount)&&we(N,G,u),Ze(f,!0),M&&Un){const ie=()=>{f.subTree=Kn(f),Un(M,f.subTree,f,v,null)};Z?u.type.__asyncLoader().then(()=>!f.isUnmounted&&ie()):ie()}else{const ie=f.subTree=Kn(f);S(null,ie,h,y,f,v,E),u.el=ie.el}if(Y&&me(Y,v),!Z&&(N=H&&H.onVnodeMounted)){const ie=u;me(()=>we(N,G,ie),v)}(u.shapeFlag&256||G&&vt(G.vnode)&&G.vnode.shapeFlag&256)&&f.a&&me(f.a,v),f.isMounted=!0,u=h=y=null}},j=f.effect=new wi(_,()=>Ri(b),f.scope),b=f.update=()=>j.run();b.id=f.uid,Ze(f,!0),b()},J=(f,u,h)=>{u.component=f;const y=f.vnode.props;f.vnode=u,f.next=null,Bl(f,u.props,y,h),Wl(f,u.children,h),Tt(),Zi(),At()},k=(f,u,h,y,v,E,R,_,j=!1)=>{const b=f&&f.children,N=f?f.shapeFlag:0,M=u.children,{patchFlag:H,shapeFlag:K}=u;if(H>0){if(H&128){Vt(b,M,h,y,v,E,R,_,j);return}else if(H&256){Le(b,M,h,y,v,E,R,_,j);return}}K&8?(N&16&&ke(b,v,E),M!==b&&p(h,M)):N&16?K&16?Vt(b,M,h,y,v,E,R,_,j):ke(b,v,E,!0):(N&8&&p(h,""),K&16&&A(M,h,y,v,E,R,_,j))},Le=(f,u,h,y,v,E,R,_,j)=>{f=f||ht,u=u||ht;const b=f.length,N=u.length,M=Math.min(b,N);let H;for(H=0;HN?ke(f,v,E,!0,!1,M):A(u,h,y,v,E,R,_,j,M)},Vt=(f,u,h,y,v,E,R,_,j)=>{let b=0;const N=u.length;let M=f.length-1,H=N-1;for(;b<=M&&b<=H;){const K=f[b],Y=u[b]=j?qe(u[b]):Ae(u[b]);if(nt(K,Y))S(K,Y,h,null,v,E,R,_,j);else break;b++}for(;b<=M&&b<=H;){const K=f[M],Y=u[H]=j?qe(u[H]):Ae(u[H]);if(nt(K,Y))S(K,Y,h,null,v,E,R,_,j);else break;M--,H--}if(b>M){if(b<=H){const K=H+1,Y=KH)for(;b<=M;)Oe(f[b],v,E,!0),b++;else{const K=b,Y=b,G=new Map;for(b=Y;b<=H;b++){const ye=u[b]=j?qe(u[b]):Ae(u[b]);ye.key!=null&&G.set(ye.key,b)}let Z,ie=0;const Te=H-Y+1;let pt=!1,Bi=0;const St=new Array(Te);for(b=0;b=Te){Oe(ye,v,E,!0);continue}let Re;if(ye.key!=null)Re=G.get(ye.key);else for(Z=Y;Z<=H;Z++)if(St[Z-Y]===0&&nt(ye,u[Z])){Re=Z;break}Re===void 0?Oe(ye,v,E,!0):(St[Re-Y]=b+1,Re>=Bi?Bi=Re:pt=!0,S(ye,u[Re],h,null,v,E,R,_,j),ie++)}const Ui=pt?Yl(St):ht;for(Z=Ui.length-1,b=Te-1;b>=0;b--){const ye=Y+b,Re=u[ye],Ki=ye+1{const{el:E,type:R,transition:_,children:j,shapeFlag:b}=f;if(b&6){Qe(f.component.subTree,u,h,y);return}if(b&128){f.suspense.move(u,h,y);return}if(b&64){R.move(f,u,h,ut);return}if(R===he){i(E,u,h);for(let M=0;M_.enter(E),v);else{const{leave:M,delayLeave:H,afterLeave:K}=_,Y=()=>i(E,u,h),G=()=>{M(E,()=>{Y(),K&&K()})};H?H(E,Y,G):G()}else i(E,u,h)},Oe=(f,u,h,y=!1,v=!1)=>{const{type:E,props:R,ref:_,children:j,dynamicChildren:b,shapeFlag:N,patchFlag:M,dirs:H}=f;if(_!=null&&bn(_,null,h,f,!0),N&256){u.ctx.deactivate(f);return}const K=N&1&&H,Y=!vt(f);let G;if(Y&&(G=R&&R.onVnodeBeforeUnmount)&&we(G,u,f),N&6)cr(f.component,h,y);else{if(N&128){f.suspense.unmount(h,y);return}K&&Pe(f,null,u,"beforeUnmount"),N&64?f.type.remove(f,u,h,v,ut,y):b&&(E!==he||M>0&&M&64)?ke(b,u,h,!1,!0):(E===he&&M&384||!v&&N&16)&&ke(j,u,h),y&&$i(f)}(Y&&(G=R&&R.onVnodeUnmounted)||K)&&me(()=>{G&&we(G,u,f),K&&Pe(f,null,u,"unmounted")},h)},$i=f=>{const{type:u,el:h,anchor:y,transition:v}=f;if(u===he){ar(h,y);return}if(u===Nt){m(f);return}const E=()=>{o(h),v&&!v.persisted&&v.afterLeave&&v.afterLeave()};if(f.shapeFlag&1&&v&&!v.persisted){const{leave:R,delayLeave:_}=v,j=()=>R(h,E);_?_(f.el,E,j):j()}else E()},ar=(f,u)=>{let h;for(;f!==u;)h=x(f),o(f),f=h;o(u)},cr=(f,u,h)=>{const{bum:y,scope:v,update:E,subTree:R,um:_}=f;y&&fn(y),v.stop(),E&&(E.active=!1,Oe(R,f,u,h)),_&&me(_,u),me(()=>{f.isUnmounted=!0},u),u&&u.pendingBranch&&!u.isUnmounted&&f.asyncDep&&!f.asyncResolved&&f.suspenseId===u.pendingId&&(u.deps--,u.deps===0&&u.resolve())},ke=(f,u,h,y=!1,v=!1,E=0)=>{for(let R=E;Rf.shapeFlag&6?zt(f.component.subTree):f.shapeFlag&128?f.suspense.next():x(f.anchor||f.el),Di=(f,u,h)=>{f==null?u._vnode&&Oe(u._vnode,null,null,!0):S(u._vnode||null,f,u,null,null,null,h),Zi(),gn(),u._vnode=f},ut={p:S,um:Oe,m:Qe,r:$i,mt:se,mc:A,pc:k,pbc:T,n:zt,o:e};let Bn,Un;return t&&([Bn,Un]=t(ut)),{render:Di,hydrate:Bn,createApp:Hl(Di,Bn)}}function Ze({effect:e,update:t},n){e.allowRecurse=t.allowRecurse=n}function Mo(e,t){return(!e||e&&!e.pendingBranch)&&t&&!t.persisted}function Ii(e,t,n=!1){const i=e.children,o=t.children;if(B(i)&&B(o))for(let s=0;s>1,e[n[l]]0&&(t[i]=n[s-1]),n[s]=i)}}for(s=n.length,r=n[s-1];s-- >0;)n[s]=r,r=t[r];return n}const Jl=e=>e.__isTeleport,kt=e=>e&&(e.disabled||e.disabled===""),fs=e=>typeof SVGElement<"u"&&e instanceof SVGElement,ui=(e,t)=>{const n=e&&e.to;return ne(n)?t?t(n):null:n},Xl={name:"Teleport",__isTeleport:!0,process(e,t,n,i,o,s,r,l,a,c){const{mc:p,pc:d,pbc:x,o:{insert:w,querySelector:F,createText:S,createComment:$}}=c,W=kt(t.props);let{shapeFlag:V,children:g,dynamicChildren:m}=t;if(e==null){const P=t.el=S(""),D=t.anchor=S("");w(P,n,i),w(D,n,i);const I=t.target=ui(t.props,F),A=t.targetAnchor=S("");I&&(w(A,I),r=r||fs(I));const C=(T,U)=>{V&16&&p(g,T,U,o,s,r,l,a)};W?C(n,D):I&&C(I,A)}else{t.el=e.el;const P=t.anchor=e.anchor,D=t.target=e.target,I=t.targetAnchor=e.targetAnchor,A=kt(e.props),C=A?n:D,T=A?P:I;if(r=r||fs(D),m?(x(e.dynamicChildren,m,C,o,s,r,l),Ii(e,t,!0)):a||d(e,t,C,T,o,s,r,l,!1),W)A?t.props&&e.props&&t.props.to!==e.props.to&&(t.props.to=e.props.to):sn(t,n,P,c,1);else if((t.props&&t.props.to)!==(e.props&&e.props.to)){const U=t.target=ui(t.props,F);U&&sn(t,U,null,c,0)}else A&&sn(t,D,I,c,1)}Io(t)},remove(e,t,n,i,{um:o,o:{remove:s}},r){const{shapeFlag:l,children:a,anchor:c,targetAnchor:p,target:d,props:x}=e;if(d&&s(p),r&&s(c),l&16){const w=r||!kt(x);for(let F=0;F0?Se||ht:null,Zl(),Ut>0&&Se&&Se.push(e),e}function qc(e,t,n,i,o,s){return ko($o(e,t,n,i,o,s,!0))}function No(e,t,n,i,o){return ko(ue(e,t,n,i,o,!0))}function _n(e){return e?e.__v_isVNode===!0:!1}function nt(e,t){return e.type===t.type&&e.key===t.key}const Hn="__vInternal",Ho=({key:e})=>e??null,un=({ref:e,ref_key:t,ref_for:n})=>(typeof e=="number"&&(e=""+e),e!=null?ne(e)||ae(e)||q(e)?{i:fe,r:e,k:t,f:!!n}:e:null);function $o(e,t=null,n=null,i=0,o=null,s=e===he?0:1,r=!1,l=!1){const a={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&Ho(t),ref:t&&un(t),scopeId:Mn,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:s,patchFlag:i,dynamicProps:o,dynamicChildren:null,appContext:null,ctx:fe};return l?(Li(a,n),s&128&&e.normalize(a)):n&&(a.shapeFlag|=ne(n)?8:16),Ut>0&&!r&&Se&&(a.patchFlag>0||s&6)&&a.patchFlag!==32&&Se.push(a),a}const ue=Gl;function Gl(e,t=null,n=null,i=0,o=null,s=!1){if((!e||e===mo)&&(e=be),_n(e)){const l=Xe(e,t,!0);return n&&Li(l,n),Ut>0&&!s&&Se&&(l.shapeFlag&6?Se[Se.indexOf(e)]=l:Se.push(l)),l.patchFlag|=-2,l}if(ca(e)&&(e=e.__vccOpts),t){t=ea(t);let{class:l,style:a}=t;l&&!ne(l)&&(t.class=bi(l)),ee(a)&&(so(a)&&!B(a)&&(a=re({},a)),t.style=vi(a))}const r=ne(e)?1:hl(e)?128:Jl(e)?64:ee(e)?4:q(e)?2:0;return $o(e,t,n,i,o,r,s,!0)}function ea(e){return e?so(e)||Hn in e?re({},e):e:null}function Xe(e,t,n=!1){const{props:i,ref:o,patchFlag:s,children:r}=e,l=t?ta(i||{},t):i;return{__v_isVNode:!0,__v_skip:!0,type:e.type,props:l,key:l&&Ho(l),ref:t&&t.ref?n&&o?B(o)?o.concat(un(t)):[o,un(t)]:un(t):o,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:r,target:e.target,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==he?s===-1?16:s|16:s,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:e.transition,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&Xe(e.ssContent),ssFallback:e.ssFallback&&Xe(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce}}function Do(e=" ",t=0){return ue(wt,null,e,t)}function Vc(e,t){const n=ue(Nt,null,e);return n.staticCount=t,n}function zc(e="",t=!1){return t?(Lo(),No(be,null,e)):ue(be,null,e)}function Ae(e){return e==null||typeof e=="boolean"?ue(be):B(e)?ue(he,null,e.slice()):typeof e=="object"?qe(e):ue(wt,null,String(e))}function qe(e){return e.el===null&&e.patchFlag!==-1||e.memo?e:Xe(e)}function Li(e,t){let n=0;const{shapeFlag:i}=e;if(t==null)t=null;else if(B(t))n=16;else if(typeof t=="object")if(i&65){const o=t.default;o&&(o._c&&(o._d=!1),Li(e,o()),o._c&&(o._d=!0));return}else{n=32;const o=t._;!o&&!(Hn in t)?t._ctx=fe:o===3&&fe&&(fe.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else q(t)?(t={default:t,_ctx:fe},n=32):(t=String(t),i&64?(n=16,t=[Do(t)]):n=8);e.children=t,e.shapeFlag|=n}function ta(...e){const t={};for(let n=0;nle||fe;let ki,dt,ps="__VUE_INSTANCE_SETTERS__";(dt=ei()[ps])||(dt=ei()[ps]=[]),dt.push(e=>le=e),ki=e=>{dt.length>1?dt.forEach(t=>t(e)):dt[0](e)};const Ct=e=>{ki(e),e.scope.on()},rt=()=>{le&&le.scope.off(),ki(null)};function Bo(e){return e.vnode.shapeFlag&4}let Kt=!1;function oa(e,t=!1){Kt=t;const{props:n,children:i}=e.vnode,o=Bo(e);Dl(e,n,o,t),Kl(e,i);const s=o?ra(e,t):void 0;return Kt=!1,s}function ra(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=It(new Proxy(e.ctx,Rl));const{setup:i}=n;if(i){const o=e.setupContext=i.length>1?Ko(e):null;Ct(e),Tt();const s=ze(i,e,0,[e.props,o]);if(At(),rt(),Us(s)){if(s.then(rt,rt),t)return s.then(r=>{ds(e,r,t)}).catch(r=>{Rn(r,e,0)});e.asyncDep=s}else ds(e,s,t)}else Uo(e,t)}function ds(e,t,n){q(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:ee(t)&&(e.setupState=ao(t)),Uo(e,n)}let ms;function Uo(e,t,n){const i=e.type;if(!e.render){if(!t&&ms&&!i.render){const o=i.template||Fi(e).template;if(o){const{isCustomElement:s,compilerOptions:r}=e.appContext.config,{delimiters:l,compilerOptions:a}=i,c=re(re({isCustomElement:s,delimiters:l},r),a);i.render=ms(o,c)}}e.render=i.render||Me}{Ct(e),Tt();try{Fl(e)}finally{At(),rt()}}}function la(e){return e.attrsProxy||(e.attrsProxy=new Proxy(e.attrs,{get(t,n){return xe(e,"get","$attrs"),t[n]}}))}function Ko(e){const t=n=>{e.exposed=n||{}};return{get attrs(){return la(e)},slots:e.slots,emit:e.emit,expose:t}}function Dn(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy(ao(It(e.exposed)),{get(t,n){if(n in t)return t[n];if(n in Lt)return Lt[n](e)},has(t,n){return n in t||n in Lt}}))}function aa(e,t=!0){return q(e)?e.displayName||e.name:e.name||t&&e.__name}function ca(e){return q(e)&&"__vccOpts"in e}const oe=(e,t)=>il(e,t,Kt);function pi(e,t,n){const i=arguments.length;return i===2?ee(t)&&!B(t)?_n(t)?ue(e,null,[t]):ue(e,t):ue(e,null,t):(i>3?n=Array.prototype.slice.call(arguments,2):i===3&&_n(n)&&(n=[n]),ue(e,t,n))}const fa=Symbol.for("v-scx"),ua=()=>bt(fa),pa="3.3.9",da="http://www.w3.org/2000/svg",it=typeof document<"u"?document:null,hs=it&&it.createElement("template"),ma={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,i)=>{const o=t?it.createElementNS(da,e):it.createElement(e,n?{is:n}:void 0);return e==="select"&&i&&i.multiple!=null&&o.setAttribute("multiple",i.multiple),o},createText:e=>it.createTextNode(e),createComment:e=>it.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>it.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,i,o,s){const r=n?n.previousSibling:t.lastChild;if(o&&(o===s||o.nextSibling))for(;t.insertBefore(o.cloneNode(!0),n),!(o===s||!(o=o.nextSibling)););else{hs.innerHTML=i?`${e}`:e;const l=hs.content;if(i){const a=l.firstChild;for(;a.firstChild;)l.appendChild(a.firstChild);l.removeChild(a)}t.insertBefore(l,n)}return[r?r.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}},Ue="transition",Ot="animation",Wt=Symbol("_vtc"),Wo=(e,{slots:t})=>pi(vl,ha(e),t);Wo.displayName="Transition";const qo={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};Wo.props=re({},vo,qo);const Ge=(e,t=[])=>{B(e)?e.forEach(n=>n(...t)):e&&e(...t)},gs=e=>e?B(e)?e.some(t=>t.length>1):e.length>1:!1;function ha(e){const t={};for(const O in e)O in qo||(t[O]=e[O]);if(e.css===!1)return t;const{name:n="v",type:i,duration:o,enterFromClass:s=`${n}-enter-from`,enterActiveClass:r=`${n}-enter-active`,enterToClass:l=`${n}-enter-to`,appearFromClass:a=s,appearActiveClass:c=r,appearToClass:p=l,leaveFromClass:d=`${n}-leave-from`,leaveActiveClass:x=`${n}-leave-active`,leaveToClass:w=`${n}-leave-to`}=e,F=ga(o),S=F&&F[0],$=F&&F[1],{onBeforeEnter:W,onEnter:V,onEnterCancelled:g,onLeave:m,onLeaveCancelled:P,onBeforeAppear:D=W,onAppear:I=V,onAppearCancelled:A=g}=t,C=(O,z,se)=>{et(O,z?p:l),et(O,z?c:r),se&&se()},T=(O,z)=>{O._isLeaving=!1,et(O,d),et(O,w),et(O,x),z&&z()},U=O=>(z,se)=>{const ce=O?I:V,L=()=>C(z,O,se);Ge(ce,[z,L]),xs(()=>{et(z,O?a:s),Ke(z,O?p:l),gs(ce)||ys(z,i,S,L)})};return re(t,{onBeforeEnter(O){Ge(W,[O]),Ke(O,s),Ke(O,r)},onBeforeAppear(O){Ge(D,[O]),Ke(O,a),Ke(O,c)},onEnter:U(!1),onAppear:U(!0),onLeave(O,z){O._isLeaving=!0;const se=()=>T(O,z);Ke(O,d),va(),Ke(O,x),xs(()=>{O._isLeaving&&(et(O,d),Ke(O,w),gs(m)||ys(O,i,$,se))}),Ge(m,[O,se])},onEnterCancelled(O){C(O,!1),Ge(g,[O])},onAppearCancelled(O){C(O,!0),Ge(A,[O])},onLeaveCancelled(O){T(O),Ge(P,[O])}})}function ga(e){if(e==null)return null;if(ee(e))return[Vn(e.enter),Vn(e.leave)];{const t=Vn(e);return[t,t]}}function Vn(e){return gr(e)}function Ke(e,t){t.split(/\s+/).forEach(n=>n&&e.classList.add(n)),(e[Wt]||(e[Wt]=new Set)).add(t)}function et(e,t){t.split(/\s+/).forEach(i=>i&&e.classList.remove(i));const n=e[Wt];n&&(n.delete(t),n.size||(e[Wt]=void 0))}function xs(e){requestAnimationFrame(()=>{requestAnimationFrame(e)})}let xa=0;function ys(e,t,n,i){const o=e._endId=++xa,s=()=>{o===e._endId&&i()};if(n)return setTimeout(s,n);const{type:r,timeout:l,propCount:a}=ya(e,t);if(!r)return i();const c=r+"end";let p=0;const d=()=>{e.removeEventListener(c,x),s()},x=w=>{w.target===e&&++p>=a&&d()};setTimeout(()=>{p(n[F]||"").split(", "),o=i(`${Ue}Delay`),s=i(`${Ue}Duration`),r=vs(o,s),l=i(`${Ot}Delay`),a=i(`${Ot}Duration`),c=vs(l,a);let p=null,d=0,x=0;t===Ue?r>0&&(p=Ue,d=r,x=s.length):t===Ot?c>0&&(p=Ot,d=c,x=a.length):(d=Math.max(r,c),p=d>0?r>c?Ue:Ot:null,x=p?p===Ue?s.length:a.length:0);const w=p===Ue&&/\b(transform|all)(,|$)/.test(i(`${Ue}Property`).toString());return{type:p,timeout:d,propCount:x,hasTransform:w}}function vs(e,t){for(;e.lengthbs(n)+bs(e[i])))}function bs(e){return e==="auto"?0:Number(e.slice(0,-1).replace(",","."))*1e3}function va(){return document.body.offsetHeight}function ba(e,t,n){const i=e[Wt];i&&(t=(t?[t,...i]:[...i]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}const Ni=Symbol("_vod"),Yc={beforeMount(e,{value:t},{transition:n}){e[Ni]=e.style.display==="none"?"":e.style.display,n&&t?n.beforeEnter(e):Rt(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e)},updated(e,{value:t,oldValue:n},{transition:i}){!t!=!n&&(i?t?(i.beforeEnter(e),Rt(e,!0),i.enter(e)):i.leave(e,()=>{Rt(e,!1)}):Rt(e,t))},beforeUnmount(e,{value:t}){Rt(e,t)}};function Rt(e,t){e.style.display=t?e[Ni]:"none"}function _a(e,t,n){const i=e.style,o=ne(n);if(n&&!o){if(t&&!ne(t))for(const s in t)n[s]==null&&di(i,s,"");for(const s in n)di(i,s,n[s])}else{const s=i.display;o?t!==n&&(i.cssText=n):t&&e.removeAttribute("style"),Ni in e&&(i.display=s)}}const _s=/\s*!important$/;function di(e,t,n){if(B(n))n.forEach(i=>di(e,t,i));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const i=wa(e,t);_s.test(n)?e.setProperty(ft(i),n.replace(_s,""),"important"):e[i]=n}}const ws=["Webkit","Moz","ms"],zn={};function wa(e,t){const n=zn[t];if(n)return n;let i=Ie(t);if(i!=="filter"&&i in e)return zn[t]=i;i=An(i);for(let o=0;oYn||(Sa.then(()=>Yn=0),Yn=Date.now());function Ra(e,t){const n=i=>{if(!i._vts)i._vts=Date.now();else if(i._vts<=n.attached)return;Ee(Pa(i,n.value),t,5,[i])};return n.value=e,n.attached=Oa(),n}function Pa(e,t){if(B(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(i=>o=>!o._stopped&&i&&i(o))}else return t}const As=/^on[a-z]/,Fa=(e,t,n,i,o=!1,s,r,l,a)=>{t==="class"?ba(e,i,o):t==="style"?_a(e,n,i):qt(t)?gi(t)||Aa(e,t,n,i,r):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):Ma(e,t,i,o))?Ea(e,t,i,s,r,l,a):(t==="true-value"?e._trueValue=i:t==="false-value"&&(e._falseValue=i),Ca(e,t,i,o))};function Ma(e,t,n,i){return i?!!(t==="innerHTML"||t==="textContent"||t in e&&As.test(t)&&q(n)):t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA"||As.test(t)&&ne(n)?!1:t in e}const js=e=>{const t=e.props["onUpdate:modelValue"]||!1;return B(t)?n=>fn(t,n):t};function Ia(e){e.target.composing=!0}function Ss(e){const t=e.target;t.composing&&(t.composing=!1,t.dispatchEvent(new Event("input")))}const Jn=Symbol("_assign"),Jc={created(e,{modifiers:{lazy:t,trim:n,number:i}},o){e[Jn]=js(o);const s=i||o.props&&o.props.type==="number";mt(e,t?"change":"input",r=>{if(r.target.composing)return;let l=e.value;n&&(l=l.trim()),s&&(l=Gn(l)),e[Jn](l)}),n&&mt(e,"change",()=>{e.value=e.value.trim()}),t||(mt(e,"compositionstart",Ia),mt(e,"compositionend",Ss),mt(e,"change",Ss))},mounted(e,{value:t}){e.value=t??""},beforeUpdate(e,{value:t,modifiers:{lazy:n,trim:i,number:o}},s){if(e[Jn]=js(s),e.composing)return;const r=o||e.type==="number"?Gn(e.value):e.value,l=t??"";r!==l&&(document.activeElement===e&&e.type!=="range"&&(n||i&&e.value.trim()===l)||(e.value=l))}},La=["ctrl","shift","alt","meta"],ka={stop:e=>e.stopPropagation(),prevent:e=>e.preventDefault(),self:e=>e.target!==e.currentTarget,ctrl:e=>!e.ctrlKey,shift:e=>!e.shiftKey,alt:e=>!e.altKey,meta:e=>!e.metaKey,left:e=>"button"in e&&e.button!==0,middle:e=>"button"in e&&e.button!==1,right:e=>"button"in e&&e.button!==2,exact:(e,t)=>La.some(n=>e[`${n}Key`]&&!t.includes(n))},Xc=(e,t)=>(n,...i)=>{for(let o=0;on=>{if(!("key"in n))return;const i=ft(n.key);if(t.some(o=>o===i||Na[o]===i))return e(n)},Ha=re({patchProp:Fa},ma);let Xn,Os=!1;function $a(){return Xn=Os?Xn:Vl(Ha),Os=!0,Xn}const Zc=(...e)=>{const t=$a().createApp(...e),{mount:n}=t;return t.mount=i=>{const o=Da(i);if(o)return n(o,!0,o instanceof SVGElement)},t};function Da(e){return ne(e)?document.querySelector(e):e}const Gc=(e,t)=>{const n=e.__vccOpts||e;for(const[i,o]of t)n[i]=o;return n},Ba="modulepreload",Ua=function(e){return"/document/"+e},Rs={},ef=function(t,n,i){if(!n||n.length===0)return t();const o=document.getElementsByTagName("link");return Promise.all(n.map(s=>{if(s=Ua(s),s in Rs)return;Rs[s]=!0;const r=s.endsWith(".css"),l=r?'[rel="stylesheet"]':"";if(!!i)for(let p=o.length-1;p>=0;p--){const d=o[p];if(d.href===s&&(!r||d.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${s}"]${l}`))return;const c=document.createElement("link");if(c.rel=r?"stylesheet":Ba,r||(c.as="script",c.crossOrigin=""),c.href=s,document.head.appendChild(c),r)return new Promise((p,d)=>{c.addEventListener("load",p),c.addEventListener("error",()=>d(new Error(`Unable to preload CSS for ${s}`)))})})).then(()=>t()).catch(s=>{const r=new Event("vite:preloadError",{cancelable:!0});if(r.payload=s,window.dispatchEvent(r),!r.defaultPrevented)throw s})},Ka=window.__VP_SITE_DATA__;function Hi(e){return zs()?(Tr(e),!0):!1}function lt(e){return typeof e=="function"?e():lo(e)}const Vo=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const Wa=Object.prototype.toString,qa=e=>Wa.call(e)==="[object Object]",zo=()=>{},Ps=Va();function Va(){var e;return Vo&&((e=window==null?void 0:window.navigator)==null?void 0:e.userAgent)&&/iP(ad|hone|od)/.test(window.navigator.userAgent)}function za(e,t){function n(...i){return new Promise((o,s)=>{Promise.resolve(e(()=>t.apply(this,i),{fn:t,thisArg:this,args:i})).then(o).catch(s)})}return n}const Yo=e=>e();function Ya(e=Yo){const t=ge(!0);function n(){t.value=!1}function i(){t.value=!0}const o=(...s)=>{t.value&&e(...s)};return{isActive:On(t),pause:n,resume:i,eventFilter:o}}function Jo(...e){if(e.length!==1)return el(...e);const t=e[0];return typeof t=="function"?On(Qr(()=>({get:t,set:zo}))):ge(t)}function Ja(e,t,n={}){const{eventFilter:i=Yo,...o}=n;return Ye(e,za(i,t),o)}function Xa(e,t,n={}){const{eventFilter:i,...o}=n,{eventFilter:s,pause:r,resume:l,isActive:a}=Ya(i);return{stop:Ja(e,t,{...o,eventFilter:s}),pause:r,resume:l,isActive:a}}function Xo(e,t=!0){$n()?jt(e):t?e():Pn(e)}function Qo(e){var t;const n=lt(e);return(t=n==null?void 0:n.$el)!=null?t:n}const Et=Vo?window:void 0;function wn(...e){let t,n,i,o;if(typeof e[0]=="string"||Array.isArray(e[0])?([n,i,o]=e,t=Et):[t,n,i,o]=e,!t)return zo;Array.isArray(n)||(n=[n]),Array.isArray(i)||(i=[i]);const s=[],r=()=>{s.forEach(p=>p()),s.length=0},l=(p,d,x,w)=>(p.addEventListener(d,x,w),()=>p.removeEventListener(d,x,w)),a=Ye(()=>[Qo(t),lt(o)],([p,d])=>{if(r(),!p)return;const x=qa(d)?{...d}:d;s.push(...n.flatMap(w=>i.map(F=>l(p,w,F,x))))},{immediate:!0,flush:"post"}),c=()=>{a(),r()};return Hi(c),c}function Qa(){const e=ge(!1);return $n()&&jt(()=>{e.value=!0}),e}function Za(e){const t=Qa();return oe(()=>(t.value,!!e()))}function Ga(e,t={}){const{window:n=Et}=t,i=Za(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let o;const s=ge(!1),r=c=>{s.value=c.matches},l=()=>{o&&("removeEventListener"in o?o.removeEventListener("change",r):o.removeListener(r))},a=xo(()=>{i.value&&(l(),o=n.matchMedia(lt(e)),"addEventListener"in o?o.addEventListener("change",r):o.addListener(r),s.value=o.matches)});return Hi(()=>{a(),l(),o=void 0}),s}const on=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},rn="__vueuse_ssr_handlers__",ec=tc();function tc(){return rn in on||(on[rn]=on[rn]||{}),on[rn]}function Zo(e,t){return ec[e]||t}function nc(e){return e==null?"any":e instanceof Set?"set":e instanceof Map?"map":e instanceof Date?"date":typeof e=="boolean"?"boolean":typeof e=="string"?"string":typeof e=="object"?"object":Number.isNaN(e)?"any":"number"}const ic={boolean:{read:e=>e==="true",write:e=>String(e)},object:{read:e=>JSON.parse(e),write:e=>JSON.stringify(e)},number:{read:e=>Number.parseFloat(e),write:e=>String(e)},any:{read:e=>e,write:e=>String(e)},string:{read:e=>e,write:e=>String(e)},map:{read:e=>new Map(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e.entries()))},set:{read:e=>new Set(JSON.parse(e)),write:e=>JSON.stringify(Array.from(e))},date:{read:e=>new Date(e),write:e=>e.toISOString()}},Fs="vueuse-storage";function sc(e,t,n,i={}){var o;const{flush:s="pre",deep:r=!0,listenToStorageChanges:l=!0,writeDefaults:a=!0,mergeDefaults:c=!1,shallow:p,window:d=Et,eventFilter:x,onError:w=C=>{console.error(C)},initOnMounted:F}=i,S=(p?oo:ge)(typeof t=="function"?t():t);if(!n)try{n=Zo("getDefaultStorage",()=>{var C;return(C=Et)==null?void 0:C.localStorage})()}catch(C){w(C)}if(!n)return S;const $=lt(t),W=nc($),V=(o=i.serializer)!=null?o:ic[W],{pause:g,resume:m}=Xa(S,()=>P(S.value),{flush:s,deep:r,eventFilter:x});return d&&l&&Xo(()=>{wn(d,"storage",A),wn(d,Fs,I),F&&A()}),F||A(),S;function P(C){try{if(C==null)n.removeItem(e);else{const T=V.write(C),U=n.getItem(e);U!==T&&(n.setItem(e,T),d&&d.dispatchEvent(new CustomEvent(Fs,{detail:{key:e,oldValue:U,newValue:T,storageArea:n}})))}}catch(T){w(T)}}function D(C){const T=C?C.newValue:n.getItem(e);if(T==null)return a&&$!==null&&n.setItem(e,V.write($)),$;if(!C&&c){const U=V.read(T);return typeof c=="function"?c(U,$):W==="object"&&!Array.isArray(U)?{...$,...U}:U}else return typeof T!="string"?T:V.read(T)}function I(C){A(C.detail)}function A(C){if(!(C&&C.storageArea!==n)){if(C&&C.key==null){S.value=$;return}if(!(C&&C.key!==e)){g();try{(C==null?void 0:C.newValue)!==V.write(S.value)&&(S.value=D(C))}catch(T){w(T)}finally{C?Pn(m):m()}}}}}function oc(e){return Ga("(prefers-color-scheme: dark)",e)}function rc(e={}){const{selector:t="html",attribute:n="class",initialValue:i="auto",window:o=Et,storage:s,storageKey:r="vueuse-color-scheme",listenToStorageChanges:l=!0,storageRef:a,emitAuto:c,disableTransition:p=!0}=e,d={auto:"",light:"light",dark:"dark",...e.modes||{}},x=oc({window:o}),w=oe(()=>x.value?"dark":"light"),F=a||(r==null?Jo(i):sc(r,i,s,{window:o,listenToStorageChanges:l})),S=oe(()=>F.value==="auto"?w.value:F.value),$=Zo("updateHTMLAttrs",(m,P,D)=>{const I=typeof m=="string"?o==null?void 0:o.document.querySelector(m):Qo(m);if(!I)return;let A;if(p){A=o.document.createElement("style");const C="*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}";A.appendChild(document.createTextNode(C)),o.document.head.appendChild(A)}if(P==="class"){const C=D.split(/\s/g);Object.values(d).flatMap(T=>(T||"").split(/\s/g)).filter(Boolean).forEach(T=>{C.includes(T)?I.classList.add(T):I.classList.remove(T)})}else I.setAttribute(P,D);p&&(o.getComputedStyle(A).opacity,document.head.removeChild(A))});function W(m){var P;$(t,n,(P=d[m])!=null?P:m)}function V(m){e.onChanged?e.onChanged(m,W):W(m)}Ye(S,V,{flush:"post",immediate:!0}),Xo(()=>V(S.value));const g=oe({get(){return c?F.value:S.value},set(m){F.value=m}});try{return Object.assign(g,{store:F,system:w,state:S})}catch{return g}}function lc(e={}){const{valueDark:t="dark",valueLight:n=""}=e,i=rc({...e,onChanged:(s,r)=>{var l;e.onChanged?(l=e.onChanged)==null||l.call(e,s==="dark",r,s):r(s)},modes:{dark:t,light:n}});return oe({get(){return i.value==="dark"},set(s){const r=s?"dark":"light";i.system.value===r?i.value="auto":i.value=r}})}function Qn(e){return typeof Window<"u"&&e instanceof Window?e.document.documentElement:typeof Document<"u"&&e instanceof Document?e.documentElement:e}function Go(e){const t=window.getComputedStyle(e);if(t.overflowX==="scroll"||t.overflowY==="scroll"||t.overflowX==="auto"&&e.clientWidth1?!0:(t.preventDefault&&t.preventDefault(),!1)}const ln=new WeakMap;function tf(e,t=!1){const n=ge(t);let i=null,o;Ye(Jo(e),l=>{const a=Qn(lt(l));if(a){const c=a;ln.get(c)||ln.set(c,o),n.value&&(c.style.overflow="hidden")}},{immediate:!0});const s=()=>{const l=Qn(lt(e));!l||n.value||(Ps&&(i=wn(l,"touchmove",a=>{ac(a)},{passive:!1})),l.style.overflow="hidden",n.value=!0)},r=()=>{var l;const a=Qn(lt(e));!a||!n.value||(Ps&&(i==null||i()),a.style.overflow=(l=ln.get(a))!=null?l:"",ln.delete(a),n.value=!1)};return Hi(r),oe({get(){return n.value},set(l){l?s():r()}})}function nf(e={}){const{window:t=Et,behavior:n="auto"}=e;if(!t)return{x:ge(0),y:ge(0)};const i=ge(t.scrollX),o=ge(t.scrollY),s=oe({get(){return i.value},set(l){scrollTo({left:l,behavior:n})}}),r=oe({get(){return o.value},set(l){scrollTo({top:l,behavior:n})}});return wn(t,"scroll",()=>{i.value=t.scrollX,o.value=t.scrollY},{capture:!1,passive:!0}),{x:s,y:r}}const er=/^(?:[a-z]+:|\/\/)/i,cc="vitepress-theme-appearance",tr=/#.*$/,fc=/(index)?\.(md|html)$/,Ce=typeof document<"u",nr={relativePath:"",filePath:"",title:"404",description:"Not Found",headers:[],frontmatter:{sidebar:!1,layout:"page"},lastUpdated:0,isNotFound:!0};function uc(e,t,n=!1){if(t===void 0)return!1;if(e=Ms(`/${e}`),n)return new RegExp(t).test(e);if(Ms(t)!==e)return!1;const i=t.match(tr);return i?(Ce?location.hash:"")===i[0]:!0}function Ms(e){return decodeURI(e).replace(tr,"").replace(fc,"")}function pc(e){return er.test(e)}function dc(e,t){var i,o,s,r,l,a,c;const n=Object.keys(e.locales).find(p=>p!=="root"&&!pc(p)&&uc(t,`/${p}/`,!0))||"root";return Object.assign({},e,{localeIndex:n,lang:((i=e.locales[n])==null?void 0:i.lang)??e.lang,dir:((o=e.locales[n])==null?void 0:o.dir)??e.dir,title:((s=e.locales[n])==null?void 0:s.title)??e.title,titleTemplate:((r=e.locales[n])==null?void 0:r.titleTemplate)??e.titleTemplate,description:((l=e.locales[n])==null?void 0:l.description)??e.description,head:sr(e.head,((a=e.locales[n])==null?void 0:a.head)??[]),themeConfig:{...e.themeConfig,...(c=e.locales[n])==null?void 0:c.themeConfig}})}function ir(e,t){const n=t.title||e.title,i=t.titleTemplate??e.titleTemplate;if(typeof i=="string"&&i.includes(":title"))return i.replace(/:title/g,n);const o=mc(e.title,i);return`${n}${o}`}function mc(e,t){return t===!1?"":t===!0||t===void 0?` | ${e}`:e===t?"":` | ${t}`}function hc(e,t){const[n,i]=t;if(n!=="meta")return!1;const o=Object.entries(i)[0];return o==null?!1:e.some(([s,r])=>s===n&&r[o[0]]===o[1])}function sr(e,t){return[...e.filter(n=>!hc(t,n)),...t]}const gc=/[\u0000-\u001F"#$&*+,:;<=>?[\]^`{|}\u007F]/g,xc=/^[a-z]:/i;function Is(e){const t=xc.exec(e),n=t?t[0]:"";return n+e.slice(n.length).replace(gc,"_").replace(/(^|\/)_+(?=[^/]*$)/,"$1")}const yc=Symbol(),at=oo(Ka);function sf(e){const t=oe(()=>dc(at.value,e.data.relativePath)),n=t.value.appearance,i=n==="force-dark"?ge(!0):n?lc({storageKey:cc,initialValue:()=>typeof n=="string"?n:"auto",...typeof n=="object"?n:{}}):ge(!1);return{site:t,theme:oe(()=>t.value.themeConfig),page:oe(()=>e.data),frontmatter:oe(()=>e.data.frontmatter),params:oe(()=>e.data.params),lang:oe(()=>t.value.lang),dir:oe(()=>t.value.dir),localeIndex:oe(()=>t.value.localeIndex||"root"),title:oe(()=>ir(t.value,e.data)),description:oe(()=>e.data.description||t.value.description),isDark:i}}function vc(){const e=bt(yc);if(!e)throw new Error("vitepress data not properly injected in app");return e}const bc={ez:"application/andrew-inset",aw:"application/applixware",atom:"application/atom+xml",atomcat:"application/atomcat+xml",atomdeleted:"application/atomdeleted+xml",atomsvc:"application/atomsvc+xml",dwd:"application/atsc-dwd+xml",held:"application/atsc-held+xml",rsat:"application/atsc-rsat+xml",bdoc:"application/bdoc",xcs:"application/calendar+xml",ccxml:"application/ccxml+xml",cdfx:"application/cdfx+xml",cdmia:"application/cdmi-capability",cdmic:"application/cdmi-container",cdmid:"application/cdmi-domain",cdmio:"application/cdmi-object",cdmiq:"application/cdmi-queue",cu:"application/cu-seeme",mpd:"application/dash+xml",davmount:"application/davmount+xml",dbk:"application/docbook+xml",dssc:"application/dssc+der",xdssc:"application/dssc+xml",es:"application/ecmascript",ecma:"application/ecmascript",emma:"application/emma+xml",emotionml:"application/emotionml+xml",epub:"application/epub+zip",exi:"application/exi",fdt:"application/fdt+xml",pfr:"application/font-tdpfr",geojson:"application/geo+json",gml:"application/gml+xml",gpx:"application/gpx+xml",gxf:"application/gxf",gz:"application/gzip",hjson:"application/hjson",stk:"application/hyperstudio",ink:"application/inkml+xml",inkml:"application/inkml+xml",ipfix:"application/ipfix",its:"application/its+xml",jar:"application/java-archive",war:"application/java-archive",ear:"application/java-archive",ser:"application/java-serialized-object",class:"application/java-vm",js:"application/javascript",mjs:"application/javascript",json:"application/json",map:"application/json",json5:"application/json5",jsonml:"application/jsonml+json",jsonld:"application/ld+json",lgr:"application/lgr+xml",lostxml:"application/lost+xml",hqx:"application/mac-binhex40",cpt:"application/mac-compactpro",mads:"application/mads+xml",webmanifest:"application/manifest+json",mrc:"application/marc",mrcx:"application/marcxml+xml",ma:"application/mathematica",nb:"application/mathematica",mb:"application/mathematica",mathml:"application/mathml+xml",mbox:"application/mbox",mscml:"application/mediaservercontrol+xml",metalink:"application/metalink+xml",meta4:"application/metalink4+xml",mets:"application/mets+xml",maei:"application/mmt-aei+xml",musd:"application/mmt-usd+xml",mods:"application/mods+xml",m21:"application/mp21",mp21:"application/mp21",mp4s:"application/mp4",m4p:"application/mp4",doc:"application/msword",dot:"application/msword",mxf:"application/mxf",nq:"application/n-quads",nt:"application/n-triples",cjs:"application/node",bin:"application/octet-stream",dms:"application/octet-stream",lrf:"application/octet-stream",mar:"application/octet-stream",so:"application/octet-stream",dist:"application/octet-stream",distz:"application/octet-stream",pkg:"application/octet-stream",bpk:"application/octet-stream",dump:"application/octet-stream",elc:"application/octet-stream",deploy:"application/octet-stream",exe:"application/octet-stream",dll:"application/octet-stream",deb:"application/octet-stream",dmg:"application/octet-stream",iso:"application/octet-stream",img:"application/octet-stream",msi:"application/octet-stream",msp:"application/octet-stream",msm:"application/octet-stream",buffer:"application/octet-stream",oda:"application/oda",opf:"application/oebps-package+xml",ogx:"application/ogg",omdoc:"application/omdoc+xml",onetoc:"application/onenote",onetoc2:"application/onenote",onetmp:"application/onenote",onepkg:"application/onenote",oxps:"application/oxps",relo:"application/p2p-overlay+xml",xer:"application/patch-ops-error+xml",pdf:"application/pdf",pgp:"application/pgp-encrypted",asc:"application/pgp-signature",sig:"application/pgp-signature",prf:"application/pics-rules",p10:"application/pkcs10",p7m:"application/pkcs7-mime",p7c:"application/pkcs7-mime",p7s:"application/pkcs7-signature",p8:"application/pkcs8",ac:"application/pkix-attr-cert",cer:"application/pkix-cert",crl:"application/pkix-crl",pkipath:"application/pkix-pkipath",pki:"application/pkixcmp",pls:"application/pls+xml",ai:"application/postscript",eps:"application/postscript",ps:"application/postscript",provx:"application/provenance+xml",cww:"application/prs.cww",pskcxml:"application/pskc+xml",raml:"application/raml+yaml",rdf:"application/rdf+xml",owl:"application/rdf+xml",rif:"application/reginfo+xml",rnc:"application/relax-ng-compact-syntax",rl:"application/resource-lists+xml",rld:"application/resource-lists-diff+xml",rs:"application/rls-services+xml",rapd:"application/route-apd+xml",sls:"application/route-s-tsid+xml",rusd:"application/route-usd+xml",gbr:"application/rpki-ghostbusters",mft:"application/rpki-manifest",roa:"application/rpki-roa",rsd:"application/rsd+xml",rss:"application/rss+xml",rtf:"application/rtf",sbml:"application/sbml+xml",scq:"application/scvp-cv-request",scs:"application/scvp-cv-response",spq:"application/scvp-vp-request",spp:"application/scvp-vp-response",sdp:"application/sdp",senmlx:"application/senml+xml",sensmlx:"application/sensml+xml",setpay:"application/set-payment-initiation",setreg:"application/set-registration-initiation",shf:"application/shf+xml",siv:"application/sieve",sieve:"application/sieve",smi:"application/smil+xml",smil:"application/smil+xml",rq:"application/sparql-query",srx:"application/sparql-results+xml",gram:"application/srgs",grxml:"application/srgs+xml",sru:"application/sru+xml",ssdl:"application/ssdl+xml",ssml:"application/ssml+xml",swidtag:"application/swid+xml",tei:"application/tei+xml",teicorpus:"application/tei+xml",tfi:"application/thraud+xml",tsd:"application/timestamped-data",toml:"application/toml",trig:"application/trig",ttml:"application/ttml+xml",ubj:"application/ubjson",rsheet:"application/urc-ressheet+xml",td:"application/urc-targetdesc+xml",vxml:"application/voicexml+xml",wasm:"application/wasm",wgt:"application/widget",hlp:"application/winhlp",wsdl:"application/wsdl+xml",wspolicy:"application/wspolicy+xml",xaml:"application/xaml+xml",xav:"application/xcap-att+xml",xca:"application/xcap-caps+xml",xdf:"application/xcap-diff+xml",xel:"application/xcap-el+xml",xns:"application/xcap-ns+xml",xenc:"application/xenc+xml",xhtml:"application/xhtml+xml",xht:"application/xhtml+xml",xlf:"application/xliff+xml",xml:"application/xml",xsl:"application/xml",xsd:"application/xml",rng:"application/xml",dtd:"application/xml-dtd",xop:"application/xop+xml",xpl:"application/xproc+xml",xslt:"application/xml",xspf:"application/xspf+xml",mxml:"application/xv+xml",xhvml:"application/xv+xml",xvml:"application/xv+xml",xvm:"application/xv+xml",yang:"application/yang",yin:"application/yin+xml",zip:"application/zip","3gpp":"video/3gpp",adp:"audio/adpcm",amr:"audio/amr",au:"audio/basic",snd:"audio/basic",mid:"audio/midi",midi:"audio/midi",kar:"audio/midi",rmi:"audio/midi",mxmf:"audio/mobile-xmf",mp3:"audio/mpeg",m4a:"audio/mp4",mp4a:"audio/mp4",mpga:"audio/mpeg",mp2:"audio/mpeg",mp2a:"audio/mpeg",m2a:"audio/mpeg",m3a:"audio/mpeg",oga:"audio/ogg",ogg:"audio/ogg",spx:"audio/ogg",opus:"audio/ogg",s3m:"audio/s3m",sil:"audio/silk",wav:"audio/wav",weba:"audio/webm",xm:"audio/xm",ttc:"font/collection",otf:"font/otf",ttf:"font/ttf",woff:"font/woff",woff2:"font/woff2",exr:"image/aces",apng:"image/apng",avif:"image/avif",bmp:"image/bmp",cgm:"image/cgm",drle:"image/dicom-rle",emf:"image/emf",fits:"image/fits",g3:"image/g3fax",gif:"image/gif",heic:"image/heic",heics:"image/heic-sequence",heif:"image/heif",heifs:"image/heif-sequence",hej2:"image/hej2k",hsj2:"image/hsj2",ief:"image/ief",jls:"image/jls",jp2:"image/jp2",jpg2:"image/jp2",jpeg:"image/jpeg",jpg:"image/jpeg",jpe:"image/jpeg",jph:"image/jph",jhc:"image/jphc",jpm:"image/jpm",jpx:"image/jpx",jpf:"image/jpx",jxr:"image/jxr",jxra:"image/jxra",jxrs:"image/jxrs",jxs:"image/jxs",jxsc:"image/jxsc",jxsi:"image/jxsi",jxss:"image/jxss",ktx:"image/ktx",ktx2:"image/ktx2",png:"image/png",btif:"image/prs.btif",pti:"image/prs.pti",sgi:"image/sgi",svg:"image/svg+xml",svgz:"image/svg+xml",t38:"image/t38",tif:"image/tiff",tiff:"image/tiff",tfx:"image/tiff-fx",webp:"image/webp",wmf:"image/wmf","disposition-notification":"message/disposition-notification",u8msg:"message/global",u8dsn:"message/global-delivery-status",u8mdn:"message/global-disposition-notification",u8hdr:"message/global-headers",eml:"message/rfc822",mime:"message/rfc822","3mf":"model/3mf",gltf:"model/gltf+json",glb:"model/gltf-binary",igs:"model/iges",iges:"model/iges",msh:"model/mesh",mesh:"model/mesh",silo:"model/mesh",mtl:"model/mtl",obj:"model/obj",stpz:"model/step+zip",stpxz:"model/step-xml+zip",stl:"model/stl",wrl:"model/vrml",vrml:"model/vrml",x3db:"model/x3d+fastinfoset",x3dbz:"model/x3d+binary",x3dv:"model/x3d-vrml",x3dvz:"model/x3d+vrml",x3d:"model/x3d+xml",x3dz:"model/x3d+xml",appcache:"text/cache-manifest",manifest:"text/cache-manifest",ics:"text/calendar",ifb:"text/calendar",coffee:"text/coffeescript",litcoffee:"text/coffeescript",css:"text/css",csv:"text/csv",html:"text/html",htm:"text/html",shtml:"text/html",jade:"text/jade",jsx:"text/jsx",less:"text/less",markdown:"text/markdown",md:"text/markdown",mml:"text/mathml",mdx:"text/mdx",n3:"text/n3",txt:"text/plain",text:"text/plain",conf:"text/plain",def:"text/plain",list:"text/plain",log:"text/plain",in:"text/plain",ini:"text/plain",dsc:"text/prs.lines.tag",rtx:"text/richtext",sgml:"text/sgml",sgm:"text/sgml",shex:"text/shex",slim:"text/slim",slm:"text/slim",spdx:"text/spdx",stylus:"text/stylus",styl:"text/stylus",tsv:"text/tab-separated-values",t:"text/troff",tr:"text/troff",roff:"text/troff",man:"text/troff",me:"text/troff",ms:"text/troff",ttl:"text/turtle",uri:"text/uri-list",uris:"text/uri-list",urls:"text/uri-list",vcard:"text/vcard",vtt:"text/vtt",yaml:"text/yaml",yml:"text/yaml","3gp":"video/3gpp","3g2":"video/3gpp2",h261:"video/h261",h263:"video/h263",h264:"video/h264",m4s:"video/iso.segment",jpgv:"video/jpeg",jpgm:"image/jpm",mj2:"video/mj2",mjp2:"video/mj2",ts:"video/mp2t",mp4:"video/mp4",mp4v:"video/mp4",mpg4:"video/mp4",mpeg:"video/mpeg",mpg:"video/mpeg",mpe:"video/mpeg",m1v:"video/mpeg",m2v:"video/mpeg",ogv:"video/ogg",qt:"video/quicktime",mov:"video/quicktime",webm:"video/webm"};function _c(e){let t=(""+e).trim().toLowerCase(),n=t.lastIndexOf(".");return bc[~n?t.substring(++n):t]}function wc(e,t){return`${e}${t}`.replace(/\/+/g,"/")}function Ls(e){return er.test(e)||!e.startsWith("/")?e:wc(at.value.base,e)}function Cc(e){let t=e.replace(/\.html$/,"");if(t=decodeURIComponent(t),t=t.replace(/\/$/,"/index"),Ce){const n="/document/";t=Is(t.slice(n.length).replace(/\//g,"_")||"index")+".md";let i=__VP_HASH_MAP__[t.toLowerCase()];if(i||(t=t.endsWith("_index.md")?t.slice(0,-9)+".md":t.slice(0,-3)+"_index.md",i=__VP_HASH_MAP__[t.toLowerCase()]),!i)return null;t=`${n}assets/${t}.${i}.js`}else t=`./${Is(t.slice(1).replace(/\//g,"_"))}.md.js`;return t}let pn=[];function of(e){pn.push(e),Nn(()=>{pn=pn.filter(t=>t!==e)})}const Ec=Symbol(),or="http://a.com",Tc=()=>({path:"/",component:null,data:nr});function rf(e,t){const n=Sn(Tc()),i={route:n,go:o};async function o(l=Ce?location.href:"/"){var a,c;l=mi(l),await((a=i.onBeforeRouteChange)==null?void 0:a.call(i,l))!==!1&&(Hs(l),await r(l),await((c=i.onAfterRouteChanged)==null?void 0:c.call(i,l)))}let s=null;async function r(l,a=0,c=!1){var x;if(await((x=i.onBeforePageLoad)==null?void 0:x.call(i,l))===!1)return;const p=new URL(l,or),d=s=p.pathname;try{let w=await e(d);if(!w)throw new Error(`Page not found: ${d}`);if(s===d){s=null;const{default:F,__pageData:S}=w;if(!F)throw new Error(`Invalid route component: ${F}`);n.path=Ce?d:Ls(d),n.component=It(F),n.data=It(S),Ce&&Pn(()=>{let $=at.value.base+S.relativePath.replace(/(?:(^|\/)index)?\.md$/,"$1");if(!at.value.cleanUrls&&!$.endsWith("/")&&($+=".html"),$!==p.pathname&&(p.pathname=$,l=$+p.search+p.hash,history.replaceState(null,"",l)),p.hash&&!a){let W=null;try{W=document.getElementById(decodeURIComponent(p.hash).slice(1))}catch(V){console.warn(V)}if(W){ks(W,p.hash);return}}window.scrollTo(0,a)})}}catch(w){if(!/fetch|Page not found/.test(w.message)&&!/^\/404(\.html|\/)?$/.test(l)&&console.error(w),!c)try{const F=await fetch(at.value.base+"hashmap.json");window.__VP_HASH_MAP__=await F.json(),await r(l,a,!0);return}catch{}s===d&&(s=null,n.path=Ce?d:Ls(d),n.component=t?It(t):null,n.data=nr)}}return Ce&&(window.addEventListener("click",l=>{if(l.target.closest("button"))return;const c=l.target.closest("a");if(c&&!c.closest(".vp-raw")&&(c instanceof SVGElement||!c.download)){const{target:p}=c,{href:d,origin:x,pathname:w,hash:F,search:S}=new URL(c.href instanceof SVGAnimatedString?c.href.animVal:c.href,c.baseURI),$=window.location,W=_c(w);!l.ctrlKey&&!l.shiftKey&&!l.altKey&&!l.metaKey&&!p&&x===$.origin&&(!W||W==="text/html")&&(l.preventDefault(),w===$.pathname&&S===$.search?(F!==$.hash&&(history.pushState(null,"",F),window.dispatchEvent(new Event("hashchange"))),F?ks(c,F,c.classList.contains("header-anchor")):(Hs(d),window.scrollTo(0,0))):o(d))}},{capture:!0}),window.addEventListener("popstate",async l=>{var a;await r(mi(location.href),l.state&&l.state.scrollPosition||0),(a=i.onAfterRouteChanged)==null||a.call(i,location.href)}),window.addEventListener("hashchange",l=>{l.preventDefault()})),i}function Ac(){const e=bt(Ec);if(!e)throw new Error("useRouter() is called without provider.");return e}function rr(){return Ac().route}function ks(e,t,n=!1){let i=null;try{i=e.classList.contains("header-anchor")?e:document.getElementById(decodeURIComponent(t).slice(1))}catch(o){console.warn(o)}if(i){let o=function(){!n||Math.abs(c-window.scrollY)>window.innerHeight?window.scrollTo(0,c):window.scrollTo({left:0,top:c,behavior:"smooth"})},s=at.value.scrollOffset,r=0,l=24;if(typeof s=="object"&&"padding"in s&&(l=s.padding,s=s.selector),typeof s=="number")r=s;else if(typeof s=="string")r=Ns(s,l);else if(Array.isArray(s))for(const p of s){const d=Ns(p,l);if(d){r=d;break}}const a=parseInt(window.getComputedStyle(i).paddingTop,10),c=window.scrollY+i.getBoundingClientRect().top-r+a;requestAnimationFrame(o)}}function Ns(e,t){const n=document.querySelector(e);if(!n)return 0;const i=n.getBoundingClientRect().bottom;return i<0?0:i+t}function Hs(e){Ce&&e!==mi(location.href)&&(history.replaceState({scrollPosition:window.scrollY},document.title),history.pushState(null,"",e))}function mi(e){const t=new URL(e,or);return t.pathname=t.pathname.replace(/(^|\/)index(\.html)?$/,"$1"),at.value.cleanUrls?t.pathname=t.pathname.replace(/\.html$/,""):!t.pathname.endsWith("/")&&!t.pathname.endsWith(".html")&&(t.pathname+=".html"),t.pathname+t.search+t.hash}const $s=()=>pn.forEach(e=>e()),lf=wo({name:"VitePressContent",props:{as:{type:[Object,String],default:"div"}},setup(e){const t=rr(),{site:n}=vc();return()=>pi(e.as,n.value.contentProps??{style:{position:"relative"}},[t.component?pi(t.component,{onVnodeMounted:$s,onVnodeUpdated:$s}):"404 Page Not Found"])}}),af=wo({setup(e,{slots:t}){const n=ge(!1);return jt(()=>{n.value=!0}),()=>n.value&&t.default?t.default():null}});function cf(){Ce&&window.addEventListener("click",e=>{var n;const t=e.target;if(t.matches(".vp-code-group input")){const i=(n=t.parentElement)==null?void 0:n.parentElement;if(!i)return;const o=Array.from(i.querySelectorAll("input")).indexOf(t);if(o<0)return;const s=i.querySelector(".blocks");if(!s)return;const r=Array.from(s.children).find(c=>c.classList.contains("active"));if(!r)return;const l=s.children[o];if(!l||r===l)return;r.classList.remove("active"),l.classList.add("active");const a=i==null?void 0:i.querySelector(`label[for="${t.id}"]`);a==null||a.scrollIntoView({block:"nearest"})}})}function ff(){if(Ce){const e=new WeakMap;window.addEventListener("click",t=>{var i;const n=t.target;if(n.matches('div[class*="language-"] > button.copy')){const o=n.parentElement,s=(i=n.nextElementSibling)==null?void 0:i.nextElementSibling;if(!o||!s)return;const r=/language-(shellscript|shell|bash|sh|zsh)/.test(o.className);let l="";s.querySelectorAll("span.line:not(.diff.remove)").forEach(a=>l+=(a.textContent||"")+` +`),l=l.slice(0,-1),r&&(l=l.replace(/^ *(\$|>) /gm,"").trim()),jc(l).then(()=>{n.classList.add("copied"),clearTimeout(e.get(n));const a=setTimeout(()=>{n.classList.remove("copied"),n.blur(),e.delete(n)},2e3);e.set(n,a)})}})}}async function jc(e){try{return navigator.clipboard.writeText(e)}catch{const t=document.createElement("textarea"),n=document.activeElement;t.value=e,t.setAttribute("readonly",""),t.style.contain="strict",t.style.position="absolute",t.style.left="-9999px",t.style.fontSize="12pt";const i=document.getSelection(),o=i?i.rangeCount>0&&i.getRangeAt(0):null;document.body.appendChild(t),t.select(),t.selectionStart=0,t.selectionEnd=e.length,document.execCommand("copy"),document.body.removeChild(t),o&&(i.removeAllRanges(),i.addRange(o)),n&&n.focus()}}function uf(e,t){let n=[],i=!0;const o=s=>{if(i){i=!1;return}const r=s.map(Ds);n.forEach((l,a)=>{const c=r.findIndex(p=>p==null?void 0:p.isEqualNode(l??null));c!==-1?delete r[c]:(l==null||l.remove(),delete n[a])}),r.forEach(l=>l&&document.head.appendChild(l)),n=[...n,...r].filter(Boolean)};xo(()=>{const s=e.data,r=t.value,l=s&&s.description,a=s&&s.frontmatter.head||[],c=ir(r,s);c!==document.title&&(document.title=c);const p=l||r.description;let d=document.querySelector("meta[name=description]");d?d.getAttribute("content")!==p&&d.setAttribute("content",p):Ds(["meta",{name:"description",content:p}]),o(sr(r.head,Oc(a)))})}function Ds([e,t,n]){const i=document.createElement(e);for(const o in t)i.setAttribute(o,t[o]);return n&&(i.innerHTML=n),e==="script"&&!t.async&&(i.async=!1),i}function Sc(e){return e[0]==="meta"&&e[1]&&e[1].name==="description"}function Oc(e){return e.filter(t=>!Sc(t))}const Zn=new Set,lr=()=>document.createElement("link"),Rc=e=>{const t=lr();t.rel="prefetch",t.href=e,document.head.appendChild(t)},Pc=e=>{const t=new XMLHttpRequest;t.open("GET",e,t.withCredentials=!0),t.send()};let an;const Fc=Ce&&(an=lr())&&an.relList&&an.relList.supports&&an.relList.supports("prefetch")?Rc:Pc;function pf(){if(!Ce||!window.IntersectionObserver)return;let e;if((e=navigator.connection)&&(e.saveData||/2g/.test(e.effectiveType)))return;const t=window.requestIdleCallback||setTimeout;let n=null;const i=()=>{n&&n.disconnect(),n=new IntersectionObserver(s=>{s.forEach(r=>{if(r.isIntersecting){const l=r.target;n.unobserve(l);const{pathname:a}=l;if(!Zn.has(a)){Zn.add(a);const c=Cc(a);c&&Fc(c)}}})}),t(()=>{document.querySelectorAll("#app a").forEach(s=>{const{hostname:r,pathname:l}=new URL(s.href instanceof SVGAnimatedString?s.href.animVal:s.href,s.baseURI),a=l.match(/\.\w+$/);a&&a[0]!==".html"||s.target!=="_blank"&&r===location.hostname&&(l!==location.pathname?n.observe(s):Zn.add(l))})})};jt(i);const o=rr();Ye(()=>o.path,i),Nn(()=>{n&&n.disconnect()})}export{tf as $,Nn as A,Hc as B,Tl as C,kc as D,Dc as E,he as F,oo as G,of as H,ue as I,Nc as J,er as K,rr as L,ta as M,bt as N,vi as O,Pn as P,nf as Q,Vc as R,On as S,Wo as T,ef as U,$c as V,Yc as W,Xc as X,Jc as Y,Wc as Z,Gc as _,Do as a,$l as a0,Qc as a1,Uc as a2,Kc as a3,uf as a4,Ec as a5,sf as a6,yc as a7,lf as a8,af as a9,at as aa,Zc as ab,rf as ac,Cc as ad,pf as ae,ff as af,cf as ag,pi as ah,No as b,qc as c,wo as d,zc as e,Ls as f,oe as g,ge as h,pc as i,jt as j,$o as k,_c as l,lo as m,bi as n,Lo as o,Ic as p,Lc as q,Bc as r,uc as s,Mc as t,vc as u,Ce as v,fl as w,Ga as x,Ye as y,xo as z}; diff --git a/docs/document/assets/chunks/theme.1nd7MJcP.js b/docs/document/assets/chunks/theme.1nd7MJcP.js new file mode 100644 index 000000000..dd1218e6a --- /dev/null +++ b/docs/document/assets/chunks/theme.1nd7MJcP.js @@ -0,0 +1,7 @@ +import{d as y,o as r,c as u,r as v,n as B,a as j,t as T,_ as k,b as w,w as p,T as Ve,e as g,u as qe,i as it,l as rt,f as he,g as L,h as M,j as Z,k as d,m as l,p as R,q as K,s as X,v as ee,x as be,y as Q,z as ve,A as Le,B as Ge,C as lt,D as J,F as H,E,G as Se,H as se,I as _,J as Y,K as Re,L as pe,M as ie,N as fe,O as ct,P as ut,Q as Ke,R as dt,S as ht,U as vt,V as xe,W as pt,X as We,Y as ft,Z as _t,$ as Je,a0 as Ye,a1 as mt,a2 as gt,a3 as kt}from"./framework.E60viAY0.js";const $t=y({__name:"VPBadge",props:{text:{},type:{default:"tip"}},setup(e){return(t,s)=>(r(),u("span",{class:B(["VPBadge",t.type])},[v(t.$slots,"default",{},()=>[j(T(t.text),1)],!0)],2))}}),bt=k($t,[["__scopeId","data-v-9613cc9f"]]),yt={key:0,class:"VPBackdrop"},Pt=y({__name:"VPBackdrop",props:{show:{type:Boolean}},setup(e){return(t,s)=>(r(),w(Ve,{name:"fade"},{default:p(()=>[t.show?(r(),u("div",yt)):g("",!0)]),_:1}))}}),wt=k(Pt,[["__scopeId","data-v-c79a1216"]]),I=qe;function Vt(e,t){let s,n=!1;return()=>{s&&clearTimeout(s),n?s=setTimeout(e,t):(e(),(n=!0)&&setTimeout(()=>n=!1,t))}}function ye(e){return/^\//.test(e)?e:`/${e}`}function Me(e){const{pathname:t,search:s,hash:n,protocol:o}=new URL(e,"http://a.com");if(it(e)||e.startsWith("#")||!o.startsWith("http")||/\.(?!html|md)\w+($|\?)/i.test(e)&&rt(e))return e;const{site:a}=I(),i=t.endsWith("/")||t.endsWith(".html")?e:e.replace(/(?:(^\.+)\/)?.*$/,`$1${t.replace(/(\.md)?$/,a.value.cleanUrls?"":".html")}${s}${n}`);return he(i)}function ne({removeCurrent:e=!0,correspondingLink:t=!1}={}){const{site:s,localeIndex:n,page:o,theme:a}=I(),i=L(()=>{var h,f;return{label:(h=s.value.locales[n.value])==null?void 0:h.label,link:((f=s.value.locales[n.value])==null?void 0:f.link)||(n.value==="root"?"/":`/${n.value}/`)}});return{localeLinks:L(()=>Object.entries(s.value.locales).flatMap(([h,f])=>e&&i.value.label===f.label?[]:{text:f.label,link:Lt(f.link||(h==="root"?"/":`/${h}/`),a.value.i18nRouting!==!1&&t,o.value.relativePath.slice(i.value.link.length-1),!s.value.cleanUrls)})),currentLang:i}}function Lt(e,t,s,n){return t?e.replace(/\/$/,"")+ye(s.replace(/(^|\/)index\.md$/,"$1").replace(/\.md$/,n?".html":"")):e}const St=e=>(R("data-v-f87ff6e4"),e=e(),K(),e),Mt={class:"NotFound"},Ct={class:"code"},It={class:"title"},Tt=St(()=>d("div",{class:"divider"},null,-1)),At={class:"quote"},Nt={class:"action"},Ht=["href","aria-label"],Bt=y({__name:"NotFound",setup(e){const{site:t,theme:s}=I(),{localeLinks:n}=ne({removeCurrent:!1}),o=M("/");return Z(()=>{var i;const a=window.location.pathname.replace(t.value.base,"").replace(/(^.*?\/).*$/,"/$1");n.value.length&&(o.value=((i=n.value.find(({link:c})=>c.startsWith(a)))==null?void 0:i.link)||n.value[0].link)}),(a,i)=>{var c,h,f,m,$;return r(),u("div",Mt,[d("p",Ct,T(((c=l(s).notFound)==null?void 0:c.code)??"404"),1),d("h1",It,T(((h=l(s).notFound)==null?void 0:h.title)??"PAGE NOT FOUND"),1),Tt,d("blockquote",At,T(((f=l(s).notFound)==null?void 0:f.quote)??"But if you don't change your direction, and if you keep looking, you may end up where you are heading."),1),d("div",Nt,[d("a",{class:"link",href:l(he)(o.value),"aria-label":((m=l(s).notFound)==null?void 0:m.linkLabel)??"go to home"},T((($=l(s).notFound)==null?void 0:$.linkText)??"Take me home"),9,Ht)])])}}}),zt=k(Bt,[["__scopeId","data-v-f87ff6e4"]]);function Xe(e,t){if(Array.isArray(e))return re(e);if(e==null)return[];t=ye(t);const s=Object.keys(e).sort((o,a)=>a.split("/").length-o.split("/").length).find(o=>t.startsWith(ye(o))),n=s?e[s]:[];return Array.isArray(n)?re(n):re(n.items,n.base)}function xt(e){const t=[];let s=0;for(const n in e){const o=e[n];if(o.items){s=t.push(o);continue}t[s]||t.push({items:[]}),t[s].items.push(o)}return t}function Et(e){const t=[];function s(n){for(const o of n)o.text&&o.link&&t.push({text:o.text,link:o.link,docFooterText:o.docFooterText}),o.items&&s(o.items)}return s(e),t}function Pe(e,t){return Array.isArray(t)?t.some(s=>Pe(e,s)):X(e,t.link)?!0:t.items?Pe(e,t.items):!1}function re(e,t){return[...e].map(s=>{const n={...s},o=n.base||t;return o&&n.link&&(n.link=o+n.link),n.items&&(n.items=re(n.items,o)),n})}function W(){const{frontmatter:e,page:t,theme:s}=I(),n=be("(min-width: 960px)"),o=M(!1),a=L(()=>{const C=s.value.sidebar,S=t.value.relativePath;return C?Xe(C,S):[]}),i=M(a.value);Q(a,(C,S)=>{JSON.stringify(C)!==JSON.stringify(S)&&(i.value=a.value)});const c=L(()=>e.value.sidebar!==!1&&i.value.length>0&&e.value.layout!=="home"),h=L(()=>f?e.value.aside==null?s.value.aside==="left":e.value.aside==="left":!1),f=L(()=>e.value.layout==="home"?!1:e.value.aside!=null?!!e.value.aside:s.value.aside!==!1),m=L(()=>c.value&&n.value),$=L(()=>c.value?xt(i.value):[]);function V(){o.value=!0}function b(){o.value=!1}function P(){o.value?b():V()}return{isOpen:o,sidebar:i,sidebarGroups:$,hasSidebar:c,hasAside:f,leftAside:h,isSidebarEnabled:m,open:V,close:b,toggle:P}}function Dt(e,t){let s;ve(()=>{s=e.value?document.activeElement:void 0}),Z(()=>{window.addEventListener("keyup",n)}),Le(()=>{window.removeEventListener("keyup",n)});function n(o){o.key==="Escape"&&e.value&&(t(),s==null||s.focus())}}const Ze=M(ee?location.hash:"");ee&&window.addEventListener("hashchange",()=>{Ze.value=location.hash});function Ot(e){const{page:t}=I(),s=M(!1),n=L(()=>e.value.collapsed!=null),o=L(()=>!!e.value.link),a=M(!1),i=()=>{a.value=X(t.value.relativePath,e.value.link)};Q([t,e,Ze],i),Z(i);const c=L(()=>a.value?!0:e.value.items?Pe(t.value.relativePath,e.value.items):!1),h=L(()=>!!(e.value.items&&e.value.items.length));ve(()=>{s.value=!!(n.value&&e.value.collapsed)}),Ge(()=>{(a.value||c.value)&&(s.value=!1)});function f(){n.value&&(s.value=!s.value)}return{collapsed:s,collapsible:n,isLink:o,isActiveLink:a,hasActiveLink:c,hasChildren:h,toggle:f}}function Ft(){const{hasSidebar:e}=W(),t=be("(min-width: 960px)"),s=be("(min-width: 1280px)");return{isAsideEnabled:L(()=>!s.value&&!t.value?!1:e.value?s.value:t.value)}}const jt=71;function Ce(e){return typeof e.outline=="object"&&!Array.isArray(e.outline)&&e.outline.label||e.outlineTitle||"On this page"}function Ie(e){const t=[...document.querySelectorAll(".VPDoc :where(h1,h2,h3,h4,h5,h6)")].filter(s=>s.id&&s.hasChildNodes()).map(s=>{const n=Number(s.tagName[1]);return{title:Ut(s),link:"#"+s.id,level:n}});return qt(t,e)}function Ut(e){let t="";for(const s of e.childNodes)if(s.nodeType===1){if(s.classList.contains("VPBadge")||s.classList.contains("header-anchor"))continue;t+=s.textContent}else s.nodeType===3&&(t+=s.textContent);return t.trim()}function qt(e,t){if(t===!1)return[];const s=(typeof t=="object"&&!Array.isArray(t)?t.level:t)||2,[n,o]=typeof s=="number"?[s,s]:s==="deep"?[2,6]:s;e=e.filter(i=>i.level>=n&&i.level<=o);const a=[];e:for(let i=0;i=0;h--){const f=e[h];if(f.level{requestAnimationFrame(a),window.addEventListener("scroll",n)}),lt(()=>{i(location.hash)}),Le(()=>{window.removeEventListener("scroll",n)});function a(){if(!s.value)return;const c=[].slice.call(e.value.querySelectorAll(".outline-link")),h=[].slice.call(document.querySelectorAll(".content .header-anchor")).filter(b=>c.some(P=>P.hash===b.hash&&b.offsetParent!==null)),f=window.scrollY,m=window.innerHeight,$=document.body.offsetHeight,V=Math.abs(f+m-$)<1;if(h.length&&V){i(h[h.length-1].hash);return}for(let b=0;b{const o=J("VPDocOutlineItem",!0);return r(),u("ul",{class:B(s.root?"root":"nested")},[(r(!0),u(H,null,E(s.headers,({children:a,link:i,title:c})=>(r(),u("li",null,[d("a",{class:"outline-link",href:i,onClick:t,title:c},T(c),9,Kt),a!=null&&a.length?(r(),w(o,{key:0,headers:a},null,8,["headers"])):g("",!0)]))),256))],2)}}}),Te=k(Wt,[["__scopeId","data-v-d0ee3533"]]),Jt=e=>(R("data-v-d330b1bb"),e=e(),K(),e),Yt={class:"content"},Xt={class:"outline-title",role:"heading","aria-level":"2"},Zt={"aria-labelledby":"doc-outline-aria-label"},Qt=Jt(()=>d("span",{class:"visually-hidden",id:"doc-outline-aria-label"}," Table of Contents for current page ",-1)),es=y({__name:"VPDocAsideOutline",setup(e){const{frontmatter:t,theme:s}=I(),n=Se([]);se(()=>{n.value=Ie(t.value.outline??s.value.outline)});const o=M(),a=M();return Gt(o,a),(i,c)=>(r(),u("div",{class:B(["VPDocAsideOutline",{"has-outline":n.value.length>0}]),ref_key:"container",ref:o,role:"navigation"},[d("div",Yt,[d("div",{class:"outline-marker",ref_key:"marker",ref:a},null,512),d("div",Xt,T(l(Ce)(l(s))),1),d("nav",Zt,[Qt,_(Te,{headers:n.value,root:!0},null,8,["headers"])])])],2))}}),ts=k(es,[["__scopeId","data-v-d330b1bb"]]),ss={class:"VPDocAsideCarbonAds"},ns=y({__name:"VPDocAsideCarbonAds",props:{carbonAds:{}},setup(e){const t=()=>null;return(s,n)=>(r(),u("div",ss,[_(l(t),{"carbon-ads":s.carbonAds},null,8,["carbon-ads"])]))}}),os=e=>(R("data-v-3f215769"),e=e(),K(),e),as={class:"VPDocAside"},is=os(()=>d("div",{class:"spacer"},null,-1)),rs=y({__name:"VPDocAside",setup(e){const{theme:t}=I();return(s,n)=>(r(),u("div",as,[v(s.$slots,"aside-top",{},void 0,!0),v(s.$slots,"aside-outline-before",{},void 0,!0),_(ts),v(s.$slots,"aside-outline-after",{},void 0,!0),is,v(s.$slots,"aside-ads-before",{},void 0,!0),l(t).carbonAds?(r(),w(ns,{key:0,"carbon-ads":l(t).carbonAds},null,8,["carbon-ads"])):g("",!0),v(s.$slots,"aside-ads-after",{},void 0,!0),v(s.$slots,"aside-bottom",{},void 0,!0)]))}}),ls=k(rs,[["__scopeId","data-v-3f215769"]]);function cs(){const{theme:e,page:t}=I();return L(()=>{const{text:s="Edit this page",pattern:n=""}=e.value.editLink||{};let o;return typeof n=="function"?o=n(t.value):o=n.replace(/:path/g,t.value.filePath),{url:o,text:s}})}function us(){const{page:e,theme:t,frontmatter:s}=I();return L(()=>{var h,f,m,$,V,b,P,C;const n=Xe(t.value.sidebar,e.value.relativePath),o=Et(n),a=o.findIndex(S=>X(e.value.relativePath,S.link)),i=((h=t.value.docFooter)==null?void 0:h.prev)===!1&&!s.value.prev||s.value.prev===!1,c=((f=t.value.docFooter)==null?void 0:f.next)===!1&&!s.value.next||s.value.next===!1;return{prev:i?void 0:{text:(typeof s.value.prev=="string"?s.value.prev:typeof s.value.prev=="object"?s.value.prev.text:void 0)??((m=o[a-1])==null?void 0:m.docFooterText)??(($=o[a-1])==null?void 0:$.text),link:(typeof s.value.prev=="object"?s.value.prev.link:void 0)??((V=o[a-1])==null?void 0:V.link)},next:c?void 0:{text:(typeof s.value.next=="string"?s.value.next:typeof s.value.next=="object"?s.value.next.text:void 0)??((b=o[a+1])==null?void 0:b.docFooterText)??((P=o[a+1])==null?void 0:P.text),link:(typeof s.value.next=="object"?s.value.next.link:void 0)??((C=o[a+1])==null?void 0:C.link)}}})}const ds={},hs={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},vs=d("path",{d:"M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"},null,-1),ps=d("path",{d:"M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"},null,-1),fs=[vs,ps];function _s(e,t){return r(),u("svg",hs,fs)}const ms=k(ds,[["render",_s]]),G=y({__name:"VPLink",props:{tag:{},href:{},noIcon:{type:Boolean},target:{},rel:{}},setup(e){const t=e,s=L(()=>t.tag??(t.href?"a":"span")),n=L(()=>t.href&&Re.test(t.href));return(o,a)=>(r(),w(Y(s.value),{class:B(["VPLink",{link:o.href,"vp-external-link-icon":n.value,"no-icon":o.noIcon}]),href:o.href?l(Me)(o.href):void 0,target:o.target??(n.value?"_blank":void 0),rel:o.rel??(n.value?"noreferrer":void 0)},{default:p(()=>[v(o.$slots,"default")]),_:3},8,["class","href","target","rel"]))}}),gs={class:"VPLastUpdated"},ks=["datetime"],$s=y({__name:"VPDocFooterLastUpdated",setup(e){const{theme:t,page:s,frontmatter:n,lang:o}=I(),a=L(()=>new Date(n.value.lastUpdated??s.value.lastUpdated)),i=L(()=>a.value.toISOString()),c=M("");return Z(()=>{ve(()=>{var h,f,m;c.value=new Intl.DateTimeFormat((f=(h=t.value.lastUpdated)==null?void 0:h.formatOptions)!=null&&f.forceLocale?o.value:void 0,((m=t.value.lastUpdated)==null?void 0:m.formatOptions)??{dateStyle:"short",timeStyle:"short"}).format(a.value)})}),(h,f)=>{var m;return r(),u("p",gs,[j(T(((m=l(t).lastUpdated)==null?void 0:m.text)||l(t).lastUpdatedText||"Last updated")+": ",1),d("time",{datetime:i.value},T(c.value),9,ks)])}}}),bs=k($s,[["__scopeId","data-v-7e05ebdb"]]),ys={key:0,class:"VPDocFooter"},Ps={key:0,class:"edit-info"},ws={key:0,class:"edit-link"},Vs={key:1,class:"last-updated"},Ls={key:1,class:"prev-next"},Ss={class:"pager"},Ms=["innerHTML"],Cs=["innerHTML"],Is={class:"pager"},Ts=["innerHTML"],As=["innerHTML"],Ns=y({__name:"VPDocFooter",setup(e){const{theme:t,page:s,frontmatter:n}=I(),o=cs(),a=us(),i=L(()=>t.value.editLink&&n.value.editLink!==!1),c=L(()=>s.value.lastUpdated&&n.value.lastUpdated!==!1),h=L(()=>i.value||c.value||a.value.prev||a.value.next);return(f,m)=>{var $,V,b,P;return h.value?(r(),u("footer",ys,[v(f.$slots,"doc-footer-before",{},void 0,!0),i.value||c.value?(r(),u("div",Ps,[i.value?(r(),u("div",ws,[_(G,{class:"edit-link-button",href:l(o).url,"no-icon":!0},{default:p(()=>[_(ms,{class:"edit-link-icon","aria-label":"edit icon"}),j(" "+T(l(o).text),1)]),_:1},8,["href"])])):g("",!0),c.value?(r(),u("div",Vs,[_(bs)])):g("",!0)])):g("",!0),($=l(a).prev)!=null&&$.link||(V=l(a).next)!=null&&V.link?(r(),u("nav",Ls,[d("div",Ss,[(b=l(a).prev)!=null&&b.link?(r(),w(G,{key:0,class:"pager-link prev",href:l(a).prev.link},{default:p(()=>{var C;return[d("span",{class:"desc",innerHTML:((C=l(t).docFooter)==null?void 0:C.prev)||"Previous page"},null,8,Ms),d("span",{class:"title",innerHTML:l(a).prev.text},null,8,Cs)]}),_:1},8,["href"])):g("",!0)]),d("div",Is,[(P=l(a).next)!=null&&P.link?(r(),w(G,{key:0,class:"pager-link next",href:l(a).next.link},{default:p(()=>{var C;return[d("span",{class:"desc",innerHTML:((C=l(t).docFooter)==null?void 0:C.next)||"Next page"},null,8,Ts),d("span",{class:"title",innerHTML:l(a).next.text},null,8,As)]}),_:1},8,["href"])):g("",!0)])])):g("",!0)])):g("",!0)}}}),Hs=k(Ns,[["__scopeId","data-v-48f9bb55"]]),Bs={},zs={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},xs=d("path",{d:"M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"},null,-1),Es=[xs];function Ds(e,t){return r(),u("svg",zs,Es)}const Ae=k(Bs,[["render",Ds]]),Os={key:0,class:"VPDocOutlineDropdown"},Fs={key:0,class:"items"},js=y({__name:"VPDocOutlineDropdown",setup(e){const{frontmatter:t,theme:s}=I(),n=M(!1);se(()=>{n.value=!1});const o=Se([]);return se(()=>{o.value=Ie(t.value.outline??s.value.outline)}),(a,i)=>o.value.length>0?(r(),u("div",Os,[d("button",{onClick:i[0]||(i[0]=c=>n.value=!n.value),class:B({open:n.value})},[j(T(l(Ce)(l(s)))+" ",1),_(Ae,{class:"icon"})],2),n.value?(r(),u("div",Fs,[_(Te,{headers:o.value},null,8,["headers"])])):g("",!0)])):g("",!0)}}),Us=k(js,[["__scopeId","data-v-eadfb36b"]]),qs=e=>(R("data-v-6b87e69f"),e=e(),K(),e),Gs={class:"container"},Rs=qs(()=>d("div",{class:"aside-curtain"},null,-1)),Ks={class:"aside-container"},Ws={class:"aside-content"},Js={class:"content"},Ys={class:"content-container"},Xs={class:"main"},Zs=y({__name:"VPDoc",setup(e){const{theme:t}=I(),s=pe(),{hasSidebar:n,hasAside:o,leftAside:a}=W(),i=L(()=>s.path.replace(/[./]+/g,"_").replace(/_html$/,""));return(c,h)=>{const f=J("Content");return r(),u("div",{class:B(["VPDoc",{"has-sidebar":l(n),"has-aside":l(o)}])},[v(c.$slots,"doc-top",{},void 0,!0),d("div",Gs,[l(o)?(r(),u("div",{key:0,class:B(["aside",{"left-aside":l(a)}])},[Rs,d("div",Ks,[d("div",Ws,[_(ls,null,{"aside-top":p(()=>[v(c.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":p(()=>[v(c.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":p(()=>[v(c.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":p(()=>[v(c.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":p(()=>[v(c.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":p(()=>[v(c.$slots,"aside-ads-after",{},void 0,!0)]),_:3})])])],2)):g("",!0),d("div",Js,[d("div",Ys,[v(c.$slots,"doc-before",{},void 0,!0),_(Us),d("main",Xs,[_(f,{class:B(["vp-doc",[i.value,l(t).externalLinkIcon&&"external-link-icon-enabled"]])},null,8,["class"])]),_(Hs,null,{"doc-footer-before":p(()=>[v(c.$slots,"doc-footer-before",{},void 0,!0)]),_:3}),v(c.$slots,"doc-after",{},void 0,!0)])])]),v(c.$slots,"doc-bottom",{},void 0,!0)],2)}}}),Qs=k(Zs,[["__scopeId","data-v-6b87e69f"]]),en=y({__name:"VPButton",props:{tag:{},size:{default:"medium"},theme:{default:"brand"},text:{},href:{}},setup(e){const t=e,s=L(()=>t.href&&Re.test(t.href)),n=L(()=>t.tag||t.href?"a":"button");return(o,a)=>(r(),w(Y(n.value),{class:B(["VPButton",[o.size,o.theme]]),href:o.href?l(Me)(o.href):void 0,target:s.value?"_blank":void 0,rel:s.value?"noreferrer":void 0},{default:p(()=>[j(T(o.text),1)]),_:1},8,["class","href","target","rel"]))}}),tn=k(en,[["__scopeId","data-v-c1c5efc1"]]),sn=["src","alt"],nn=y({inheritAttrs:!1,__name:"VPImage",props:{image:{},alt:{}},setup(e){return(t,s)=>{const n=J("VPImage",!0);return t.image?(r(),u(H,{key:0},[typeof t.image=="string"||"src"in t.image?(r(),u("img",ie({key:0,class:"VPImage"},typeof t.image=="string"?t.$attrs:{...t.image,...t.$attrs},{src:l(he)(typeof t.image=="string"?t.image:t.image.src),alt:t.alt??(typeof t.image=="string"?"":t.image.alt||"")}),null,16,sn)):(r(),u(H,{key:1},[_(n,ie({class:"dark",image:t.image.dark,alt:t.image.alt},t.$attrs),null,16,["image","alt"]),_(n,ie({class:"light",image:t.image.light,alt:t.image.alt},t.$attrs),null,16,["image","alt"])],64))],64)):g("",!0)}}}),ce=k(nn,[["__scopeId","data-v-8426fc1a"]]),on=e=>(R("data-v-da5d1713"),e=e(),K(),e),an={class:"container"},rn={class:"main"},ln={key:0,class:"name"},cn=["innerHTML"],un=["innerHTML"],dn=["innerHTML"],hn={key:0,class:"actions"},vn={key:0,class:"image"},pn={class:"image-container"},fn=on(()=>d("div",{class:"image-bg"},null,-1)),_n=y({__name:"VPHero",props:{name:{},text:{},tagline:{},image:{},actions:{}},setup(e){const t=fe("hero-image-slot-exists");return(s,n)=>(r(),u("div",{class:B(["VPHero",{"has-image":s.image||l(t)}])},[d("div",an,[d("div",rn,[v(s.$slots,"home-hero-info",{},()=>[s.name?(r(),u("h1",ln,[d("span",{innerHTML:s.name,class:"clip"},null,8,cn)])):g("",!0),s.text?(r(),u("p",{key:1,innerHTML:s.text,class:"text"},null,8,un)):g("",!0),s.tagline?(r(),u("p",{key:2,innerHTML:s.tagline,class:"tagline"},null,8,dn)):g("",!0)],!0),s.actions?(r(),u("div",hn,[(r(!0),u(H,null,E(s.actions,o=>(r(),u("div",{key:o.link,class:"action"},[_(tn,{tag:"a",size:"medium",theme:o.theme,text:o.text,href:o.link},null,8,["theme","text","href"])]))),128))])):g("",!0)]),s.image||l(t)?(r(),u("div",vn,[d("div",pn,[fn,v(s.$slots,"home-hero-image",{},()=>[s.image?(r(),w(ce,{key:0,class:"image-src",image:s.image},null,8,["image"])):g("",!0)],!0)])])):g("",!0)])],2))}}),mn=k(_n,[["__scopeId","data-v-da5d1713"]]),gn=y({__name:"VPHomeHero",setup(e){const{frontmatter:t}=I();return(s,n)=>l(t).hero?(r(),w(mn,{key:0,class:"VPHomeHero",name:l(t).hero.name,text:l(t).hero.text,tagline:l(t).hero.tagline,image:l(t).hero.image,actions:l(t).hero.actions},{"home-hero-info":p(()=>[v(s.$slots,"home-hero-info")]),"home-hero-image":p(()=>[v(s.$slots,"home-hero-image")]),_:3},8,["name","text","tagline","image","actions"])):g("",!0)}}),kn={},$n={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},bn=d("path",{d:"M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"},null,-1),yn=[bn];function Pn(e,t){return r(),u("svg",$n,yn)}const wn=k(kn,[["render",Pn]]),Vn={class:"box"},Ln={key:0,class:"icon"},Sn=["innerHTML"],Mn=["innerHTML"],Cn=["innerHTML"],In={key:4,class:"link-text"},Tn={class:"link-text-value"},An=y({__name:"VPFeature",props:{icon:{},title:{},details:{},link:{},linkText:{},rel:{},target:{}},setup(e){return(t,s)=>(r(),w(G,{class:"VPFeature",href:t.link,rel:t.rel,target:t.target,"no-icon":!0,tag:t.link?"a":"div"},{default:p(()=>[d("article",Vn,[typeof t.icon=="object"&&t.icon.wrap?(r(),u("div",Ln,[_(ce,{image:t.icon,alt:t.icon.alt,height:t.icon.height||48,width:t.icon.width||48},null,8,["image","alt","height","width"])])):typeof t.icon=="object"?(r(),w(ce,{key:1,image:t.icon,alt:t.icon.alt,height:t.icon.height||48,width:t.icon.width||48},null,8,["image","alt","height","width"])):t.icon?(r(),u("div",{key:2,class:"icon",innerHTML:t.icon},null,8,Sn)):g("",!0),d("h2",{class:"title",innerHTML:t.title},null,8,Mn),t.details?(r(),u("p",{key:3,class:"details",innerHTML:t.details},null,8,Cn)):g("",!0),t.linkText?(r(),u("div",In,[d("p",Tn,[j(T(t.linkText)+" ",1),_(wn,{class:"link-text-icon"})])])):g("",!0)])]),_:1},8,["href","rel","target","tag"]))}}),Nn=k(An,[["__scopeId","data-v-33204567"]]),Hn={key:0,class:"VPFeatures"},Bn={class:"container"},zn={class:"items"},xn=y({__name:"VPFeatures",props:{features:{}},setup(e){const t=e,s=L(()=>{const n=t.features.length;if(n){if(n===2)return"grid-2";if(n===3)return"grid-3";if(n%3===0)return"grid-6";if(n>3)return"grid-4"}else return});return(n,o)=>n.features?(r(),u("div",Hn,[d("div",Bn,[d("div",zn,[(r(!0),u(H,null,E(n.features,a=>(r(),u("div",{key:a.title,class:B(["item",[s.value]])},[_(Nn,{icon:a.icon,title:a.title,details:a.details,link:a.link,"link-text":a.linkText,rel:a.rel,target:a.target},null,8,["icon","title","details","link","link-text","rel","target"])],2))),128))])])])):g("",!0)}}),En=k(xn,[["__scopeId","data-v-a6181336"]]),Dn=y({__name:"VPHomeFeatures",setup(e){const{frontmatter:t}=I();return(s,n)=>l(t).features?(r(),w(En,{key:0,class:"VPHomeFeatures",features:l(t).features},null,8,["features"])):g("",!0)}}),On={class:"VPHome"},Fn=y({__name:"VPHome",setup(e){return(t,s)=>{const n=J("Content");return r(),u("div",On,[v(t.$slots,"home-hero-before",{},void 0,!0),_(gn,null,{"home-hero-info":p(()=>[v(t.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-image":p(()=>[v(t.$slots,"home-hero-image",{},void 0,!0)]),_:3}),v(t.$slots,"home-hero-after",{},void 0,!0),v(t.$slots,"home-features-before",{},void 0,!0),_(Dn),v(t.$slots,"home-features-after",{},void 0,!0),_(n)])}}}),jn=k(Fn,[["__scopeId","data-v-d82743a8"]]),Un={},qn={class:"VPPage"};function Gn(e,t){const s=J("Content");return r(),u("div",qn,[v(e.$slots,"page-top"),_(s),v(e.$slots,"page-bottom")])}const Rn=k(Un,[["render",Gn]]),Kn=y({__name:"VPContent",setup(e){const{page:t,frontmatter:s}=I(),{hasSidebar:n}=W();return(o,a)=>(r(),u("div",{class:B(["VPContent",{"has-sidebar":l(n),"is-home":l(s).layout==="home"}]),id:"VPContent"},[l(t).isNotFound?v(o.$slots,"not-found",{key:0},()=>[_(zt)],!0):l(s).layout==="page"?(r(),w(Rn,{key:1},{"page-top":p(()=>[v(o.$slots,"page-top",{},void 0,!0)]),"page-bottom":p(()=>[v(o.$slots,"page-bottom",{},void 0,!0)]),_:3})):l(s).layout==="home"?(r(),w(jn,{key:2},{"home-hero-before":p(()=>[v(o.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info":p(()=>[v(o.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-image":p(()=>[v(o.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":p(()=>[v(o.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":p(()=>[v(o.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":p(()=>[v(o.$slots,"home-features-after",{},void 0,!0)]),_:3})):l(s).layout&&l(s).layout!=="doc"?(r(),w(Y(l(s).layout),{key:3})):(r(),w(Qs,{key:4},{"doc-top":p(()=>[v(o.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":p(()=>[v(o.$slots,"doc-bottom",{},void 0,!0)]),"doc-footer-before":p(()=>[v(o.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":p(()=>[v(o.$slots,"doc-before",{},void 0,!0)]),"doc-after":p(()=>[v(o.$slots,"doc-after",{},void 0,!0)]),"aside-top":p(()=>[v(o.$slots,"aside-top",{},void 0,!0)]),"aside-outline-before":p(()=>[v(o.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":p(()=>[v(o.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":p(()=>[v(o.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":p(()=>[v(o.$slots,"aside-ads-after",{},void 0,!0)]),"aside-bottom":p(()=>[v(o.$slots,"aside-bottom",{},void 0,!0)]),_:3}))],2))}}),Wn=k(Kn,[["__scopeId","data-v-669faec9"]]),Jn={class:"container"},Yn=["innerHTML"],Xn=["innerHTML"],Zn=y({__name:"VPFooter",setup(e){const{theme:t,frontmatter:s}=I(),{hasSidebar:n}=W();return(o,a)=>l(t).footer&&l(s).footer!==!1?(r(),u("footer",{key:0,class:B(["VPFooter",{"has-sidebar":l(n)}])},[d("div",Jn,[l(t).footer.message?(r(),u("p",{key:0,class:"message",innerHTML:l(t).footer.message},null,8,Yn)):g("",!0),l(t).footer.copyright?(r(),u("p",{key:1,class:"copyright",innerHTML:l(t).footer.copyright},null,8,Xn)):g("",!0)])],2)):g("",!0)}}),Qn=k(Zn,[["__scopeId","data-v-e315a0ad"]]),eo={class:"header"},to={class:"outline"},so=y({__name:"VPLocalNavOutlineDropdown",props:{headers:{},navHeight:{}},setup(e){const t=e,{theme:s}=I(),n=M(!1),o=M(0),a=M();se(()=>{n.value=!1});function i(){n.value=!n.value,o.value=window.innerHeight+Math.min(window.scrollY-t.navHeight,0)}function c(f){f.target.classList.contains("outline-link")&&(a.value&&(a.value.style.transition="none"),ut(()=>{n.value=!1}))}function h(){n.value=!1,window.scrollTo({top:0,left:0,behavior:"smooth"})}return(f,m)=>(r(),u("div",{class:"VPLocalNavOutlineDropdown",style:ct({"--vp-vh":o.value+"px"})},[f.headers.length>0?(r(),u("button",{key:0,onClick:i,class:B({open:n.value})},[j(T(l(Ce)(l(s)))+" ",1),_(Ae,{class:"icon"})],2)):(r(),u("button",{key:1,onClick:h},T(l(s).returnToTopLabel||"Return to top"),1)),_(Ve,{name:"flyout"},{default:p(()=>[n.value?(r(),u("div",{key:0,ref_key:"items",ref:a,class:"items",onClick:c},[d("div",eo,[d("a",{class:"top-link",href:"#",onClick:h},T(l(s).returnToTopLabel||"Return to top"),1)]),d("div",to,[_(Te,{headers:f.headers},null,8,["headers"])])],512)):g("",!0)]),_:1})],4))}}),no=k(so,[["__scopeId","data-v-1c15a60a"]]),oo={},ao={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},io=d("path",{d:"M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"},null,-1),ro=d("path",{d:"M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"},null,-1),lo=d("path",{d:"M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"},null,-1),co=d("path",{d:"M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"},null,-1),uo=[io,ro,lo,co];function ho(e,t){return r(),u("svg",ao,uo)}const vo=k(oo,[["render",ho]]),po=["aria-expanded"],fo={class:"menu-text"},_o=y({__name:"VPLocalNav",props:{open:{type:Boolean}},emits:["open-menu"],setup(e){const{theme:t,frontmatter:s}=I(),{hasSidebar:n}=W(),{y:o}=Ke(),a=Se([]),i=M(0);Z(()=>{i.value=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--vp-nav-height"))}),se(()=>{a.value=Ie(s.value.outline??t.value.outline)});const c=L(()=>a.value.length===0&&!n.value),h=L(()=>({VPLocalNav:!0,fixed:c.value,"reached-top":o.value>=i.value}));return(f,m)=>l(s).layout!=="home"&&(!c.value||l(o)>=i.value)?(r(),u("div",{key:0,class:B(h.value)},[l(n)?(r(),u("button",{key:0,class:"menu","aria-expanded":f.open,"aria-controls":"VPSidebarNav",onClick:m[0]||(m[0]=$=>f.$emit("open-menu"))},[_(vo,{class:"menu-icon"}),d("span",fo,T(l(t).sidebarMenuLabel||"Menu"),1)],8,po)):g("",!0),_(no,{headers:a.value,navHeight:i.value},null,8,["headers","navHeight"])],2)):g("",!0)}}),mo=k(_o,[["__scopeId","data-v-f84a0989"]]);function go(){const e=M(!1);function t(){e.value=!0,window.addEventListener("resize",o)}function s(){e.value=!1,window.removeEventListener("resize",o)}function n(){e.value?s():t()}function o(){window.outerWidth>=768&&s()}const a=pe();return Q(()=>a.path,s),{isScreenOpen:e,openScreen:t,closeScreen:s,toggleScreen:n}}const ko={},$o={class:"VPSwitch",type:"button",role:"switch"},bo={class:"check"},yo={key:0,class:"icon"};function Po(e,t){return r(),u("button",$o,[d("span",bo,[e.$slots.default?(r(),u("span",yo,[v(e.$slots,"default",{},void 0,!0)])):g("",!0)])])}const wo=k(ko,[["render",Po],["__scopeId","data-v-b1685198"]]),Vo={},Lo={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},So=d("path",{d:"M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"},null,-1),Mo=[So];function Co(e,t){return r(),u("svg",Lo,Mo)}const Io=k(Vo,[["render",Co]]),To={},Ao={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},No=dt('',9),Ho=[No];function Bo(e,t){return r(),u("svg",Ao,Ho)}const zo=k(To,[["render",Bo]]),xo=y({__name:"VPSwitchAppearance",setup(e){const{isDark:t}=I(),s=fe("toggle-appearance",()=>{t.value=!t.value}),n=L(()=>t.value?"Switch to light theme":"Switch to dark theme");return(o,a)=>(r(),w(wo,{title:n.value,class:"VPSwitchAppearance","aria-checked":l(t),onClick:l(s)},{default:p(()=>[_(zo,{class:"sun"}),_(Io,{class:"moon"})]),_:1},8,["title","aria-checked","onClick"]))}}),Ne=k(xo,[["__scopeId","data-v-cbbe1149"]]),Eo={key:0,class:"VPNavBarAppearance"},Do=y({__name:"VPNavBarAppearance",setup(e){const{site:t}=I();return(s,n)=>l(t).appearance&&l(t).appearance!=="force-dark"?(r(),u("div",Eo,[_(Ne)])):g("",!0)}}),Oo=k(Do,[["__scopeId","data-v-e6aabb21"]]),He=M();let Qe=!1,ge=0;function Fo(e){const t=M(!1);if(ee){!Qe&&jo(),ge++;const s=Q(He,n=>{var o,a,i;n===e.el.value||(o=e.el.value)!=null&&o.contains(n)?(t.value=!0,(a=e.onFocus)==null||a.call(e)):(t.value=!1,(i=e.onBlur)==null||i.call(e))});Le(()=>{s(),ge--,ge||Uo()})}return ht(t)}function jo(){document.addEventListener("focusin",et),Qe=!0,He.value=document.activeElement}function Uo(){document.removeEventListener("focusin",et)}function et(){He.value=document.activeElement}const qo={},Go={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Ro=d("path",{d:"M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"},null,-1),Ko=[Ro];function Wo(e,t){return r(),u("svg",Go,Ko)}const tt=k(qo,[["render",Wo]]),Jo={},Yo={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Xo=d("circle",{cx:"12",cy:"12",r:"2"},null,-1),Zo=d("circle",{cx:"19",cy:"12",r:"2"},null,-1),Qo=d("circle",{cx:"5",cy:"12",r:"2"},null,-1),ea=[Xo,Zo,Qo];function ta(e,t){return r(),u("svg",Yo,ea)}const sa=k(Jo,[["render",ta]]),na={class:"VPMenuLink"},oa=y({__name:"VPMenuLink",props:{item:{}},setup(e){const{page:t}=I();return(s,n)=>(r(),u("div",na,[_(G,{class:B({active:l(X)(l(t).relativePath,s.item.activeMatch||s.item.link,!!s.item.activeMatch)}),href:s.item.link,target:s.item.target,rel:s.item.rel},{default:p(()=>[j(T(s.item.text),1)]),_:1},8,["class","href","target","rel"])]))}}),_e=k(oa,[["__scopeId","data-v-43f1e123"]]),aa={class:"VPMenuGroup"},ia={key:0,class:"title"},ra=y({__name:"VPMenuGroup",props:{text:{},items:{}},setup(e){return(t,s)=>(r(),u("div",aa,[t.text?(r(),u("p",ia,T(t.text),1)):g("",!0),(r(!0),u(H,null,E(t.items,n=>(r(),u(H,null,["link"in n?(r(),w(_e,{key:0,item:n},null,8,["item"])):g("",!0)],64))),256))]))}}),la=k(ra,[["__scopeId","data-v-69e747b5"]]),ca={class:"VPMenu"},ua={key:0,class:"items"},da=y({__name:"VPMenu",props:{items:{}},setup(e){return(t,s)=>(r(),u("div",ca,[t.items?(r(),u("div",ua,[(r(!0),u(H,null,E(t.items,n=>(r(),u(H,{key:n.text},["link"in n?(r(),w(_e,{key:0,item:n},null,8,["item"])):(r(),w(la,{key:1,text:n.text,items:n.items},null,8,["text","items"]))],64))),128))])):g("",!0),v(t.$slots,"default",{},void 0,!0)]))}}),ha=k(da,[["__scopeId","data-v-e7ea1737"]]),va=["aria-expanded","aria-label"],pa={key:0,class:"text"},fa=["innerHTML"],_a={class:"menu"},ma=y({__name:"VPFlyout",props:{icon:{},button:{},label:{},items:{}},setup(e){const t=M(!1),s=M();Fo({el:s,onBlur:n});function n(){t.value=!1}return(o,a)=>(r(),u("div",{class:"VPFlyout",ref_key:"el",ref:s,onMouseenter:a[1]||(a[1]=i=>t.value=!0),onMouseleave:a[2]||(a[2]=i=>t.value=!1)},[d("button",{type:"button",class:"button","aria-haspopup":"true","aria-expanded":t.value,"aria-label":o.label,onClick:a[0]||(a[0]=i=>t.value=!t.value)},[o.button||o.icon?(r(),u("span",pa,[o.icon?(r(),w(Y(o.icon),{key:0,class:"option-icon"})):g("",!0),o.button?(r(),u("span",{key:1,innerHTML:o.button},null,8,fa)):g("",!0),_(tt,{class:"text-icon"})])):(r(),w(sa,{key:1,class:"icon"}))],8,va),d("div",_a,[_(ha,{items:o.items},{default:p(()=>[v(o.$slots,"default",{},void 0,!0)]),_:3},8,["items"])])],544))}}),Be=k(ma,[["__scopeId","data-v-9c007e85"]]),ga={discord:'Discord',facebook:'Facebook',github:'GitHub',instagram:'Instagram',linkedin:'LinkedIn',mastodon:'Mastodon',slack:'Slack',twitter:'Twitter',x:'X',youtube:'YouTube'},ka=["href","aria-label","innerHTML"],$a=y({__name:"VPSocialLink",props:{icon:{},link:{},ariaLabel:{}},setup(e){const t=e,s=L(()=>typeof t.icon=="object"?t.icon.svg:ga[t.icon]);return(n,o)=>(r(),u("a",{class:"VPSocialLink no-icon",href:n.link,"aria-label":n.ariaLabel??(typeof n.icon=="string"?n.icon:""),target:"_blank",rel:"noopener",innerHTML:s.value},null,8,ka))}}),ba=k($a,[["__scopeId","data-v-f80f8133"]]),ya={class:"VPSocialLinks"},Pa=y({__name:"VPSocialLinks",props:{links:{}},setup(e){return(t,s)=>(r(),u("div",ya,[(r(!0),u(H,null,E(t.links,({link:n,icon:o,ariaLabel:a})=>(r(),w(ba,{key:n,icon:o,link:n,ariaLabel:a},null,8,["icon","link","ariaLabel"]))),128))]))}}),ze=k(Pa,[["__scopeId","data-v-7bc22406"]]),wa={key:0,class:"group translations"},Va={class:"trans-title"},La={key:1,class:"group"},Sa={class:"item appearance"},Ma={class:"label"},Ca={class:"appearance-action"},Ia={key:2,class:"group"},Ta={class:"item social-links"},Aa=y({__name:"VPNavBarExtra",setup(e){const{site:t,theme:s}=I(),{localeLinks:n,currentLang:o}=ne({correspondingLink:!0}),a=L(()=>n.value.length&&o.value.label||t.value.appearance||s.value.socialLinks);return(i,c)=>a.value?(r(),w(Be,{key:0,class:"VPNavBarExtra",label:"extra navigation"},{default:p(()=>[l(n).length&&l(o).label?(r(),u("div",wa,[d("p",Va,T(l(o).label),1),(r(!0),u(H,null,E(l(n),h=>(r(),w(_e,{key:h.link,item:h},null,8,["item"]))),128))])):g("",!0),l(t).appearance&&l(t).appearance!=="force-dark"?(r(),u("div",La,[d("div",Sa,[d("p",Ma,T(l(s).darkModeSwitchLabel||"Appearance"),1),d("div",Ca,[_(Ne)])])])):g("",!0),l(s).socialLinks?(r(),u("div",Ia,[d("div",Ta,[_(ze,{class:"social-links-list",links:l(s).socialLinks},null,8,["links"])])])):g("",!0)]),_:1})):g("",!0)}}),Na=k(Aa,[["__scopeId","data-v-d0bd9dde"]]),Ha=e=>(R("data-v-e5dd9c1c"),e=e(),K(),e),Ba=["aria-expanded"],za=Ha(()=>d("span",{class:"container"},[d("span",{class:"top"}),d("span",{class:"middle"}),d("span",{class:"bottom"})],-1)),xa=[za],Ea=y({__name:"VPNavBarHamburger",props:{active:{type:Boolean}},emits:["click"],setup(e){return(t,s)=>(r(),u("button",{type:"button",class:B(["VPNavBarHamburger",{active:t.active}]),"aria-label":"mobile navigation","aria-expanded":t.active,"aria-controls":"VPNavScreen",onClick:s[0]||(s[0]=n=>t.$emit("click"))},xa,10,Ba))}}),Da=k(Ea,[["__scopeId","data-v-e5dd9c1c"]]),Oa=["innerHTML"],Fa=y({__name:"VPNavBarMenuLink",props:{item:{}},setup(e){const{page:t}=I();return(s,n)=>(r(),w(G,{class:B({VPNavBarMenuLink:!0,active:l(X)(l(t).relativePath,s.item.activeMatch||s.item.link,!!s.item.activeMatch)}),href:s.item.link,target:s.item.target,rel:s.item.rel,tabindex:"0"},{default:p(()=>[d("span",{innerHTML:s.item.text},null,8,Oa)]),_:1},8,["class","href","target","rel"]))}}),ja=k(Fa,[["__scopeId","data-v-42ef59de"]]),Ua=y({__name:"VPNavBarMenuGroup",props:{item:{}},setup(e){const t=e,{page:s}=I(),n=a=>"link"in a?X(s.value.relativePath,a.link,!!t.item.activeMatch):a.items.some(n),o=L(()=>n(t.item));return(a,i)=>(r(),w(Be,{class:B({VPNavBarMenuGroup:!0,active:l(X)(l(s).relativePath,a.item.activeMatch,!!a.item.activeMatch)||o.value}),button:a.item.text,items:a.item.items},null,8,["class","button","items"]))}}),qa=e=>(R("data-v-7f418b0f"),e=e(),K(),e),Ga={key:0,"aria-labelledby":"main-nav-aria-label",class:"VPNavBarMenu"},Ra=qa(()=>d("span",{id:"main-nav-aria-label",class:"visually-hidden"},"Main Navigation",-1)),Ka=y({__name:"VPNavBarMenu",setup(e){const{theme:t}=I();return(s,n)=>l(t).nav?(r(),u("nav",Ga,[Ra,(r(!0),u(H,null,E(l(t).nav,o=>(r(),u(H,{key:o.text},["link"in o?(r(),w(ja,{key:0,item:o},null,8,["item"])):(r(),w(Ua,{key:1,item:o},null,8,["item"]))],64))),128))])):g("",!0)}}),Wa=k(Ka,[["__scopeId","data-v-7f418b0f"]]),Ja="/document/assets/flex-logo.SQNie4Vp.svg";function ke(e,t){return typeof e>"u"?t:e}function De(e){const t=Array(e);for(let s=0;s=this.minlength&&(c||!i[m])){let V=ae(h,o,f),b="";switch(this.tokenize){case"full":if(3<$){for(let P=0;P<$;P++)for(let C=$;C>P;C--)if(C-P>=this.minlength){const S=ae(h,o,f,$,P);b=m.substring(P,C),this.push_index(i,b,S,e,s)}break}case"reverse":if(2<$){for(let P=$-1;0=this.minlength){const C=ae(h,o,f,$,P);this.push_index(i,b,C,e,s)}b=""}case"forward":if(1<$){for(let P=0;P<$;P++)b+=m[P],b.length>=this.minlength&&this.push_index(i,b,V,e,s);break}default:if(this.boost&&(V=Math.min(0|V/this.boost(t,m,f),h-1)),this.push_index(i,m,V,e,s),c&&1=this.minlength&&!P[m]){P[m]=1;const A=ae(C+(o/2>C?0:1),o,f,D-1,N-1),z=this.bidirectional&&m>S;this.push_index(a,z?S:m,A,e,s,z?m:S)}}}}}this.fastupdate||(this.register[e]=1)}}return this};function ae(e,t,s,n,o){return s&&1=this.minlength&&!$[b]){if(!this.optimize&&!a&&!this.map[b])return i;V[C++]=b,$[b]=1}e=V,n=e.length}if(!n)return i;t||(t=100);let h,f=this.depth&&1=s)))));b++);if(f)return o?je(c,s,0):void(e[e.length]=c)}return!t&&c};function je(e,t,s){return e=e.length===1?e[0]:Xa(e),s||e.length>t?e.slice(s,s+t):e}function Ue(e,t,s,n){if(s){const o=n&&t>s;e=e[o?t:s],e=e&&e[o?s:t]}else e=e[t];return e}O.prototype.contain=function(e){return!!this.register[e]},O.prototype.update=function(e,t){return this.remove(e).add(e,t)},O.prototype.remove=function(e,t){const s=this.register[e];if(s){if(this.fastupdate)for(let n,o=0;o{if(a.value){for(var N=$.value.search(a.value,{enrich:!0}),A=[],z=0;z!N||!N.length?[]:N.reduce((z,x)=>(z[A(x)]||(z[A(x)]=[]),z[A(x)].push(x),z),{}),S=()=>{setTimeout(()=>{c.value&&c.value.focus()},100),D(),o.value=!0};Z(async()=>{var x,q;const N=await vt(()=>import("./virtual_search-data.RJ-82FdL.js"),__vite__mapDeps([]));h.value=N.default.INDEX_DATA,f.value=N.default.PREVIEW_LOOKUP,m.value=N.default.Options,i.value=window.location.origin+he(s.value==="root"?"/":s.value),V.value=((x=m.value)==null?void 0:x.buttonLabel)||V.value,b.value=((q=m.value)==null?void 0:q.placeholder)||b.value;var A=new O(m.value);A.import("reg",h.value.reg),A.import("cfg",h.value.cfg),A.import("map",h.value.map),A.import("ctx",h.value.ctx),$.value=A,n.value.innerHTML=/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?"⌘":"Ctrl";const z=U=>{var oe;U.key==="k"&&(U.ctrlKey||U.metaKey)&&(U.preventDefault(),S()),U.key==="Escape"&&((oe=a.value)==null?void 0:oe.length)==0&&o.value&&(o.value=!1)};window.addEventListener("keydown",z)});function D(){o.value=!1,a.value=""}return(N,A)=>{const z=J("ClientOnly");return r(),u("div",mi,[_(z,null,{default:p(()=>[(r(),w(_t,{to:"body"},[xe(d("div",{class:"VPPluginSearch-modal-back",onClick:A[2]||(A[2]=x=>o.value=!1)},[d("div",{class:"VPPluginSearch-modal",onClick:A[1]||(A[1]=We(()=>{},["stop"]))},[d("form",gi,[ki,xe(d("input",{class:"DocSearch-Input","aria-autocomplete":"both","aria-labelledby":"docsearch-label",id:"docsearch-input",autocomplete:"off",autocorrect:"off",autocapitalize:"off",enterkeyhint:"search",spellcheck:"false",autofocus:"true","onUpdate:modelValue":A[0]||(A[0]=x=>a.value=x),placeholder:b.value,maxlength:"64",type:"search",ref_key:"input",ref:c},null,8,$i),[[ft,a.value]])]),d("div",bi,[(r(!0),u(H,null,E(C(P.value,x=>x.link.split("/").slice(0,-1).join("-")),(x,q)=>(r(),u("div",{key:q},[d("span",yi,T(q?q.toString()[0].toUpperCase()+q.toString().slice(1):"Home"),1),(r(!0),u(H,null,E(x,U=>(r(),u("a",{href:i.value+U.link,key:U.id,onClick:D},[d("div",wi,[d("span",Vi,T(U.link.includes("#")?"#":"▤"),1),d("div",Li,[d("h3",null,T(U.title),1),d("p",null,[d("div",{innerHTML:U.preview},null,8,Si)])]),Mi])],8,Pi))),128))]))),128))]),Ci])],512),[[pt,o.value]])]))]),_:1}),d("div",{id:"docsearch",onClick:A[3]||(A[3]=x=>S())},[d("button",Ii,[d("span",Ti,[Ai,d("span",Ni,T(V.value),1)]),d("span",Hi,[d("span",{class:"DocSearch-Button-Key",ref_key:"metaKey",ref:n},"Meta",512),Bi])])])])}}}),xi=y({__name:"VPNavBarSocialLinks",setup(e){const{theme:t}=I();return(s,n)=>l(t).socialLinks?(r(),w(ze,{key:0,class:"VPNavBarSocialLinks",links:l(t).socialLinks},null,8,["links"])):g("",!0)}}),Ei=k(xi,[["__scopeId","data-v-0394ad82"]]),Di=["href"],Oi=y({__name:"VPNavBarTitle",setup(e){const{site:t,theme:s}=I(),{hasSidebar:n}=W(),{currentLang:o}=ne();return(a,i)=>(r(),u("div",{class:B(["VPNavBarTitle",{"has-sidebar":l(n)}])},[d("a",{class:"title",href:l(s).logoLink??l(Me)(l(o).link)},[v(a.$slots,"nav-bar-title-before",{},void 0,!0),l(s).logo?(r(),w(ce,{key:0,class:"logo",image:l(s).logo},null,8,["image"])):g("",!0),l(s).siteTitle?(r(),u(H,{key:1},[j(T(l(s).siteTitle),1)],64)):l(s).siteTitle===void 0?(r(),u(H,{key:2},[j(T(l(t).title),1)],64)):g("",!0),v(a.$slots,"nav-bar-title-after",{},void 0,!0)],8,Di)],2))}}),Fi=k(Oi,[["__scopeId","data-v-86d1bed8"]]),ji={},Ui={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},qi=d("path",{d:"M0 0h24v24H0z",fill:"none"},null,-1),Gi=d("path",{d:" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z ",class:"css-c4d79v"},null,-1),Ri=[qi,Gi];function Ki(e,t){return r(),u("svg",Ui,Ri)}const st=k(ji,[["render",Ki]]),Wi={class:"items"},Ji={class:"title"},Yi=y({__name:"VPNavBarTranslations",setup(e){const{theme:t}=I(),{localeLinks:s,currentLang:n}=ne({correspondingLink:!0});return(o,a)=>l(s).length&&l(n).label?(r(),w(Be,{key:0,class:"VPNavBarTranslations",icon:st,label:l(t).langMenuLabel||"Change language"},{default:p(()=>[d("div",Wi,[d("p",Ji,T(l(n).label),1),(r(!0),u(H,null,E(l(s),i=>(r(),w(_e,{key:i.link,item:i},null,8,["item"]))),128))])]),_:1},8,["label"])):g("",!0)}}),Xi=k(Yi,[["__scopeId","data-v-74abcbb9"]]),Zi=e=>(R("data-v-d83f3580"),e=e(),K(),e),Qi={class:"container"},er={class:"title"},tr={class:"content"},sr=Zi(()=>d("div",{class:"curtain"},null,-1)),nr={class:"content-body"},or=y({__name:"VPNavBar",props:{isScreenOpen:{type:Boolean}},emits:["toggle-screen"],setup(e){const{y:t}=Ke(),{hasSidebar:s}=W(),{frontmatter:n}=I(),o=M({});return Ge(()=>{o.value={"has-sidebar":s.value,top:n.value.layout==="home"&&t.value===0}}),(a,i)=>(r(),u("div",{class:B(["VPNavBar",o.value])},[d("div",Qi,[d("div",er,[_(Fi,null,{"nav-bar-title-before":p(()=>[v(a.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":p(()=>[v(a.$slots,"nav-bar-title-after",{},void 0,!0)]),_:3})]),d("div",tr,[sr,d("div",nr,[v(a.$slots,"nav-bar-content-before",{},void 0,!0),_(zi,{class:"search"}),_(Wa,{class:"menu"}),_(Xi,{class:"translations"}),_(Oo,{class:"appearance"}),_(Ei,{class:"social-links"}),_(Na,{class:"extra"}),v(a.$slots,"nav-bar-content-after",{},void 0,!0),_(Da,{class:"hamburger",active:a.isScreenOpen,onClick:i[0]||(i[0]=c=>a.$emit("toggle-screen"))},null,8,["active"])])])])],2))}}),ar=k(or,[["__scopeId","data-v-d83f3580"]]),ir={key:0,class:"VPNavScreenAppearance"},rr={class:"text"},lr=y({__name:"VPNavScreenAppearance",setup(e){const{site:t,theme:s}=I();return(n,o)=>l(t).appearance&&l(t).appearance!=="force-dark"?(r(),u("div",ir,[d("p",rr,T(l(s).darkModeSwitchLabel||"Appearance"),1),_(Ne)])):g("",!0)}}),cr=k(lr,[["__scopeId","data-v-2d7af913"]]),ur=y({__name:"VPNavScreenMenuLink",props:{item:{}},setup(e){const t=fe("close-screen");return(s,n)=>(r(),w(G,{class:"VPNavScreenMenuLink",href:s.item.link,target:s.item.target,rel:s.item.rel,onClick:l(t)},{default:p(()=>[j(T(s.item.text),1)]),_:1},8,["href","target","rel","onClick"]))}}),dr=k(ur,[["__scopeId","data-v-05f27b2a"]]),hr={},vr={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},pr=d("path",{d:"M18.9,10.9h-6v-6c0-0.6-0.4-1-1-1s-1,0.4-1,1v6h-6c-0.6,0-1,0.4-1,1s0.4,1,1,1h6v6c0,0.6,0.4,1,1,1s1-0.4,1-1v-6h6c0.6,0,1-0.4,1-1S19.5,10.9,18.9,10.9z"},null,-1),fr=[pr];function _r(e,t){return r(),u("svg",vr,fr)}const mr=k(hr,[["render",_r]]),gr=y({__name:"VPNavScreenMenuGroupLink",props:{item:{}},setup(e){const t=fe("close-screen");return(s,n)=>(r(),w(G,{class:"VPNavScreenMenuGroupLink",href:s.item.link,target:s.item.target,rel:s.item.rel,onClick:l(t)},{default:p(()=>[j(T(s.item.text),1)]),_:1},8,["href","target","rel","onClick"]))}}),nt=k(gr,[["__scopeId","data-v-19976ae1"]]),kr={class:"VPNavScreenMenuGroupSection"},$r={key:0,class:"title"},br=y({__name:"VPNavScreenMenuGroupSection",props:{text:{},items:{}},setup(e){return(t,s)=>(r(),u("div",kr,[t.text?(r(),u("p",$r,T(t.text),1)):g("",!0),(r(!0),u(H,null,E(t.items,n=>(r(),w(nt,{key:n.text,item:n},null,8,["item"]))),128))]))}}),yr=k(br,[["__scopeId","data-v-8133b170"]]),Pr=["aria-controls","aria-expanded"],wr=["innerHTML"],Vr=["id"],Lr={key:1,class:"group"},Sr=y({__name:"VPNavScreenMenuGroup",props:{text:{},items:{}},setup(e){const t=e,s=M(!1),n=L(()=>`NavScreenGroup-${t.text.replace(" ","-").toLowerCase()}`);function o(){s.value=!s.value}return(a,i)=>(r(),u("div",{class:B(["VPNavScreenMenuGroup",{open:s.value}])},[d("button",{class:"button","aria-controls":n.value,"aria-expanded":s.value,onClick:o},[d("span",{class:"button-text",innerHTML:a.text},null,8,wr),_(mr,{class:"button-icon"})],8,Pr),d("div",{id:n.value,class:"items"},[(r(!0),u(H,null,E(a.items,c=>(r(),u(H,{key:c.text},["link"in c?(r(),u("div",{key:c.text,class:"item"},[_(nt,{item:c},null,8,["item"])])):(r(),u("div",Lr,[_(yr,{text:c.text,items:c.items},null,8,["text","items"])]))],64))),128))],8,Vr)],2))}}),Mr=k(Sr,[["__scopeId","data-v-65ef89ca"]]),Cr={key:0,class:"VPNavScreenMenu"},Ir=y({__name:"VPNavScreenMenu",setup(e){const{theme:t}=I();return(s,n)=>l(t).nav?(r(),u("nav",Cr,[(r(!0),u(H,null,E(l(t).nav,o=>(r(),u(H,{key:o.text},["link"in o?(r(),w(dr,{key:0,item:o},null,8,["item"])):(r(),w(Mr,{key:1,text:o.text||"",items:o.items},null,8,["text","items"]))],64))),128))])):g("",!0)}}),Tr=y({__name:"VPNavScreenSocialLinks",setup(e){const{theme:t}=I();return(s,n)=>l(t).socialLinks?(r(),w(ze,{key:0,class:"VPNavScreenSocialLinks",links:l(t).socialLinks},null,8,["links"])):g("",!0)}}),Ar={class:"list"},Nr=y({__name:"VPNavScreenTranslations",setup(e){const{localeLinks:t,currentLang:s}=ne({correspondingLink:!0}),n=M(!1);function o(){n.value=!n.value}return(a,i)=>l(t).length&&l(s).label?(r(),u("div",{key:0,class:B(["VPNavScreenTranslations",{open:n.value}])},[d("button",{class:"title",onClick:o},[_(st,{class:"icon lang"}),j(" "+T(l(s).label)+" ",1),_(tt,{class:"icon chevron"})]),d("ul",Ar,[(r(!0),u(H,null,E(l(t),c=>(r(),u("li",{key:c.link,class:"item"},[_(G,{class:"link",href:c.link},{default:p(()=>[j(T(c.text),1)]),_:2},1032,["href"])]))),128))])],2)):g("",!0)}}),Hr=k(Nr,[["__scopeId","data-v-d72aa483"]]),Br={class:"container"},zr=y({__name:"VPNavScreen",props:{open:{type:Boolean}},setup(e){const t=M(null),s=Je(ee?document.body:null);return(n,o)=>(r(),w(Ve,{name:"fade",onEnter:o[0]||(o[0]=a=>s.value=!0),onAfterLeave:o[1]||(o[1]=a=>s.value=!1)},{default:p(()=>[n.open?(r(),u("div",{key:0,class:"VPNavScreen",ref_key:"screen",ref:t,id:"VPNavScreen"},[d("div",Br,[v(n.$slots,"nav-screen-content-before",{},void 0,!0),_(Ir,{class:"menu"}),_(Hr,{class:"translations"}),_(cr,{class:"appearance"}),_(Tr,{class:"social-links"}),v(n.$slots,"nav-screen-content-after",{},void 0,!0)])],512)):g("",!0)]),_:3}))}}),xr=k(zr,[["__scopeId","data-v-cc5739dd"]]),Er={key:0,class:"VPNav"},Dr=y({__name:"VPNav",setup(e){const{isScreenOpen:t,closeScreen:s,toggleScreen:n}=go(),{frontmatter:o}=I(),a=L(()=>o.value.navbar!==!1);return Ye("close-screen",s),ve(()=>{ee&&document.documentElement.classList.toggle("hide-nav",!a.value)}),(i,c)=>a.value?(r(),u("header",Er,[_(ar,{"is-screen-open":l(t),onToggleScreen:l(n)},{"nav-bar-title-before":p(()=>[v(i.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":p(()=>[v(i.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":p(()=>[v(i.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":p(()=>[v(i.$slots,"nav-bar-content-after",{},void 0,!0)]),_:3},8,["is-screen-open","onToggleScreen"]),_(xr,{open:l(t)},{"nav-screen-content-before":p(()=>[v(i.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":p(()=>[v(i.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3},8,["open"])])):g("",!0)}}),Or=k(Dr,[["__scopeId","data-v-ae24b3ad"]]),Fr=e=>(R("data-v-e31bd47b"),e=e(),K(),e),jr=["role","tabindex"],Ur=Fr(()=>d("div",{class:"indicator"},null,-1)),qr=["onKeydown"],Gr={key:1,class:"items"},Rr=y({__name:"VPSidebarItem",props:{item:{},depth:{}},setup(e){const t=e,{collapsed:s,collapsible:n,isLink:o,isActiveLink:a,hasActiveLink:i,hasChildren:c,toggle:h}=Ot(L(()=>t.item)),f=L(()=>c.value?"section":"div"),m=L(()=>o.value?"a":"div"),$=L(()=>c.value?t.depth+2===7?"p":`h${t.depth+2}`:"p"),V=L(()=>o.value?void 0:"button"),b=L(()=>[[`level-${t.depth}`],{collapsible:n.value},{collapsed:s.value},{"is-link":o.value},{"is-active":a.value},{"has-active":i.value}]);function P(S){"key"in S&&S.key!=="Enter"||!t.item.link&&h()}function C(){t.item.link&&h()}return(S,D)=>{const N=J("VPSidebarItem",!0);return r(),w(Y(f.value),{class:B(["VPSidebarItem",b.value])},{default:p(()=>[S.item.text?(r(),u("div",ie({key:0,class:"item",role:V.value},gt(S.item.items?{click:P,keydown:P}:{},!0),{tabindex:S.item.items&&0}),[Ur,S.item.link?(r(),w(G,{key:0,tag:m.value,class:"link",href:S.item.link,rel:S.item.rel,target:S.item.target},{default:p(()=>[(r(),w(Y($.value),{class:"text",innerHTML:S.item.text},null,8,["innerHTML"]))]),_:1},8,["tag","href","rel","target"])):(r(),w(Y($.value),{key:1,class:"text",innerHTML:S.item.text},null,8,["innerHTML"])),S.item.collapsed!=null?(r(),u("div",{key:2,class:"caret",role:"button","aria-label":"toggle section",onClick:C,onKeydown:mt(C,["enter"]),tabindex:"0"},[_(Ae,{class:"caret-icon"})],40,qr)):g("",!0)],16,jr)):g("",!0),S.item.items&&S.item.items.length?(r(),u("div",Gr,[S.depth<5?(r(!0),u(H,{key:0},E(S.item.items,A=>(r(),w(N,{key:A.text,item:A,depth:S.depth+1},null,8,["item","depth"]))),128)):g("",!0)])):g("",!0)]),_:1},8,["class"])}}}),Kr=k(Rr,[["__scopeId","data-v-e31bd47b"]]),ot=e=>(R("data-v-7f44e717"),e=e(),K(),e),Wr=ot(()=>d("div",{class:"curtain"},null,-1)),Jr={class:"nav",id:"VPSidebarNav","aria-labelledby":"sidebar-aria-label",tabindex:"-1"},Yr=ot(()=>d("span",{class:"visually-hidden",id:"sidebar-aria-label"}," Sidebar Navigation ",-1)),Xr=y({__name:"VPSidebar",props:{open:{type:Boolean}},setup(e){const{sidebarGroups:t,hasSidebar:s}=W(),n=e,o=M(null),a=Je(ee?document.body:null);return Q([n,o],()=>{var i;n.open?(a.value=!0,(i=o.value)==null||i.focus()):a.value=!1},{immediate:!0,flush:"post"}),(i,c)=>l(s)?(r(),u("aside",{key:0,class:B(["VPSidebar",{open:i.open}]),ref_key:"navEl",ref:o,onClick:c[0]||(c[0]=We(()=>{},["stop"]))},[Wr,d("nav",Jr,[Yr,v(i.$slots,"sidebar-nav-before",{},void 0,!0),(r(!0),u(H,null,E(l(t),h=>(r(),u("div",{key:h.text,class:"group"},[_(Kr,{item:h,depth:0},null,8,["item"])]))),128)),v(i.$slots,"sidebar-nav-after",{},void 0,!0)])],2)):g("",!0)}}),Zr=k(Xr,[["__scopeId","data-v-7f44e717"]]),Qr=y({__name:"VPSkipLink",setup(e){const t=pe(),s=M();Q(()=>t.path,()=>s.value.focus());function n({target:o}){const a=document.getElementById(decodeURIComponent(o.hash).slice(1));if(a){const i=()=>{a.removeAttribute("tabindex"),a.removeEventListener("blur",i)};a.setAttribute("tabindex","-1"),a.addEventListener("blur",i),a.focus(),window.scrollTo(0,0)}}return(o,a)=>(r(),u(H,null,[d("span",{ref_key:"backToTop",ref:s,tabindex:"-1"},null,512),d("a",{href:"#VPContent",class:"VPSkipLink visually-hidden",onClick:n}," Skip to content ")],64))}}),el=k(Qr,[["__scopeId","data-v-0f60ec36"]]),tl=y({__name:"Layout",setup(e){const{isOpen:t,open:s,close:n}=W(),o=pe();Q(()=>o.path,n),Dt(t,n);const{frontmatter:a}=I(),i=kt(),c=L(()=>!!i["home-hero-image"]);return Ye("hero-image-slot-exists",c),(h,f)=>{const m=J("Content");return l(a).layout!==!1?(r(),u("div",{key:0,class:B(["Layout",l(a).pageClass])},[v(h.$slots,"layout-top",{},void 0,!0),_(el),_(wt,{class:"backdrop",show:l(t),onClick:l(n)},null,8,["show","onClick"]),_(Or,null,{"nav-bar-title-before":p(()=>[v(h.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":p(()=>[v(h.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":p(()=>[v(h.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":p(()=>[v(h.$slots,"nav-bar-content-after",{},void 0,!0)]),"nav-screen-content-before":p(()=>[v(h.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":p(()=>[v(h.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3}),_(mo,{open:l(t),onOpenMenu:l(s)},null,8,["open","onOpenMenu"]),_(Zr,{open:l(t)},{"sidebar-nav-before":p(()=>[v(h.$slots,"sidebar-nav-before",{},void 0,!0)]),"sidebar-nav-after":p(()=>[v(h.$slots,"sidebar-nav-after",{},void 0,!0)]),_:3},8,["open"]),_(Wn,null,{"page-top":p(()=>[v(h.$slots,"page-top",{},void 0,!0)]),"page-bottom":p(()=>[v(h.$slots,"page-bottom",{},void 0,!0)]),"not-found":p(()=>[v(h.$slots,"not-found",{},void 0,!0)]),"home-hero-before":p(()=>[v(h.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info":p(()=>[v(h.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-image":p(()=>[v(h.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":p(()=>[v(h.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":p(()=>[v(h.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":p(()=>[v(h.$slots,"home-features-after",{},void 0,!0)]),"doc-footer-before":p(()=>[v(h.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":p(()=>[v(h.$slots,"doc-before",{},void 0,!0)]),"doc-after":p(()=>[v(h.$slots,"doc-after",{},void 0,!0)]),"doc-top":p(()=>[v(h.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":p(()=>[v(h.$slots,"doc-bottom",{},void 0,!0)]),"aside-top":p(()=>[v(h.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":p(()=>[v(h.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":p(()=>[v(h.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":p(()=>[v(h.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":p(()=>[v(h.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":p(()=>[v(h.$slots,"aside-ads-after",{},void 0,!0)]),_:3}),_(Qn),v(h.$slots,"layout-bottom",{},void 0,!0)],2)):(r(),w(m,{key:1}))}}}),sl=k(tl,[["__scopeId","data-v-5a346dfe"]]),ol={Layout:sl,enhanceApp:({app:e})=>{e.component("Badge",bt)}};export{ol as t}; +function __vite__mapDeps(indexes) { + if (!__vite__mapDeps.viteFileDeps) { + __vite__mapDeps.viteFileDeps = [] + } + return indexes.map((i) => __vite__mapDeps.viteFileDeps[i]) +} \ No newline at end of file diff --git a/docs/document/assets/chunks/theme.521bd55f.js b/docs/document/assets/chunks/theme.521bd55f.js deleted file mode 100644 index 5bf1da176..000000000 --- a/docs/document/assets/chunks/theme.521bd55f.js +++ /dev/null @@ -1,7 +0,0 @@ -import{d as $,o as r,c as d,r as v,n as N,a as j,t as x,_ as k,b as w,w as h,T as Ie,e as b,u as at,i as $t,P as Pt,f as ye,g as L,h as S,j as W,k as _,l,p as R,m as U,q as Vt,s as wt,v as Z,x as be,y as St,z as te,A as ke,B as Ae,C as Be,D as Lt,E as Y,F as B,G as E,H as Ne,I as ae,J as y,K as Q,L as it,M as $e,N as ue,O as He,Q as Mt,R as xt,S as Ct,U as Xe,V as Tt,W as It,X as Je,Y as At,Z as rt,$ as Bt,a0 as Nt,a1 as de,a2 as Ht,a3 as zt,a4 as Et}from"./framework.532b6b18.js";const Dt=$({__name:"VPBadge",props:{text:{},type:{}},setup(e){return(t,n)=>(r(),d("span",{class:N(["VPBadge",t.type??"tip"])},[v(t.$slots,"default",{},()=>[j(x(t.text),1)],!0)],2))}});const Ot=k(Dt,[["__scopeId","data-v-02919808"]]),Ft={key:0,class:"VPBackdrop"},jt=$({__name:"VPBackdrop",props:{show:{type:Boolean}},setup(e){return(t,n)=>(r(),w(Ie,{name:"fade"},{default:h(()=>[t.show?(r(),d("div",Ft)):b("",!0)]),_:1}))}});const Gt=k(jt,[["__scopeId","data-v-c79a1216"]]),C=at;function qt(e,t){let n,s=!1;return()=>{n&&clearTimeout(n),s?n=setTimeout(e,t):(e(),s=!0,setTimeout(()=>{s=!1},t))}}function Me(e){return/^\//.test(e)?e:`/${e}`}function ie(e){if($t(e))return e.replace(Pt,"");const{site:t}=C(),{pathname:n,search:s,hash:o}=new URL(e,"http://a.com"),a=n.endsWith("/")||n.endsWith(".html")?e:e.replace(/(?:(^\.+)\/)?.*$/,`$1${n.replace(/(\.md)?$/,t.value.cleanUrls?"":".html")}${s}${o}`);return ye(a)}function re({removeCurrent:e=!0,correspondingLink:t=!1}={}){const{site:n,localeIndex:s,page:o,theme:a}=C(),i=L(()=>{var u,p;return{label:(u=n.value.locales[s.value])==null?void 0:u.label,link:((p=n.value.locales[s.value])==null?void 0:p.link)||(s.value==="root"?"/":`/${s.value}/`)}});return{localeLinks:L(()=>Object.entries(n.value.locales).flatMap(([u,p])=>e&&i.value.label===p.label?[]:{text:p.label,link:Rt(p.link||(u==="root"?"/":`/${u}/`),a.value.i18nRouting!==!1&&t,o.value.relativePath.slice(i.value.link.length-1),!n.value.cleanUrls)})),currentLang:i}}function Rt(e,t,n,s){return t?e.replace(/\/$/,"")+Me(n.replace(/(^|\/)index\.md$/,"$1").replace(/\.md$/,s?".html":"")):e}const Ut=e=>(R("data-v-a172abb3"),e=e(),U(),e),Wt={class:"NotFound"},Kt={class:"code"},Yt={class:"title"},Xt=Ut(()=>_("div",{class:"divider"},null,-1)),Jt={class:"quote"},Qt={class:"action"},Zt=["href","aria-label"],en=$({__name:"NotFound",setup(e){const{site:t,theme:n}=C(),{localeLinks:s}=re({removeCurrent:!1}),o=S("/");return W(()=>{var i;const a=window.location.pathname.replace(t.value.base,"").replace(/(^.*?\/).*$/,"/$1");s.value.length&&(o.value=((i=s.value.find(({link:c})=>c.startsWith(a)))==null?void 0:i.link)||s.value[0].link)}),(a,i)=>{var c,u,p,m,f;return r(),d("div",Wt,[_("p",Kt,x(((c=l(n).notFound)==null?void 0:c.code)??"404"),1),_("h1",Yt,x(((u=l(n).notFound)==null?void 0:u.title)??"PAGE NOT FOUND"),1),Xt,_("blockquote",Jt,x(((p=l(n).notFound)==null?void 0:p.quote)??"But if you don't change your direction, and if you keep looking, you may end up where you are heading."),1),_("div",Qt,[_("a",{class:"link",href:l(ye)(o.value),"aria-label":((m=l(n).notFound)==null?void 0:m.linkLabel)??"go to home"},x(((f=l(n).notFound)==null?void 0:f.linkText)??"Take me home"),9,Zt)])])}}});const tn=k(en,[["__scopeId","data-v-a172abb3"]]);function lt(e){return Vt()?(wt(e),!0):!1}function ze(e){return typeof e=="function"?e():l(e)}const nn=typeof window<"u"&&typeof document<"u",sn=()=>{};function on(e){const t=ze(e);return(t==null?void 0:t.$el)??t}const Ee=nn?window:void 0;function an(...e){let t,n,s,o;if(typeof e[0]=="string"||Array.isArray(e[0])?([n,s,o]=e,t=Ee):[t,n,s,o]=e,!t)return sn;Array.isArray(n)||(n=[n]),Array.isArray(s)||(s=[s]);const a=[],i=()=>{a.forEach(m=>m()),a.length=0},c=(m,f,P,g)=>(m.addEventListener(f,P,g),()=>m.removeEventListener(f,P,g)),u=Z(()=>[on(t),ze(o)],([m,f])=>{i(),m&&a.push(...n.flatMap(P=>s.map(g=>c(m,P,g,f))))},{immediate:!0,flush:"post"}),p=()=>{u(),i()};return lt(p),p}function rn(){const e=S(!1);return St()&&W(()=>{e.value=!0}),e}function ln(e){const t=rn();return L(()=>(t.value,!!e()))}function xe(e,t={}){const{window:n=Ee}=t,s=ln(()=>n&&"matchMedia"in n&&typeof n.matchMedia=="function");let o;const a=S(!1),i=p=>{a.value=p.matches},c=()=>{o&&("removeEventListener"in o?o.removeEventListener("change",i):o.removeListener(i))},u=be(()=>{s.value&&(c(),o=n.matchMedia(ze(e)),"addEventListener"in o?o.addEventListener("change",i):o.addListener(i),a.value=o.matches)});return lt(()=>{u(),c(),o=void 0}),a}function ct({window:e=Ee}={}){if(!e)return{x:S(0),y:S(0)};const t=S(e.scrollX),n=S(e.scrollY);return an(e,"scroll",()=>{t.value=e.scrollX,n.value=e.scrollY},{capture:!1,passive:!0}),{x:t,y:n}}function ut(e,t){if(Array.isArray(e))return _e(e);if(e==null)return[];t=Me(t);const n=Object.keys(e).sort((o,a)=>a.split("/").length-o.split("/").length).find(o=>t.startsWith(Me(o))),s=n?e[n]:[];return Array.isArray(s)?_e(s):_e(s.items,s.base)}function cn(e){const t=[];let n=0;for(const s in e){const o=e[s];if(o.items){n=t.push(o);continue}t[n]||t.push({items:[]}),t[n].items.push(o)}return t}function un(e){const t=[];function n(s){for(const o of s)o.text&&o.link&&t.push({text:o.text,link:o.link,docFooterText:o.docFooterText}),o.items&&n(o.items)}return n(e),t}function Ce(e,t){return Array.isArray(t)?t.some(n=>Ce(e,n)):te(e,t.link)?!0:t.items?Ce(e,t.items):!1}function _e(e,t){return[...e].map(n=>{const s={...n},o=s.base||t;return o&&s.link&&(s.link=o+s.link),s.items&&(s.items=_e(s.items,o)),s})}function K(){const{frontmatter:e,page:t,theme:n}=C(),s=xe("(min-width: 960px)"),o=S(!1),a=L(()=>{const V=n.value.sidebar,I=t.value.relativePath;return V?ut(V,I):[]}),i=L(()=>e.value.sidebar!==!1&&a.value.length>0&&e.value.layout!=="home"),c=L(()=>u?e.value.aside==null?n.value.aside==="left":e.value.aside==="left":!1),u=L(()=>e.value.layout==="home"?!1:e.value.aside!=null?!!e.value.aside:n.value.aside!==!1),p=L(()=>i.value&&s.value),m=L(()=>i.value?cn(a.value):[]);function f(){o.value=!0}function P(){o.value=!1}function g(){o.value?P():f()}return{isOpen:o,sidebar:a,sidebarGroups:m,hasSidebar:i,hasAside:u,leftAside:c,isSidebarEnabled:p,open:f,close:P,toggle:g}}function dn(e,t){let n;be(()=>{n=e.value?document.activeElement:void 0}),W(()=>{window.addEventListener("keyup",s)}),Ae(()=>{window.removeEventListener("keyup",s)});function s(o){o.key==="Escape"&&e.value&&(t(),n==null||n.focus())}}const dt=S(ke?location.hash:"");ke&&window.addEventListener("hashchange",()=>{dt.value=location.hash});function _n(e){const{page:t}=C(),n=S(!1),s=L(()=>e.value.collapsed!=null),o=L(()=>!!e.value.link),a=S(!1),i=()=>{a.value=te(t.value.relativePath,e.value.link)};Z([t,e,dt],i),W(i);const c=L(()=>a.value?!0:e.value.items?Ce(t.value.relativePath,e.value.items):!1),u=L(()=>!!(e.value.items&&e.value.items.length));be(()=>{n.value=!!(s.value&&e.value.collapsed)}),Be(()=>{(a.value||c.value)&&(n.value=!1)});function p(){s.value&&(n.value=!n.value)}return{collapsed:n,collapsible:s,isLink:o,isActiveLink:a,hasActiveLink:c,hasChildren:u,toggle:p}}function vn(){const{hasSidebar:e}=K(),t=xe("(min-width: 960px)"),n=xe("(min-width: 1280px)");return{isAsideEnabled:L(()=>!n.value&&!t.value?!1:e.value?n.value:t.value)}}const pn=71;function De(e){return typeof e.outline=="object"&&!Array.isArray(e.outline)&&e.outline.label||e.outlineTitle||"On this page"}function Oe(e){const t=[...document.querySelectorAll(".VPDoc :where(h1,h2,h3,h4,h5,h6)")].filter(n=>n.id&&n.hasChildNodes()).map(n=>{const s=Number(n.tagName[1]);return{title:hn(n),link:"#"+n.id,level:s}});return fn(t,e)}function hn(e){let t="";for(const n of e.childNodes)if(n.nodeType===1){if(n.classList.contains("VPBadge")||n.classList.contains("header-anchor"))continue;t+=n.textContent}else n.nodeType===3&&(t+=n.textContent);return t.trim()}function fn(e,t){if(t===!1)return[];const n=(typeof t=="object"&&!Array.isArray(t)?t.level:t)||2,[s,o]=typeof n=="number"?[n,n]:n==="deep"?[2,6]:n;e=e.filter(i=>i.level>=s&&i.level<=o);const a=[];e:for(let i=0;i=0;u--){const p=e[u];if(p.level{requestAnimationFrame(a),window.addEventListener("scroll",s)}),Lt(()=>{i(location.hash)}),Ae(()=>{window.removeEventListener("scroll",s)});function a(){if(!n.value)return;const c=[].slice.call(e.value.querySelectorAll(".outline-link")),u=[].slice.call(document.querySelectorAll(".content .header-anchor")).filter(g=>c.some(V=>V.hash===g.hash&&g.offsetParent!==null)),p=window.scrollY,m=window.innerHeight,f=document.body.offsetHeight,P=Math.abs(p+m-f)<1;if(u.length&&P){i(u[u.length-1].hash);return}for(let g=0;g{const o=Y("VPDocOutlineItem",!0);return r(),d("ul",{class:N(n.root?"root":"nested")},[(r(!0),d(B,null,E(n.headers,({children:a,link:i,title:c})=>(r(),d("li",null,[_("a",{class:"outline-link",href:i,onClick:t,title:c},x(c),9,yn),a!=null&&a.length?(r(),w(o,{key:0,headers:a},null,8,["headers"])):b("",!0)]))),256))],2)}}});const Fe=k(bn,[["__scopeId","data-v-d0ee3533"]]),kn=e=>(R("data-v-ff0f39c8"),e=e(),U(),e),$n={class:"content"},Pn={class:"outline-title"},Vn={"aria-labelledby":"doc-outline-aria-label"},wn=kn(()=>_("span",{class:"visually-hidden",id:"doc-outline-aria-label"}," Table of Contents for current page ",-1)),Sn=$({__name:"VPDocAsideOutline",setup(e){const{frontmatter:t,theme:n}=C(),s=Ne([]);ae(()=>{s.value=Oe(t.value.outline??n.value.outline)});const o=S(),a=S();return mn(o,a),(i,c)=>(r(),d("div",{class:N(["VPDocAsideOutline",{"has-outline":s.value.length>0}]),ref_key:"container",ref:o},[_("div",$n,[_("div",{class:"outline-marker",ref_key:"marker",ref:a},null,512),_("div",Pn,x(l(De)(l(n))),1),_("nav",Vn,[wn,y(Fe,{headers:s.value,root:!0},null,8,["headers"])])])],2))}});const Ln=k(Sn,[["__scopeId","data-v-ff0f39c8"]]),Mn={class:"VPDocAsideCarbonAds"},xn=$({__name:"VPDocAsideCarbonAds",props:{carbonAds:{}},setup(e){const t=()=>null;return(n,s)=>(r(),d("div",Mn,[y(l(t),{"carbon-ads":n.carbonAds},null,8,["carbon-ads"])]))}}),Cn=e=>(R("data-v-3f215769"),e=e(),U(),e),Tn={class:"VPDocAside"},In=Cn(()=>_("div",{class:"spacer"},null,-1)),An=$({__name:"VPDocAside",setup(e){const{theme:t}=C();return(n,s)=>(r(),d("div",Tn,[v(n.$slots,"aside-top",{},void 0,!0),v(n.$slots,"aside-outline-before",{},void 0,!0),y(Ln),v(n.$slots,"aside-outline-after",{},void 0,!0),In,v(n.$slots,"aside-ads-before",{},void 0,!0),l(t).carbonAds?(r(),w(xn,{key:0,"carbon-ads":l(t).carbonAds},null,8,["carbon-ads"])):b("",!0),v(n.$slots,"aside-ads-after",{},void 0,!0),v(n.$slots,"aside-bottom",{},void 0,!0)]))}});const Bn=k(An,[["__scopeId","data-v-3f215769"]]);function Nn(){const{theme:e,page:t}=C();return L(()=>{const{text:n="Edit this page",pattern:s=""}=e.value.editLink||{};let o;return typeof s=="function"?o=s(t.value):o=s.replace(/:path/g,t.value.filePath),{url:o,text:n}})}function Hn(){const{page:e,theme:t,frontmatter:n}=C();return L(()=>{var u,p,m,f,P,g,V,I;const s=ut(t.value.sidebar,e.value.relativePath),o=un(s),a=o.findIndex(M=>te(e.value.relativePath,M.link)),i=((u=t.value.docFooter)==null?void 0:u.prev)===!1&&!n.value.prev||n.value.prev===!1,c=((p=t.value.docFooter)==null?void 0:p.next)===!1&&!n.value.next||n.value.next===!1;return{prev:i?void 0:{text:(typeof n.value.prev=="string"?n.value.prev:typeof n.value.prev=="object"?n.value.prev.text:void 0)??((m=o[a-1])==null?void 0:m.docFooterText)??((f=o[a-1])==null?void 0:f.text),link:(typeof n.value.prev=="object"?n.value.prev.link:void 0)??((P=o[a-1])==null?void 0:P.link)},next:c?void 0:{text:(typeof n.value.next=="string"?n.value.next:typeof n.value.next=="object"?n.value.next.text:void 0)??((g=o[a+1])==null?void 0:g.docFooterText)??((V=o[a+1])==null?void 0:V.text),link:(typeof n.value.next=="object"?n.value.next.link:void 0)??((I=o[a+1])==null?void 0:I.link)}}})}const zn={},En={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Dn=_("path",{d:"M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"},null,-1),On=_("path",{d:"M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"},null,-1),Fn=[Dn,On];function jn(e,t){return r(),d("svg",En,Fn)}const Gn=k(zn,[["render",jn]]),X=$({__name:"VPLink",props:{tag:{},href:{},noIcon:{type:Boolean},target:{},rel:{}},setup(e){const t=e,n=L(()=>t.tag??(t.href?"a":"span")),s=L(()=>t.href&&it.test(t.href));return(o,a)=>(r(),w(Q(n.value),{class:N(["VPLink",{link:o.href,"vp-external-link-icon":s.value,"no-icon":o.noIcon}]),href:o.href?l(ie)(o.href):void 0,target:o.target??(s.value?"_blank":void 0),rel:o.rel??(s.value?"noreferrer":void 0)},{default:h(()=>[v(o.$slots,"default")]),_:3},8,["class","href","target","rel"]))}}),qn={class:"VPLastUpdated"},Rn=["datetime"],Un=$({__name:"VPDocFooterLastUpdated",setup(e){const{theme:t,page:n}=C(),s=L(()=>new Date(n.value.lastUpdated)),o=L(()=>s.value.toISOString()),a=S("");return W(()=>{be(()=>{var i;a.value=new Intl.DateTimeFormat(void 0,((i=t.value.lastUpdated)==null?void 0:i.formatOptions)??{dateStyle:"short",timeStyle:"short"}).format(s.value)})}),(i,c)=>{var u;return r(),d("p",qn,[j(x(((u=l(t).lastUpdated)==null?void 0:u.text)||l(t).lastUpdatedText||"Last updated")+": ",1),_("time",{datetime:o.value},x(a.value),9,Rn)])}}});const Wn=k(Un,[["__scopeId","data-v-149a99df"]]),Kn={key:0,class:"VPDocFooter"},Yn={key:0,class:"edit-info"},Xn={key:0,class:"edit-link"},Jn={key:1,class:"last-updated"},Qn={key:1,class:"prev-next"},Zn={class:"pager"},es=["href"],ts=["innerHTML"],ns=["innerHTML"],ss={class:"pager"},os=["href"],as=["innerHTML"],is=["innerHTML"],rs=$({__name:"VPDocFooter",setup(e){const{theme:t,page:n,frontmatter:s}=C(),o=Nn(),a=Hn(),i=L(()=>t.value.editLink&&s.value.editLink!==!1),c=L(()=>n.value.lastUpdated&&s.value.lastUpdated!==!1),u=L(()=>i.value||c.value||a.value.prev||a.value.next);return(p,m)=>{var f,P,g,V,I,M;return u.value?(r(),d("footer",Kn,[v(p.$slots,"doc-footer-before",{},void 0,!0),i.value||c.value?(r(),d("div",Yn,[i.value?(r(),d("div",Xn,[y(X,{class:"edit-link-button",href:l(o).url,"no-icon":!0},{default:h(()=>[y(Gn,{class:"edit-link-icon","aria-label":"edit icon"}),j(" "+x(l(o).text),1)]),_:1},8,["href"])])):b("",!0),c.value?(r(),d("div",Jn,[y(Wn)])):b("",!0)])):b("",!0),(f=l(a).prev)!=null&&f.link||(P=l(a).next)!=null&&P.link?(r(),d("nav",Qn,[_("div",Zn,[(g=l(a).prev)!=null&&g.link?(r(),d("a",{key:0,class:"pager-link prev",href:l(ie)(l(a).prev.link)},[_("span",{class:"desc",innerHTML:((V=l(t).docFooter)==null?void 0:V.prev)||"Previous page"},null,8,ts),_("span",{class:"title",innerHTML:l(a).prev.text},null,8,ns)],8,es)):b("",!0)]),_("div",ss,[(I=l(a).next)!=null&&I.link?(r(),d("a",{key:0,class:"pager-link next",href:l(ie)(l(a).next.link)},[_("span",{class:"desc",innerHTML:((M=l(t).docFooter)==null?void 0:M.next)||"Next page"},null,8,as),_("span",{class:"title",innerHTML:l(a).next.text},null,8,is)],8,os)):b("",!0)])])):b("",!0)])):b("",!0)}}});const ls=k(rs,[["__scopeId","data-v-37656e44"]]),cs={},us={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},ds=_("path",{d:"M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"},null,-1),_s=[ds];function vs(e,t){return r(),d("svg",us,_s)}const je=k(cs,[["render",vs]]),ps={key:0,class:"VPDocOutlineDropdown"},hs={key:0,class:"items"},fs=$({__name:"VPDocOutlineDropdown",setup(e){const{frontmatter:t,theme:n}=C(),s=S(!1);ae(()=>{s.value=!1});const o=Ne([]);return ae(()=>{o.value=Oe(t.value.outline??n.value.outline)}),(a,i)=>o.value.length>0?(r(),d("div",ps,[_("button",{onClick:i[0]||(i[0]=c=>s.value=!s.value),class:N({open:s.value})},[j(x(l(De)(l(n)))+" ",1),y(je,{class:"icon"})],2),s.value?(r(),d("div",hs,[y(Fe,{headers:o.value},null,8,["headers"])])):b("",!0)])):b("",!0)}});const ms=k(fs,[["__scopeId","data-v-0c1fc463"]]),gs=e=>(R("data-v-6b87e69f"),e=e(),U(),e),ys={class:"container"},bs=gs(()=>_("div",{class:"aside-curtain"},null,-1)),ks={class:"aside-container"},$s={class:"aside-content"},Ps={class:"content"},Vs={class:"content-container"},ws={class:"main"},Ss=$({__name:"VPDoc",setup(e){const{theme:t}=C(),n=$e(),{hasSidebar:s,hasAside:o,leftAside:a}=K(),i=L(()=>n.path.replace(/[./]+/g,"_").replace(/_html$/,""));return(c,u)=>{const p=Y("Content");return r(),d("div",{class:N(["VPDoc",{"has-sidebar":l(s),"has-aside":l(o)}])},[v(c.$slots,"doc-top",{},void 0,!0),_("div",ys,[l(o)?(r(),d("div",{key:0,class:N(["aside",{"left-aside":l(a)}])},[bs,_("div",ks,[_("div",$s,[y(Bn,null,{"aside-top":h(()=>[v(c.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":h(()=>[v(c.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":h(()=>[v(c.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":h(()=>[v(c.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":h(()=>[v(c.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":h(()=>[v(c.$slots,"aside-ads-after",{},void 0,!0)]),_:3})])])],2)):b("",!0),_("div",Ps,[_("div",Vs,[v(c.$slots,"doc-before",{},void 0,!0),y(ms),_("main",ws,[y(p,{class:N(["vp-doc",[i.value,l(t).externalLinkIcon&&"external-link-icon-enabled"]])},null,8,["class"])]),y(ls,null,{"doc-footer-before":h(()=>[v(c.$slots,"doc-footer-before",{},void 0,!0)]),_:3}),v(c.$slots,"doc-after",{},void 0,!0)])])]),v(c.$slots,"doc-bottom",{},void 0,!0)],2)}}});const Ls=k(Ss,[["__scopeId","data-v-6b87e69f"]]),Ms=$({__name:"VPButton",props:{tag:{},size:{},theme:{},text:{},href:{}},setup(e){const t=e,n=L(()=>[t.size??"medium",t.theme??"brand"]),s=L(()=>t.href&&it.test(t.href)),o=L(()=>t.tag?t.tag:t.href?"a":"button");return(a,i)=>(r(),w(Q(o.value),{class:N(["VPButton",n.value]),href:a.href?l(ie)(a.href):void 0,target:s.value?"_blank":void 0,rel:s.value?"noreferrer":void 0},{default:h(()=>[j(x(a.text),1)]),_:1},8,["class","href","target","rel"]))}});const xs=k(Ms,[["__scopeId","data-v-567ba664"]]),Cs=["src","alt"],Ts=$({inheritAttrs:!1,__name:"VPImage",props:{image:{},alt:{}},setup(e){return(t,n)=>{const s=Y("VPImage",!0);return t.image?(r(),d(B,{key:0},[typeof t.image=="string"||"src"in t.image?(r(),d("img",ue({key:0,class:"VPImage"},typeof t.image=="string"?t.$attrs:{...t.image,...t.$attrs},{src:l(ye)(typeof t.image=="string"?t.image:t.image.src),alt:t.alt??(typeof t.image=="string"?"":t.image.alt||"")}),null,16,Cs)):(r(),d(B,{key:1},[y(s,ue({class:"dark",image:t.image.dark,alt:t.image.alt},t.$attrs),null,16,["image","alt"]),y(s,ue({class:"light",image:t.image.light,alt:t.image.alt},t.$attrs),null,16,["image","alt"])],64))],64)):b("",!0)}}});const Ge=k(Ts,[["__scopeId","data-v-8426fc1a"]]),Is=e=>(R("data-v-da5d1713"),e=e(),U(),e),As={class:"container"},Bs={class:"main"},Ns={key:0,class:"name"},Hs=["innerHTML"],zs=["innerHTML"],Es=["innerHTML"],Ds={key:0,class:"actions"},Os={key:0,class:"image"},Fs={class:"image-container"},js=Is(()=>_("div",{class:"image-bg"},null,-1)),Gs=$({__name:"VPHero",props:{name:{},text:{},tagline:{},image:{},actions:{}},setup(e){const t=He("hero-image-slot-exists");return(n,s)=>(r(),d("div",{class:N(["VPHero",{"has-image":n.image||l(t)}])},[_("div",As,[_("div",Bs,[v(n.$slots,"home-hero-info",{},()=>[n.name?(r(),d("h1",Ns,[_("span",{innerHTML:n.name,class:"clip"},null,8,Hs)])):b("",!0),n.text?(r(),d("p",{key:1,innerHTML:n.text,class:"text"},null,8,zs)):b("",!0),n.tagline?(r(),d("p",{key:2,innerHTML:n.tagline,class:"tagline"},null,8,Es)):b("",!0)],!0),n.actions?(r(),d("div",Ds,[(r(!0),d(B,null,E(n.actions,o=>(r(),d("div",{key:o.link,class:"action"},[y(xs,{tag:"a",size:"medium",theme:o.theme,text:o.text,href:o.link},null,8,["theme","text","href"])]))),128))])):b("",!0)]),n.image||l(t)?(r(),d("div",Os,[_("div",Fs,[js,v(n.$slots,"home-hero-image",{},()=>[n.image?(r(),w(Ge,{key:0,class:"image-src",image:n.image},null,8,["image"])):b("",!0)],!0)])])):b("",!0)])],2))}});const qs=k(Gs,[["__scopeId","data-v-da5d1713"]]),Rs=$({__name:"VPHomeHero",setup(e){const{frontmatter:t}=C();return(n,s)=>l(t).hero?(r(),w(qs,{key:0,class:"VPHomeHero",name:l(t).hero.name,text:l(t).hero.text,tagline:l(t).hero.tagline,image:l(t).hero.image,actions:l(t).hero.actions},{"home-hero-info":h(()=>[v(n.$slots,"home-hero-info")]),"home-hero-image":h(()=>[v(n.$slots,"home-hero-image")]),_:3},8,["name","text","tagline","image","actions"])):b("",!0)}}),Us={},Ws={xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24"},Ks=_("path",{d:"M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"},null,-1),Ys=[Ks];function Xs(e,t){return r(),d("svg",Ws,Ys)}const Js=k(Us,[["render",Xs]]),Qs={class:"box"},Zs=["innerHTML"],eo=["innerHTML"],to=["innerHTML"],no={key:3,class:"link-text"},so={class:"link-text-value"},oo=$({__name:"VPFeature",props:{icon:{},title:{},details:{},link:{},linkText:{},rel:{}},setup(e){return(t,n)=>(r(),w(X,{class:"VPFeature",href:t.link,rel:t.rel,"no-icon":!0,tag:t.link?"a":"div"},{default:h(()=>[_("article",Qs,[typeof t.icon=="object"?(r(),w(Ge,{key:0,image:t.icon,alt:t.icon.alt,height:t.icon.height||48,width:t.icon.width||48},null,8,["image","alt","height","width"])):t.icon?(r(),d("div",{key:1,class:"icon",innerHTML:t.icon},null,8,Zs)):b("",!0),_("h2",{class:"title",innerHTML:t.title},null,8,eo),t.details?(r(),d("p",{key:2,class:"details",innerHTML:t.details},null,8,to)):b("",!0),t.linkText?(r(),d("div",no,[_("p",so,[j(x(t.linkText)+" ",1),y(Js,{class:"link-text-icon"})])])):b("",!0)])]),_:1},8,["href","rel","tag"]))}});const ao=k(oo,[["__scopeId","data-v-33086751"]]),io={key:0,class:"VPFeatures"},ro={class:"container"},lo={class:"items"},co=$({__name:"VPFeatures",props:{features:{}},setup(e){const t=e,n=L(()=>{const s=t.features.length;if(s){if(s===2)return"grid-2";if(s===3)return"grid-3";if(s%3===0)return"grid-6";if(s>3)return"grid-4"}else return});return(s,o)=>s.features?(r(),d("div",io,[_("div",ro,[_("div",lo,[(r(!0),d(B,null,E(s.features,a=>(r(),d("div",{key:a.title,class:N(["item",[n.value]])},[y(ao,{icon:a.icon,title:a.title,details:a.details,link:a.link,"link-text":a.linkText,rel:a.rel},null,8,["icon","title","details","link","link-text","rel"])],2))),128))])])])):b("",!0)}});const uo=k(co,[["__scopeId","data-v-39646fad"]]),_o=$({__name:"VPHomeFeatures",setup(e){const{frontmatter:t}=C();return(n,s)=>l(t).features?(r(),w(uo,{key:0,class:"VPHomeFeatures",features:l(t).features},null,8,["features"])):b("",!0)}}),vo={class:"VPHome"},po=$({__name:"VPHome",setup(e){return(t,n)=>{const s=Y("Content");return r(),d("div",vo,[v(t.$slots,"home-hero-before",{},void 0,!0),y(Rs,null,{"home-hero-info":h(()=>[v(t.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-image":h(()=>[v(t.$slots,"home-hero-image",{},void 0,!0)]),_:3}),v(t.$slots,"home-hero-after",{},void 0,!0),v(t.$slots,"home-features-before",{},void 0,!0),y(_o),v(t.$slots,"home-features-after",{},void 0,!0),y(s)])}}});const ho=k(po,[["__scopeId","data-v-d82743a8"]]),fo={},mo={class:"VPPage"};function go(e,t){const n=Y("Content");return r(),d("div",mo,[v(e.$slots,"page-top"),y(n),v(e.$slots,"page-bottom")])}const yo=k(fo,[["render",go]]),bo=$({__name:"VPContent",setup(e){const{page:t,frontmatter:n}=C(),{hasSidebar:s}=K();return(o,a)=>(r(),d("div",{class:N(["VPContent",{"has-sidebar":l(s),"is-home":l(n).layout==="home"}]),id:"VPContent"},[l(t).isNotFound?v(o.$slots,"not-found",{key:0},()=>[y(tn)],!0):l(n).layout==="page"?(r(),w(yo,{key:1},{"page-top":h(()=>[v(o.$slots,"page-top",{},void 0,!0)]),"page-bottom":h(()=>[v(o.$slots,"page-bottom",{},void 0,!0)]),_:3})):l(n).layout==="home"?(r(),w(ho,{key:2},{"home-hero-before":h(()=>[v(o.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info":h(()=>[v(o.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-image":h(()=>[v(o.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":h(()=>[v(o.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":h(()=>[v(o.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":h(()=>[v(o.$slots,"home-features-after",{},void 0,!0)]),_:3})):l(n).layout&&l(n).layout!=="doc"?(r(),w(Q(l(n).layout),{key:3})):(r(),w(Ls,{key:4},{"doc-top":h(()=>[v(o.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":h(()=>[v(o.$slots,"doc-bottom",{},void 0,!0)]),"doc-footer-before":h(()=>[v(o.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":h(()=>[v(o.$slots,"doc-before",{},void 0,!0)]),"doc-after":h(()=>[v(o.$slots,"doc-after",{},void 0,!0)]),"aside-top":h(()=>[v(o.$slots,"aside-top",{},void 0,!0)]),"aside-outline-before":h(()=>[v(o.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":h(()=>[v(o.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":h(()=>[v(o.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":h(()=>[v(o.$slots,"aside-ads-after",{},void 0,!0)]),"aside-bottom":h(()=>[v(o.$slots,"aside-bottom",{},void 0,!0)]),_:3}))],2))}});const ko=k(bo,[["__scopeId","data-v-669faec9"]]),$o={class:"container"},Po=["innerHTML"],Vo=["innerHTML"],wo=$({__name:"VPFooter",setup(e){const{theme:t,frontmatter:n}=C(),{hasSidebar:s}=K();return(o,a)=>l(t).footer&&l(n).footer!==!1?(r(),d("footer",{key:0,class:N(["VPFooter",{"has-sidebar":l(s)}])},[_("div",$o,[l(t).footer.message?(r(),d("p",{key:0,class:"message",innerHTML:l(t).footer.message},null,8,Po)):b("",!0),l(t).footer.copyright?(r(),d("p",{key:1,class:"copyright",innerHTML:l(t).footer.copyright},null,8,Vo)):b("",!0)])],2)):b("",!0)}});const So=k(wo,[["__scopeId","data-v-e03eb2e1"]]),Lo={class:"header"},Mo={class:"outline"},xo=$({__name:"VPLocalNavOutlineDropdown",props:{headers:{},navHeight:{}},setup(e){const t=e,{theme:n}=C(),s=S(!1),o=S(0),a=S();ae(()=>{s.value=!1});function i(){s.value=!s.value,o.value=window.innerHeight+Math.min(window.scrollY-t.navHeight,0)}function c(p){p.target.classList.contains("outline-link")&&(a.value&&(a.value.style.transition="none"),xt(()=>{s.value=!1}))}function u(){s.value=!1,window.scrollTo({top:0,left:0,behavior:"smooth"})}return(p,m)=>(r(),d("div",{class:"VPLocalNavOutlineDropdown",style:Mt({"--vp-vh":o.value+"px"})},[p.headers.length>0?(r(),d("button",{key:0,onClick:i,class:N({open:s.value})},[j(x(l(De)(l(n)))+" ",1),y(je,{class:"icon"})],2)):(r(),d("button",{key:1,onClick:u},x(l(n).returnToTopLabel||"Return to top"),1)),y(Ie,{name:"flyout"},{default:h(()=>[s.value?(r(),d("div",{key:0,ref_key:"items",ref:a,class:"items",onClick:c},[_("div",Lo,[_("a",{class:"top-link",href:"#",onClick:u},x(l(n).returnToTopLabel||"Return to top"),1)]),_("div",Mo,[y(Fe,{headers:p.headers},null,8,["headers"])])],512)):b("",!0)]),_:1})],4))}});const Co=k(xo,[["__scopeId","data-v-18201f51"]]),To={},Io={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Ao=_("path",{d:"M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"},null,-1),Bo=_("path",{d:"M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"},null,-1),No=_("path",{d:"M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"},null,-1),Ho=_("path",{d:"M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"},null,-1),zo=[Ao,Bo,No,Ho];function Eo(e,t){return r(),d("svg",Io,zo)}const Do=k(To,[["render",Eo]]),Oo=["aria-expanded"],Fo={class:"menu-text"},jo=$({__name:"VPLocalNav",props:{open:{type:Boolean}},emits:["open-menu"],setup(e){const{theme:t,frontmatter:n}=C(),{hasSidebar:s}=K(),{y:o}=ct(),a=Ne([]),i=S(0);W(()=>{i.value=parseInt(getComputedStyle(document.documentElement).getPropertyValue("--vp-nav-height"))}),ae(()=>{a.value=Oe(n.value.outline??t.value.outline)});const c=L(()=>a.value.length===0&&!s.value),u=L(()=>({VPLocalNav:!0,fixed:c.value,"reached-top":o.value>=i.value}));return(p,m)=>l(n).layout!=="home"&&(!c.value||l(o)>=i.value)?(r(),d("div",{key:0,class:N(u.value)},[l(s)?(r(),d("button",{key:0,class:"menu","aria-expanded":p.open,"aria-controls":"VPSidebarNav",onClick:m[0]||(m[0]=f=>p.$emit("open-menu"))},[y(Do,{class:"menu-icon"}),_("span",Fo,x(l(t).sidebarMenuLabel||"Menu"),1)],8,Oo)):b("",!0),y(Co,{headers:a.value,navHeight:i.value},null,8,["headers","navHeight"])],2)):b("",!0)}});const Go=k(jo,[["__scopeId","data-v-5cfd5582"]]);function qo(){const e=S(!1);function t(){e.value=!0,window.addEventListener("resize",o)}function n(){e.value=!1,window.removeEventListener("resize",o)}function s(){e.value?n():t()}function o(){window.outerWidth>=768&&n()}const a=$e();return Z(()=>a.path,n),{isScreenOpen:e,openScreen:t,closeScreen:n,toggleScreen:s}}const Ro={},Uo={class:"VPSwitch",type:"button",role:"switch"},Wo={class:"check"},Ko={key:0,class:"icon"};function Yo(e,t){return r(),d("button",Uo,[_("span",Wo,[e.$slots.default?(r(),d("span",Ko,[v(e.$slots,"default",{},void 0,!0)])):b("",!0)])])}const Xo=k(Ro,[["render",Yo],["__scopeId","data-v-f3c41672"]]),Jo={},Qo={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Zo=Ct('',9),ea=[Zo];function ta(e,t){return r(),d("svg",Qo,ea)}const na=k(Jo,[["render",ta]]),sa={},oa={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},aa=_("path",{d:"M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"},null,-1),ia=[aa];function ra(e,t){return r(),d("svg",oa,ia)}const la=k(sa,[["render",ra]]),ca=$({__name:"VPSwitchAppearance",setup(e){const{site:t,isDark:n}=C(),s=S(!1),o=ke?a():()=>{};W(()=>{s.value=document.documentElement.classList.contains("dark")});function a(){const i=window.matchMedia("(prefers-color-scheme: dark)"),c=document.documentElement.classList;let u=localStorage.getItem(Xe),p=t.value.appearance==="dark"&&u==null||(u==="auto"||u==null?i.matches:u==="dark");i.onchange=P=>{u==="auto"&&f(p=P.matches)};function m(){f(p=!p),u=p?i.matches?"auto":"dark":i.matches?"light":"auto",localStorage.setItem(Xe,u)}function f(P){const g=document.createElement("style");g.type="text/css",g.appendChild(document.createTextNode(`:not(.VPSwitchAppearance):not(.VPSwitchAppearance *) { - -webkit-transition: none !important; - -moz-transition: none !important; - -o-transition: none !important; - -ms-transition: none !important; - transition: none !important; -}`)),document.head.appendChild(g),s.value=P,c[P?"add":"remove"]("dark"),window.getComputedStyle(g).opacity,document.head.removeChild(g)}return m}return Z(s,i=>{n.value=i}),(i,c)=>(r(),w(Xo,{title:"toggle dark mode",class:"VPSwitchAppearance","aria-checked":s.value,onClick:l(o)},{default:h(()=>[y(na,{class:"sun"}),y(la,{class:"moon"})]),_:1},8,["aria-checked","onClick"]))}});const qe=k(ca,[["__scopeId","data-v-82b282f1"]]),ua={key:0,class:"VPNavBarAppearance"},da=$({__name:"VPNavBarAppearance",setup(e){const{site:t}=C();return(n,s)=>l(t).appearance?(r(),d("div",ua,[y(qe)])):b("",!0)}});const _a=k(da,[["__scopeId","data-v-f6a63727"]]),Re=S();let _t=!1,we=0;function va(e){const t=S(!1);if(ke){!_t&&pa(),we++;const n=Z(Re,s=>{var o,a,i;s===e.el.value||(o=e.el.value)!=null&&o.contains(s)?(t.value=!0,(a=e.onFocus)==null||a.call(e)):(t.value=!1,(i=e.onBlur)==null||i.call(e))});Ae(()=>{n(),we--,we||ha()})}return Tt(t)}function pa(){document.addEventListener("focusin",vt),_t=!0,Re.value=document.activeElement}function ha(){document.removeEventListener("focusin",vt)}function vt(){Re.value=document.activeElement}const fa={},ma={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},ga=_("path",{d:"M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"},null,-1),ya=[ga];function ba(e,t){return r(),d("svg",ma,ya)}const pt=k(fa,[["render",ba]]),ka={},$a={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Pa=_("circle",{cx:"12",cy:"12",r:"2"},null,-1),Va=_("circle",{cx:"19",cy:"12",r:"2"},null,-1),wa=_("circle",{cx:"5",cy:"12",r:"2"},null,-1),Sa=[Pa,Va,wa];function La(e,t){return r(),d("svg",$a,Sa)}const Ma=k(ka,[["render",La]]),xa={class:"VPMenuLink"},Ca=$({__name:"VPMenuLink",props:{item:{}},setup(e){const{page:t}=C();return(n,s)=>(r(),d("div",xa,[y(X,{class:N({active:l(te)(l(t).relativePath,n.item.activeMatch||n.item.link,!!n.item.activeMatch)}),href:n.item.link,target:n.item.target,rel:n.item.rel},{default:h(()=>[j(x(n.item.text),1)]),_:1},8,["class","href","target","rel"])]))}});const Pe=k(Ca,[["__scopeId","data-v-2f2cfafc"]]),Ta={class:"VPMenuGroup"},Ia={key:0,class:"title"},Aa=$({__name:"VPMenuGroup",props:{text:{},items:{}},setup(e){return(t,n)=>(r(),d("div",Ta,[t.text?(r(),d("p",Ia,x(t.text),1)):b("",!0),(r(!0),d(B,null,E(t.items,s=>(r(),d(B,null,["link"in s?(r(),w(Pe,{key:0,item:s},null,8,["item"])):b("",!0)],64))),256))]))}});const Ba=k(Aa,[["__scopeId","data-v-69e747b5"]]),Na={class:"VPMenu"},Ha={key:0,class:"items"},za=$({__name:"VPMenu",props:{items:{}},setup(e){return(t,n)=>(r(),d("div",Na,[t.items?(r(),d("div",Ha,[(r(!0),d(B,null,E(t.items,s=>(r(),d(B,{key:s.text},["link"in s?(r(),w(Pe,{key:0,item:s},null,8,["item"])):(r(),w(Ba,{key:1,text:s.text,items:s.items},null,8,["text","items"]))],64))),128))])):b("",!0),v(t.$slots,"default",{},void 0,!0)]))}});const Ea=k(za,[["__scopeId","data-v-e7ea1737"]]),Da=["aria-expanded","aria-label"],Oa={key:0,class:"text"},Fa=["innerHTML"],ja={class:"menu"},Ga=$({__name:"VPFlyout",props:{icon:{},button:{},label:{},items:{}},setup(e){const t=S(!1),n=S();va({el:n,onBlur:s});function s(){t.value=!1}return(o,a)=>(r(),d("div",{class:"VPFlyout",ref_key:"el",ref:n,onMouseenter:a[1]||(a[1]=i=>t.value=!0),onMouseleave:a[2]||(a[2]=i=>t.value=!1)},[_("button",{type:"button",class:"button","aria-haspopup":"true","aria-expanded":t.value,"aria-label":o.label,onClick:a[0]||(a[0]=i=>t.value=!t.value)},[o.button||o.icon?(r(),d("span",Oa,[o.icon?(r(),w(Q(o.icon),{key:0,class:"option-icon"})):b("",!0),o.button?(r(),d("span",{key:1,innerHTML:o.button},null,8,Fa)):b("",!0),y(pt,{class:"text-icon"})])):(r(),w(Ma,{key:1,class:"icon"}))],8,Da),_("div",ja,[y(Ea,{items:o.items},{default:h(()=>[v(o.$slots,"default",{},void 0,!0)]),_:3},8,["items"])])],544))}});const Ue=k(Ga,[["__scopeId","data-v-a7b5672a"]]),qa={discord:'Discord',facebook:'Facebook',github:'GitHub',instagram:'Instagram',linkedin:'LinkedIn',mastodon:'Mastodon',slack:'Slack',twitter:'Twitter',youtube:'YouTube'},Ra=["href","aria-label","innerHTML"],Ua=$({__name:"VPSocialLink",props:{icon:{},link:{},ariaLabel:{}},setup(e){const t=e,n=L(()=>typeof t.icon=="object"?t.icon.svg:qa[t.icon]);return(s,o)=>(r(),d("a",{class:"VPSocialLink no-icon",href:s.link,"aria-label":s.ariaLabel??(typeof s.icon=="string"?s.icon:""),target:"_blank",rel:"noopener",innerHTML:n.value},null,8,Ra))}});const Wa=k(Ua,[["__scopeId","data-v-f80f8133"]]),Ka={class:"VPSocialLinks"},Ya=$({__name:"VPSocialLinks",props:{links:{}},setup(e){return(t,n)=>(r(),d("div",Ka,[(r(!0),d(B,null,E(t.links,({link:s,icon:o,ariaLabel:a})=>(r(),w(Wa,{key:s,icon:o,link:s,ariaLabel:a},null,8,["icon","link","ariaLabel"]))),128))]))}});const We=k(Ya,[["__scopeId","data-v-7bc22406"]]),Xa={key:0,class:"group translations"},Ja={class:"trans-title"},Qa={key:1,class:"group"},Za={class:"item appearance"},ei={class:"label"},ti={class:"appearance-action"},ni={key:2,class:"group"},si={class:"item social-links"},oi=$({__name:"VPNavBarExtra",setup(e){const{site:t,theme:n}=C(),{localeLinks:s,currentLang:o}=re({correspondingLink:!0}),a=L(()=>s.value.length&&o.value.label||t.value.appearance||n.value.socialLinks);return(i,c)=>a.value?(r(),w(Ue,{key:0,class:"VPNavBarExtra",label:"extra navigation"},{default:h(()=>[l(s).length&&l(o).label?(r(),d("div",Xa,[_("p",Ja,x(l(o).label),1),(r(!0),d(B,null,E(l(s),u=>(r(),w(Pe,{key:u.link,item:u},null,8,["item"]))),128))])):b("",!0),l(t).appearance?(r(),d("div",Qa,[_("div",Za,[_("p",ei,x(l(n).darkModeSwitchLabel||"Appearance"),1),_("div",ti,[y(qe)])])])):b("",!0),l(n).socialLinks?(r(),d("div",ni,[_("div",si,[y(We,{class:"social-links-list",links:l(n).socialLinks},null,8,["links"])])])):b("",!0)]),_:1})):b("",!0)}});const ai=k(oi,[["__scopeId","data-v-40855f84"]]),ii=e=>(R("data-v-e5dd9c1c"),e=e(),U(),e),ri=["aria-expanded"],li=ii(()=>_("span",{class:"container"},[_("span",{class:"top"}),_("span",{class:"middle"}),_("span",{class:"bottom"})],-1)),ci=[li],ui=$({__name:"VPNavBarHamburger",props:{active:{type:Boolean}},emits:["click"],setup(e){return(t,n)=>(r(),d("button",{type:"button",class:N(["VPNavBarHamburger",{active:t.active}]),"aria-label":"mobile navigation","aria-expanded":t.active,"aria-controls":"VPNavScreen",onClick:n[0]||(n[0]=s=>t.$emit("click"))},ci,10,ri))}});const di=k(ui,[["__scopeId","data-v-e5dd9c1c"]]),_i=["innerHTML"],vi=$({__name:"VPNavBarMenuLink",props:{item:{}},setup(e){const{page:t}=C();return(n,s)=>(r(),w(X,{class:N({VPNavBarMenuLink:!0,active:l(te)(l(t).relativePath,n.item.activeMatch||n.item.link,!!n.item.activeMatch)}),href:n.item.link,target:n.item.target,rel:n.item.rel,tabindex:"0"},{default:h(()=>[_("span",{innerHTML:n.item.text},null,8,_i)]),_:1},8,["class","href","target","rel"]))}});const pi=k(vi,[["__scopeId","data-v-0b525393"]]),hi=$({__name:"VPNavBarMenuGroup",props:{item:{}},setup(e){const{page:t}=C();return(n,s)=>(r(),w(Ue,{class:N({VPNavBarMenuGroup:!0,active:l(te)(l(t).relativePath,n.item.activeMatch,!!n.item.activeMatch)}),button:n.item.text,items:n.item.items},null,8,["class","button","items"]))}}),fi=e=>(R("data-v-7f418b0f"),e=e(),U(),e),mi={key:0,"aria-labelledby":"main-nav-aria-label",class:"VPNavBarMenu"},gi=fi(()=>_("span",{id:"main-nav-aria-label",class:"visually-hidden"},"Main Navigation",-1)),yi=$({__name:"VPNavBarMenu",setup(e){const{theme:t}=C();return(n,s)=>l(t).nav?(r(),d("nav",mi,[gi,(r(!0),d(B,null,E(l(t).nav,o=>(r(),d(B,{key:o.text},["link"in o?(r(),w(pi,{key:0,item:o},null,8,["item"])):(r(),w(hi,{key:1,item:o},null,8,["item"]))],64))),128))])):b("",!0)}});const bi=k(yi,[["__scopeId","data-v-7f418b0f"]]),ki="/document/assets/flex-logo.2489261b.svg";function Se(e,t){return typeof e>"u"?t:e}function Ze(e){const t=Array(e);for(let n=0;n=this.minlength&&(c||!i[m])){let P=ce(u,o,p),g="";switch(this.tokenize){case"full":if(3V;I--)if(I-V>=this.minlength){const M=ce(u,o,p,f,V);g=m.substring(V,I),this.push_index(i,g,M,e,n)}break}case"reverse":if(2=this.minlength){const I=ce(u,o,p,f,V);this.push_index(i,g,I,e,n)}g=""}case"forward":if(1=this.minlength&&this.push_index(i,g,P,e,n);break}default:if(this.boost&&(P=Math.min(0|P/this.boost(t,m,p),u-1)),this.push_index(i,m,P,e,n),c&&1=this.minlength&&!V[m]){V[m]=1;const T=ce(I+(o/2>I?0:1),o,p,D-1,A-1),H=this.bidirectional&&m>M;this.push_index(a,H?M:m,T,e,n,H?m:M)}}}}}this.fastupdate||(this.register[e]=1)}}return this};function ce(e,t,n,s,o){return n&&1=this.minlength&&!f[g]){if(!this.optimize&&!a&&!this.map[g])return i;P[I++]=g,f[g]=1}e=P,s=e.length}if(!s)return i;t||(t=100);let u,p=this.depth&&1=n)))));g++);if(p)return o?nt(c,n,0):void(e[e.length]=c)}return!t&&c};function nt(e,t,n){return e=e.length===1?e[0]:Pi(e),n||e.length>t?e.slice(n,n+t):e}function st(e,t,n,s){if(n){const o=s&&t>n;e=e[o?t:n],e=e&&e[o?n:t]}else e=e[t];return e}O.prototype.contain=function(e){return!!this.register[e]},O.prototype.update=function(e,t){return this.remove(e).add(e,t)},O.prototype.remove=function(e,t){const n=this.register[e];if(n){if(this.fastupdate)for(let s,o=0;o{if(a.value){for(var A=f.value.search(a.value,{enrich:!0}),T=[],H=0;H!A||!A.length?[]:A.reduce((H,z)=>(H[T(z)]||(H[T(z)]=[]),H[T(z)].push(z),H),{}),M=()=>{setTimeout(()=>{c.value&&c.value.focus()},100),D(),o.value=!0};W(async()=>{var z,q;const A=await It(()=>import("./virtual_search-data.bdabb558.js"),[]);u.value=A.default.INDEX_DATA,p.value=A.default.PREVIEW_LOOKUP,m.value=A.default.Options,i.value=window.location.origin+ye(n.value==="root"?"/":n.value),P.value=((z=m.value)==null?void 0:z.buttonLabel)||P.value,g.value=((q=m.value)==null?void 0:q.placeholder)||g.value;var T=new O(m.value);T.import("reg",u.value.reg),T.import("cfg",u.value.cfg),T.import("map",u.value.map),T.import("ctx",u.value.ctx),f.value=T,s.value.innerHTML=/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)?"⌘":"Ctrl";const H=G=>{var le;G.key==="k"&&(G.ctrlKey||G.metaKey)&&(G.preventDefault(),M()),G.key==="Escape"&&((le=a.value)==null?void 0:le.length)==0&&o.value&&(o.value=!1)};window.addEventListener("keydown",H)});function D(){o.value=!1,a.value=""}return(A,T)=>{const H=Y("ClientOnly");return r(),d("div",Gi,[y(H,null,{default:h(()=>[(r(),w(Nt,{to:"body"},[Je(_("div",{class:"VPPluginSearch-modal-back",onClick:T[2]||(T[2]=z=>o.value=!1)},[_("div",{class:"VPPluginSearch-modal",onClick:T[1]||(T[1]=rt(()=>{},["stop"]))},[_("form",qi,[Ri,Je(_("input",{class:"DocSearch-Input","aria-autocomplete":"both","aria-labelledby":"docsearch-label",id:"docsearch-input",autocomplete:"off",autocorrect:"off",autocapitalize:"off",enterkeyhint:"search",spellcheck:"false",autofocus:"true","onUpdate:modelValue":T[0]||(T[0]=z=>a.value=z),placeholder:g.value,maxlength:"64",type:"search",ref_key:"input",ref:c},null,8,Ui),[[Bt,a.value]])]),_("div",Wi,[(r(!0),d(B,null,E(I(V.value,z=>z.link.split("/").slice(0,-1).join("-")),(z,q)=>(r(),d("div",{key:q},[_("span",Ki,x(q?q.toString()[0].toUpperCase()+q.toString().slice(1):"Home"),1),(r(!0),d(B,null,E(z,G=>(r(),d("a",{href:i.value+G.link,key:G.id,onClick:D},[_("div",Xi,[_("span",Ji,x(G.link.includes("#")?"#":"▤"),1),_("div",Qi,[_("h3",null,x(G.title),1),_("p",null,[_("div",{innerHTML:G.preview},null,8,Zi)])]),er])],8,Yi))),128))]))),128))]),tr])],512),[[At,o.value]])]))]),_:1}),_("div",{id:"docsearch",onClick:T[3]||(T[3]=z=>M())},[_("button",nr,[_("span",sr,[or,_("span",ar,x(P.value),1)]),_("span",ir,[_("span",{class:"DocSearch-Button-Key",ref_key:"metaKey",ref:s},"Meta",512),rr])])])])}}});const cr=$({__name:"VPNavBarSocialLinks",setup(e){const{theme:t}=C();return(n,s)=>l(t).socialLinks?(r(),w(We,{key:0,class:"VPNavBarSocialLinks",links:l(t).socialLinks},null,8,["links"])):b("",!0)}});const ur=k(cr,[["__scopeId","data-v-0394ad82"]]),dr=["href"],_r=$({__name:"VPNavBarTitle",setup(e){const{site:t,theme:n}=C(),{hasSidebar:s}=K(),{currentLang:o}=re();return(a,i)=>(r(),d("div",{class:N(["VPNavBarTitle",{"has-sidebar":l(s)}])},[_("a",{class:"title",href:l(n).logoLink??l(ie)(l(o).link)},[v(a.$slots,"nav-bar-title-before",{},void 0,!0),l(n).logo?(r(),w(Ge,{key:0,class:"logo",image:l(n).logo},null,8,["image"])):b("",!0),l(n).siteTitle?(r(),d(B,{key:1},[j(x(l(n).siteTitle),1)],64)):l(n).siteTitle===void 0?(r(),d(B,{key:2},[j(x(l(t).title),1)],64)):b("",!0),v(a.$slots,"nav-bar-title-after",{},void 0,!0)],8,dr)],2))}});const vr=k(_r,[["__scopeId","data-v-86d1bed8"]]),pr={},hr={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},fr=_("path",{d:"M0 0h24v24H0z",fill:"none"},null,-1),mr=_("path",{d:" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z ",class:"css-c4d79v"},null,-1),gr=[fr,mr];function yr(e,t){return r(),d("svg",hr,gr)}const ht=k(pr,[["render",yr]]),br={class:"items"},kr={class:"title"},$r=$({__name:"VPNavBarTranslations",setup(e){const{theme:t}=C(),{localeLinks:n,currentLang:s}=re({correspondingLink:!0});return(o,a)=>l(n).length&&l(s).label?(r(),w(Ue,{key:0,class:"VPNavBarTranslations",icon:ht,label:l(t).langMenuLabel||"Change language"},{default:h(()=>[_("div",br,[_("p",kr,x(l(s).label),1),(r(!0),d(B,null,E(l(n),i=>(r(),w(Pe,{key:i.link,item:i},null,8,["item"]))),128))])]),_:1},8,["label"])):b("",!0)}});const Pr=k($r,[["__scopeId","data-v-74abcbb9"]]),Vr=e=>(R("data-v-0937f67c"),e=e(),U(),e),wr={class:"container"},Sr={class:"title"},Lr={class:"content"},Mr=Vr(()=>_("div",{class:"curtain"},null,-1)),xr={class:"content-body"},Cr=$({__name:"VPNavBar",props:{isScreenOpen:{type:Boolean}},emits:["toggle-screen"],setup(e){const{y:t}=ct(),{hasSidebar:n}=K(),{frontmatter:s}=C(),o=S({});return Be(()=>{var a;o.value={"has-sidebar":n.value,top:((a=s.value)==null?void 0:a.layout)==="home"&&t.value===0}}),(a,i)=>(r(),d("div",{class:N(["VPNavBar",o.value])},[_("div",wr,[_("div",Sr,[y(vr,null,{"nav-bar-title-before":h(()=>[v(a.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":h(()=>[v(a.$slots,"nav-bar-title-after",{},void 0,!0)]),_:3})]),_("div",Lr,[Mr,_("div",xr,[v(a.$slots,"nav-bar-content-before",{},void 0,!0),y(lr,{class:"search"}),y(bi,{class:"menu"}),y(Pr,{class:"translations"}),y(_a,{class:"appearance"}),y(ur,{class:"social-links"}),y(ai,{class:"extra"}),v(a.$slots,"nav-bar-content-after",{},void 0,!0),y(di,{class:"hamburger",active:a.isScreenOpen,onClick:i[0]||(i[0]=c=>a.$emit("toggle-screen"))},null,8,["active"])])])])],2))}});const Tr=k(Cr,[["__scopeId","data-v-0937f67c"]]);function Ir(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t1),ee=[],me=!1,Ye=-1,se=void 0,J=void 0,oe=void 0,ft=function(t){return ee.some(function(n){return!!(n.options.allowTouchMove&&n.options.allowTouchMove(t))})},ge=function(t){var n=t||window.event;return ft(n.target)||n.touches.length>1?!0:(n.preventDefault&&n.preventDefault(),!1)},Ar=function(t){if(oe===void 0){var n=!!t&&t.reserveScrollBarGap===!0,s=window.innerWidth-document.documentElement.clientWidth;if(n&&s>0){var o=parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"),10);oe=document.body.style.paddingRight,document.body.style.paddingRight=o+s+"px"}}se===void 0&&(se=document.body.style.overflow,document.body.style.overflow="hidden")},Br=function(){oe!==void 0&&(document.body.style.paddingRight=oe,oe=void 0),se!==void 0&&(document.body.style.overflow=se,se=void 0)},Nr=function(){return window.requestAnimationFrame(function(){if(J===void 0){J={position:document.body.style.position,top:document.body.style.top,left:document.body.style.left};var t=window,n=t.scrollY,s=t.scrollX,o=t.innerHeight;document.body.style.position="fixed",document.body.style.top=-n,document.body.style.left=-s,setTimeout(function(){return window.requestAnimationFrame(function(){var a=o-window.innerHeight;a&&n>=o&&(document.body.style.top=-(n+a))})},300)}})},Hr=function(){if(J!==void 0){var t=-parseInt(document.body.style.top,10),n=-parseInt(document.body.style.left,10);document.body.style.position=J.position,document.body.style.top=J.top,document.body.style.left=J.left,window.scrollTo(n,t),J=void 0}},zr=function(t){return t?t.scrollHeight-t.scrollTop<=t.clientHeight:!1},Er=function(t,n){var s=t.targetTouches[0].clientY-Ye;return ft(t.target)?!1:n&&n.scrollTop===0&&s>0||zr(n)&&s<0?ge(t):(t.stopPropagation(),!0)},mt=function(t,n){if(!t){console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");return}if(!ee.some(function(o){return o.targetElement===t})){var s={targetElement:t,options:n||{}};ee=[].concat(Ir(ee),[s]),fe?Nr():Ar(n),fe&&(t.ontouchstart=function(o){o.targetTouches.length===1&&(Ye=o.targetTouches[0].clientY)},t.ontouchmove=function(o){o.targetTouches.length===1&&Er(o,t)},me||(document.addEventListener("touchmove",ge,Ke?{passive:!1}:void 0),me=!0))}},gt=function(){fe&&(ee.forEach(function(t){t.targetElement.ontouchstart=null,t.targetElement.ontouchmove=null}),me&&(document.removeEventListener("touchmove",ge,Ke?{passive:!1}:void 0),me=!1),Ye=-1),fe?Hr():Br(),ee=[]};const Dr=$({__name:"VPNavScreenMenuLink",props:{item:{}},setup(e){const t=He("close-screen");return(n,s)=>(r(),w(X,{class:"VPNavScreenMenuLink",href:n.item.link,target:n.item.target,rel:n.item.rel,onClick:l(t)},{default:h(()=>[j(x(n.item.text),1)]),_:1},8,["href","target","rel","onClick"]))}});const Or=k(Dr,[["__scopeId","data-v-30be0acb"]]),Fr={},jr={xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",focusable:"false",viewBox:"0 0 24 24"},Gr=_("path",{d:"M18.9,10.9h-6v-6c0-0.6-0.4-1-1-1s-1,0.4-1,1v6h-6c-0.6,0-1,0.4-1,1s0.4,1,1,1h6v6c0,0.6,0.4,1,1,1s1-0.4,1-1v-6h6c0.6,0,1-0.4,1-1S19.5,10.9,18.9,10.9z"},null,-1),qr=[Gr];function Rr(e,t){return r(),d("svg",jr,qr)}const Ur=k(Fr,[["render",Rr]]),Wr=$({__name:"VPNavScreenMenuGroupLink",props:{item:{}},setup(e){const t=He("close-screen");return(n,s)=>(r(),w(X,{class:"VPNavScreenMenuGroupLink",href:n.item.link,target:n.item.target,rel:n.item.rel,onClick:l(t)},{default:h(()=>[j(x(n.item.text),1)]),_:1},8,["href","target","rel","onClick"]))}});const yt=k(Wr,[["__scopeId","data-v-6656c42a"]]),Kr={class:"VPNavScreenMenuGroupSection"},Yr={key:0,class:"title"},Xr=$({__name:"VPNavScreenMenuGroupSection",props:{text:{},items:{}},setup(e){return(t,n)=>(r(),d("div",Kr,[t.text?(r(),d("p",Yr,x(t.text),1)):b("",!0),(r(!0),d(B,null,E(t.items,s=>(r(),w(yt,{key:s.text,item:s},null,8,["item"]))),128))]))}});const Jr=k(Xr,[["__scopeId","data-v-8133b170"]]),Qr=["aria-controls","aria-expanded"],Zr={class:"button-text"},el=["id"],tl={key:1,class:"group"},nl=$({__name:"VPNavScreenMenuGroup",props:{text:{},items:{}},setup(e){const t=e,n=S(!1),s=L(()=>`NavScreenGroup-${t.text.replace(" ","-").toLowerCase()}`);function o(){n.value=!n.value}return(a,i)=>(r(),d("div",{class:N(["VPNavScreenMenuGroup",{open:n.value}])},[_("button",{class:"button","aria-controls":s.value,"aria-expanded":n.value,onClick:o},[_("span",Zr,x(a.text),1),y(Ur,{class:"button-icon"})],8,Qr),_("div",{id:s.value,class:"items"},[(r(!0),d(B,null,E(a.items,c=>(r(),d(B,{key:c.text},["link"in c?(r(),d("div",{key:c.text,class:"item"},[y(yt,{item:c},null,8,["item"])])):(r(),d("div",tl,[y(Jr,{text:c.text,items:c.items},null,8,["text","items"])]))],64))),128))],8,el)],2))}});const sl=k(nl,[["__scopeId","data-v-338a1689"]]),ol={key:0,class:"VPNavScreenMenu"},al=$({__name:"VPNavScreenMenu",setup(e){const{theme:t}=C();return(n,s)=>l(t).nav?(r(),d("nav",ol,[(r(!0),d(B,null,E(l(t).nav,o=>(r(),d(B,{key:o.text},["link"in o?(r(),w(Or,{key:0,item:o},null,8,["item"])):(r(),w(sl,{key:1,text:o.text||"",items:o.items},null,8,["text","items"]))],64))),128))])):b("",!0)}}),il={key:0,class:"VPNavScreenAppearance"},rl={class:"text"},ll=$({__name:"VPNavScreenAppearance",setup(e){const{site:t,theme:n}=C();return(s,o)=>l(t).appearance?(r(),d("div",il,[_("p",rl,x(l(n).darkModeSwitchLabel||"Appearance"),1),y(qe)])):b("",!0)}});const cl=k(ll,[["__scopeId","data-v-add8f686"]]),ul={class:"list"},dl=$({__name:"VPNavScreenTranslations",setup(e){const{localeLinks:t,currentLang:n}=re({correspondingLink:!0}),s=S(!1);function o(){s.value=!s.value}return(a,i)=>l(t).length&&l(n).label?(r(),d("div",{key:0,class:N(["VPNavScreenTranslations",{open:s.value}])},[_("button",{class:"title",onClick:o},[y(ht,{class:"icon lang"}),j(" "+x(l(n).label)+" ",1),y(pt,{class:"icon chevron"})]),_("ul",ul,[(r(!0),d(B,null,E(l(t),c=>(r(),d("li",{key:c.link,class:"item"},[y(X,{class:"link",href:c.link},{default:h(()=>[j(x(c.text),1)]),_:2},1032,["href"])]))),128))])],2)):b("",!0)}});const _l=k(dl,[["__scopeId","data-v-d72aa483"]]),vl=$({__name:"VPNavScreenSocialLinks",setup(e){const{theme:t}=C();return(n,s)=>l(t).socialLinks?(r(),w(We,{key:0,class:"VPNavScreenSocialLinks",links:l(t).socialLinks},null,8,["links"])):b("",!0)}}),pl={class:"container"},hl=$({__name:"VPNavScreen",props:{open:{type:Boolean}},setup(e){const t=S(null);function n(){mt(t.value,{reserveScrollBarGap:!0})}function s(){gt()}return(o,a)=>(r(),w(Ie,{name:"fade",onEnter:n,onAfterLeave:s},{default:h(()=>[o.open?(r(),d("div",{key:0,class:"VPNavScreen",ref_key:"screen",ref:t,id:"VPNavScreen"},[_("div",pl,[v(o.$slots,"nav-screen-content-before",{},void 0,!0),y(al,{class:"menu"}),y(_l,{class:"translations"}),y(cl,{class:"appearance"}),y(vl,{class:"social-links"}),v(o.$slots,"nav-screen-content-after",{},void 0,!0)])],512)):b("",!0)]),_:3}))}});const fl=k(hl,[["__scopeId","data-v-69fcc70f"]]),ml={class:"VPNav"},gl=$({__name:"VPNav",setup(e){const{isScreenOpen:t,closeScreen:n,toggleScreen:s}=qo();return de("close-screen",n),(o,a)=>(r(),d("header",ml,[y(Tr,{"is-screen-open":l(t),onToggleScreen:l(s)},{"nav-bar-title-before":h(()=>[v(o.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":h(()=>[v(o.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":h(()=>[v(o.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":h(()=>[v(o.$slots,"nav-bar-content-after",{},void 0,!0)]),_:3},8,["is-screen-open","onToggleScreen"]),y(fl,{open:l(t)},{"nav-screen-content-before":h(()=>[v(o.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":h(()=>[v(o.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3},8,["open"])]))}});const yl=k(gl,[["__scopeId","data-v-7e5bc4a5"]]),bl=e=>(R("data-v-9b797284"),e=e(),U(),e),kl=["role","tabindex"],$l=bl(()=>_("div",{class:"indicator"},null,-1)),Pl=["onKeydown"],Vl={key:1,class:"items"},wl=$({__name:"VPSidebarItem",props:{item:{},depth:{}},setup(e){const t=e,{collapsed:n,collapsible:s,isLink:o,isActiveLink:a,hasActiveLink:i,hasChildren:c,toggle:u}=_n(L(()=>t.item)),p=L(()=>c.value?"section":"div"),m=L(()=>o.value?"a":"div"),f=L(()=>c.value?t.depth+2===7?"p":`h${t.depth+2}`:"p"),P=L(()=>o.value?void 0:"button"),g=L(()=>[[`level-${t.depth}`],{collapsible:s.value},{collapsed:n.value},{"is-link":o.value},{"is-active":a.value},{"has-active":i.value}]);function V(M){"key"in M&&M.key!=="Enter"||!t.item.link&&u()}function I(){t.item.link&&u()}return(M,D)=>{const A=Y("VPSidebarItem",!0);return r(),w(Q(p.value),{class:N(["VPSidebarItem",g.value])},{default:h(()=>[M.item.text?(r(),d("div",ue({key:0,class:"item",role:P.value},zt(M.item.items?{click:V,keydown:V}:{},!0),{tabindex:M.item.items&&0}),[$l,M.item.link?(r(),w(X,{key:0,tag:m.value,class:"link",href:M.item.link},{default:h(()=>[(r(),w(Q(f.value),{class:"text",innerHTML:M.item.text},null,8,["innerHTML"]))]),_:1},8,["tag","href"])):(r(),w(Q(f.value),{key:1,class:"text",innerHTML:M.item.text},null,8,["innerHTML"])),M.item.collapsed!=null?(r(),d("div",{key:2,class:"caret",role:"button","aria-label":"toggle section",onClick:I,onKeydown:Ht(I,["enter"]),tabindex:"0"},[y(je,{class:"caret-icon"})],40,Pl)):b("",!0)],16,kl)):b("",!0),M.item.items&&M.item.items.length?(r(),d("div",Vl,[M.depth<5?(r(!0),d(B,{key:0},E(M.item.items,T=>(r(),w(A,{key:T.text,item:T,depth:M.depth+1},null,8,["item","depth"]))),128)):b("",!0)])):b("",!0)]),_:1},8,["class"])}}});const Sl=k(wl,[["__scopeId","data-v-9b797284"]]),bt=e=>(R("data-v-845b8fc6"),e=e(),U(),e),Ll=bt(()=>_("div",{class:"curtain"},null,-1)),Ml={class:"nav",id:"VPSidebarNav","aria-labelledby":"sidebar-aria-label",tabindex:"-1"},xl=bt(()=>_("span",{class:"visually-hidden",id:"sidebar-aria-label"}," Sidebar Navigation ",-1)),Cl=$({__name:"VPSidebar",props:{open:{type:Boolean}},setup(e){const t=e,{sidebarGroups:n,hasSidebar:s}=K();let o=S(null);function a(){mt(o.value,{reserveScrollBarGap:!0})}function i(){gt()}return Be(async()=>{var c;t.open?(a(),(c=o.value)==null||c.focus()):i()}),(c,u)=>l(s)?(r(),d("aside",{key:0,class:N(["VPSidebar",{open:c.open}]),ref_key:"navEl",ref:o,onClick:u[0]||(u[0]=rt(()=>{},["stop"]))},[Ll,_("nav",Ml,[xl,v(c.$slots,"sidebar-nav-before",{},void 0,!0),(r(!0),d(B,null,E(l(n),p=>(r(),d("div",{key:p.text,class:"group"},[y(Sl,{item:p,depth:0},null,8,["item"])]))),128)),v(c.$slots,"sidebar-nav-after",{},void 0,!0)])],2)):b("",!0)}});const Tl=k(Cl,[["__scopeId","data-v-845b8fc6"]]),Il=$({__name:"VPSkipLink",setup(e){const t=$e(),n=S();Z(()=>t.path,()=>n.value.focus());function s({target:o}){const a=document.getElementById(decodeURIComponent(o.hash).slice(1));if(a){const i=()=>{a.removeAttribute("tabindex"),a.removeEventListener("blur",i)};a.setAttribute("tabindex","-1"),a.addEventListener("blur",i),a.focus(),window.scrollTo(0,0)}}return(o,a)=>(r(),d(B,null,[_("span",{ref_key:"backToTop",ref:n,tabindex:"-1"},null,512),_("a",{href:"#VPContent",class:"VPSkipLink visually-hidden",onClick:s}," Skip to content ")],64))}});const Al=k(Il,[["__scopeId","data-v-ae3e3f51"]]),Bl=$({__name:"Layout",setup(e){const{isOpen:t,open:n,close:s}=K(),o=$e();Z(()=>o.path,s),dn(t,s),de("close-sidebar",s),de("is-sidebar-open",t);const{frontmatter:a}=C(),i=Et(),c=L(()=>!!i["home-hero-image"]);return de("hero-image-slot-exists",c),(u,p)=>{const m=Y("Content");return l(a).layout!==!1?(r(),d("div",{key:0,class:N(["Layout",l(a).pageClass])},[v(u.$slots,"layout-top",{},void 0,!0),y(Al),y(Gt,{class:"backdrop",show:l(t),onClick:l(s)},null,8,["show","onClick"]),l(a).navbar!==!1?(r(),w(yl,{key:0},{"nav-bar-title-before":h(()=>[v(u.$slots,"nav-bar-title-before",{},void 0,!0)]),"nav-bar-title-after":h(()=>[v(u.$slots,"nav-bar-title-after",{},void 0,!0)]),"nav-bar-content-before":h(()=>[v(u.$slots,"nav-bar-content-before",{},void 0,!0)]),"nav-bar-content-after":h(()=>[v(u.$slots,"nav-bar-content-after",{},void 0,!0)]),"nav-screen-content-before":h(()=>[v(u.$slots,"nav-screen-content-before",{},void 0,!0)]),"nav-screen-content-after":h(()=>[v(u.$slots,"nav-screen-content-after",{},void 0,!0)]),_:3})):b("",!0),y(Go,{open:l(t),onOpenMenu:l(n)},null,8,["open","onOpenMenu"]),y(Tl,{open:l(t)},{"sidebar-nav-before":h(()=>[v(u.$slots,"sidebar-nav-before",{},void 0,!0)]),"sidebar-nav-after":h(()=>[v(u.$slots,"sidebar-nav-after",{},void 0,!0)]),_:3},8,["open"]),y(ko,null,{"page-top":h(()=>[v(u.$slots,"page-top",{},void 0,!0)]),"page-bottom":h(()=>[v(u.$slots,"page-bottom",{},void 0,!0)]),"not-found":h(()=>[v(u.$slots,"not-found",{},void 0,!0)]),"home-hero-before":h(()=>[v(u.$slots,"home-hero-before",{},void 0,!0)]),"home-hero-info":h(()=>[v(u.$slots,"home-hero-info",{},void 0,!0)]),"home-hero-image":h(()=>[v(u.$slots,"home-hero-image",{},void 0,!0)]),"home-hero-after":h(()=>[v(u.$slots,"home-hero-after",{},void 0,!0)]),"home-features-before":h(()=>[v(u.$slots,"home-features-before",{},void 0,!0)]),"home-features-after":h(()=>[v(u.$slots,"home-features-after",{},void 0,!0)]),"doc-footer-before":h(()=>[v(u.$slots,"doc-footer-before",{},void 0,!0)]),"doc-before":h(()=>[v(u.$slots,"doc-before",{},void 0,!0)]),"doc-after":h(()=>[v(u.$slots,"doc-after",{},void 0,!0)]),"doc-top":h(()=>[v(u.$slots,"doc-top",{},void 0,!0)]),"doc-bottom":h(()=>[v(u.$slots,"doc-bottom",{},void 0,!0)]),"aside-top":h(()=>[v(u.$slots,"aside-top",{},void 0,!0)]),"aside-bottom":h(()=>[v(u.$slots,"aside-bottom",{},void 0,!0)]),"aside-outline-before":h(()=>[v(u.$slots,"aside-outline-before",{},void 0,!0)]),"aside-outline-after":h(()=>[v(u.$slots,"aside-outline-after",{},void 0,!0)]),"aside-ads-before":h(()=>[v(u.$slots,"aside-ads-before",{},void 0,!0)]),"aside-ads-after":h(()=>[v(u.$slots,"aside-ads-after",{},void 0,!0)]),_:3}),y(So),v(u.$slots,"layout-bottom",{},void 0,!0)],2)):(r(),w(m,{key:1}))}}});const Nl=k(Bl,[["__scopeId","data-v-255ec12d"]]);const zl={Layout:Nl,enhanceApp:({app:e})=>{e.component("Badge",Ot)}};export{zl as t}; diff --git a/docs/document/assets/chunks/virtual_search-data.RJ-82FdL.js b/docs/document/assets/chunks/virtual_search-data.RJ-82FdL.js new file mode 100644 index 000000000..db57973b7 --- /dev/null +++ b/docs/document/assets/chunks/virtual_search-data.RJ-82FdL.js @@ -0,0 +1,1366 @@ +const e={map:'[{"高级属性":["0.0"],"option":["0.1","1.12","10.1","11.12","25.4","25.14","36.14"],"template":["0.2","10.2"],"events":["0.3","10.3"],"storage":["0.4","10.4"],"icons":["0.5","10.5","30.38","41.38"],"i18n":["0.6","10.6","30.42","41.42"],"notice":["0.7","3.3","10.7","13.3"],"layers":["0.8","10.8","30.28","41.28"],"controls":["0.9","10.9","30.31","41.31"],"contextmenu":["0.10","2.36","3.2","10.10","12.36","13.2","30.30","41.30"],"subtitle":["0.11","2.35","10.11","12.35","30.36","41.36"],"loading":["0.12","2.33","10.12","12.33"],"hotkey":["0.13","2.5","10.13","12.5","30.19","41.19"],"mask":["0.14","2.34","10.14","12.34"],"setting":["0.15","2.38","3.4","3.5","3.6","10.15","12.38","13.4","13.5","13.6","30.18","41.18"],"plugins":["0.16","10.16","30.34","41.34"],"静态属性":["1.0"],"instances":["1.1","11.1"],"version":["1.2","11.2"],"env":["1.3","11.3"],"build":["1.4","11.4"],"config":["1.5","11.5","25.11","36.11"],"utils":["1.6","11.6"],"scheme":["1.7","11.7"],"emitter":["1.8","11.8"],"validator":["1.9","11.9"],"kindof":["1.10","11.10"],"html":["1.11","11.11"],"实例事件":["2.0"],"ready":["2.1","12.1"],"restart":["2.2","12.2"],"pause":["2.3","5.2","12.3","15.2"],"play":["2.4","5.1","12.4","15.1"],"destroy":["2.6","5.4","12.6","15.4","28.9","39.9"],"focus":["2.7","12.7"],"blur":["2.8","12.8"],"dblclick":["2.9","12.9"],"click":["2.10","12.10"],"error":["2.11","12.11"],"hover":["2.12","12.12"],"mousemove":["2.13","12.13"],"resize":["2.14","3.7","12.14","13.7"],"view":["2.15","12.15"],"lock":["2.16","12.16","30.43","41.43"],"aspectratio":["2.17","5.29","12.17","15.29","30.16","41.16"],"autoheight":["2.18","5.30","12.18","15.30"],"autosize":["2.19","5.25","12.19","15.25","30.11","41.11"],"flip":["2.20","3.29","5.27","12.20","13.29","15.27","30.14","41.14"],"fullscreen":["2.21","3.30","5.19","12.21","13.30","15.19","30.22","41.22"],"fullscreenweb":["2.22","5.20","12.22","15.20","30.23","41.23"],"mini":["2.23","5.23","12.23","15.23"],"pip":["2.24","5.21","12.24","15.21","30.20","41.20"],"screenshot":["2.25","5.16","12.25","15.16","30.17","41.17"],"seek":["2.26","3.26","5.5","12.26","13.26","15.5"],"subtitleoffset":["2.27","12.27","30.24","41.24"],"subtitleupdate":["2.28","12.28"],"subtitleload":["2.29","12.29"],"subtitleswitch":["2.30","12.30"],"info":["2.31","3.21","12.31","13.21"],"layer":["2.32","12.32","18.0"],"control":["2.37","3.15","12.37","13.15"],"muted":["2.39","5.13","12.39","15.13","30.9","41.9"],"video":["2.40","2.41","2.42","2.43","2.44","2.45","2.46","2.47","2.48","2.49","2.50","2.51","2.52","2.53","2.54","2.55","2.56","2.57","2.58","2.59","2.60","5.39","12.40","12.41","12.42","12.43","12.44","12.45","12.46","12.47","12.48","12.49","12.50","12.51","12.52","12.53","12.54","12.55","12.56","12.57","12.58","12.59","12.60","15.39","24.0"],"全局属性":["3.0"],"debug":["3.1","13.1"],"scroll":["3.8","3.9","13.8","13.9"],"auto":["3.10","3.11","3.12","3.20","13.10","13.11","13.12","13.20"],"reconnect":["3.13","3.14","13.13","13.14"],"dbclick":["3.16","3.17","13.16","13.17"],"mobile":["3.18","3.19","13.18","13.19"],"fast":["3.22","3.23","13.22","13.23"],"touch":["3.24","13.24"],"volume":["3.25","5.8","13.25","15.8","30.7","41.7"],"playback":["3.27","13.27"],"aspect":["3.28","13.28"],"log":["3.31","13.31"],"use":["3.32","13.32"],"编写插件":["4.0"],"实例属性":["5.0"],"toggle":["5.3","15.3"],"forward":["5.6","15.6"],"backward":["5.7","15.7"],"url":["5.9","15.9","30.2","41.2"],"switch":["5.10","15.10"],"switchurl":["5.11","15.11"],"switchquality":["5.12","15.12"],"currenttime":["5.14","15.14"],"duration":["5.15","15.15"],"getdataurl":["5.17","15.17"],"getbloburl":["5.18","15.18"],"poster":["5.22","15.22","30.5","41.5"],"playing":["5.24","15.24"],"rect":["5.26","15.26"],"playbackrate":["5.28","15.28","30.15","41.15"],"attr":["5.31","15.31"],"type":["5.32","15.32","30.39","41.39"],"theme":["5.33","15.33","30.6","41.6"],"airplay":["5.34","15.34","30.47","41.47"],"loaded":["5.35","15.35"],"played":["5.36","15.36"],"proxy":["5.37","15.37"],"query":["5.38","15.38"],"cssvar":["5.40","15.40","30.48","41.48"],"quality":["5.41","15.41","30.32","41.32"],"右键菜单":["6.0"],"配置":["6.1","7.1","8.1"],"创建":["6.2","7.2","8.2","9.2","9.3","9.4","9.5"],"添加":["6.3","7.3","8.3","9.6"],"删除":["6.4","7.4","8.4","9.7"],"更新":["6.5","7.5","8.5","9.8"],"控制器":["7.0"],"业务层":["8.0"],"设置面板":["9.0"],"内置":["9.1"],"advanced":["10.0"],"static":["11.0"],"example":["12.0"],"global":["13.0"],"writing":["14.0"],"instance":["15.0"],"context":["16.0"],"configuration":["16.1","17.1","18.1"],"creation":["16.2","17.2","18.2"],"add":["16.3","18.3","19.6","29.3"],"delete":["16.4","17.4","18.4","19.7"],"updates":["16.5","19.8"],"controller":["17.0"],"adding":["17.3"],"update":["17.5","18.5"],"settings":["19.0","30.29","41.29"],"built":["19.1"],"create":["19.2","19.4","19.5"],"creating":["19.3"],"installation":["20.0","20.1","24.2","25.2","26.2","27.2","28.3"],"cdn":["20.2","24.3","25.3","26.3","27.3","28.4","31.2","35.3","36.3","37.3","38.3","39.4"],"usage":["20.3","24.4","28.5"],"vue":["20.4","31.4"],"react":["20.5","31.5"],"typescript":["20.6","31.6"],"javascript":["20.7","31.7"],"ancient":["20.8"],"dash":["21.0","26.0","32.0","37.0"],"flv":["22.0","33.0"],"hls":["23.0","27.0","34.0","38.0"],"demo":["24.1","25.1","26.1"],"danmuku":["25.0"],"using":["25.5","25.6","25.7"],"hide":["25.8","36.8"],"ishide":["25.9","36.9"],"emit":["25.10","36.10"],"load":["25.12","36.12"],"reset":["25.13","36.13"],"event":["25.15"],"demonstration":["27.1","28.2"],"iframe":["28.0","28.10","39.0","39.10"],"description":["28.1"],"index":["28.6","39.6"],"commit":["28.7","39.7"],"message":["28.8","39.8"],"inject":["28.11","39.11"],"postmessage":["28.12","39.12"],"例子":["28.13","39.13"],"language":["29.0"],"default":["29.1"],"importing":["29.2"],"modify":["29.4"],"basic":["30.0"],"container":["30.1","41.1"],"id":["30.3","41.3"],"onready":["30.4","41.4"],"islive":["30.8","41.8"],"autoplay":["30.10","41.10"],"automini":["30.12","41.12"],"loop":["30.13","41.13"],"mutex":["30.21","41.21"],"miniprogressbar":["30.25","41.25"],"usessr":["30.26","41.26"],"playsinline":["30.27","41.27"],"highlight":["30.33","41.33"],"thumbnails":["30.35","41.35"],"morevideoattr":["30.37","41.37"],"customtype":["30.40","41.40"],"lang":["30.41","41.41"],"fastforward":["30.44","41.44"],"autoplayback":["30.45","41.45"],"autoorientation":["30.46","41.46"],"安装使用":["31.0"],"安装":["31.1","35.2","36.2","37.2","38.2","39.3"],"使用":["31.3","35.4","39.5"],"古老的浏览器":["31.8"],"视频广告":["35.0"],"演示":["35.1","36.1","37.1","38.1","39.2"],"弹幕库":["36.0"],"选项":["36.4"],"使用弹幕数组":["36.5"],"使用弹幕":["36.6"],"使用异步调用":["36.7"],"事件":["36.15"],"说明":["39.1"],"语言设置":["40.0"],"默认语言":["40.1"],"导入语言":["40.2"],"新增语言":["40.3"],"修改语言":["40.4"],"基础选项":["41.0"]},{"0":["3.27","5.35","5.36","30.7","41.7"],"1":["25.4","31.8","36.4"],"3":["3.28"],"4":["3.28","29.3","40.3"],"5":["3.27","8.2","18.2","25.4","36.4"],"7":["8.3","18.3","30.7"],"9":["40.3"],"10":["25.4","36.4"],"15":["4.0","14.0"],"21":["8.5","9.8","18.5","19.8"],"26":["7.5","17.5"],"27":["9.8","19.8"],"75":["3.27"],"250":["3.4"],"这里的":["0.0","1.0","3.0","5.0"],"播放器的选项":["0.1"],"div":["0.1","0.2","0.4","0.5","0.7","0.13","0.16","1.1","1.6","2.0","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.30","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.2","4.0","5.1","5.2","5.3","5.15","5.26","5.30","5.34","5.41","6.2","6.3","6.4","6.5","7.2","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.3","9.6","9.7","9.8","10.1","12.30","14.0","15.15","16.2","16.3","16.4","16.5","17.2","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.3","19.6","19.7","19.8","21.0","22.0","23.0","24.4","25.5","25.6","25.7","25.10","30.2","30.28","30.29","32.0","33.0","34.0","35.4","36.5","36.6","36.7","36.8","36.9","36.10","36.12","36.13","36.14","41.2","41.28","41.29","41.30","41.31"],"classname":["0.1","0.2","0.16","2.0","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.30","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","4.0","5.41","6.2","6.3","6.4","6.5","7.2","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.3","9.6","9.7","9.8","12.30","14.0","15.15","16.2","16.3","16.4","16.5","17.2","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.3","19.6","19.7","19.8","21.0","22.0","23.0","24.4","25.5","25.6","25.7","30.2","30.28","30.29","32.0","33.0","34.0","35.4","36.5","36.6","36.7","36.9","36.10","36.12","36.13","36.14","41.2","41.28","41.29"],"run":["0.1","0.2","2.0","2.2","2.6","2.11","2.12","2.17","2.18","2.20","2.21","2.22","2.23","2.24","2.25","2.27","2.28","2.29","2.30","2.38","4.0","5.41","6.2","6.3","6.4","6.5","7.2","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.3","9.6","9.7","9.8","14.0","16.2","16.3","16.4","16.5","17.2","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.3","19.6","19.7","19.8","21.0","22.0","23.0","24.4","25.5","25.6","25.7","30.2","30.28","32.0","33.0","34.0","35.4","36.5","36.6","36.7","36.9","36.10","36.12","36.13","36.14","41.2","41.28","41.29"],"管理播放器所有的":["0.2","0.3","0.5"],"dom":["0.2","0.3","5.37","5.38","9.2","9.4","9.5","10.2","10.3","15.37","15.38","19.2","19.4","19.5","30.1","41.1"],"元素":["0.2","9.4","9.5"],"事件":["0.3","4.0"],"实质上是代理了":["0.3"],"addeventlistener":["0.3","5.37","10.3","15.37"],"和":["0.3","4.0","5.12","36.8","41.4"],"removeeventlistener":["0.3","10.3"],"当使用以下方法来处理事件":["0.3"],"播放器销毁时也会自动销毁该事件":["0.3"],"proxy":["0.3","10.3"],"方法用于代理":["0.3"],"管理播放器的本地存储":["0.4"],"name":["0.4","4.0","10.4","17.1"],"属性用于设置缓存的":["0.4"],"key":["0.4","10.4"],"set":["0.4","10.4","13.5","13.6","15.10","15.11","15.12","15.13","15.14","15.19","15.20","15.21","15.22","15.27","15.28","15.29","30.35","30.36"],"方法用于设置缓存":["0.4"],"get":["0.4","0.6","10.6","15.14","15.15","15.19","15.21","15.22","15.24","15.31","25.14"],"方法用于获取缓存":["0.4"],"del":["0.4"],"方法用于删除缓存":["0.4"],"clear":["0.4","25.13"],"方法用于清空缓存":["0.4"],"svg":["0.5","10.5"],"图标":["0.5"],"管理播放器的":["0.6"],"方法用于获取":["0.6"],"的值":["0.6"],"update":["0.6","0.8","0.9","0.10","0.15"],"管理播放器的提示语":["0.7"],"只有一个":["0.7"],"show":["0.7","0.12","0.14","10.12","10.14","25.8","30.17","30.20","30.32","30.33","36.8"],"属性用于显示提示语":["0.7"],"管理播放器的层":["0.8"],"add":["0.8","0.9","0.10","0.13","0.15","0.16","10.8","10.9","10.10","10.13","10.15"],"方法用于动态添加层":["0.8"],"remove":["0.8","0.9","0.10","0.13","0.15"],"方法用于动态删除层":["0.8"],"管理播放器的控制器":["0.9"],"方法用于动态添加控制器":["0.9"],"方法用于动态删除控制器":["0.9"],"管理播放器的右键菜单":["0.10"],"方法用于动态添加菜单":["0.10"],"方法用于动态删除菜单":["0.10"],"方法用于动态更新菜单":["0.10"],"管理播放器的字幕功能":["0.11"],"url":["0.11","5.11","10.11","25.15","36.15"],"属性设置和返回当前字幕地址":["0.11"],"style":["0.11"],"方法设置当前字幕的样式":["0.11"],"管理播放器的加载层":["0.12"],"属性用于设置是否显示加载层":["0.12"],"toggle":["0.12","0.14","19.4"],"管理播放器的快捷键功能":["0.13"],"方法用于添加快捷键":["0.13"],"方法用于删除快捷键":["0.13"],"管理播放器的遮罩层":["0.14"],"属性用于设置是否显示遮罩层":["0.14"],"管理播放器的设置面板":["0.15"],"方法用于动态添加设置项":["0.15"],"方法用于动态删除设置项":["0.15"],"方法用于动态更新设置项":["0.15"],"管理播放器的插件功能":["0.16"],"只有一个方法":["0.16"],"用于动态添加插件":["0.16"],"返回全部播放器实例的数组":["1.1"],"假如你想同时管理多个播放器的时候":["1.1"],"可以用到该属性":["1.1"],"返回播放器的版本信息":["1.2"],"返回播放器的环境变量":["1.3"],"返回播放器的打包时间":["1.4"],"返回视频的默认配置":["1.5"],"返回播放器的工具函数集合":["1.6"],"返回播放器选项的校验方案":["1.7"],"返回事件分发器的构造函数":["1.8"],"返回选项的校验函数":["1.9"],"返回类型检测的函数工具":["1.10"],"返回播放器所需的":["1.11"],"返回播放器的默认选项":["1.12"],"播放器的事件分为两种":["2.0"],"一种视频的":["2.0"],"原生事件":["2.0"],"前缀":["2.0"],"video":["2.0","12.0","13.28","13.29","15.1","15.2","15.7","15.10","15.11","15.12","15.15","23.0","26.0","30.2","30.36","30.39","30.40","34.0"],"另外一种是":["2.0"],"自定义事件":["2.0"],"监听事件":["2.0"],"code":["2.0","2.2","2.27","2.30","4.0","6.2","6.3","6.4","6.5","7.2","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.3","9.6","9.7","9.8","14.0","16.2","16.3","16.4","16.5","17.2","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.3","19.6","19.7","19.8","20.1","20.2","20.3","20.4","20.5","21.0","22.0","23.0","24.2","24.3","24.4","25.2","25.3","25.5","25.6","25.7","26.2","26.3","27.2","27.3","28.3","28.4","28.5","30.2","30.28","31.1","31.2","31.3","31.4","31.5","32.0","33.0","34.0","35.2","35.3","35.4","36.2","36.3","36.5","36.6","36.7","36.9","36.10","36.12","36.13","36.14","37.2","37.3","38.2","38.3","39.3","39.4","39.5","41.2","41.28"],"js":["2.0","4.0","6.5","7.2","7.3","7.5","8.2","8.3","8.5","9.3","9.7","9.8","14.0","16.5","17.2","17.3","17.5","18.2","18.3","18.5","19.3","19.7","19.8","20.3","20.4","20.5","20.7","20.8","21.0","22.0","23.0","24.4","25.4","25.15","29.2","29.3","29.4","31.3","31.4","31.5","31.7","31.8","32.0","33.0","34.0","35.4","36.4","36.15","40.2","40.3","40.4"],"当播放器首次可以播放器时触发":["2.1"],"当播放器切换地址后并可以播放时触发":["2.2"],"当播放器暂停时触发":["2.3"],"当播放器播放时触发":["2.4"],"当播放器热键被按下时触发":["2.5"],"当播放器销毁时触发":["2.6"],"当播放器获得焦点时触发":["2.7"],"当播放器失去焦点时触发":["2.8"],"当播放器被双击时触发":["2.9"],"当播放器被单击时触发":["2.10"],"当播放器加载视频发生错误时触发":["2.11"],"当播放器被鼠标移出或者移入时触发":["2.12"],"当播放器被鼠标经过时触发":["2.13"],"当播放器尺寸变化时触发":["2.14"],"当播放器出现在视口时触发":["2.15"],"在移动端":["2.16","3.18","3.19","3.20","3.22","3.23","3.24"],"当锁定的状态发生变化时触发":["2.16"],"当播放器长宽比变化时触发":["2.17"],"当播放器自动设置高度时触发":["2.18"],"当播放器自动设置尺寸时触发":["2.19"],"当播放器发生翻转时触发":["2.20"],"当播放器发生窗口全屏时触发":["2.21"],"当播放器发生网页全屏时触发":["2.22"],"当播放器进入迷你模式时触发":["2.23"],"当播放器进入画中画时触发":["2.24"],"当播放器被截图时触发":["2.25"],"当播放器发生时间跳转时触发":["2.26"],"当播放器发生字幕偏移时触发":["2.27"],"当字幕更新时触发":["2.28"],"当字幕加载时触发":["2.29"],"当字幕切换时触发":["2.30"],"当信息面板显示或隐藏时触发":["2.31"],"当自定义层显示或隐藏时触发":["2.32"],"当加载器显示或隐藏时触发":["2.33"],"当遮罩层显示或隐藏时触发":["2.34"],"当字幕层显示或隐藏时触发":["2.35"],"当右键菜单显示或隐藏时触发":["2.36"],"当控制器显示或隐藏时触发":["2.37"],"当设置面板显示或隐藏时触发":["2.38"],"当静音的状态变化时触发":["2.39"],"canplay":["2.40","12.40"],"canplaythrough":["2.41","12.41"],"complete":["2.42","12.42"],"durationchange":["2.43","12.43"],"emptied":["2.44","12.44"],"ended":["2.45","12.45"],"error":["2.46","12.46"],"loadeddata":["2.47","12.47"],"loadedmetadata":["2.48","12.48"],"pause":["2.49","12.49","13.19"],"play":["2.50","3.18","3.19","12.50","13.18","13.19","15.3","30.10"],"playing":["2.51","12.51"],"progress":["2.52","12.52","30.35"],"ratechange":["2.53","12.53"],"seeked":["2.54","12.54"],"seeking":["2.55","12.55"],"stalled":["2.56","12.56"],"suspend":["2.57","12.57"],"timeupdate":["2.58","12.58"],"volumechange":["2.59","12.59"],"waiting":["2.60","12.60"],"是否开始":["3.1"],"模式":["3.1"],"是否开启右键菜单":["3.2"],"默认开启":["3.2"],"time":["3.3","3.7","3.8","3.13","3.14","3.15","3.16","3.20","3.21","3.23","13.3","13.7","13.8","13.13","13.14","13.15","13.16","13.20","13.21","13.23","25.10","25.11","30.24"],"提示信息的显示时长":["3.3"],"单位为毫秒":["3.3","3.7","3.8","3.12","3.15","3.16","3.21"],"width":["3.4","3.5","9.2","13.4","13.5","15.30"],"设置面板的默认宽度":["3.4"],"单位为像素":["3.4","3.5","3.6","3.9"],"默认为":["3.4","3.5","3.6","3.10","3.16","3.25","3.27","3.28","3.29","3.31","3.32"],"item":["3.5","3.6","13.5","13.6"],"设置面板的设置项的默认宽度":["3.5"],"height":["3.6","13.6"],"设置面板的设置项的默认高度":["3.6"],"事件的节流时间":["3.7","3.8"],"gap":["3.9","13.9"],"view":["3.9","24.1","25.1","26.1","27.1","28.2"],"事件的边界容差距离":["3.9"],"playback":["3.10","3.11","3.12","12.51","13.10","13.11","13.12","30.45"],"max":["3.10","3.13","13.10","13.13"],"自动回放功能的最大记录数":["3.10"],"min":["3.11","13.11"],"自动回放功能的最小记录时长":["3.11"],"单位为秒":["3.11","3.26"],"timeout":["3.12","13.12"],"自动回放功能的隐藏延迟时长":["3.12"],"发生连接错误时":["3.13","3.14"],"自动连接的最大次数":["3.13"],"sleep":["3.14","13.14"],"自动连接的延迟时间":["3.14"],"hide":["3.15","13.15"],"底部控制栏的自动隐藏的延迟时间":["3.15"],"双击事件的延迟事件":["3.16"],"fullscreen":["3.17","13.17"],"在桌面端":["3.17"],"是否双击切换全屏":["3.17"],"dbclick":["3.18","13.18"],"是否双击切换播放暂停":["3.18"],"click":["3.19","10.10","13.16","13.19"],"是否单击切换播放暂停":["3.19"],"orientation":["3.20","13.20"],"自动旋屏的延迟时间":["3.20"],"loop":["3.21","13.21"],"信息面板的刷新时间":["3.21"],"forward":["3.22","3.23","13.22","13.23"],"value":["3.22","13.22"],"长按加速的速率倍数":["3.22"],"长按加速的延迟时间":["3.23"],"move":["3.24","13.24"],"ratio":["3.24","3.28","12.17","13.24","13.25","13.28"],"左右滑动进度的速率倍数":["3.24"],"step":["3.25","3.26","13.25","13.26"],"快捷键调节音量的幅度比例":["3.25"],"快捷键调节播放进度的幅度":["3.26"],"rate":["3.27","13.27"],"内置播放速率的列表":["3.27"],"内置视频长宽比的列表":["3.28"],"default":["3.28","13.4","13.5","13.6","30.1","30.2","30.3","30.4","30.5","30.6","30.7","30.8","30.9","30.10","30.11","30.12","30.13","30.14","30.15","30.16","30.17","30.18","30.19","30.20","30.21","30.22","30.23","30.24","30.25","30.26","30.27","30.28","30.29","30.30","30.31","30.32","30.33","30.34","30.35","30.36","30.37","30.38","30.39","30.40","30.41","30.42","30.43","30.44","30.45","30.46","30.47","30.48","41.1","41.2","41.3","41.4","41.5","41.6","41.7","41.8","41.9","41.10","41.11","41.12","41.13","41.14","41.15","41.16","41.17","41.18","41.19","41.20","41.21","41.22","41.23","41.24","41.25","41.26","41.27","41.28","41.29","41.30","41.31","41.32","41.33","41.34","41.35","41.36","41.37","41.38","41.39","41.40","41.41","41.42","41.43","41.44","41.45","41.46","41.47","41.48"],"内置视频翻转的列表":["3.29"],"normal":["3.29"],"horizontal":["3.29"],"vertical":["3.29"],"web":["3.30","13.30"],"in":["3.30","10.3","13.23","13.27","13.28","13.29","13.30","19.1","25.11","29.2","30.39"],"body":["3.30","13.30"],"网页全屏时":["3.30"],"version":["3.31","13.31"],"设置是否打印播放器版本":["3.31"],"raf":["3.32","13.32"],"设置是否使用":["3.32"],"requestanimationframe":["3.32"],"但你已经知道播放器的":["4.0"],"属性":["4.0","6.1","7.1","8.1","9.2","9.4","9.5","41.32","41.33","41.35","41.36"],"方法":["4.0"],"后":["4.0"],"再编写插件是非常简单的事":["4.0"],"可以在实例化的时候加载插件的函数":["4.0"],"function":["4.0","5.1","5.2","5.3","5.4","5.11","5.12","5.16","5.17","5.18","5.25","5.30","5.31","5.34","5.37","5.38","5.40","9.2","14.0","15.1","15.2","15.3","15.4","15.11","15.12","15.16","15.17","15.18","15.25","15.30","15.31","15.34","15.37","15.38","15.40","19.2","28.7","30.4","41.4"],"myplugin":["4.0"],"art":["4.0","5.11","7.2","15.11","17.2","24.4","25.15","36.15"],"console":["4.0"],"info":["4.0"],"return":["4.0"],"something":["4.0"],"type":["5.1","5.2","5.3","5.4","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.14","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.23","5.24","5.25","5.26","5.27","5.28","5.29","5.30","5.31","5.33","5.34","5.35","5.36","5.37","5.38","5.39","5.40","5.41","15.1","15.2","15.3","15.4","15.5","15.6","15.7","15.8","15.9","15.10","15.11","15.12","15.13","15.14","15.15","15.16","15.17","15.18","15.19","15.20","15.21","15.22","15.23","15.24","15.25","15.26","15.27","15.28","15.29","15.30","15.31","15.33","15.34","15.35","15.36","15.37","15.38","15.39","15.40","15.41","16.1","17.1","18.1","19.2","19.4","19.5","20.7","30.1","30.2","30.3","30.4","30.5","30.6","30.7","30.8","30.9","30.10","30.11","30.12","30.13","30.14","30.15","30.16","30.17","30.18","30.19","30.20","30.21","30.22","30.23","30.24","30.25","30.26","30.27","30.28","30.29","30.30","30.31","30.32","30.33","30.34","30.35","30.36","30.37","30.38","30.40","30.41","30.42","30.43","30.44","30.45","30.46","30.47","30.48","41.1","41.2","41.3","41.4","41.5","41.6","41.7","41.8","41.9","41.10","41.11","41.12","41.13","41.14","41.15","41.16","41.17","41.18","41.19","41.20","41.21","41.22","41.23","41.24","41.25","41.26","41.27","41.28","41.29","41.30","41.31","41.32","41.33","41.34","41.35","41.36","41.37","41.38","41.40","41.41","41.42","41.43","41.44","41.45","41.46","41.47","41.48"],"播放视频":["5.1"],"暂停视频":["5.2"],"切换视频的播放和暂停":["5.3"],"parameter":["5.4","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.14","5.19","5.20","5.21","5.22","5.23","5.24","5.27","5.28","5.29","5.31","5.32","5.33","5.41","15.4","15.5","15.6","15.7","15.8","15.9","15.10","15.11","15.12","15.13","15.14","15.19","15.20","15.21","15.22","15.23","15.24","15.27","15.28","15.29","15.31","15.32","15.33","15.41"],"boolean":["5.4","5.13","5.19","5.20","5.21","5.24","7.1","15.4","15.13","15.19","15.20","15.21","15.23","15.24","16.1","17.1","18.1","30.8","30.9","30.10","30.11","30.12","30.13","30.14","30.15","30.16","30.17","30.18","30.19","30.20","30.21","30.22","30.23","30.24","30.25","30.26","30.27","30.43","30.44","30.45","30.46","30.47","41.8","41.9","41.10","41.11","41.12","41.13","41.14","41.15","41.16","41.17","41.18","41.19","41.20","41.21","41.22","41.23","41.24","41.25","41.26","41.27","41.43","41.44","41.45","41.46","41.47"],"setter":["5.5","5.6","5.7","5.8","5.9","5.10","5.13","5.14","5.19","5.20","5.21","5.22","5.23","5.27","5.28","5.29","5.32","5.33","5.41","15.5","15.6","15.7","15.8","15.9","15.10","15.13","15.14","15.19","15.20","15.21","15.22","15.23","15.27","15.28","15.29","15.32","15.33","15.41"],"number":["5.5","5.6","5.7","5.8","5.14","5.28","13.10","13.13","15.5","15.6","15.7","15.8","15.14","15.28","29.0","30.7","41.7"],"getter":["5.8","5.9","5.13","5.14","5.15","5.19","5.20","5.21","5.22","5.23","5.24","5.26","5.27","5.28","5.29","5.32","5.33","5.35","5.36","15.8","15.9","15.13","15.14","15.15","15.19","15.20","15.21","15.22","15.23","15.24","15.26","15.27","15.28","15.29","15.32","15.33","15.35","15.36"],"string":["5.10","5.11","5.12","5.22","5.27","5.29","5.31","5.32","5.33","9.2","9.4","9.5","15.9","15.10","15.11","15.12","15.22","15.27","15.29","15.31","15.32","15.33","17.1","19.2","19.4","19.5","30.1","30.2","30.3","30.5","30.6","30.39","30.41","41.1","41.2","41.3","41.5","41.6","41.39","41.41"],"设置视频地址":["5.10","5.11"],"设置时和":["5.10","5.11"],"设置视频画质地址":["5.12"],"获取视频时长":["5.15"],"下载当前视频帧的截图":["5.16"],"获取当前视频帧的截图的":["5.17","5.18"],"base64":["5.17","15.17"],"地址":["5.17","5.18","25.4","36.4"],"blob":["5.18","15.18"],"设置和获取视频海报":["5.22"],"设置视频是否自适应尺寸":["5.25"],"获取播放器的尺寸和坐标信息":["5.26"],"当容器只有宽度":["5.30"],"该属性可以自动计算出并设置视频的高度":["5.30"],"动态获取和设置":["5.31"],"开启隔空播放":["5.34"],"视频缓存的比例":["5.35"],"范围是":["5.35","5.36"],"视频播放的比例":["5.36"],"事件的代理函数":["5.37"],"实质上代理了":["5.37"],"的查询函数":["5.38"],"element":["5.39","9.2","9.4","9.5","15.39","19.2","19.4","19.5","30.1","41.1"],"快捷返回播放器的":["5.39"],"动态获取或设置":["5.40"],"css":["5.40"],"变量":["5.40","31.7"],"array":["5.41","9.2","11.1","15.41","19.2","25.5","30.28","30.29","30.30","30.31","30.32","30.33","30.34","41.28","41.29","41.30","41.31","41.32","41.33","41.34"],"动态设置画质列表":["5.41"],"类型":["6.1","7.1","8.1","9.2","9.4","9.5","41.33","41.35","41.36"],"描述":["6.1","7.1","8.1","9.2","9.4","9.5"],"disable":["6.1","7.1","8.1","16.1","17.1","18.1"],"var":["7.2","9.3","17.2","24.4","25.15","36.15"],"new":["7.2","17.2","24.4","25.15","36.15"],"artplayer":["7.2","17.2","20.3","20.4","20.5","20.6","20.8","24.4","25.5","25.15","29.2","30.1","31.3","31.5","31.6","31.8","35.4","36.5","36.15","40.2","40.4","41.1"],"container":["7.2","15.30","17.2","24.4","25.15","36.15"],"须先打开设置面板":["9.1"],"然后自带四个内置项":["9.1"],"flip":["9.1"],"playbackrate":["9.1"],"选择列表":["9.2"],"html":["9.2","9.4","9.5","19.2","19.4","19.5","28.5","28.6","28.7","28.10","28.13","39.5","39.6","39.7","39.10","39.13","41.38"],"元素的":["9.2","9.4","9.5"],"icon":["9.2","9.4","9.5","19.2","19.5"],"元素的图标":["9.2","19.2"],"selector":["9.2","19.2"],"元素列表":["9.2","19.2"],"onselect":["9.2","19.2"],"元素点击事件":["9.2"],"列表嵌套":["9.3"],"切换按钮":["9.4"],"范围滑块":["9.5"],"properties":["10.0","11.0","14.0","15.0"],"the":["10.0","10.1","10.2","10.3","10.4","10.5","10.6","10.7","10.8","10.9","10.10","10.11","10.12","10.13","10.14","10.15","10.16","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","12.0","12.1","12.2","12.3","12.4","12.6","12.7","12.8","12.9","12.10","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.31","12.35","12.36","12.37","12.38","12.39","12.40","12.41","12.44","12.56","13.2","13.3","13.4","13.5","13.6","13.7","13.8","13.9","13.10","13.11","13.12","13.13","13.14","13.22","13.23","13.24","13.25","13.26","13.27","14.0","15.3","15.4","15.10","15.11","15.15","15.17","15.18","15.19","15.26","15.30","15.35","15.36","15.41","17.1","19.1","19.5","20.7","20.8","25.8","25.9","25.10","25.11","25.12","25.13","25.14","29.0","29.1","30.1","30.2","30.3","30.4","30.5","30.7","30.11","30.17","30.32","30.33","30.35","30.36","30.39","30.40","30.45"],"options":["10.1","30.0"],"for":["10.1","10.3","10.8","13.7","13.8","15.37"],"player":["10.1","10.2","10.3","10.4","10.6","10.7","10.8","10.9","10.10","10.11","10.12","10.13","10.14","10.15","10.16","11.1","12.0","12.1","12.2","12.3","12.4","12.6","12.7","12.8","12.9","12.10","12.12","12.14","12.15","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","14.0"],"manages":["10.2","10.3","10.4"],"all":["10.2","10.3","10.5","11.1"],"of":["10.2","10.4","10.8","10.10","10.11","10.12","10.13","11.1","11.6","13.4","13.27","13.28","13.29","15.35","15.36","15.41","20.8","29.0","30.5","30.11","30.39"],"elements":["10.2"],"which":["10.3","13.26","15.37","30.4","30.39","30.42"],"is":["10.3","10.4","10.6","10.8","10.9","10.10","10.13","10.15","12.0","12.1","12.12","14.0","20.8","25.9","30.39"],"essentially":["10.3","15.37"],"a":["10.3","10.15","11.6","12.5","12.32","12.33","12.34","15.16","15.37","15.39","25.10","30.4"],"and":["10.3","14.0","15.14","15.19","15.21","15.22","15.26","20.0"],"when":["10.3","12.1","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.30","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.30","14.0","15.30"],"using":["10.3"],"following":["10.3"],"local":["10.4"],"attribute":["10.4","15.30","19.5"],"used":["10.4","10.6","10.8","10.9","10.10","10.15","25.12","25.13","25.14","30.38","30.39","30.48"],"to":["10.4","10.6","10.9","10.15","13.1","13.2","13.19","13.23","13.31","13.32","15.11","15.38","16.1","17.1","18.1","25.12","25.13","25.14","28.7","30.10","30.15","30.17","30.19","30.26","30.32","30.38","30.39","30.45","30.46","30.48"],"cache":["10.4"],"method":["10.4","10.6","10.8","10.9","10.10","10.13","10.15","25.10","25.11","25.12"],"manage":["10.5","10.6","10.7","10.8","10.9","10.10","10.11","10.12","10.13","10.14","10.15","10.16"],"s":["10.6","10.7","10.9","10.14","10.15","10.16","12.0","14.0","19.2","19.4","19.5","30.40"],"notices":["10.7"],"there":["10.7"],"dynamically":["10.8","10.9","10.15","15.31","15.32","15.33","15.40","15.41"],"controllers":["10.9"],"right":["10.10","12.36"],"context":["10.10","30.30"],"menu":["10.10","16.0","30.30"],"features":["10.11","10.16"],"layer":["10.12","10.14"],"functionality":["10.13"],"property":["10.14","16.1","17.1","18.1","19.2","19.4"],"settings":["10.15","12.38","19.1","29.0"],"panel":["10.15","12.38","13.21","19.0","19.1","30.29"],"plugin":["10.16","14.0","24.4","25.5","28.1","35.4","36.5"],"with":["10.16","20.8","25.8","25.9","25.11","28.1"],"here":["11.0","13.0","15.0"],"returns":["11.1","11.2","11.3","11.4","11.5","11.6","11.7","11.8","11.9","11.10","11.11","11.12"],"an":["11.1","12.11","12.46"],"collection":["11.6"],"utility":["11.6"],"events":["12.0","14.0","15.37"],"are":["12.0","29.2"],"divided":["12.0"],"into":["12.0"],"two":["12.0"],"types":["12.0"],"one":["12.0"],"native":["12.0"],"prefix":["12.0"],"other":["12.0"],"custom":["12.0","12.32","30.28","30.29","30.30","30.31","30.34","30.42"],"triggered":["12.1","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.30","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39"],"switches":["12.2"],"occurs":["12.11","12.27"],"mouse":["12.13"],"on":["12.16","13.17","13.18","13.19","13.20","13.22","13.24","30.33","30.35"],"mobile":["12.16","13.20","13.22","13.24"],"aspect":["12.17"],"automatically":["12.18","20.6","30.10","30.12"],"goes":["12.21"],"enters":["12.23","12.24"],"subtitle":["12.27","12.28","12.29","30.24"],"offset":["12.27"],"updates":["12.28"],"loads":["12.29"],"subtitles":["12.30","30.36"],"switch":["12.30"],"information":["12.31","30.33"],"loader":["12.33"],"controller":["12.37"],"browser":["12.40"],"media":["12.44"],"content":["12.44"],"attributes":["13.0","25.11"],"whether":["13.1","13.2","13.17","13.18","13.19","13.31","13.32","15.25","16.1","17.1","18.1","25.9","30.10","30.14","30.15","30.17","30.19","30.26","30.32","30.43","30.44","30.45","30.46","30.47"],"start":["13.1"],"mode":["13.1","36.11"],"enable":["13.2"],"display":["13.3","30.18","30.22","30.23"],"duration":["13.3","13.11","13.12"],"throttle":["13.7","13.8"],"boundary":["13.9"],"tolerance":["13.9"],"distance":["13.9"],"maximum":["13.10","13.13"],"minimum":["13.11"],"delay":["13.12","13.14","13.15","13.16"],"auto":["13.15"],"double":["13.16"],"event":["13.16"],"desktop":["13.17"],"devices":["13.20"],"refresh":["13.21"],"milliseconds":["13.23"],"increment":["13.26"],"by":["13.26"],"list":["13.27","13.28","13.29","15.41","19.2"],"built":["13.27","13.28","13.29"],"flips":["13.29"],"setting":["13.31","13.32","15.11","15.40","15.41"],"plugins":["14.0"],"once":["14.0"],"you":["14.0","28.1","29.2"],"know":["14.0"],"methods":["14.0"],"very":["14.0"],"simple":["14.0"],"can":["14.0","15.30","25.12","28.1"],"load":["14.0"],"functions":["14.0"],"instantiated":["14.0"],"jump":["15.5"],"sets":["15.8","15.25"],"address":["15.11","15.17","15.18","30.2"],"similar":["15.11","15.38"],"quality":["15.12","27.0"],"download":["15.16"],"gets":["15.17","15.18","15.26"],"size":["15.26","30.11"],"has":["15.30"],"only":["15.30","20.8"],"this":["15.30","28.1","28.7"],"activate":["15.34"],"proportion":["15.35","15.36"],"proxies":["15.37"],"shortcut":["15.39"],"getting":["15.40"],"or":["15.40","25.8","25.9"],"description":["16.1","17.1","18.1","19.2","19.4","19.5"],"component":["17.1"],"first":["19.1"],"open":["19.1"],"selection":["19.2","30.32"],"nested":["19.3"],"lists":["19.3"],"button":["19.4"],"range":["19.5"],"slider":["19.5"],"group":["20.1","20.2","20.3","20.4","20.5","24.2","24.3","25.2","25.3","26.2","26.3","27.2","27.3","28.3","28.4","28.5","31.1","31.2","31.3","31.4","31.5","35.2","35.3","36.2","36.3","37.2","37.3","38.2","38.3","39.3","39.4","39.5"],"bash":["20.2","24.2","24.3","25.2","25.3","26.2","26.3","27.2","27.3","28.3","28.4","31.2","35.2","35.3","36.2","36.3","37.2","37.3","38.2","38.3","39.3","39.4"],"index":["20.3","24.4","28.5","28.7","28.13","31.3","35.4","39.5","39.7","39.12","39.13"],"import":["20.3","20.5","20.6","29.4","31.3","31.5","40.4"],"from":["20.3","20.5","28.7","29.4","31.5","40.4"],"const":["20.3"],"jsx":["20.5","31.5"],"useeffect":["20.5","31.5"],"useref":["20.5","31.5"],"importing":["20.6"],"will":["20.6","30.42"],"d":["20.6","31.6"],"sometimes":["20.7"],"your":["20.7"],"file":["20.7"],"may":["20.7"],"lose":["20.7"],"typescript":["20.7","31.7"],"hints":["20.7"],"browsers":["20.8"],"production":["20.8"],"build":["20.8"],"compatible":["20.8"],"https":["21.0","22.0","23.0","32.0","33.0","34.0"],"github":["21.0","22.0","23.0","32.0","33.0","34.0"],"com":["21.0","22.0","23.0","32.0","33.0","34.0"],"industry":["21.0","32.0"],"forum":["21.0","32.0"],"bilibili":["22.0","33.0"],"data":["22.0","23.0","24.4","25.5","25.7","33.0","34.0","35.4","36.5","36.7","36.9","36.10","36.14"],"dev":["23.0","34.0"],"libs":["23.0","24.4","25.5","34.0","35.4","36.5","36.7","36.10"],"ads":["24.0","24.4","35.4"],"jsdelivr":["24.3","25.3","26.3","27.3","28.4","35.3","36.3","37.3","38.3","39.4"],"uncompiled":["24.4","25.5","35.4","36.5"],"app":["24.4","25.15","36.15"],"danmuku":["25.4","25.5","25.6","36.4","36.11"],"弹幕库":["25.4","36.4"],"支持数组":["25.4","36.4"],"xml":["25.4","25.6","36.4","36.6"],"promise返回数组":["25.4","36.4"],"speed":["25.4","36.4","36.11"],"弹幕持续时间":["25.4","36.4"],"单位秒":["25.4","36.4"],"范围在":["25.4","36.4"],"opacity":["25.4","36.4","36.11"],"asynchronous":["25.7"],"call":["25.7"],"bullet":["25.8"],"comments":["25.8"],"judge":["25.9"],"current":["25.9","25.13","25.14"],"barrage":["25.9","25.11","25.14"],"hidden":["25.9"],"displayed":["25.9","25.13"],"send":["25.10"],"real":["25.10","25.11"],"danmaku":["25.10"],"message":["25.10"],"through":["25.10"],"change":["25.11"],"configuration":["25.11","30.42"],"supported":["25.11"],"be":["25.12","30.42"],"reload":["25.12"],"danmu":["25.12"],"assets":["25.15","36.15"],"sample":["25.15","36.15"],"control":["28.0","30.31"],"doctype":["28.5","39.5"],"push":["28.7","28.12"],"messages":["28.7","28.8","28.12"],"iframe":["28.7","28.13","39.7","39.13"],"receive":["28.8"],"after":["28.9"],"最常遇到的问题是":["28.13","39.13"],"播放器在":["28.13","39.13"],"里进行网页全屏":["28.13","39.13"],"但在":["28.13","39.13"],"danger":["29.0","40.0"],"given":["29.0"],"increasing":["29.0"],"bundled":["29.0"],"languages":["29.1","29.2"],"language":["29.2","29.3","29.4","30.41","41.41"],"files":["29.2"],"before":["29.2"],"packaging":["29.2"],"located":["29.2"],"src":["29.2","40.2"],"i18n":["29.2","40.2"],"zhtw":["29.4","40.4"],"where":["30.1"],"source":["30.2"],"unique":["30.3"],"undefined":["30.4","41.4"],"constructor":["30.4"],"accepts":["30.4"],"as":["30.4"],"second":["30.4"],"argument":["30.4"],"f00":["30.6","41.6"],"false":["30.8","30.9","30.10","30.11","30.12","30.13","30.14","30.15","30.16","30.17","30.18","30.20","30.22","30.23","30.24","30.25","30.26","30.37","30.43","30.44","30.45","30.46","30.47","41.10","41.11","41.12","41.14","41.15","41.16","41.17","41.24","41.26","41.43","41.45","41.47"],"use":["30.8","30.19","30.26","30.45"],"displays":["30.16"],"true":["30.19","30.21","30.27","41.19"],"hotkeys":["30.19"],"if":["30.21"],"mini":["30.25"],"ssr":["30.26","41.26"],"server":["30.26"],"initializes":["30.28","30.29","30.31"],"initialize":["30.30","30.34"],"bottom":["30.31"],"object":["30.35","30.36","30.37","30.38","30.40","30.42","30.48","41.35","41.36","41.37","41.38","41.40","41.42","41.48"],"bar":["30.35"],"supporting":["30.36"],"formats":["30.36"],"vtt":["30.36","41.36"],"srt":["30.36","41.36"],"controls":["30.37","41.37"],"preload":["30.37"],"replace":["30.38"],"specify":["30.39"],"format":["30.39"],"conjunction":["30.39"],"matches":["30.40"],"navigator":["30.41","41.41"],"deeply":["30.42"],"merged":["30.42"],"automatic":["30.45"],"导入":["31.6"],"时会自动导入的":["31.6"],"ts":["31.6"],"有时你的":["31.7"],"文件会丢失":["31.7"],"的类型提示":["31.7"],"这时候你可以手动导入类型":["31.7"],"生产构建的":["31.8"],"只兼容最新一个主版本的":["31.8"],"chrome":["31.8"],"last":["31.8"],"查看完整演示":["35.1","36.1","37.1","38.1","39.2"],"通过方法":["36.8","36.10","36.11"],"进行隐藏或者显示弹幕":["36.8"],"通过属性":["36.9"],"判断当前弹幕是隐藏或者显示":["36.9"],"发送一条实时弹幕":["36.10"],"实时改变弹幕配置":["36.11"],"支持属性有":["36.11"],"fontsize":["36.11"],"color":["36.11"],"margin":["36.11"],"通过":["36.12"],"方法可以重载弹幕源":["36.12"],"或者切换新弹幕":["36.12"],"用于清空当前显示的弹幕":["36.13"],"用于获取当前弹幕配置":["36.14"],"画质":["37.0","38.0"],"控制":["39.0"],"通过该插件":["39.1"],"你可以轻松在":["39.1"],"从":["39.7","40.0"],"将消息推送到":["39.7","39.12"],"该函数将在":["39.7"],"在":["39.8"],"销毁后":["39.9"],"注入脚本":["39.11"],"鉴于捆绑的多国语言越来越多":["40.0"],"默认语言有":["40.1"],"en":["40.1"],"zh":["40.1"],"打包前的语言文件存放于":["40.2"],"欢迎来添加你的语言":["40.2"],"打包后的语言文件存放于":["40.2"],"dist":["40.2"],"播放器挂载的":["41.1"],"视频源地址":["41.2"],"播放器的唯一标识":["41.3"],"构造函数接受一个函数作为第二个参数":["41.4"],"播放器初始化成功且视频可以播放时触发":["41.4"],"ready":["41.4"],"视频的海报":["41.5"],"是否自动播放":["41.10"],"是否使用快捷键":["41.19"],"字幕时间偏移":["41.24"],"是否使用":["41.26"],"初始化自定义的":["41.28","41.29","41.30","41.34"],"层":["41.28"],"设置面板":["41.29"],"右键菜单":["41.30"],"初始化自定义的底部":["41.31"],"控制栏":["41.31"],"是否在底部控制栏里显示":["41.32"],"画质选择":["41.32"],"列表":["41.32"],"在进度条上显示":["41.33"],"高亮信息":["41.33"],"插件":["41.34"],"在进度条上设置":["41.35"],"预览图":["41.35"],"设置视频的字幕":["41.36"],"支持字幕格式":["41.36"],"ass":["41.36"],"用于替换默认图标":["41.38"],"支持":["41.38"],"用于指明视频的格式":["41.39"],"需要配合":["41.39"],"customtype":["41.39"],"通过视频的":["41.40"],"自定义":["41.42"],"配置":["41.42"],"该配置会和自带的":["41.42"],"进行深度合并":["41.42"],"新增你的语言":["41.42"],"是否使用自动":["41.45"],"回放功能":["41.45"],"用于改变内置的css变量":["41.48"]},{"0":["3.24","3.25","5.8","13.27","23.0","25.4","29.0","34.0","36.4","40.0"],"1":["3.25","3.27","5.8","5.35","5.36","13.27","20.8","22.0","29.0","31.7","33.0","40.0"],"2":["3.27","21.0","22.0","31.6","32.0","33.0"],"3":["3.22","13.28","23.0","30.2","31.7","34.0","41.2"],"4":["6.2","13.28","16.2","21.0","30.45","32.0","41.42"],"5":["3.11","3.13","3.24","3.26","13.27","21.0","29.0","30.28","30.29","32.0","40.0","41.28","41.29"],"6":["2.0","6.3","7.3","12.0","16.3","17.3","22.0","33.0"],"7":["15.15","41.7"],"8":["23.0","34.0"],"9":["3.28","9.6","13.28","19.6","29.3","41.42"],"10":["2.2","3.10","7.2","17.2"],"11":["2.27"],"13":["2.30","6.2","6.3","16.2","16.3"],"14":["9.6","19.6"],"16":["3.28","13.28"],"19":["5.41"],"21":["6.4","6.5","7.3","7.4","8.4","16.4","16.5","17.3","17.4","18.4"],"22":["8.2","8.3","9.7","18.2","18.3","19.7"],"23":["30.28","41.28"],"24":["6.5","16.5"],"25":["3.27","25.4","36.4"],"29":["5.41","8.5","18.5"],"34":["30.29","41.29"],"35":["3.6"],"40":["7.5","17.5"],"50":["3.9"],"75":["13.27"],"200":["3.5","3.7","3.8","3.20"],"300":["3.16"],"1000":["3.14","3.21","3.23"],"2000":["3.3"],"3000":["3.12","3.15"],"code":["0.1","0.2","0.4","0.5","0.6","0.7","0.12","0.13","0.14","0.15","0.16","1.1","1.6","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.28","2.29","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.2","3.4","3.5","3.6","3.16","3.28","3.29","5.1","5.2","5.3","5.11","5.13","5.15","5.16","5.19","5.20","5.21","5.22","5.24","5.25","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.40","5.41","9.2","10.1","10.2","12.0","12.20","12.28","12.29","12.30","13.19","15.1","15.2","15.11","15.15","15.19","15.34","15.40","15.41","19.2","25.8","25.9","25.10","25.12","25.13","25.14","30.1","30.7","30.10","30.19","30.29","30.30","30.31","30.34","30.42","30.45","36.8","36.11","40.2","41.1","41.4","41.10","41.19","41.29","41.30","41.31","41.34","41.38","41.42","41.45","41.48"],"js":["0.2","0.4","0.13","0.16","2.2","2.18","2.23","2.27","2.28","2.29","2.30","5.41","6.2","6.3","6.4","7.4","8.4","9.2","9.6","10.2","12.0","12.30","15.15","15.41","16.2","16.3","16.4","17.4","18.4","19.2","19.6","25.5","25.7","25.10","30.1","30.2","30.19","30.28","30.29","30.45","36.5","36.7","36.9","36.10","36.12","39.7","39.12","40.1","41.2","41.4","41.28","41.29","41.31","41.42"],"var":["0.2","0.4","2.0","2.30","4.0","5.41","6.2","6.3","6.4","6.5","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.2","9.6","9.7","9.8","10.2","12.0","14.0","15.15","16.2","16.3","16.4","16.5","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.2","19.3","19.6","19.7","19.8","25.5","29.3","30.2","30.28","30.29","35.4","36.5","39.7","40.3","40.4","41.2","41.28","41.29"],"hover":["0.3"],"方法用于代理自定义的":["0.3"],"loadimg":["0.3"],"方法用于监听图片的":["0.3"],"load":["0.3"],"加载事件":["0.3"],"div":["0.3","0.6","0.8","0.9","0.10","0.11","0.12","0.14","0.15","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.11","1.12","3.1","3.3","3.4","3.5","3.6","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","3.16","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.28","3.29","3.31","3.32","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.14","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.23","5.24","5.25","5.27","5.28","5.29","5.31","5.32","5.33","5.37","5.39","5.40","9.1","9.2","10.2","10.5","11.6","12.0","12.3","12.4","12.6","12.7","12.8","12.9","12.10","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.33","12.37","12.38","12.39","13.19","13.29","15.1","15.2","15.7","15.11","15.19","15.21","15.26","15.30","15.34","15.40","15.41","19.2","20.4","25.8","25.9","25.12","25.13","25.14","30.1","30.7","30.10","30.19","30.30","30.31","30.34","30.38","30.42","30.45","31.4","36.11","41.1","41.3","41.4","41.5","41.7","41.8","41.9","41.10","41.13","41.17","41.19","41.21","41.25","41.34","41.38","41.42","41.44","41.45","41.48"],"classname":["0.4","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.13","0.14","0.15","1.1","1.2","1.3","1.4","1.5","1.6","1.7","1.8","1.9","1.10","1.12","3.1","3.2","3.3","3.4","3.5","3.6","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.15","3.16","3.17","3.18","3.19","3.21","3.22","3.25","3.26","3.28","3.29","3.31","3.32","5.1","5.2","5.3","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.23","5.24","5.25","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.39","5.40","9.1","9.2","10.1","10.2","10.5","12.0","12.3","12.4","12.6","12.7","12.8","12.9","12.10","12.14","12.16","12.18","12.20","12.21","12.22","12.23","12.25","12.26","12.27","12.28","12.29","12.39","13.19","15.1","15.2","15.11","15.19","15.21","15.26","15.30","15.34","15.40","15.41","19.2","25.8","25.9","25.10","25.12","25.13","25.14","30.1","30.7","30.10","30.19","30.30","30.31","30.34","30.38","30.42","30.45","36.8","36.11","41.1","41.3","41.4","41.5","41.7","41.9","41.10","41.13","41.17","41.19","41.30","41.31","41.34","41.38","41.42","41.44","41.45","41.48"],"run":["0.4","0.5","0.6","0.7","0.10","0.11","0.12","0.13","0.14","0.15","0.16","1.1","1.6","2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.13","2.14","2.15","2.16","2.19","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.39","3.2","3.4","3.5","3.6","3.7","3.8","3.9","3.10","3.16","3.21","3.28","3.29","3.31","5.1","5.2","5.3","5.7","5.9","5.11","5.13","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.24","5.25","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.40","9.1","9.2","10.1","10.2","10.5","12.0","12.6","12.7","12.8","12.10","12.20","12.23","12.27","12.28","12.29","12.30","13.19","15.1","15.2","15.11","15.15","15.19","15.21","15.30","15.34","15.40","15.41","19.2","25.8","25.9","25.10","25.12","25.13","25.14","28.7","30.1","30.7","30.10","30.19","30.29","30.30","30.31","30.34","30.42","30.45","36.8","36.11","41.1","41.4","41.5","41.7","41.10","41.19","41.30","41.31","41.34","41.38","41.42","41.45","41.48"],"art":["0.4","2.0","5.10","5.12","5.41","6.2","6.3","6.4","6.5","7.3","7.4","7.5","8.2","8.3","8.5","9.2","9.3","9.6","9.7","9.8","12.0","14.0","15.10","15.12","15.15","16.2","16.3","16.4","16.5","17.3","17.4","17.5","18.2","18.3","18.5","19.2","19.3","19.6","19.7","19.8","20.3","20.5","25.5","29.3","30.2","31.3","31.7","35.4","36.5","40.3","41.2"],"new":["0.4","2.0","4.0","6.2","6.3","6.4","6.5","7.3","7.4","7.5","8.3","9.2","9.3","9.6","9.7","9.8","12.0","14.0","16.2","16.3","16.4","16.5","17.3","17.4","17.5","18.3","19.2","19.3","19.6","19.7","19.8","20.3","20.5","25.5","25.12","30.2","31.3","35.4","40.3","41.2"],"artplayer":["0.4","2.0","4.0","6.2","6.3","6.4","6.5","7.3","7.4","7.5","9.2","9.3","9.7","9.8","12.0","14.0","16.2","16.3","16.4","16.5","17.3","17.4","17.5","19.2","19.3","19.7","19.8","25.6","25.7","25.10","26.2","27.2","28.5","29.4","30.2","31.4","31.7","36.6","36.7","36.8","36.9","36.10","36.12","36.13","36.14","37.2","38.2","39.5","41.2"],"container":["0.4","2.0","4.0","6.4","6.5","7.3","7.5","9.2","9.3","9.7","9.8","12.0","14.0","16.4","16.5","17.3","17.5","19.2","19.3","19.7","19.8","20.3","30.2","30.11","31.3","35.4","41.11"],"方法用于更新":["0.6"],"对象":["0.6"],"方法用于动态更新层":["0.8"],"show":["0.8","0.9","0.10","0.15","10.7","30.14","30.15"],"属性用于设置是否显示全部层":["0.8"],"toggle":["0.8","0.9","0.10","0.15","13.18","30.18"],"方法用于切换是否显示全部层":["0.8"],"方法用于动态更新控制器":["0.9"],"属性用于设置是否显示全部控制器":["0.9"],"方法用于切换是否显示全部控制器":["0.9"],"属性用于设置是否显示全部菜单":["0.10"],"方法用于切换是否显示全部菜单":["0.10"],"switch":["0.11","9.4","13.17","19.4","25.12","30.20"],"方法设置当前字幕地址和选项":["0.11"],"属性用于切换是否显示加载层":["0.12"],"属性用于切换是否显示遮罩层":["0.14"],"属性用于设置是否显示全部设置项":["0.15"],"方法用于切换是否显示全部设置项":["0.15"],"字符串":["1.11"],"app":["2.0","4.0","7.2","7.5","9.2","9.3","9.7","9.8","12.0","14.0","17.2","17.5","19.3","19.7","19.8","20.3","30.2","35.4"],"url":["2.0","4.0","5.10","7.2","7.5","9.3","9.8","12.0","14.0","15.10","15.11","17.2","17.5","19.3","19.8","20.3","24.4","30.35","30.36","35.4","41.35","41.36"],"assets":["2.0","4.0","7.2","8.2","8.3","8.4","8.5","9.3","9.8","12.0","14.0","17.2","18.2","18.3","18.4","18.5","19.3","19.8","24.4","30.2","30.28","35.4","41.28"],"sample":["2.0","4.0","7.2","8.2","8.3","8.4","8.5","9.3","9.8","14.0","17.2","18.2","18.3","18.4","18.5","19.3","19.8","24.4","30.2","30.28","35.4","41.28"],"mp4":["2.0","4.0","7.2","14.0","17.2","24.4","25.15","36.15"],"on":["2.0","4.0","12.5","14.0","30.21","30.22","30.23","30.46"],"canplay":["2.0"],"浏览器可以播放媒体文件了":["2.40"],"浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束":["2.41"],"offlineaudiocontext":["2.42","12.42"],"duration":["2.43"],"媒体内容变为空":["2.44"],"例如":["2.44"],"视频停止播放":["2.45"],"获取媒体数据时出错":["2.46"],"media":["2.47","12.40","12.57"],"已加载元数据":["2.48"],"播放已暂停":["2.49"],"播放已开始":["2.50"],"由于缺乏数据而暂停或延迟后":["2.51"],"在浏览器加载资源时周期性触发":["2.52"],"播放速率发生变化":["2.53"],"跳帧":["2.54","2.55"],"用户代理":["2.56"],"媒体数据加载已暂停":["2.57"],"currenttime":["2.58"],"音量发生变化":["2.59"],"由于暂时缺少数据":["2.60"],"可以打印出视频全部的内置事件":["3.1"],"默认关闭":["3.1"],"默认为":["3.3","3.7","3.8","3.9","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.26","3.30","5.4"],"单位为毫秒":["3.14","3.20","3.23"],"true":["3.17","3.18","3.31","5.4","24.4","25.15","36.15","41.21","41.27"],"false":["3.19","3.30","3.32","13.19","13.32","41.8","41.9","41.13","41.18","41.20","41.22","41.23","41.25","41.37","41.44","41.46"],"是否把播放器挂在在":["3.30"],"元素下":["3.30"],"目前主要用于进度条的平滑效果":["3.32"],"dosomething":["4.0","14.0"],"video":["4.0","5.31","5.35","5.36","7.2","9.3","9.8","14.0","15.3","15.6","15.8","15.9","15.13","15.14","15.16","15.17","15.18","15.22","15.24","15.25","15.30","15.31","15.32","15.35","15.36","17.2","19.3","19.8","20.3","24.4","25.15","30.4","30.5","30.14","30.16","30.37","36.15","41.40"],"plugins":["4.0","24.4","25.15","36.15"],"ready":["4.0","12.51","14.0","30.4"],"可以在实例化之后再加载插件的函数":["4.0"],"销毁播放器":["5.4"],"接受一个参数表示是否销毁后同时移除播放器的":["5.4"],"html":["5.4","24.4","28.12","30.38","39.1","39.8","39.12","41.26","41.32"],"视频时间跳转":["5.5"],"单位秒":["5.5","5.6","5.7","41.33"],"视频时间快进":["5.6"],"视频时间快退":["5.7"],"设置和获取视频音量":["5.8"],"范围在":["5.8","41.24"],"string":["5.9","6.1","7.1","8.1","11.11","16.1","18.1","30.35","30.36","41.32","41.33","41.35","41.36"],"设置和获取视频地址":["5.9"],"类似":["5.10","5.11","5.12","5.14","5.38"],"但会执行一些优化操作":["5.10","5.11"],"switchurl":["5.12","15.12"],"但会带上之前的播放进度":["5.12"],"设置和获取视频是否静音":["5.13"],"设置和获取视频当前时间":["5.14"],"设置时间时和":["5.14"],"seek":["5.14"],"但它不会触发额外的事件":["5.14"],"返回的是一个":["5.17","5.18"],"promise":["5.17","5.18"],"设置和获取播放器窗口全屏":["5.19"],"设置和获取播放器网页全屏":["5.20"],"设置和获取播放器画中画模式":["5.21"],"只有在视频播放前才能看到海报效果":["5.22"],"boolean":["5.23","6.1","8.1","9.4","19.4","41.32"],"设置和获取播放器迷你模式":["5.23"],"获取视频是否正在播放中":["5.24"],"设置和获取播放器翻转":["5.27"],"支持":["5.27"],"normal":["5.27","13.29"],"horizontal":["5.27","13.29"],"vertical":["5.27","13.29"],"设置和获取播放器播放速度":["5.28"],"设置和获取播放器长宽比":["5.29"],"元素的属性":["5.31"],"动态获取和设置视频类型":["5.32"],"动态获取和设置播放器主题颜色":["5.33"],"常配合":["5.35","5.36"],"timeupdate":["5.35","5.36"],"事件使用":["5.35","5.36"],"和":["5.37","41.6","41.14","41.15","41.16"],"removeeventlistener":["5.37","15.37"],"当使用":["5.37"],"来处理事件":["5.37"],"播放器销毁时也会自动销毁该事件":["5.37"],"document":["5.38","15.38"],"queryselector":["5.38","15.38"],"但被查询的对象局限于当前播放器内":["5.38"],"可以避免同类名的错误":["5.38"],"元素":["5.39"],"是否禁用组件":["6.1","7.1","8.1"],"name":["6.1","7.1","7.2","8.1","14.0","16.1","17.2","18.1","30.36","41.36"],"组件唯一名称":["7.1"],"用于标记类名":["7.1"],"index":["7.1","7.2","17.1","17.2","25.5","25.7","25.10","28.9","28.12","36.5","36.7","36.9","36.10","36.12","36.14","39.1","39.8","39.9"],"controls":["7.2","17.2"],"your":["7.2","17.2","29.2","30.42"],"button":["7.2","17.2","30.17","30.18","30.22","30.23","30.43","30.47"],"img":["8.2","8.3","8.4","8.5","18.2","18.3","18.4","18.5","30.28","41.28"],"layer":["8.2","8.3","8.4","8.5","12.34","12.35","18.2","18.3","18.4","18.5","30.28"],"png":["8.2","8.3","8.5","18.2","18.3","18.5"],"aspectratio":["9.1"],"subtitleoffset":["9.1"],"number":["9.2","17.1","19.2","30.33","30.35","41.33","41.35"],"列表宽度":["9.2","19.2"],"tooltip":["9.2","9.4","9.5","19.2"],"提示文本":["9.2","9.5","19.2"],"元素的图标":["9.4","9.5"],"按钮默认状态":["9.4"],"onswitch":["9.4"],"function":["9.4","9.5","11.9","11.10","19.5","20.5","30.44","31.5"],"按钮切换事件":["9.4"],"range":["9.5","30.24"],"array":["9.5","19.5"],"默认状态数组":["9.5"],"onrange":["9.5","19.5"],"完成时触发的事件":["9.5"],"onchange":["9.5"],"变化时触发的事件":["9.5"],"here":["10.0"],"methods":["10.3","25.8"],"to":["10.3","10.7","10.10","10.12","10.13","10.14","10.16","12.0","12.1","12.2","13.0","13.4","13.17","13.18","13.29","13.30","15.5","15.10","15.12","15.37","15.39","20.3","28.12","29.2","30.4","30.9","30.13","30.14","30.27","30.40","30.43","30.44","30.47"],"handle":["10.3","15.37"],"event":["10.3","13.7","13.8","13.9","15.37","19.5"],"will":["10.3","15.11","15.37","28.7","30.8","30.11","30.17"],"also":["10.3","20.6","28.7"],"be":["10.3","15.11","28.7"],"automatically":["10.3","12.19","15.30","15.37"],"destroyed":["10.3","12.6"],"method":["10.3","10.16"],"get":["10.4","15.13","15.20","15.23","15.27","15.28","15.29","15.32","15.33"],"del":["10.4"],"of":["10.5","10.6","11.2","11.3","11.4","11.5","12.17","13.3","13.5","13.6","13.10","13.13","13.22","13.24","13.25","15.3","15.14","15.16","15.17","15.18","15.26","15.28","15.29","15.30","15.31","16.1","17.1","18.1","30.3","30.7","30.15"],"player":["10.5","11.6","11.12","12.5","12.11","12.13","12.17","12.27","13.30","13.31","15.4","15.19","15.20","15.21","15.23","15.26","15.27","15.33","20.5","28.1","30.1","30.3","30.4","30.6","30.7","30.11","30.46","31.5"],"retrieve":["10.6","15.9"],"value":["10.6"],"update":["10.6","10.8","10.9","10.15"],"only":["10.7","10.16","15.22","30.5","30.25"],"one":["10.7","10.16"],"property":["10.7","10.11","10.12","11.1","25.9","30.32","30.33","30.35","30.36"],"used":["10.7","10.12","10.13","10.14","28.7","30.6"],"display":["10.7","10.12","10.14","30.41","30.43","30.47"],"adding":["10.8"],"remove":["10.8","10.9","10.10","10.13","10.15"],"removing":["10.8"],"dynamically":["10.10","10.16"],"items":["10.10","13.5","13.6"],"sets":["10.11","12.18","12.19"],"and":["10.11","12.2","15.3","15.8","15.9","15.13","15.20","15.23","15.27","15.28","15.29","15.30","15.31","15.32","15.33","15.37","19.1","25.8","28.7","30.4","30.17","30.38"],"returns":["10.11"],"current":["10.11","15.14","15.16","15.17","15.18"],"address":["10.11","12.2","15.9","15.10","15.12"],"style":["10.11"],"is":["10.12","10.14","12.2","12.3","12.5","12.6","12.9","12.10","12.11","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.51","13.19","13.23","13.26","13.28","13.32","15.10","15.13","15.22","15.24","15.35","30.4","30.24"],"set":["10.12","10.14","15.9","15.23","15.30","15.31","15.32","15.33"],"whether":["10.12","10.14","13.30","15.4","15.13","15.24","30.9","30.13","30.27"],"a":["10.13","12.25","12.54","12.55","15.4","15.5","24.4","28.11","30.40","30.43"],"item":["10.15"],"add":["10.16","29.2","30.42","30.44"],"refer":["11.0","13.0"],"you":["11.1","20.6","20.7","20.8","30.26"],"can":["11.1","12.40","13.1","20.6","20.7","28.7"],"use":["11.1","30.27"],"this":["11.1","20.7"],"when":["11.1","13.13","13.14","13.22","13.23","15.37","30.4","30.5","30.12","30.25"],"information":["11.2","15.26"],"environment":["11.3"],"variables":["11.3","15.40","20.7","30.48"],"time":["11.4","12.26","15.5","15.6","15.7","15.14","30.33","41.33"],"default":["11.5","13.16","13.19","13.21","13.23","13.27","13.28","13.32","19.4","19.5","20.5","31.5"],"configuration":["11.5","25.14"],"functions":["11.6"],"for":["11.6","11.7","11.8","11.10","12.1","12.44","13.9","13.10","13.11","13.12","13.14","13.15","13.20","17.1","20.8","30.18"],"the":["11.6","12.5","12.11","12.45","12.47","12.53","12.58","13.0","13.15","13.20","13.30","13.31","13.32","15.6","15.8","15.9","15.13","15.14","15.16","15.20","15.21","15.22","15.23","15.24","15.25","15.27","15.28","15.29","15.31","15.32","15.33","15.37","15.38","15.39","16.1","18.1","26.1","27.1","28.1","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.24","30.42","30.46","30.47"],"validation":["11.7","11.9"],"constructor":["11.8"],"tool":["11.10"],"required":["11.11"],"s":["11.12","15.33","24.4"],"listening":["12.0"],"able":["12.1","12.2"],"play":["12.1","12.2","12.40","30.4"],"paused":["12.3"],"starts":["12.4"],"playing":["12.4"],"pressed":["12.5"],"gains":["12.7"],"loses":["12.8"],"focus":["12.8"],"double":["12.9","13.23"],"clicked":["12.9","12.10"],"while":["12.11"],"loading":["12.11"],"hovered":["12.12"],"or":["12.12","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","25.12"],"unhovered":["12.12"],"by":["12.12","13.27","30.9","30.11","30.39"],"moves":["12.13"],"over":["12.13"],"size":["12.14","12.19"],"changes":["12.14","12.16","12.17","12.39"],"appears":["12.15","30.5","30.25"],"in":["12.15","12.24","12.26","12.27","13.3","13.4","13.5","13.6","13.7","13.8","13.9","13.11","13.16","13.21","15.5","15.7","15.21","20.7","30.17","30.20","30.32","30.42","30.48"],"viewport":["12.15"],"locked":["12.16"],"state":["12.16","12.39","15.3","19.4","19.5"],"height":["12.18","15.30"],"flips":["12.20"],"into":["12.21"],"full":["12.21","24.1","25.1","28.2"],"screen":["12.21"],"enters":["12.22"],"web":["12.22","15.20","30.23","30.46"],"fullscreen":["12.22","24.4","30.23"],"mode":["12.23","12.24","15.21","25.4","25.11","30.8","30.12","30.26","30.27","36.4"],"picture":["12.24","15.21","30.20"],"takes":["12.25"],"jumps":["12.26"],"panel":["12.31","13.4","13.5","13.6"],"shown":["12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38"],"hidden":["12.31","12.32","12.33","12.34","12.35","12.37","12.38"],"click":["12.36","13.2"],"menu":["12.36","13.2"],"browser":["12.41"],"estimates":["12.41"],"triggered":["12.43","19.5","30.4"],"becomes":["12.44"],"empty":["12.44"],"example":["12.44"],"occurred":["12.46"],"metadata":["12.48","30.37","41.37"],"playback":["12.49","12.50","12.60","13.26","15.28","30.15"],"periodically":["12.52"],"user":["12.56"],"agent":["12.56"],"volume":["12.59"],"which":["13.1","15.8","15.10","30.5","30.8"],"print":["13.1","13.31"],"out":["13.1"],"all":["13.1","21.0","32.0"],"built":["13.1","30.42","30.48"],"right":["13.2"],"context":["13.2","30.17"],"notification":["13.3"],"message":["13.3"],"settings":["13.4","13.5","13.6"],"pixels":["13.4","13.9"],"defaults":["13.4","13.7","13.8","13.29"],"milliseconds":["13.7","13.8","13.16","13.21"],"view":["13.9"],"records":["13.10"],"automatic":["13.10","13.13","13.14"],"feature":["13.11","13.12","30.14","30.15","30.16","30.45"],"hiding":["13.12"],"reconnection":["13.13","13.14"],"attempts":["13.13"],"attempt":["13.14"],"bottom":["13.15","30.32"],"measured":["13.16"],"pause":["13.18","15.3"],"single":["13.19"],"delay":["13.20"],"rotation":["13.20"],"unit":["13.21"],"multiplier":["13.22"],"rate":["13.22"],"speed":["13.22","13.24","15.28","25.11","30.15"],"tapped":["13.23"],"sliding":["13.24"],"adjusting":["13.25"],"with":["13.25","19.1","30.39","30.42"],"shortcuts":["13.25"],"progress":["13.26","30.25","30.33"],"adjusted":["13.26"],"via":["13.26"],"speeds":["13.27"],"ratios":["13.28"],"mount":["13.30","30.26"],"requestanimationframe":["13.32"],"currently":["13.32","15.24","30.3","30.6","30.41"],"myplugin":["14.0"],"console":["14.0"],"info":["14.0"],"return":["14.0","15.39"],"something":["14.0"],"accepts":["15.4"],"indicating":["15.4"],"specific":["15.5"],"fast":["15.6","30.44"],"rewind":["15.7"],"seconds":["15.7"],"gets":["15.8"],"ranges":["15.8"],"similar":["15.10","15.12"],"but":["15.11","15.12","15.38","20.6"],"some":["15.11"],"optimization":["15.11"],"operations":["15.11"],"executed":["15.11"],"it":["15.12","19.1","24.4","30.16","30.17"],"setting":["15.14","25.15","36.15"],"screenshot":["15.17","15.18"],"window":["15.19","30.22"],"page":["15.20"],"effect":["15.22"],"visible":["15.22"],"should":["15.25"],"auto":["15.25"],"adjust":["15.25"],"position":["15.26"],"supports":["15.27","30.38","30.41"],"aspect":["15.29","30.16"],"ratio":["15.29","30.16"],"calculate":["15.30"],"attributes":["15.31","30.37"],"that":["15.35","15.36"],"cached":["15.35"],"ranging":["15.35","15.36"],"from":["15.35","15.36","28.8","29.0","31.3","31.6"],"has":["15.36"],"been":["15.36"],"using":["15.37"],"object":["15.38"],"being":["15.38"],"queried":["15.38"],"css":["15.40","30.48"],"qualities":["15.41"],"component":["16.1","18.1"],"unique":["16.1","17.1","18.1"],"class":["17.1"],"identification":["17.1"],"then":["19.1"],"comes":["19.1"],"four":["19.1"],"元素点击事件":["19.2"],"width":["19.2"],"icon":["19.4"],"upon":["19.5"],"usage":["20.0"],"bash":["20.1","31.1"],"npm":["20.1","24.2","25.2","26.2","27.2","28.3","31.1","35.2","36.2","37.2","38.2","39.3"],"jsdelivr":["20.2","31.2"],"net":["20.2","24.3","25.3","26.3","27.3","28.4","31.2","35.3","36.3","37.3","38.3","39.4"],"https":["20.2","24.3","25.3","26.3","27.3","28.4","31.2","35.3","36.3","37.3","38.3","39.4"],"path":["20.3"],"template":["20.4","31.4"],"ref":["20.4"],"artref":["20.4","20.5","31.5"],"export":["20.5","31.5"],"option":["20.5","31.5"],"getinstance":["20.5","31.5"],"rest":["20.5","31.5"],"const":["20.5","31.3","31.5"],"ts":["20.6","41.39"],"separately":["20.6"],"case":["20.7"],"manually":["20.7"],"import":["20.7","31.6","31.7"],"types":["20.7"],"latest":["20.8"],"major":["20.8"],"version":["20.8","29.0","31.8"],"chrome":["20.8"],"last":["20.8"],"data":["21.0","25.6","25.8","25.9","25.10","25.12","25.13","25.14","32.0","36.6","36.8","36.11","36.12","36.13"],"libs":["21.0","22.0","25.6","25.7","25.9","25.10","25.13","25.14","32.0","33.0","36.6","36.8","36.9","36.11","36.12","36.13","36.14"],"cdnjs":["21.0","22.0","23.0","32.0","33.0","34.0"],"cloudflare":["21.0","22.0","23.0","32.0","33.0","34.0"],"ajax":["21.0","22.0","23.0","32.0","33.0","34.0"],"dashjs":["21.0","32.0"],"beta":["23.0","34.0"],"min":["23.0","34.0"],"install":["24.2","25.2","26.2","27.2","28.3","35.2","36.2","37.2","38.2","39.3"],"autosize":["24.4"],"fullscreenweb":["24.4","28.13","39.13"],"artplayerpluginads":["24.4"],"ad":["24.4"],"ignored":["24.4"],"if":["24.4","30.26"],"弹幕透明度":["25.4","36.4"],"fontsize":["25.4","25.11","36.4"],"字体大小":["25.4","36.4"],"支持数字和百分比":["25.4","36.4"],"color":["25.4","25.11","30.6","36.4"],"ffffff":["25.4","36.4"],"默认字体颜色":["25.4","36.4"],"默认模式":["25.4","36.4"],"uncompiled":["25.6","25.7","25.9","25.10","36.6","36.7","36.8","36.9","36.10","36.11","36.12","36.13","36.14"],"plugin":["25.6","25.7","25.10","36.6","36.7","36.8","36.9","36.10","36.12","36.13","36.14"],"danmuku":["25.7","25.10","25.11","25.15","36.5","36.7","36.9","36.10","36.12","36.13","36.14","36.15"],"include":["25.11"],"opacity":["25.11"],"margin":["25.11"],"antioverlap":["25.11","36.11"],"synchronousplayback":["25.11","36.11"],"filter":["25.11","36.11"],"locktime":["25.11","36.11"],"beforeemit":["25.11","36.11"],"source":["25.12"],"barrages":["25.13"],"artplayerplugindanmuku":["25.15","36.15"],"xml":["25.15","36.15"],"quality":["26.0"],"easily":["28.1"],"control":["28.1","30.32"],"inside":["28.1","28.7"],"head":["28.5","39.5"],"title":["28.5","39.5"],"meta":["28.5","39.5"],"interface":["28.6","28.10"],"iframe":["28.8","39.12"],"destruction":["28.9"],"warning":["28.10","39.10"],"script":["28.11"],"是不生效的":["28.13","39.13"],"这时候只要监听":["28.13","39.13"],"里的":["28.13","39.13"],"事件并通知到":["28.13","39.13"],"multilingual":["29.0"],"packs":["29.0"],"starting":["29.0"],"are":["29.1","30.21"],"en":["29.1","41.41"],"zh":["29.1","29.4","40.2","40.4","41.41"],"cn":["29.1","40.1"],"welcome":["29.2"],"packaged":["29.2"],"at":["29.2"],"dist":["29.2"],"i18n":["29.4","40.4"],"tw":["29.4","40.2","40.4"],"mounts":["30.1"],"identifier":["30.3"],"successfully":["30.4"],"initialized":["30.4"],"live":["30.8"],"hide":["30.8"],"mute":["30.9"],"fill":["30.11"],"entire":["30.11"],"enter":["30.12"],"mini":["30.12"],"appear":["30.17"],"toolbar":["30.17"],"there":["30.21"],"multiple":["30.21"],"players":["30.21"],"offset":["30.24"],"5s":["30.24","41.24"],"bar":["30.25","30.31","30.32","30.33"],"side":["30.26"],"rendering":["30.26"],"useful":["30.26"],"want":["30.26"],"list":["30.32"],"description":["30.32","30.33","30.35","30.36"],"thumbnail":["30.35"],"ass":["30.36"],"additional":["30.37"],"these":["30.37"],"strings":["30.38"],"htmlelement":["30.38","41.38"],"customtype":["30.39"],"same":["30.39"],"as":["30.39"],"file":["30.39"],"extension":["30.39"],"delegate":["30.40"],"decoding":["30.40"],"third":["30.40"],"tolowercase":["30.41","41.41"],"language":["30.42"],"forward":["30.44"],"rotate":["30.46"],"mobile":["30.46"],"change":["30.48"],"但你也可以单独导入选项的类型":["31.6"],"type":["31.7"],"let":["31.7"],"null":["31.7"],"参数":["31.7"],"对于古老的浏览器":["31.8"],"可以使用":["31.8"],"legacy":["31.8"],"文件":["31.8"],"里控制跨域":["39.1"],"接口":["39.6","39.10"],"内部运行":["39.7"],"同时它也能用于异步获取":["39.7"],"里的值":["39.7"],"接收来自":["39.11"],"无需手动导入":["40.1"],"手动导入的语言有":["40.2"],"cs":["40.2"],"es":["40.2"],"fa":["40.2"],"fr":["40.2"],"id":["40.2"],"pl":["40.2"],"ru":["40.2"],"group":["40.2"],"容器":["41.1"],"目前只用于记忆播放":["41.3"],"autoplayback":["41.3"],"事件一样":["41.4"],"只会出现在播放器初始化且未播放的状态下":["41.5"],"播放器主题颜色":["41.6"],"目前用于":["41.6"],"进度条":["41.6"],"播放器的默认音量":["41.7"],"使用直播模式":["41.8"],"会隐藏进度条和播放时间":["41.8"],"是否默认静音":["41.9"],"播放器的尺寸默认会填充整个":["41.11"],"容器尺寸":["41.11"],"所以经常出现黑边":["41.11"],"该值能自动调整播放器尺寸以隐藏黑边":["41.11"],"当播放器滚动到浏览器视口以外时":["41.12"],"自动进入":["41.12"],"迷你播放":["41.12"],"模式":["41.12","41.27"],"是否循环播放":["41.13"],"是否显示视频翻转功能":["41.14"],"目前只出现在":["41.14"],"设置面板":["41.14","41.15","41.16","41.18","41.24"],"右键菜单":["41.14","41.15","41.16"],"是否显示视频播放速度功能":["41.15"],"会出现在":["41.15","41.16"],"是否显示视频长宽比功能":["41.16"],"是否在底部控制栏里显示":["41.17","41.18","41.20"],"视频截图":["41.17"],"功能":["41.17"],"的开关按钮":["41.18","41.20"],"画中画":["41.20"],"假如页面里同时存在多个播放器":["41.21"],"是否只能让一个播放器播放":["41.21"],"是否在底部控制栏里显示播放器":["41.22","41.23"],"窗口全屏":["41.22"],"按钮":["41.22","41.23","41.47"],"网页全屏":["41.23"],"出现在":["41.24"],"迷你进度条":["41.25"],"只在播放器失去焦点后且正在播放时出现":["41.25"],"挂载模式":["41.26"],"假如你希望在播放器挂载前":["41.26"],"就提前渲染好播放器所需的":["41.26"],"时有用":["41.26"],"你可以通过":["41.26"],"在移动端是否使用":["41.27"],"类型":["41.32"],"描述":["41.32","41.33","41.35","41.36"],"默认画质":["41.32"],"画质名字":["41.32"],"高亮时间":["41.33"],"text":["41.33"],"高亮文本":["41.33"],"预览图地址":["41.35"],"预览图数量":["41.35"],"column":["41.35"],"字幕名字":["41.36"],"字幕地址":["41.36"],"字幕类型":["41.36"],"可选":["41.36"],"preload":["41.37"],"更多视频属性":["41.37"],"这些属性将直接写入视频元素里":["41.37"],"字符串和":["41.38"],"一起使用":["41.39"],"默认视频的格式就是视频地址的后缀":["41.39"],"如":["41.39"],"m3u8":["41.39"],"mkv":["41.39"],"但有时候视频地地址没有正确的后缀":["41.39"],"进行匹配":["41.40"],"把视频解码权交给第三方程序进行处理":["41.40"],"处理的函数能接收三个参数":["41.40"],"视频":["41.40"],"dom":["41.40"],"默认显示语言":["41.41"],"目前支持":["41.41"],"是否在移动端显示一个":["41.43"],"锁定按钮":["41.43"],"用于隐藏底部":["41.43"],"控制栏":["41.43"],"是否在移动端添加长按视频快进功能":["41.44"],"是否在移动端的网页全屏时":["41.46"],"根据视频尺寸和视口尺寸":["41.46"],"旋转播放器":["41.46"],"是否显示":["41.47"],"当前只有部分浏览器支持该功能":["41.47"]},{"0":["9.5","13.25","15.8","15.35","15.36"],"1":["9.5","13.25","15.8","15.35","15.36","19.5","20.7"],"2":["13.27","20.6","30.1","41.1"],"3":["20.7"],"4":["30.7","30.10","30.19","30.30","30.31","30.38","30.42","40.1","41.10","41.19","41.30","41.31","41.38","41.45","41.48"],"5":["9.5","13.11","19.5","30.45","41.45"],"6":["2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39"],"7":["2.19","2.21","2.22","2.24","2.25","5.15","5.26","5.30","15.30","30.4","30.38","41.4","41.38"],"8":["2.17","2.20","5.1","5.13","5.20","5.28","5.29","5.31","5.32","5.33","5.40","12.20","15.40","28.5","39.5"],"9":["2.28","2.29","5.11","5.19","5.21","5.22","5.34","12.28","12.29","15.11","15.19","15.21","15.34","30.4","30.42","41.4"],"10":["2.6","2.18","2.23","7.5","9.5","12.23","13.10","13.23","17.5"],"11":["5.2","5.3","5.20","5.30","12.27","15.2","15.30","31.8"],"12":["30.30","41.30"],"13":["12.30"],"15":["30.34","41.34"],"16":["30.31","41.31"],"17":["4.0"],"18":["21.0","32.0"],"19":["15.41","22.0","33.0"],"21":["23.0","34.0"],"23":["21.0","32.0"],"24":["22.0","33.0"],"25":["13.27"],"26":["23.0","34.0"],"29":["15.41"],"35":["13.6"],"50":["13.9"],"200":["13.5","13.7","13.8","13.20"],"250":["9.2","13.4","19.2"],"300":["13.16"],"1000":["13.21"],"2000":["13.3"],"是指挂载在":["0.0","1.0","5.0"],"js":["0.1","0.3","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.14","0.15","1.1","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.19","2.20","2.21","2.22","2.24","2.25","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.2","3.4","3.5","3.6","3.7","3.8","3.9","3.16","3.27","3.28","3.29","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.24","5.25","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.37","5.40","9.1","9.4","9.5","10.1","10.4","10.5","10.6","10.13","12.6","12.18","12.20","12.23","12.27","12.28","12.29","13.19","15.1","15.2","15.11","15.19","15.21","15.26","15.30","15.34","15.40","19.5","25.6","25.8","25.9","25.11","25.12","25.13","25.14","28.7","28.12","29.0","30.4","30.7","30.10","30.30","30.31","30.34","30.38","30.42","36.6","36.8","36.11","36.13","36.14","40.0","41.1","41.7","41.10","41.19","41.30","41.33","41.34","41.38","41.45","41.48"],"var":["0.1","0.3","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.13","0.14","0.15","0.16","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","5.2","5.3","5.11","5.13","5.15","5.19","5.21","5.22","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.40","9.4","10.1","10.5","12.28","12.29","12.30","13.19","15.2","15.11","15.19","15.21","15.30","15.40","15.41","25.6","25.7","25.9","25.10","28.7","29.4","30.1","30.7","30.10","30.19","30.30","30.31","30.42","30.45","36.7","36.8","36.9","36.10","36.11","36.12","36.14","40.1","41.1","41.4","41.10","41.19","41.30","41.31","41.38","41.42","41.45"],"art":["0.1","0.2","0.5","0.6","0.7","0.10","0.13","0.15","0.16","2.2","2.6","2.11","2.12","2.16","2.17","2.18","2.20","2.21","2.22","2.23","2.24","2.25","2.27","2.28","2.29","2.30","2.38","5.15","5.19","5.21","5.22","5.26","5.30","5.40","8.4","9.4","10.1","10.2","12.30","13.19","15.19","15.21","15.30","15.40","15.41","18.4","20.7","21.0","23.0","25.7","25.9","25.10","29.4","30.1","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.42","30.45","31.5","32.0","34.0","36.7","36.9","36.10","36.11","36.12","39.7","40.1","40.4","41.1","41.4","41.19","41.28","41.29","41.30","41.31","41.34","41.38","41.40","41.42","41.45"],"new":["0.1","0.2","0.6","0.7","0.13","0.15","0.16","2.2","2.6","2.17","2.18","2.20","2.23","2.27","2.28","2.29","2.30","5.11","5.22","5.40","5.41","8.2","8.4","8.5","10.1","10.2","12.30","15.11","15.15","15.19","15.21","15.30","15.41","18.2","18.4","18.5","25.7","25.10","29.3","29.4","30.1","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.42","30.45","31.5","36.5","36.7","36.9","36.10","36.11","36.12","39.7","40.4","41.1","41.4","41.28","41.29","41.30","41.31","41.42"],"artplayer":["0.2","0.3","0.7","0.13","0.15","0.16","2.2","2.23","2.27","2.28","2.29","2.30","3.4","3.5","3.6","3.28","3.29","5.11","5.22","5.41","8.2","8.3","8.4","8.5","9.6","10.1","10.2","12.30","13.19","15.11","15.15","15.19","15.30","15.41","18.2","18.3","18.4","18.5","19.6","20.1","20.7","24.2","24.3","25.2","25.3","25.8","25.9","25.11","25.12","25.13","25.14","26.3","27.3","28.3","28.4","29.0","29.3","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.42","30.45","31.1","35.2","35.3","36.2","36.3","36.11","37.3","38.3","39.3","39.4","39.7","40.0","40.3","41.4","41.26","41.28","41.29","41.30","41.31","41.42"],"container":["0.2","0.3","0.13","0.16","2.2","2.27","2.30","5.11","5.41","6.2","6.3","7.4","8.2","8.3","8.4","8.5","9.6","10.2","12.30","15.11","15.15","15.19","15.41","16.2","16.3","17.4","18.2","18.3","18.4","18.5","19.6","20.5","25.5","25.10","29.3","29.4","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.42","30.45","31.5","36.5","36.9","36.10","36.12","39.7","40.3","40.4","41.2","41.4","41.28","41.29","41.31","41.42"],"app":["0.2","0.4","0.13","2.30","5.41","6.2","6.3","6.4","6.5","7.3","7.4","8.2","8.3","8.4","8.5","9.6","10.2","15.11","15.15","15.41","16.2","16.3","16.4","16.5","17.3","17.4","18.2","18.3","18.4","18.5","19.2","19.6","20.4","25.5","25.10","30.1","30.19","30.28","30.29","30.45","31.3","36.5","36.9","36.10","39.7","40.4","41.2","41.4","41.28","41.29","41.42"],"url":["0.2","0.4","5.41","6.2","6.3","6.4","6.5","7.3","7.4","8.2","8.3","8.5","9.2","9.6","9.7","10.2","15.15","15.41","16.2","16.3","16.4","16.5","17.3","17.4","18.2","18.3","18.5","19.2","19.6","19.7","21.0","22.0","23.0","25.5","30.19","30.28","30.29","30.32","30.39","30.45","31.3","32.0","33.0","34.0","36.5","36.10","39.7","41.28","41.29","41.32","41.40","41.42"],"classname":["0.3","1.11","3.14","3.20","3.23","3.24","3.27","3.30","5.4","5.14","5.27","5.35","5.36","5.37","5.38","9.4","10.4","10.6","10.7","10.13","10.16","11.6","12.1","12.2","12.5","12.11","12.12","12.13","12.15","12.17","12.19","12.24","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","13.2","13.4","13.7","13.8","13.9","13.16","13.21","13.27","13.28","13.29","13.31","15.3","15.5","15.6","15.7","15.8","15.9","15.10","15.13","15.16","15.20","15.22","15.23","15.24","15.25","15.27","15.28","15.29","15.31","15.32","15.33","15.37","15.39","19.4","25.11","30.4","30.9","30.13","30.33","30.41","30.48","41.6","41.8","41.12","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.24","41.25","41.26","41.27","41.32","41.33","41.37","41.39","41.41","41.43","41.46","41.47"],"run":["0.3","0.8","0.9","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.11","1.12","3.1","3.3","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.22","3.23","3.24","3.25","3.26","3.27","3.30","3.32","5.4","5.5","5.6","5.8","5.10","5.12","5.14","5.23","5.27","5.35","5.36","5.37","5.38","5.39","9.4","10.4","10.6","10.7","10.13","10.16","11.6","12.1","12.2","12.3","12.4","12.5","12.9","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.7","13.8","13.9","13.16","13.21","13.27","13.28","13.29","15.3","15.6","15.7","15.8","15.9","15.13","15.16","15.20","15.22","15.24","15.25","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.37","19.4","25.11","30.4","30.9","30.13","30.33","30.38","30.41","30.48","41.3","41.6","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.17","41.18","41.20","41.21","41.22","41.23","41.24","41.25","41.27","41.32","41.33","41.37","41.39","41.41","41.43","41.44","41.46","41.47"],"code":["0.3","0.8","0.9","0.10","0.11","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.12","3.1","3.3","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.30","3.31","3.32","5.4","5.5","5.6","5.7","5.8","5.9","5.10","5.12","5.14","5.17","5.18","5.23","5.27","5.35","5.36","5.37","5.38","5.39","9.1","9.4","10.4","10.5","10.6","10.7","10.13","10.16","11.6","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.7","13.8","13.16","13.21","13.28","13.29","15.3","15.7","15.8","15.9","15.13","15.16","15.20","15.21","15.24","15.26","15.27","15.28","15.29","15.30","15.31","15.32","15.33","15.37","19.4","25.11","28.13","29.0","29.2","30.4","30.38","30.48","39.13","41.3","41.5","41.7","41.8","41.9","41.12","41.13","41.17","41.18","41.20","41.21","41.22","41.23","41.24","41.25","41.27","41.32","41.33","41.37","41.39","41.41","41.43","41.44","41.46","41.47"],"document":["0.3","30.1"],"queryselector":["0.3"],"assets":["0.4","5.41","6.2","6.3","6.4","6.5","7.3","7.4","7.5","9.2","9.6","9.7","10.2","15.11","15.15","16.2","16.3","16.4","16.5","17.3","17.4","17.5","19.2","19.6","19.7","25.5","30.29","30.45","36.5","36.10","41.2","41.29","41.42"],"sample":["0.4","5.41","6.2","6.3","6.4","6.5","7.3","7.4","7.5","9.2","9.7","10.2","12.0","15.15","16.2","16.3","16.4","16.5","17.3","17.4","17.5","19.2","19.7","25.5","30.29","36.5","41.2","41.29","41.42"],"video":["0.4","5.41","6.2","6.3","6.4","6.5","7.3","7.5","8.2","8.3","8.5","9.2","9.7","10.2","11.5","12.11","13.1","15.5","16.2","16.3","16.4","16.5","17.3","17.5","18.2","18.3","18.5","19.2","19.7","21.0","22.0","25.5","30.13","30.15","30.29","30.44","31.3","32.0","33.0","35.4","36.5","41.2"],"mp4":["0.4","6.3","6.4","6.5","7.3","7.5","8.2","8.3","8.5","9.2","9.3","9.7","9.8","12.0","16.3","16.4","16.5","17.3","17.5","18.2","18.3","18.5","19.2","19.3","19.7","19.8","20.3","25.5","30.2","31.3","35.4","41.2"],"test":["0.4"],"foo":["0.4"],"bar":["0.4","13.15","13.32","30.6","30.8","30.17","30.22","30.23"],"const":["0.4","9.5","19.5"],"console":["1.1","2.0","12.0","25.15","36.15"],"info":["2.0","12.0","25.15","36.15"],"只监听一次事件":["2.0"],"但估计没有足够的数据来支撑播放到结束":["2.40"],"渲染完成":["2.42"],"属性的值改变时触发":["2.43"],"当这个":["2.44"],"因为":["2.45"],"或者资源类型不是受支持的媒体格式":["2.46"],"中的首帧已经完成加载":["2.47"],"播放准备开始":["2.51"],"seek":["2.54","2.55","12.54","12.55","13.24","15.14"],"user":["2.56"],"属性指定的时间发生变化":["2.58"],"播放已停止":["2.60"],"也是指挂载在":["3.0"],"构造函数":["3.0"],"div":["3.30","5.4","5.35","5.36","5.38","9.4","10.4","10.6","10.7","10.13","10.16","11.9","11.12","12.1","12.2","12.5","12.11","12.12","12.31","12.32","12.34","12.35","12.36","13.2","13.3","13.4","13.5","13.6","13.7","13.8","13.9","13.10","13.16","13.21","13.25","13.27","13.28","13.31","15.3","15.5","15.6","15.8","15.9","15.10","15.12","15.13","15.16","15.17","15.18","15.20","15.22","15.23","15.24","15.25","15.27","15.28","15.29","15.31","15.32","15.33","15.37","15.39","19.4","25.11","30.4","30.9","30.13","30.24","30.27","30.33","30.41","30.48","41.6","41.12","41.14","41.15","41.16","41.18","41.20","41.22","41.23","41.24","41.26","41.27","41.32","41.33","41.37","41.39","41.40","41.41","41.43","41.46","41.47"],"组件唯一名称":["6.1","8.1"],"用于标记类名":["6.1","8.1"],"index":["6.1","7.5","8.1","16.1","17.5","18.1","25.6","25.8","25.9","25.11","25.12","25.13","25.14","36.6","36.8","36.11","36.13","39.11"],"number":["6.1","7.1","8.1","16.1","18.1"],"contextmenu":["6.4","6.5","16.4","16.5"],"name":["6.5","7.5","9.8","16.5","17.5","19.8","30.32"],"组件索引":["7.1"],"用于显示的优先级":["7.1"],"html":["7.1","7.2","9.3","9.8","15.4","17.1","17.2","19.3","19.8","20.3","28.1","28.8","28.9","30.26","30.32","35.4","39.9"],"element":["7.1","13.30","15.31","17.1"],"position":["7.2","7.5","17.2","17.5"],"left":["7.2","13.24","17.2"],"tooltip":["7.2","9.8","17.2","19.4","19.5","19.8"],"style":["7.2","9.2","17.2","30.36","41.36"],"color":["7.2","15.33","17.2"],"red":["7.2","17.2"],"click":["7.2","13.17","13.18","17.2"],"function":["7.2","17.2","19.4","21.0","22.0","23.0","30.17","30.34","30.40","31.7","32.0","33.0","34.0","41.34"],"args":["7.2","17.2"],"controls":["7.3","7.5","17.3","17.5"],"add":["7.3","17.3"],"button1":["7.5","17.5"],"png":["8.4","18.4","30.28","41.28"],"setting":["9.2","9.3","9.7","9.8","19.2","19.3","19.7","19.8","25.5"],"true":["9.2","9.3","9.7","9.8","13.17","13.18","13.19","13.31","19.2","19.3","19.7","19.8","25.4","25.5","35.4","36.4"],"settings":["9.2","9.3","9.8","19.2","19.3","19.8","30.14","30.16","30.18","30.24"],"subtitle":["9.2","19.2"],"01":["9.2","9.3","19.2"],"default":["9.2","11.12","13.2","13.9","13.10","13.11","13.12","13.13","13.15","13.17","13.18","13.22","13.24","13.25","13.31","19.2"],"span":["9.2"],"multi":["9.3","19.3"],"level":["9.3","13.0","19.3"],"selector":["9.3","19.3"],"提示文本":["9.4"],"value":["9.5","30.11"],"min":["9.5","21.0","22.0","32.0","33.0"],"flip":["9.7","19.1","19.7"],"slider":["9.8","19.8"],"5x":["9.8","19.8"],"icon":["9.8","19.8"],"refer":["10.0","15.0"],"to":["10.0","10.8","11.0","11.1","12.51","12.56","13.3","13.7","13.8","13.20","13.24","15.0","15.4","15.14","20.8","31.3","39.7"],"used":["10.3","13.32","15.35","15.36","16.1","17.1","18.1","30.3"],"hover":["10.3"],"custom":["10.3"],"loadimg":["10.3"],"delete":["10.4"],"clear":["10.4"],"object":["10.6","41.11"],"updating":["10.8"],"show":["10.8","10.9","10.10","10.15"],"property":["10.8","10.9","10.15"],"set":["10.8","10.9","10.15"],"whether":["10.9","10.15"],"display":["10.9","17.1","30.17"],"update":["10.10"],"attribute":["10.10","10.12"],"method":["10.11"],"switch":["10.11"],"toggle":["10.12","10.14"],"the":["11.0","12.43","13.1","15.0","15.5","15.12","20.6","24.4","28.10","30.8","30.25","30.26","30.37","30.43","30.44"],"want":["11.1"],"manage":["11.1"],"multiple":["11.1"],"players":["11.1"],"player":["11.2","11.3","11.4","11.7","11.11","15.28","15.29","15.37","15.38","15.39","30.5","30.12","30.21","30.25","30.26"],"options":["11.7","11.9","11.12","20.6","30.36"],"event":["11.8","12.0","19.4","30.4","39.12"],"dispatcher":["11.8"],"for":["11.9","11.11","13.22","13.32","16.1","18.1","20.6","30.3","30.6","30.40"],"type":["11.10","20.6","31.6"],"checking":["11.10"],"on":["12.0","13.23","19.5","25.15","30.20","30.27","30.43","30.44","36.15"],"canplay":["12.0"],"listen":["12.0"],"an":["12.0"],"only":["12.0","30.3","30.14","30.21","30.47"],"once":["12.0"],"first":["12.1","12.47","13.0"],"time":["12.1","12.58"],"mouse":["12.12"],"hidden":["12.36"],"file":["12.40","20.8"],"but":["12.40","15.10","15.14"],"estimates":["12.40"],"there":["12.40"],"it":["12.41","15.14","30.15"],"can":["12.41","15.38","20.8","28.9","30.11","30.40"],"play":["12.41"],"rendering":["12.42"],"when":["12.43","12.44"],"this":["12.44","30.11"],"has":["12.44","12.45","12.48","12.49","12.50","12.60"],"stopped":["12.45"],"while":["12.46","12.52","14.0"],"fetching":["12.46"],"media":["12.46"],"frame":["12.47","15.16","15.17","15.18"],"start":["12.51"],"triggered":["12.52"],"playback":["12.53","15.12","30.3","30.8"],"is":["12.56","13.5","13.6","13.9","13.10","13.13","13.15","13.16","13.17","13.18","13.21","13.25","13.31","15.14","15.37","15.38","30.2","30.5"],"trying":["12.56"],"data":["12.57","25.11"],"specified":["12.58"],"changed":["12.59"],"properties":["13.0"],"mounted":["13.0"],"in":["13.1","13.12","13.14","13.15","13.20","13.26","15.6","28.8","30.2","30.11","30.14","30.15","30.16","30.18","30.24","30.33","30.46"],"events":["13.1"],"of":["13.1","13.11","13.12","13.23","14.0","15.39","24.4","30.12","30.35"],"by":["13.1","13.2","30.44"],"enabled":["13.2"],"milliseconds":["13.3","13.12","13.14","13.15","13.20"],"defaults":["13.3","13.20","13.30"],"pixels":["13.5","13.6"],"feature":["13.10"],"seconds":["13.11","13.26","15.5","15.6","30.33"],"with":["13.11","13.12","15.35","15.36","30.3"],"a":["13.11","13.12","13.13","13.14","14.0","15.17","15.18"],"connection":["13.13","13.14"],"error":["13.13","13.14"],"occurs":["13.13","13.14"],"measured":["13.15"],"double":["13.17","13.18"],"long":["13.22","30.44"],"pressing":["13.22","30.44"],"mobile":["13.23","30.27","30.43"],"delay":["13.23"],"and":["13.24","30.5","30.6","30.8","30.25"],"right":["13.24"],"keyboard":["13.26"],"shortcuts":["13.26"],"under":["13.30"],"mainly":["13.32"],"smooth":["13.32"],"progress":["13.32","15.12","30.6","30.8"],"here":["14.0"],"translation":["14.0"],"provided":["14.0"],"text":["14.0","19.4","19.5","30.33"],"into":["14.0","30.37"],"english":["14.0"],"preserving":["14.0"],"markdown":["14.0"],"formatting":["14.0"],"that":["14.0"],"allows":["14.0"],"loading":["14.0"],"after":["14.0","15.4"],"instantiation":["14.0"],"remove":["15.4"],"s":["15.4","15.23","17.1","30.26"],"from":["15.8","28.1","31.8","40.2"],"performs":["15.10"],"some":["15.10","30.47"],"optimization":["15.10"],"operations":["15.10"],"will":["15.12","29.0","30.15","30.16","30.37"],"carry":["15.12"],"over":["15.12"],"previous":["15.12"],"similar":["15.14","30.4"],"does":["15.14","30.39"],"which":["15.17","15.18","15.38","20.8","29.1","30.2","30.11"],"returns":["15.17","15.18"],"promise":["15.17","15.18"],"full":["15.20","26.1","27.1","30.46"],"screen":["15.20","30.46"],"before":["15.22","30.5","30.26"],"starts":["15.22"],"playing":["15.22"],"mode":["15.23"],"its":["15.25"],"size":["15.25"],"normal":["15.27"],"horizontal":["15.27"],"vertical":["15.27"],"commonly":["15.35","15.36"],"be":["15.37","30.21","30.37"],"destroyed":["15.37"],"limited":["15.38"],"within":["15.38","28.7"],"current":["15.38","20.5","31.5"],"marking":["16.1","18.1"],"class":["16.1","18.1"],"priority":["17.1"],"items":["19.1"],"playbackrate":["19.1"],"aspectratio":["19.1"],"subtitleoffset":["19.1"],"onswitch":["19.4"],"completion":["19.5"],"onchange":["19.5"],"change":["19.5"],"install":["20.1","31.1"],"head":["20.3"],"title":["20.3"],"demo":["20.3"],"if":["20.5","23.0","31.5","34.0"],"typeof":["20.5","31.5"],"return":["20.5"],"let":["20.7"],"null":["20.7"],"parameters":["20.7"],"use":["20.8"],"legacy":["20.8"],"up":["20.8"],"ie":["20.8","31.8"],"plaympd":["21.0","32.0"],"playflv":["22.0","33.0"],"playm3u8":["23.0","34.0"],"plugin":["24.2","24.3","25.2","25.3","25.8","25.9","25.11","25.12","25.13","25.14","26.2","26.3","27.2","27.3","28.3","28.4","35.2","35.3","36.2","36.3","36.11","37.2","37.3","38.2","38.3","39.3","39.4"],"ads":["24.2","35.2"],"npm":["24.3","25.3","26.3","27.3","28.4","35.3","36.3","37.3","38.3","39.4"],"img":["24.4"],"src":["24.4"],"poster":["24.4"],"jpg":["24.4"],"test1":["24.4"],"redirect":["24.4"],"no":["24.4","29.0"],"redirection":["24.4"],"empty":["24.4"],"danmuku":["25.2","25.8","25.9","25.12","25.13","25.14","36.2","36.6","36.8"],"滚动":["25.4","36.4"],"静止":["25.4","36.4"],"margin":["25.4","36.4"],"弹幕上下边距":["25.4","36.4"],"antioverlap":["25.4","36.4"],"是否防重叠":["25.4","36.4"],"useworker":["25.4","36.4"],"是否使用":["25.4","36.4"],"web":["25.4","36.4"],"worker":["25.4","36.4"],"plugins":["25.5","35.4"],"libs":["25.8","25.11","25.12"],"uncompiled":["25.8","25.11","25.12","25.13","25.14"],"emit":["25.15","36.15"],"danmu":["25.15","36.15"],"新增弹幕":["25.15","36.15"],"loaded":["25.15","36.15"],"dash":["26.2","26.3","37.2","37.3"],"quality":["26.2","26.3","27.2","27.3","37.2","37.3","38.2","38.3"],"hls":["27.2","27.3","38.2","38.3"],"cross":["28.1"],"domain":["28.1"],"iframe":["28.1","28.3","28.5","28.12","39.1","39.3","39.5","39.8"],"page":["28.1","30.21"],"charset":["28.5","39.5"],"utf":["28.5","39.5","41.36"],"body":["28.5","39.5"],"id":["28.5","29.2","39.5"],"asynchronously":["28.7"],"retrieve":["28.7"],"values":["28.7"],"receive":["28.11","30.40"],"message":["28.12","39.12"],"即可":["28.13","39.13"],"group":["28.13","39.13"],"doctype":["28.13","39.13"],"core":["29.0"],"longer":["29.0"],"do":["29.1"],"not":["29.1","30.2","30.39"],"require":["29.1"],"manual":["29.1"],"manually":["29.2"],"imported":["29.2"],"include":["29.2"],"cs":["29.2"],"es":["29.2"],"fa":["29.2"],"fr":["29.2"],"pl":["29.2"],"ru":["29.2"],"zh":["29.2","30.41"],"tw":["29.2"],"sometimes":["30.2","30.39"],"known":["30.2"],"so":["30.2"],"quickly":["30.2"],"case":["30.2"],"you":["30.2"],"remembering":["30.3"],"initialized":["30.5"],"highlight":["30.6"],"often":["30.11"],"results":["30.11"],"black":["30.11"],"bars":["30.11"],"scrolls":["30.12"],"out":["30.12"],"currently":["30.14","30.47"],"available":["30.14"],"panel":["30.14","30.16","30.18","30.24"],"appear":["30.15","30.16"],"menu":["30.17"],"bottom":["30.17","30.18","30.20","30.43"],"control":["30.17","30.20","30.22","30.23"],"button":["30.20"],"should":["30.21"],"one":["30.21"],"at":["30.22","30.23"],"appearing":["30.24"],"loses":["30.25"],"focus":["30.25"],"pre":["30.26"],"render":["30.26"],"required":["30.26"],"devices":["30.27"],"boolean":["30.32"],"string":["30.32","30.33"],"myplugin":["30.34","41.34"],"column":["30.35"],"columns":["30.35"],"width":["30.35","41.35"],"encoding":["30.36","41.36"],"directly":["30.37"],"written":["30.37"],"such":["30.39"],"m3u8":["30.39"],"mkv":["30.39"],"ts":["30.39"],"however":["30.39"],"have":["30.39"],"party":["30.40"],"program":["30.40"],"processing":["30.40"],"en":["30.41"],"cn":["30.41","41.41"],"hide":["30.43"],"pages":["30.46"],"according":["30.46"],"browsers":["30.47"],"support":["30.47"],"path":["31.3","39.7"],"ref":["31.4"],"artref":["31.4"],"option":["31.6"],"param":["31.7"],"getinstance":["31.7"],"可以兼容到":["31.8"],"import":["31.8","40.2"],"autosize":["35.4"],"fullscreen":["35.4"],"fullscreenweb":["35.4"],"artplayerpluginads":["35.4"],"html广告":["35.4"],"假如是视频广告则忽略该值":["35.4"],"接收来自":["39.8"],"无法与":["39.9"],"提示":["39.10"],"版本开始":["40.0"],"核心代码除了包含":["40.0"],"zhtw":["40.2"],"高亮元素":["41.6"],"上":["41.6"],"类似":["41.11"],"css":["41.11"],"的":["41.11"],"fit":["41.11"],"里":["41.14","41.15","41.16","41.24"],"访问到播放器所需的":["41.26"],"layer":["41.28"],"画质地址":["41.32"],"预览图列数":["41.35"],"预览图宽度":["41.35"],"height":["41.35"],"预览图高度":["41.35"],"字幕样式":["41.36"],"字幕编码":["41.36"],"默认":["41.36"],"所以需要特别指明":["41.39"],"元素":["41.40"],"视频地址":["41.40"],"当前实例":["41.40"]},{"0":["13.24","19.5"],"1":["3.28","9.2","13.28","19.2","25.5"],"2":["3.28","9.5","13.28","19.5","41.3"],"3":["9.5","13.22"],"4":["9.1","29.1","30.17","30.33","30.48","31.7","41.5","41.7","41.8","41.9","41.13","41.17","41.21","41.24","41.25","41.32","41.33","41.37","41.39","41.41","41.44"],"5":["13.13","13.24","13.26","39.7"],"6":["5.38","5.39","12.3","12.4","12.5","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","31.7"],"7":["5.4","5.5","5.6","5.9","5.16","5.17","5.18","5.23","5.35","5.36","12.19","12.21","12.22","12.24","12.25","15.9","15.26","41.37"],"8":["5.8","5.14","5.24","5.25","5.27","5.37","12.17","15.1","15.8","15.13","15.20","15.24","15.27","15.28","15.29","15.31","15.32","15.33","15.37","20.3","28.13","30.36","39.13","41.36"],"9":["5.10","5.12","15.10","15.22"],"10":["5.7","5.37","7.3","7.4","12.2","12.6","12.18","15.7","15.11","15.37","17.3","17.4","19.5"],"11":["15.3","15.20","20.8"],"14":["41.32"],"17":["14.0"],"22":["9.8","19.8"],"25":["30.33","41.33"],"40":["3.6"],"50":["25.4","36.4"],"100":["3.9"],"111":["25.5","36.5"],"150":["9.3","19.3"],"300":["3.4","3.5"],"500":["3.7","3.8","3.16"],"1000":["13.14"],"3000":["13.12","13.15"],"实例":["0.0","5.0"],"artplayer":["0.1","0.5","0.6","0.8","0.9","0.10","0.11","0.12","0.14","1.1","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.24","2.25","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.1","3.2","3.3","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","3.16","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.30","3.31","3.32","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.19","5.20","5.21","5.24","5.26","5.27","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.37","5.40","9.1","9.4","10.4","10.5","10.6","10.7","10.13","10.16","11.6","12.2","12.6","12.18","12.20","12.23","12.27","12.28","12.29","13.4","13.7","13.8","13.16","13.21","13.27","13.28","13.29","15.2","15.21","15.26","15.34","15.37","15.40","19.4","20.2","28.7","28.13","30.4","30.38","31.2","39.13","40.1","41.10","41.19","41.33","41.38","41.39","41.45","41.48"],"container":["0.1","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.14","0.15","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.28","2.29","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","5.2","5.3","5.8","5.10","5.12","5.13","5.15","5.19","5.20","5.21","5.22","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.37","5.40","9.4","10.1","10.3","10.4","10.5","10.6","10.7","10.13","10.16","12.20","12.23","12.27","12.28","12.29","13.19","15.2","15.21","15.26","15.37","15.40","19.4","25.6","25.7","25.8","25.9","25.11","25.12","28.7","30.4","30.38","31.6","36.7","36.8","36.11","36.13","36.14","40.1","40.2","41.10","41.19","41.30","41.33","41.38","41.45","41.48"],"app":["0.1","0.3","0.5","0.6","0.7","0.8","0.9","0.10","0.15","0.16","2.2","2.6","2.17","2.18","2.20","2.23","2.27","2.28","2.29","5.11","5.15","5.19","5.21","5.22","5.26","5.30","5.31","5.40","9.4","10.1","10.4","10.5","10.6","10.13","12.30","13.19","15.19","15.21","15.30","15.37","15.40","19.4","20.5","25.6","25.7","25.8","25.9","25.11","25.12","28.7","29.3","29.4","30.4","30.7","30.10","30.30","30.31","30.38","30.42","31.4","36.7","36.8","36.11","36.12","36.14","40.3","41.1","41.19","41.30","41.31","41.38","41.45"],"assets":["0.2","0.3","0.6","0.7","0.10","0.13","0.15","0.16","2.2","2.27","2.30","5.11","5.22","5.40","9.4","10.1","10.4","10.6","10.13","12.30","13.19","15.19","15.21","15.30","15.41","25.7","25.9","25.10","25.11","25.12","29.3","29.4","30.1","30.4","30.7","30.10","30.19","30.30","30.31","30.42","36.7","36.8","36.9","36.11","36.12","40.3","40.4","41.1","41.4","41.30","41.31"],"sample":["0.2","0.3","0.6","0.13","0.15","0.16","2.2","2.27","2.30","5.11","5.22","9.4","9.6","10.1","10.4","10.6","10.13","12.30","13.19","15.11","15.19","15.21","15.30","15.41","19.6","25.7","25.9","25.10","25.11","25.12","29.4","30.1","30.4","30.7","30.10","30.19","30.30","30.31","30.42","30.45","36.7","36.9","36.10","36.11","36.12","40.4","41.4","41.30","41.31"],"video":["0.2","0.3","0.13","0.15","0.16","2.30","5.11","7.4","8.4","9.4","9.6","10.4","10.6","10.13","12.30","13.19","15.19","15.21","15.41","17.4","18.4","19.6","25.7","25.9","25.10","28.7","29.4","30.1","30.7","30.10","30.19","30.28","30.30","30.31","30.42","30.45","30.46","36.7","36.9","36.10","36.11","36.12","39.7","40.4","41.4","41.28","41.29","41.31","41.42"],"mp4":["0.2","0.13","0.16","2.30","5.11","5.41","6.2","7.4","8.4","9.4","9.6","10.2","10.4","12.30","15.11","15.15","15.19","15.21","15.30","15.41","16.2","17.4","18.4","19.6","25.9","25.10","28.7","30.1","30.4","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.42","30.45","36.5","36.9","36.10","36.11","36.12","39.7","40.4","41.4","41.28","41.29","41.42"],"console":["0.2","0.4","1.6","7.2","10.2","11.6","15.15","17.2","28.12","30.34","39.12","41.34"],"info":["0.2","0.4","1.1","7.2","10.2","11.6","15.15","17.2","28.12","30.34","39.12","41.34"],"art":["0.3","0.8","0.9","0.11","0.12","0.14","2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.13","2.14","2.15","2.19","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.39","3.4","3.5","3.6","3.29","5.1","5.2","5.3","5.5","5.6","5.7","5.8","5.9","5.13","5.14","5.16","5.17","5.18","5.20","5.23","5.24","5.25","5.27","5.28","5.29","5.31","5.32","5.33","5.34","9.1","10.4","10.5","10.6","10.7","10.13","10.16","12.2","12.3","12.4","12.6","12.7","12.8","12.9","12.10","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.38","12.39","15.1","15.2","15.3","15.7","15.9","15.13","15.22","15.26","15.28","15.29","15.31","15.32","15.33","15.34","19.4","22.0","25.6","25.8","25.11","25.12","25.13","25.14","28.7","30.4","30.34","30.38","30.48","33.0","36.6","36.8","36.13","36.14","40.2","41.5","41.7","41.10","41.17","41.32","41.33","41.39","41.48"],"new":["0.3","0.5","0.8","0.9","0.10","0.11","0.12","0.14","2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.19","2.21","2.22","2.24","2.25","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.4","3.29","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.24","5.25","5.26","5.27","5.28","5.29","5.30","5.31","5.32","5.33","5.34","9.1","9.4","10.4","10.5","10.6","10.7","10.13","10.16","12.2","12.6","12.7","12.8","12.10","12.16","12.17","12.18","12.20","12.21","12.22","12.23","12.25","12.27","12.28","12.29","13.19","15.1","15.2","15.7","15.22","15.26","15.31","15.32","15.34","15.40","19.4","23.0","25.6","25.8","25.9","25.11","25.13","25.14","28.7","30.4","30.38","34.0","36.6","36.8","36.13","36.14","40.1","40.2","41.7","41.10","41.19","41.33","41.38","41.39","41.45","41.48"],"url":["0.3","0.6","0.7","0.9","0.10","0.13","0.15","0.16","2.2","2.18","2.23","2.27","2.28","2.29","2.30","5.19","5.22","5.30","5.40","8.4","9.4","10.1","10.4","10.6","10.13","12.30","13.19","15.19","15.21","15.30","15.40","18.4","19.4","25.7","25.9","25.10","25.11","25.12","28.7","29.3","29.4","30.1","30.4","30.7","30.10","30.30","30.31","30.40","30.42","36.7","36.8","36.9","36.11","36.12","40.3","40.4","41.1","41.4","41.30","41.31","41.38","41.45"],"function":["0.13","6.5","16.5","17.1","20.7","41.36"],"构造函数":["1.0"],"var":["1.1","3.4","3.5","3.6","3.16","3.29","5.1","5.5","5.6","5.7","5.8","5.9","5.10","5.12","5.14","5.16","5.17","5.18","5.20","5.23","5.24","5.25","5.27","5.35","5.36","5.37","5.39","9.1","10.3","10.4","10.6","10.7","10.13","10.16","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.31","12.32","12.33","12.34","12.35","12.37","12.38","12.39","13.29","15.1","15.3","15.7","15.8","15.9","15.13","15.20","15.22","15.24","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.34","15.37","19.4","25.8","25.11","25.12","25.13","25.14","29.1","30.4","30.33","30.38","30.48","36.6","36.13","40.2","41.3","41.5","41.7","41.17","41.24","41.32","41.33","41.39","41.48"],"js":["1.6","3.1","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.30","3.31","3.32","5.4","5.5","5.6","5.14","5.23","5.27","5.35","5.36","5.38","5.39","10.3","10.7","10.16","11.6","12.1","12.2","12.3","12.4","12.5","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.19","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","13.28","13.29","15.3","15.6","15.7","15.8","15.9","15.10","15.12","15.13","15.16","15.17","15.18","15.20","15.22","15.24","15.25","15.27","15.28","15.29","15.31","15.32","15.33","15.37","19.4","29.1","30.17","30.33","30.41","30.48","41.3","41.5","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.17","41.18","41.20","41.21","41.22","41.23","41.24","41.25","41.26","41.27","41.32","41.37","41.39","41.41","41.43","41.44","41.46","41.47"],"code":["1.11","9.5","10.3","12.1","13.2","13.3","13.5","13.6","13.9","13.10","13.11","13.12","13.13","13.15","13.17","13.18","13.20","13.22","13.25","13.27","13.30","13.31","13.32","15.5","15.6","15.10","15.12","15.14","15.17","15.18","15.22","15.23","15.25","15.35","15.36","15.39","19.1","20.8","30.3","30.6","30.8","30.9","30.13","30.17","30.20","30.22","30.23","30.24","30.27","30.32","30.33","30.37","30.39","30.41","31.8","41.6","41.11","41.14","41.15","41.16","41.26","41.35","41.40"],"once":["2.0"],"subtitle":["2.30","7.2","7.5","17.2","17.5"],"不必停下来进一步缓冲内容":["2.40"],"media":["2.44","2.45","12.41","12.56"],"已经加载完成":["2.44"],"操作完成":["2.54"],"操作开始":["2.55"],"agent":["2.56"],"的":["3.0"],"false":["3.2","13.30","20.5","25.4","31.5","36.4"],"add":["4.0","6.3","8.3","14.0","24.2","25.2","26.2","27.2","28.3","35.2","36.2","37.2","38.2","39.3"],"例如我想写一个在视频暂停后":["4.0"],"显示一个图片广告的插件":["4.0"],"on":["5.11","13.0","15.11","15.15","15.30"],"document":["5.37","10.3","15.37","41.1"],"queryselector":["5.37","10.3","15.37","30.1","41.1"],"default":["5.41","7.5","13.1","13.14","13.26","15.41","17.5","31.7"],"true":["5.41","7.5","9.6","15.4","15.41","17.5","19.6","30.4","30.29","30.45","36.5","41.4","41.29","41.36"],"html":["5.41","6.1","6.2","6.3","6.4","6.5","7.3","7.5","8.1","8.2","8.3","8.5","9.7","15.41","16.1","16.2","16.3","16.4","16.5","17.3","17.5","18.1","18.2","18.3","18.5","19.7","30.28","30.29","30.36","31.3","39.11","41.28","41.29","41.36"],"sd":["5.41","15.41"],"480p":["5.41"],"组件索引":["6.1","8.1"],"用于显示的优先级":["6.1","8.1"],"contextmenu":["6.2","6.3","16.2","16.3"],"name":["6.2","6.3","6.4","7.3","7.4","8.2","8.3","8.4","8.5","9.7","16.2","16.3","16.4","17.3","17.4","18.2","18.3","18.4","18.5","19.7","30.28","30.34","41.28","41.34"],"your":["6.2","6.3","6.4","6.5","7.3","16.2","16.3","16.4","16.5","17.3","30.45","41.42"],"menu":["6.2","6.3","6.4","6.5","16.2","16.3","16.4","16.5","30.14","30.15","30.16"],"click":["6.4","6.5","16.4","16.5","17.1"],"args":["6.5","16.5"],"组件的":["7.1"],"dom":["7.1","17.1","30.40"],"元素":["7.1"],"style":["7.1","8.2","8.3","8.5","17.1","18.2","18.3","18.5","19.2","30.28"],"object":["7.1","17.1"],"mounted":["7.2","17.2"],"button1":["7.3","7.4","17.3","17.4"],"index":["7.3","7.4","17.3","17.4","28.1","28.8"],"position":["7.3","15.19","17.3"],"left":["7.3","17.3"],"controls":["7.4","15.19","17.4"],"right":["7.5","15.19","17.5"],"selector":["7.5","17.5","30.29","41.29"],"01":["7.5","17.5","19.3"],"layers":["8.2","8.3","8.4","8.5","18.2","18.3","18.4","18.5"],"potser":["8.2","8.3","8.5","41.28"],"width":["8.2","8.3","8.5","9.3","9.8","18.2","18.3","18.5","19.3","19.8","30.28"],"100px":["8.2","8.3","8.5","18.2","18.3","18.5","30.28"],"src":["8.2","8.5","9.8","18.2","18.5","19.8","35.4"],"color":["9.2","19.2"],"red":["9.2","19.2"],"srt":["9.2","19.2"],"id":["9.2","19.2","30.45"],"yellow":["9.2","19.2"],"02":["9.2","19.2"],"setting":["9.4","9.6","19.6","30.29","36.5","41.29"],"max":["9.5","19.5"],"step":["9.5"],"div":["9.5","10.3","10.11","10.12","10.14","11.1","11.2","11.3","11.4","11.5","11.7","11.8","11.10","11.11","13.1","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.24","13.26","13.30","13.32","15.4","15.14","15.35","15.36","19.1","20.3","20.5","30.3","30.5","30.6","30.8","30.12","30.14","30.15","30.16","30.17","30.18","30.20","30.22","30.23","30.25","30.32","30.35","30.37","30.39","30.43","30.44","30.47","31.5","41.11","41.35"],"classname":["9.5","10.3","10.14","11.1","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","13.3","13.5","13.6","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.24","13.25","13.26","13.30","13.32","15.12","15.14","15.17","15.18","15.35","15.36","19.1","30.3","30.5","30.6","30.8","30.12","30.14","30.16","30.17","30.18","30.20","30.22","30.23","30.24","30.25","30.27","30.32","30.35","30.37","30.39","30.43","30.44","30.47","41.11","41.35","41.40"],"run":["9.5","10.3","11.1","11.2","11.3","11.4","11.5","11.8","11.9","11.10","11.12","13.2","13.3","13.5","13.6","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.24","13.25","13.26","13.30","13.31","13.32","15.5","15.10","15.12","15.14","15.17","15.18","15.23","15.35","15.36","15.39","19.1","30.3","30.5","30.6","30.8","30.12","30.14","30.16","30.17","30.18","30.20","30.22","30.23","30.24","30.25","30.27","30.32","30.35","30.37","30.39","30.43","30.47","41.11","41.26","41.35","41.40"],"settings":["9.7","19.7","30.15"],"slider":["9.7","19.7"],"tooltip":["9.7","19.7"],"5x":["9.7","19.7"],"icon":["9.7","19.7"],"img":["9.8","19.8","35.4"],"heigth":["9.8","19.8"],"state":["9.8","19.8"],"svg":["9.8","19.8"],"secondary":["10.0"],"attributes":["10.0"],"listen":["10.3"],"load":["10.3"],"of":["10.3","10.9","10.14","12.47"],"images":["10.3"],"test":["10.4"],"foo":["10.4"],"bar":["10.4","30.18","30.20","30.43"],"const":["10.4","21.0","22.0","23.0","31.6","32.0","33.0","34.0"],"whether":["10.8","10.10","30.36"],"display":["10.8","10.15","16.1","18.1"],"all":["10.8","10.9","10.10","10.15"],"or":["10.8","12.44","12.46","24.4"],"not":["10.8","12.40","15.14"],"toggle":["10.8","10.9","10.10","10.15"],"set":["10.10","30.2"],"options":["10.11"],"items":["10.15"],"first":["11.0"],"level":["11.0"],"at":["11.1","30.21"],"the":["11.1","12.52","39.7"],"same":["11.1","15.38"],"time":["11.1","25.5","30.8","30.21"],"is":["12.40","12.42","13.1","13.14","13.22","13.24","24.4","30.25"],"enough":["12.40"],"value":["12.43","19.5","24.4"],"been":["12.44","12.48","12.49"],"completely":["12.44"],"loaded":["12.44"],"because":["12.45"],"data":["12.46","31.7"],"started":["12.50"],"following":["12.51"],"a":["12.51","30.21"],"rate":["12.53"],"frame":["12.54","12.55"],"fetch":["12.56"],"loading":["12.57"],"by":["12.58"],"stopped":["12.60"],"constructor":["13.0"],"property":["13.0"],"turned":["13.1"],"off":["13.1"],"long":["13.23"],"press":["13.23"],"acceleration":["13.23"],"effects":["13.32"],"primary":["15.0"],"destruction":["15.4"],"which":["15.4","24.4"],"defaults":["15.4"],"ready":["15.11","15.15","15.30"],"seek":["15.11","39.7"],"settimeout":["15.11"],"trigger":["15.14"],"additional":["15.14"],"events":["15.14"],"timeupdate":["15.35","15.36"],"event":["15.35","15.36","28.12"],"prevent":["15.38"],"errors":["15.38"],"due":["15.38"],"having":["15.38"],"priority":["16.1","18.1"],"element":["16.1","18.1","30.37","30.40"],"poster":["18.2","18.3","18.5","30.28","35.4"],"span":["19.2"],"min":["19.5"],"yarn":["20.1","24.2","25.2","26.2","27.2","28.3","31.1","35.2","36.2","37.2","38.2","39.3"],"npm":["20.2","31.2"],"dist":["20.2","20.8","24.3","25.3","26.3","27.3","28.4","31.2","31.8","35.3","36.3","37.3","38.3","39.4"],"meta":["20.3","28.13","39.13"],"charset":["20.3","28.13","39.13"],"utf":["20.3","28.13","30.36","39.13"],"body":["20.3"],"class":["20.3"],"get":["20.4","39.7"],"instance":["20.4"],"getinstance":["20.4","20.7"],"destroy":["20.5","21.0","22.0","23.0","31.5","32.0","33.0","34.0"],"ref":["20.5","31.5"],"from":["20.6","20.8","28.11","29.2"],"option":["20.6"],"param":["20.7"],"properties":["20.7"],"import":["20.8","29.1","29.2"],"group":["20.8","29.2","31.8"],"bash":["20.8","31.8"],"if":["21.0","22.0","32.0","33.0"],"supportsmediasource":["21.0","32.0"],"mediaplayer":["21.0","32.0"],"create":["21.0","32.0"],"flvjs":["22.0","33.0"],"issupported":["22.0","23.0","33.0","34.0"],"loadsource":["23.0","34.0"],"ads":["24.3","35.3"],"http":["24.4"],"org":["24.4"],"duration":["24.4"],"that":["24.4"],"must":["24.4"],"be":["24.4","30.39"],"watched":["24.4"],"can":["24.4","30.2","30.26"],"t":["24.4"],"skipped":["24.4"],"in":["24.4"],"seconds":["24.4"],"this":["24.4","30.47"],"greater":["24.4"],"than":["24.4"],"danmuku":["25.3","36.3"],"synchronousplayback":["25.4","36.4"],"是否同步到播放速度":["25.4","36.4"],"filter":["25.4","36.4"],"danmu":["25.4","36.4"],"text":["25.4","25.5","36.4","36.5"],"length":["25.4","25.15","36.4","36.15"],"弹幕过滤函数":["25.4","36.4"],"返回":["25.4","36.4"],"则可以发送":["25.4","36.4"],"locktime":["25.4","36.4"],"artplayerplugindanmuku":["25.5","25.10","36.5","36.9","36.10","36.11","36.12"],"send":["25.5"],"plugins":["25.10","36.5","36.9","36.10","36.11","36.12"],"danmus":["25.15","36.15"],"加载弹幕":["25.15","36.15"],"error":["25.15","36.15"],"demo":["27.1"],"within":["28.1"],"for":["28.1"],"example":["28.1"],"iframe":["28.4","39.4","39.9"],"path":["28.7"],"no":["28.9"],"longer":["28.9"],"messages":["28.11"],"head":["28.13","31.3","39.13"],"title":["28.13","31.3","39.13"],"include":["29.0"],"other":["29.0"],"languages":["29.0"],"besides":["29.0"],"simplified":["29.0"],"chinese":["29.0"],"and":["29.0","30.14","30.15","30.16","30.46"],"english":["29.0"],"zhtw":["29.2"],"you":["30.1"],"may":["30.1"],"asynchronously":["30.2"],"autoplayback":["30.3"],"muted":["30.4","41.4"],"it":["30.5","30.39"],"starts":["30.5"],"playing":["30.5","30.25"],"elements":["30.6"],"automatically":["30.11"],"adjust":["30.11"],"to":["30.11","30.21","30.36"],"hide":["30.11"],"browser":["30.12"],"viewport":["30.12","30.46"],"context":["30.14","30.15","30.16"],"panel":["30.15"],"control":["30.18","30.43"],"description":["30.19"],"allowed":["30.21"],"play":["30.21","41.42"],"bottom":["30.22","30.23"],"mounts":["30.26"],"access":["30.26"],"setting01":["30.29","41.29"],"return":["30.34","31.5","31.7","41.34"],"height":["30.35"],"escape":["30.36","41.36"],"boolean":["30.36","41.36"],"tags":["30.36"],"correct":["30.39"],"so":["30.39"],"needs":["30.39"],"specifically":["30.39"],"stated":["30.39"],"three":["30.40"],"parameters":["30.40"],"lang":["30.42","41.42"],"mobile":["30.44"],"devices":["30.44"],"warning":["30.45"],"size":["30.46"],"feature":["30.47"],"types":["31.6"],"属性":["31.7"],"export":["31.7"],"jsdelivr":["31.8"],"jpg":["35.4"],"视频广告的地址":["35.4"],"test1":["35.4"],"广告跳转网址":["35.4"],"弹幕数组":["36.5"],"页面里的播放器":["39.1"],"如在":["39.1"],"的消息":["39.8"],"简体中文":["40.0"],"和":["40.0"],"英文":["40.0"],"有时候":["41.2"],"地址没那么快知道":["41.2"],"这时候你可以异步设置":["41.2"],"cover":["41.11"],"是否转义":["41.36"],"标签":["41.36"],"默认为":["41.36"],"onvttload":["41.36"],"用于修改":["41.36"]},{"0":["15.11","24.4"],"1":["3.24","9.8","19.8","36.5"],"2":["3.25","9.2","19.2","30.3"],"3":["3.27","13.27","19.5","41.1"],"4":["3.27","13.27","19.1","20.7","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.16","30.18","30.20","30.22","30.23","30.24","30.25","30.27","30.32","30.35","30.37","30.39","30.41","30.47","41.6","41.11","41.12","41.14","41.15","41.16","41.18","41.20","41.22","41.23","41.27","41.35","41.36","41.40","41.43","41.46","41.47"],"5":["3.22","3.28","9.8","13.28","19.8","28.7","30.7","35.4"],"6":["3.28","12.1","13.28","15.39","20.7","30.2","41.2"],"7":["15.5","15.6","15.16","15.17","15.18","15.23","15.35","15.36","30.37","41.26"],"8":["15.14","15.25","30.35","31.3","41.35","41.40"],"9":["15.12","30.28"],"10":["3.11","3.13","3.26","5.11","9.8","19.8"],"14":["30.32"],"20":["3.10"],"22":["9.4"],"40":["13.6"],"60":["25.4","36.4"],"100":["13.9","25.4","36.4"],"200":["25.4","36.4"],"300":["13.4","13.5"],"500":["3.20","13.7","13.8","13.16","25.4","36.4"],"1000":["13.23"],"2000":["3.21","3.23","13.21"],"3000":["3.14","15.11"],"5000":["3.3","3.12","3.15"],"的":["0.0","0.4","1.0","5.0"],"url":["0.1","0.5","0.8","0.12","0.14","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.19","2.20","2.21","2.22","2.24","2.25","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.4","3.29","5.1","5.2","5.3","5.7","5.8","5.12","5.13","5.14","5.15","5.17","5.18","5.20","5.21","5.24","5.26","5.27","5.28","5.29","5.31","5.32","5.33","5.34","9.1","9.5","10.3","10.5","10.7","10.16","12.2","12.6","12.7","12.8","12.10","12.16","12.17","12.18","12.20","12.21","12.22","12.23","12.24","12.25","12.27","12.28","12.29","15.1","15.2","15.3","15.7","15.8","15.13","15.22","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.34","15.37","25.6","25.8","25.13","25.14","29.2","30.17","30.33","30.38","30.48","31.6","36.6","36.13","36.14","40.1","40.2","41.7","41.10","41.19","41.33","41.39","41.48"],"assets":["0.1","0.5","0.8","0.9","0.11","0.12","0.14","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.28","2.29","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.29","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.19","5.20","5.21","5.24","5.26","5.27","5.28","5.29","5.30","5.31","5.32","5.33","5.34","9.1","9.5","10.3","10.5","10.7","10.16","12.2","12.6","12.17","12.18","12.20","12.23","12.27","12.28","12.29","15.2","15.13","15.22","15.26","15.29","15.31","15.32","15.34","15.37","15.40","19.4","25.6","25.8","25.13","25.14","29.2","30.17","30.33","30.38","30.39","31.6","36.6","36.13","36.14","40.1","40.2","41.10","41.19","41.32","41.33","41.38","41.39","41.45","41.48"],"sample":["0.1","0.5","0.7","0.8","0.9","0.10","0.11","0.12","0.14","2.6","2.11","2.12","2.16","2.17","2.18","2.20","2.21","2.22","2.23","2.24","2.25","2.28","2.29","2.38","5.2","5.3","5.8","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.19","5.20","5.21","5.26","5.27","5.28","5.29","5.30","5.31","5.32","5.33","5.40","9.5","10.3","10.5","10.7","10.16","12.2","12.18","12.20","12.23","12.27","12.28","12.29","15.2","15.22","15.26","15.31","15.37","15.40","19.4","25.6","25.8","25.13","25.14","29.3","30.17","30.33","30.38","30.39","31.6","36.6","36.8","36.13","36.14","40.2","40.3","41.1","41.10","41.19","41.32","41.33","41.38","41.39","41.45","41.48"],"video":["0.1","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.14","2.2","2.6","2.12","2.17","2.18","2.20","2.21","2.22","2.23","2.24","2.25","2.27","2.28","2.29","5.2","5.3","5.8","5.10","5.12","5.13","5.15","5.19","5.21","5.22","5.26","5.28","5.29","5.30","5.32","5.33","5.40","10.1","10.3","10.5","10.7","10.16","12.2","12.23","12.27","12.28","12.29","15.26","15.37","15.40","19.4","25.6","25.8","25.11","25.12","25.14","29.3","30.38","31.6","36.8","36.13","36.14","40.2","40.3","41.1","41.10","41.19","41.30","41.33","41.38","41.39","41.45"],"mp4":["0.3","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.15","2.2","2.17","2.18","2.20","2.23","2.27","2.28","2.29","5.15","5.19","5.21","5.22","5.26","5.29","5.30","5.31","5.40","10.1","10.3","10.5","10.6","10.7","10.13","10.16","12.27","12.28","12.29","13.19","15.22","15.26","15.37","15.40","19.4","25.6","25.7","25.8","25.11","25.12","29.3","29.4","30.38","36.7","36.8","36.13","36.14","40.2","40.3","41.1","41.10","41.19","41.30","41.31","41.33","41.38","41.45"],"click":["0.3","0.13","6.2","6.3","7.1","7.3","10.3","10.13","15.19","15.21","16.2","16.3","17.3","25.10","30.30","36.10"],"event":["0.3","0.13","9.2","9.3","10.13","12.44","17.1","19.2","19.3"],"console":["0.3","0.6","0.13","0.16","6.2","6.3","6.4","6.5","9.2","9.3","10.1","10.3","10.4","10.5","10.6","10.13","11.1","16.2","16.3","16.4","16.5","19.2","19.3","30.29"],"info":["0.3","0.6","0.13","0.16","1.6","6.2","6.3","6.4","6.5","9.2","9.3","10.1","10.3","10.4","10.6","10.13","11.1","16.2","16.3","16.4","16.5","19.2","19.3","30.29"],"warning":["0.4","10.2","10.4","11.6","15.11","15.15","15.19","15.30","20.3","20.4","30.7","30.10","40.0"],"提示":["0.4"],"默认所有播放器实例都是共享同一个":["0.4"],"localstorage":["0.4"],"而且默认的":["0.4"],"是":["0.4"],"settings":["0.4","9.4","19.4"],"如果你想不同的播放器使用不同的":["0.4"],"play":["0.6","10.6","30.42","41.4"],"on":["0.7","0.8","0.9","0.10","2.2","5.30","5.40","7.5","8.5","9.8","10.0","10.13","11.0","15.0","15.40","17.5","18.5","19.8","20.3","21.0","23.0","29.0","32.0","34.0"],"ready":["0.9","0.10","2.2","5.11","5.40","7.5","10.13","17.5"],"app":["0.11","0.12","0.14","2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.19","2.21","2.22","2.24","2.25","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.4","3.5","3.6","3.29","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.16","5.17","5.18","5.20","5.24","5.25","5.27","5.28","5.29","5.32","5.33","5.34","5.37","9.1","9.5","10.3","10.7","10.16","12.2","12.6","12.7","12.8","12.9","12.10","12.12","12.13","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.38","12.39","13.29","15.1","15.2","15.3","15.7","15.8","15.9","15.10","15.12","15.13","15.20","15.22","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.34","20.6","25.13","25.14","29.2","30.17","30.33","30.39","30.48","31.5","31.6","36.6","36.13","40.1","40.2","41.7","41.10","41.17","41.24","41.26","41.32","41.33","41.39","41.48"],"hotkeyevent":["0.13","10.13"],"true":["0.15","2.27","3.1","3.19","3.30","3.32","7.2","9.4","17.2","19.4","30.10","30.36"],"flip":["0.15"],"playbackrate":["0.15"],"aspectratio":["0.15"],"function":["0.16","6.2","6.3","6.4","7.1","7.3","9.3","10.13","10.16","15.19","15.21","16.2","16.3","16.4","17.3","19.3","25.10","30.29","30.30","30.36","36.10","39.7","41.29"],"myplugin":["0.16","10.16"],"art":["1.1","3.1","3.2","3.3","3.7","3.8","3.9","3.10","3.11","3.12","3.16","3.17","3.20","3.21","3.22","3.23","3.26","3.27","3.28","3.31","3.32","5.4","5.35","5.36","5.37","5.38","5.39","9.5","10.3","10.9","10.11","10.14","10.15","12.1","12.5","12.11","12.12","12.31","12.32","12.33","12.34","12.35","12.36","12.37","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.28","13.29","15.5","15.6","15.8","15.14","15.16","15.17","15.18","15.20","15.23","15.24","15.25","15.27","15.35","15.36","15.37","15.39","19.1","19.5","29.1","29.2","30.9","30.13","30.17","30.24","30.27","30.32","30.33","30.35","30.39","30.40","30.41","41.3","41.6","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.24","41.25","41.27","41.35","41.37","41.41","41.43","41.44","41.46","41.47"],"new":["1.1","3.2","3.5","3.6","3.7","3.8","3.9","3.10","3.16","3.21","3.27","3.28","3.32","5.4","5.5","5.6","5.23","5.35","5.36","5.37","5.38","5.39","9.5","10.3","10.9","10.15","12.1","12.3","12.4","12.5","12.9","12.11","12.12","12.13","12.14","12.15","12.19","12.24","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.7","13.8","13.16","13.28","13.29","15.3","15.5","15.6","15.8","15.9","15.10","15.12","15.13","15.14","15.16","15.17","15.18","15.20","15.23","15.24","15.25","15.27","15.28","15.29","15.33","15.37","15.39","19.1","19.5","29.1","29.2","30.9","30.13","30.17","30.24","30.32","30.33","30.39","30.41","30.48","41.3","41.5","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.17","41.18","41.20","41.21","41.22","41.23","41.24","41.25","41.27","41.32","41.35","41.37","41.41","41.43","41.44","41.46","41.47"],"container":["1.1","2.1","2.3","2.4","2.14","3.4","3.5","3.6","3.7","3.8","3.9","3.16","3.28","3.29","5.1","5.4","5.5","5.6","5.7","5.9","5.14","5.16","5.17","5.18","5.23","5.24","5.25","5.27","5.35","5.36","5.38","5.39","9.1","9.5","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.29","15.1","15.3","15.7","15.8","15.9","15.10","15.12","15.13","15.17","15.18","15.20","15.22","15.24","15.27","15.28","15.29","15.31","15.32","15.33","15.34","20.6","25.13","25.14","29.1","29.2","30.17","30.24","30.32","30.33","30.39","30.41","30.48","36.6","41.5","41.7","41.17","41.24","41.26","41.32","41.35","41.37","41.39","41.41"],"js":["1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.12","10.8","10.9","10.10","10.11","10.12","10.14","10.15","11.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.24","13.25","13.26","13.30","13.31","13.32","15.4","15.5","15.14","15.23","15.35","15.36","15.39","19.1","20.2","24.3","25.3","26.3","27.3","28.4","28.8","30.3","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.24","30.25","30.27","30.32","30.35","30.37","30.39","30.43","30.44","30.47","31.2","35.3","36.3","37.3","38.3","39.4","39.8","39.11","41.6","41.11","41.35","41.36","41.40"],"artplayer":["1.6","5.4","5.5","5.6","5.16","5.23","5.25","5.35","5.36","5.38","5.39","9.5","10.3","10.9","10.15","12.1","12.3","12.4","12.5","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.19","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.2","13.3","13.5","13.6","13.9","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.24","13.25","13.26","13.30","13.31","13.32","15.1","15.3","15.6","15.7","15.8","15.9","15.10","15.12","15.13","15.16","15.17","15.18","15.20","15.22","15.23","15.24","15.25","15.27","15.28","15.29","15.31","15.32","15.33","19.1","19.5","29.1","30.17","30.24","30.26","30.32","30.33","30.39","30.41","30.48","41.3","41.5","41.7","41.8","41.9","41.13","41.14","41.15","41.16","41.17","41.21","41.24","41.25","41.32","41.35","41.37","41.41","41.44"],"手动触发事件":["2.0"],"subtitle":["2.27","2.28","2.29","12.30"],"srt":["2.30","12.30"],"或者部分加载完成":["2.44"],"则发送此事件":["2.44"],"已经到达结束点":["2.45"],"正在尝试获取媒体数据":["2.56"],"一级属性":["3.0"],"var":["3.1","3.2","3.3","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.28","3.30","3.31","3.32","5.4","5.38","9.5","10.9","10.11","10.12","10.14","10.15","12.1","12.11","12.36","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","13.28","15.5","15.6","15.10","15.12","15.14","15.16","15.17","15.18","15.23","15.25","15.35","15.36","15.39","19.1","19.5","29.2","30.3","30.9","30.13","30.17","30.24","30.27","30.32","30.35","30.37","30.39","30.41","41.6","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.25","41.26","41.27","41.35","41.37","41.40","41.41","41.43","41.44","41.46","41.47"],"false":["3.17","3.18","3.31","6.5","13.2","16.5","25.5","36.5"],"adsplugin":["4.0","14.0"],"option":["4.0","14.0","20.4","21.0","25.15","31.4","32.0","36.15"],"layers":["4.0","14.0"],"ads":["4.0"],"html":["4.0","7.4","8.4","9.6","15.19","15.21","17.4","18.4","19.6","25.10","25.11","28.11","30.30","30.31","36.9","36.10","36.11","36.12","41.30","41.31"],"img":["4.0","9.4","9.7","19.7","30.38","41.38"],"style":["4.0","6.1","7.3","8.1","8.4","16.1","17.3","18.1","18.4","20.4","41.28"],"width":["4.0","8.4","9.4","9.7","18.4","19.7","41.28"],"100px":["4.0","8.4","18.4","41.28"],"src":["4.0","8.3","8.4","9.7","18.3","18.4","19.7","30.28","41.28"],"display":["4.0"],"none":["4.0"],"position":["4.0","5.19","7.4","8.2","8.3","8.5","15.21","17.4","18.2","18.3","18.5","25.9","25.10","25.11","25.12","30.28","30.31","36.9","36.10","36.11","36.12","41.28","41.31"],"absolute":["4.0","8.2","8.3","8.5","18.2","18.3","18.5","30.28","41.28"],"top":["4.0","8.2","8.3","8.5","18.2","18.3","18.5","30.28","41.28"],"20px":["4.0","30.28","41.28"],"right":["4.0","7.2","7.4","8.2","8.5","15.21","17.2","17.4","18.2","18.5","25.9","25.10","25.11","30.28","36.9","36.10","36.11","36.12"],"seek":["5.11","28.7"],"settimeout":["5.11","7.5","17.5","30.2"],"controls":["5.19","5.21","15.21","25.9","25.10","25.11","25.12","36.9","36.10","36.11","36.12"],"jpg":["5.22"],"hd":["5.41","15.41"],"720p":["5.41","15.41"],"element":["6.1","8.1"],"组件的":["6.1","8.1"],"dom":["6.1","8.1","9.3","16.1","18.1","19.3"],"元素":["6.1","8.1"],"args":["6.2","6.3","6.4","16.2","16.3","16.4","30.29","30.30","41.29"],"show":["6.5","9.6","9.8","16.4","16.5","19.6","19.8"],"组件样式对象":["7.1"],"组件点击事件":["7.1"],"mounted":["7.1","10.0","11.0","15.0","17.1"],"selector":["7.2","17.2"],"default":["7.2","10.4","17.2","20.7","29.4","40.4"],"span":["7.2","17.2"],"01":["7.2","17.2","30.29","41.29"],"button":["7.3","7.4","17.3","17.4"],"tooltip":["7.3","7.4","8.2","8.3","17.1","17.3","17.4","18.2","18.3","30.31"],"color":["7.3","17.3","25.5","36.5"],"red":["7.3","17.3"],"your":["7.4","15.30","17.4","29.0","30.30","30.31","41.30","41.31","41.45"],"02":["7.5","9.3","17.5","19.3","30.29","41.29"],"update":["7.5"],"the":["7.5","12.46","17.5","20.3","28.7","29.4","40.4"],"tip":["8.2","8.3","18.2","18.3"],"50px":["8.2","8.3","8.5","18.2","18.3","18.5"],"potser":["8.4"],"item":["9.2","9.3","19.2","19.3"],"onselect":["9.3","19.3","30.29","41.29"],"pip":["9.4","19.4"],"mode":["9.4","19.4"],"close":["9.4","19.4"],"heigth":["9.4","9.7","19.7"],"add":["9.6","20.1","31.1"],"slider":["9.6","19.6"],"state":["9.7","19.7"],"range":["9.8","19.8","36.11"],"to":["10.2","12.40","12.41","12.60","14.0","24.4","25.5","25.7","29.0","30.1"],"easily":["10.2"],"distinguish":["10.2"],"between":["10.2"],"by":["10.4","30.45"],"all":["10.4","13.0"],"zh":["10.6"],"cn":["10.6"],"div":["10.8","10.9","10.10","10.15","13.23","15.38","19.5","30.21","30.26","30.36","30.40","30.46","41.36"],"classname":["10.8","10.9","10.10","10.11","10.12","10.15","13.1","13.23","15.4","15.38","19.5","30.15","30.21","30.26","30.36","30.40","30.46","41.36"],"run":["10.8","10.9","10.10","10.11","10.12","10.14","10.15","11.7","11.11","13.1","13.23","15.4","15.38","19.5","30.15","30.21","30.26","30.36","30.40","30.44","30.46","41.36"],"code":["10.8","10.9","10.10","10.11","10.12","10.14","10.15","11.1","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","13.1","13.14","13.23","13.24","13.26","15.4","15.38","19.5","30.5","30.12","30.14","30.15","30.16","30.18","30.21","30.25","30.26","30.35","30.36","30.40","30.43","30.44","30.46","30.47","41.36"],"switch":["10.10","15.11","15.19"],"visibility":["10.10"],"full":["11.6"],"list":["11.6"],"manually":["12.0"],"trigger":["12.0"],"data":["12.40","12.56","20.7"],"through":["12.40","12.41","30.26"],"of":["12.43","28.1","30.1"],"partially":["12.44"],"media":["12.45","12.47"],"resource":["12.46"],"type":["12.46","22.0","33.0","36.11"],"loaded":["12.48"],"paused":["12.49","14.0"],"pause":["12.51"],"or":["12.51"],"delay":["12.51"],"browser":["12.52"],"has":["12.53","12.57"],"skipping":["12.54","12.55"],"operation":["12.54","12.55"],"but":["12.56"],"due":["12.60"],"names":["13.0"],"are":["13.0"],"in":["13.0","25.5"],"devices":["13.19"],"a":["13.19","15.15"],"tap":["13.19"],"toggles":["13.19"],"for":["14.0"],"example":["14.0"],"i":["14.0"],"want":["14.0","30.10"],"write":["14.0"],"displays":["14.0"],"an":["14.0"],"image":["14.0"],"advertisement":["14.0"],"t":["15.11"],"and":["15.11"],"note":["15.15"],"some":["15.15"],"videos":["15.15"],"do":["15.15"],"not":["15.15"],"have":["15.15"],"resize":["15.30"],"class":["15.38"],"name":["15.38"],"480p":["15.41"],"object":["16.1","18.1","30.11"],"triggered":["17.1"],"after":["17.1"],"is":["17.1"],"poster":["18.4"],"setting":["19.4","36.14"],"step":["19.5"],"unpkg":["20.2","24.3","25.3","26.3","27.3","28.4","31.2","35.3","36.3","37.3","38.3","39.4"],"player":["20.3","30.45"],"s":["20.3","30.11"],"size":["20.3","30.1"],"depends":["20.3"],"types":["20.6"],"const":["20.6"],"export":["20.7"],"return":["20.7","25.7"],"jsdelivr":["20.8"],"net":["20.8","31.8"],"https":["20.8","31.8"],"cdn":["20.8","31.8"],"npm":["20.8","31.8"],"initialize":["21.0","30.1","32.0"],"autoplay":["21.0","32.0"],"createplayer":["22.0","33.0"],"attachmediaelement":["22.0","33.0"],"load":["22.0","33.0"],"attachmedia":["23.0","34.0"],"else":["23.0","34.0"],"canplaytype":["23.0","34.0"],"application":["23.0","34.0"],"com":["24.3","25.3","26.3","27.3","28.4","35.3","36.3","37.3","38.3","39.4"],"equal":["24.4"],"totalduration":["24.4"],"closed":["24.4"],"early":["24.4"],"less":["24.4"],"then":["24.4"],"输入框锁定时间":["25.4","36.4"],"maxlength":["25.4","36.4"],"输入框最大可输入的字数":["25.4","36.4"],"minwidth":["25.4","36.4"],"输入框最小宽度":["25.4","36.4"],"seconds":["25.5"],"fff":["25.5","36.5"],"local":["25.5"],"border":["25.5","36.5"],"whether":["25.5"],"plugins":["25.6","25.7","25.8","25.9","25.11","25.12","36.7","36.8"],"artplayerplugindanmuku":["25.7","25.8","25.9","25.11","25.12","36.7","36.8"],"use":["25.7","39.7"],"promise":["25.7","36.7"],"xml":["25.9","25.10","25.11","25.12","36.9","36.10","36.11","36.12"],"text":["25.10","30.36","36.10"],"prompt":["25.10"],"danmaku":["25.11"],"加载错误":["25.15","36.15"],"config":["25.15","36.15"],"配置变化":["25.15","36.15"],"functionalities":["28.1"],"get":["28.7","31.4"],"value":["28.7","39.7"],"communicate":["28.9"],"with":["28.9"],"can":["28.10"],"index":["28.11"],"commit":["28.12","39.12"],"body":["28.13","31.3","39.13"],"id":["28.13","39.13","41.45"],"you":["29.0","30.10"],"need":["29.0","30.1"],"import":["29.0"],"required":["29.0"],"change":["29.4","40.4"],"like":["30.1"],"css":["30.1","30.11","41.1"],"this":["30.4","41.4"],"equivalent":["30.4"],"will":["30.7"],"cache":["30.7"],"muted":["30.10"],"if":["30.10"],"similar":["30.11"],"fit":["30.11"],"increase":["30.19"],"volume":["30.19"],"decrease":["30.19"],"fast":["30.19"],"forward":["30.19"],"rewind":["30.19"],"opacity":["30.28"],"left":["30.31","41.31"],"something":["30.34","41.34"],"dosomething":["30.34","41.34"],"onvttload":["30.36"],"modify":["30.36"],"loading":["30.38","41.38"],"address":["30.40"],"current":["30.40"],"instance":["30.40","31.4"],"modifying":["30.42"],"existing":["30.42"],"because":["30.45"],"uses":["30.45"],"as":["30.45"],"key":["30.45"],"dimensions":["30.46"],"demo":["31.3"],"meta":["31.3"],"charset":["31.3"],"utf":["31.3"],"getinstance":["31.4"],"选项":["31.7"],"为空则不跳转":["35.4"],"http":["35.4"],"org":["35.4"],"必须观看的时长":["35.4"],"期间不能被跳过":["35.4"],"单位为秒":["35.4"],"当该值大于或等于totalduration时":["35.4"],"不能提前关闭广告":["35.4"],"当该值等于或小于0时":["35.4"],"则随时都可以关闭广告":["35.4"],"playduration":["35.4"],"弹幕文本":["36.5"],"time":["36.5"],"发送时间":["36.5"],"单位秒":["36.5"],"弹幕局部颜色":["36.5"],"使用":["36.7"],"异步返回":["36.7"],"隐藏弹幕":["36.9"],"发送弹幕":["36.10"],"弹幕大小":["36.11"],"input":["36.11"],"重载弹幕":["36.12"],"里通过代码控制":["39.1"],"from":["39.7"],"async":["39.7"],"通信":["39.9"],"只能运行在":["39.10"],"的消息":["39.11"],"artplayerpluginiframe":["39.12"],"外":["40.0"],"不再捆绑其它多国语言":["40.0"],"需要自行导入需要的语言":["40.0"],"lang":["40.3"],"language":["40.4"],"您可能需要初始化容器元素的大小":["41.1"],"如":["41.1"],"等同于":["41.4"],"document":["41.26"],"queryselector":["41.26"],"menu":["41.30"],"control":["41.31"],"文本的函数":["41.36"],"修改现有的语言":["41.42"]},{"0":["5.11","25.5","31.6","36.5"],"1":["9.7","13.24","19.7","25.11","36.11"],"2":["13.25"],"3":["30.1"],"4":["30.15","30.21","30.36","30.40","30.43","30.44","30.46"],"5":["9.7","13.22","19.7","24.4","31.6"],"6":["15.38"],"7":["15.4","30.26"],"8":["12.0","30.40"],"9":["41.28"],"10":["9.7","13.11","13.13","13.26","19.7","24.4","35.4"],"11":["30.42","41.42"],"12":["25.11","30.36","36.11","41.36"],"20":["13.10"],"22":["9.5","9.6","19.4","19.6"],"25":["25.11","36.11"],"32":["0.13","10.13"],"50":["25.11","36.11"],"60":["30.33","41.33"],"120":["41.33"],"150":["9.2","19.2"],"222":["36.5"],"400":["25.4","36.4"],"404":["2.11","12.11"],"500":["13.20"],"1000":["30.2"],"2000":["13.23"],"3000":["5.11","13.14"],"5000":["13.3","13.12","13.15"],"二级属性":["0.0"],"mp4":["0.1","0.12","0.14","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.19","2.21","2.22","2.24","2.25","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.4","3.5","3.6","3.28","3.29","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.17","5.18","5.20","5.24","5.27","5.28","5.32","5.33","5.34","5.37","9.1","9.5","10.8","10.9","10.10","10.15","12.2","12.6","12.7","12.8","12.9","12.10","12.12","12.13","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.38","13.29","15.1","15.2","15.3","15.7","15.8","15.9","15.10","15.12","15.13","15.17","15.18","15.20","15.24","15.27","15.28","15.29","15.31","15.32","15.33","15.34","19.5","20.5","20.6","25.13","25.14","29.2","30.17","30.32","30.33","30.35","30.48","31.5","31.6","36.6","40.1","41.7","41.24","41.32","41.35","41.48"],"console":["0.1","0.5","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.11","1.12","5.8","5.13","5.14","5.15","5.22","5.26","5.27","5.28","5.29","5.31","5.32","5.33","5.40","7.3","8.2","8.3","10.16","15.26","15.31","15.37","15.40","17.3","18.2","18.3","30.28","30.30","30.31","41.28","41.29","41.30"],"info":["0.1","0.5","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.12","5.8","5.13","5.15","5.22","5.26","5.28","5.29","5.31","5.32","5.33","7.3","8.2","8.3","10.5","10.16","15.26","15.31","15.37","17.3","18.2","18.3","30.28","30.30","41.28","41.29","41.30"],"warning":["0.2","1.6","5.11","10.1","10.5","10.6","15.21","15.37","29.0","30.2","30.4","30.17","30.19","30.39","31.4","41.10","41.39","41.45","41.48"],"提示":["0.2","5.11","41.45"],"为了方便区别":["0.2"],"元素和普通对象":["0.2"],"播放器里的所有":["0.2"],"mouseenter":["0.3","10.3"],"你可以修改":["0.4"],"即可":["0.4"],"zh":["0.6"],"cn":["0.6","29.4","40.4"],"your":["0.6","10.6","20.3","29.3","29.4","30.3","40.3","40.4","41.3"],"ready":["0.7","0.8","0.11","0.12","0.13","0.14","0.15","2.6","2.18","2.23","2.30","5.8","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.22","5.26","5.27","5.28","5.29","5.30","5.31","5.32","5.33","5.41","6.5","8.5","9.8","10.7","10.9","10.10","12.2","12.18","12.23","12.30","15.8","15.10","15.13","15.22","15.26","15.28","15.29","15.31","15.32","15.33","15.40","15.41","16.5","18.5","19.8"],"html":["0.8","0.9","0.10","5.19","5.21","14.0","25.8","25.9","25.12","36.8"],"some":["0.8","0.9","0.10","15.37"],"text":["0.8","0.9","0.10","17.1"],"position":["0.9","5.21","5.34","7.1","8.4","14.0","17.1","18.4","25.8","36.8"],"on":["0.11","0.12","0.13","0.14","0.15","2.6","2.11","2.12","2.18","2.23","2.30","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.20","5.22","5.26","5.27","5.28","5.29","5.31","5.32","5.33","5.41","6.4","6.5","7.4","10.7","10.9","10.10","12.2","12.6","12.18","12.23","12.30","15.7","15.8","15.10","15.12","15.13","15.22","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.41","16.4","16.5","17.4","22.0","30.4","33.0"],"subtitleoffset":["0.15"],"return":["0.16","9.2","9.3","10.16","15.11","19.2","19.3","28.7","36.7","36.10","39.7"],"name":["0.16","10.16"],"something":["0.16"],"dosomething":["0.16"],"一级属性":["1.0","5.0"],"app":["1.1","3.2","3.7","3.8","3.9","3.10","3.11","3.12","3.16","3.21","3.22","3.27","3.28","3.32","5.4","5.5","5.6","5.23","5.35","5.36","5.38","5.39","10.8","10.9","10.10","10.11","10.12","10.14","10.15","12.1","12.3","12.4","12.5","12.11","12.14","12.31","12.32","12.33","12.34","12.35","12.36","12.37","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","13.28","15.5","15.6","15.14","15.16","15.17","15.18","15.23","15.24","15.25","15.35","15.36","15.39","19.1","19.5","29.1","30.9","30.13","30.24","30.26","30.32","30.35","30.36","30.37","30.41","41.5","41.6","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.25","41.27","41.35","41.36","41.37","41.40","41.41","41.43","41.44","41.46","41.47"],"url":["1.1","3.5","3.6","3.7","3.8","3.9","3.16","3.21","3.27","3.28","5.4","5.5","5.6","5.16","5.23","5.25","5.35","5.36","5.37","5.38","5.39","10.8","10.9","10.10","10.12","10.14","10.15","12.1","12.3","12.4","12.5","12.9","12.11","12.12","12.13","12.14","12.15","12.19","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.27","13.28","13.29","15.5","15.6","15.12","15.14","15.16","15.17","15.18","15.20","15.23","15.24","15.25","15.35","15.36","15.39","19.1","19.5","20.5","20.6","29.1","30.24","30.41","31.5","41.3","41.5","41.8","41.9","41.13","41.14","41.15","41.16","41.17","41.21","41.24","41.25","41.37","41.41","41.44"],"assets":["1.1","2.1","2.3","2.4","2.14","3.4","3.5","3.6","3.7","3.8","3.9","3.16","3.27","3.28","5.1","5.4","5.5","5.6","5.16","5.23","5.25","5.35","5.36","5.37","5.38","5.39","10.8","10.9","10.10","10.11","10.12","10.14","10.15","12.1","12.3","12.4","12.5","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.19","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.5","13.6","13.27","13.28","13.29","15.1","15.3","15.5","15.6","15.7","15.8","15.9","15.10","15.12","15.14","15.16","15.17","15.18","15.20","15.23","15.24","15.25","15.27","15.28","15.33","19.1","19.5","20.5","20.6","29.1","30.24","30.32","30.35","30.41","30.48","31.5","41.5","41.7","41.17","41.24","41.35","41.36","41.37","41.41"],"全部工具函数请参考以下地址":["1.6"],"js":["1.11","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","13.1","13.23","15.38","28.11","30.11","30.21","30.26","30.36","30.40","30.46","39.9"],"emit":["2.0","12.0"],"focus":["2.0","12.0"],"移除事件":["2.0"],"sample":["2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.13","2.14","2.15","2.19","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.39","3.4","3.5","3.6","3.7","3.8","3.9","3.16","3.27","3.28","3.29","5.1","5.5","5.6","5.7","5.9","5.16","5.23","5.24","5.25","5.34","5.35","5.36","5.37","5.38","9.1","10.8","10.9","10.10","10.11","10.12","10.14","10.15","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.19","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.4","13.28","13.29","15.1","15.3","15.7","15.8","15.9","15.10","15.12","15.13","15.14","15.17","15.18","15.20","15.24","15.27","15.28","15.29","15.32","15.33","15.34","19.1","19.5","20.5","20.6","29.1","29.2","30.24","30.32","30.35","30.41","30.48","31.5","40.1","41.5","41.7","41.17","41.24","41.35","41.36","41.37","41.41"],"video":["2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.13","2.14","2.15","2.16","2.19","2.26","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.4","3.5","3.6","3.27","3.28","3.29","5.1","5.5","5.6","5.7","5.9","5.14","5.16","5.17","5.18","5.20","5.23","5.24","5.25","5.27","5.34","5.37","9.1","9.5","10.8","10.9","10.10","10.11","10.15","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.24","12.25","12.26","12.31","12.32","12.33","12.34","12.35","12.37","12.38","12.39","13.4","15.20","15.27","15.28","15.29","15.33","15.34","19.5","20.5","20.6","25.13","29.2","30.17","30.24","30.32","30.33","30.35","30.41","30.48","31.5","36.6","40.1","41.7","41.17","41.24","41.32","41.35","41.48"],"true":["2.16","2.17","2.20","2.21","2.22","2.23","2.24","2.25","2.38","3.29","5.2","5.3","5.20","6.2","6.4","6.5","9.1","9.5","10.15","12.17","12.20","12.27","13.1","13.30","13.32","15.2","15.20","16.2","16.4","16.5","19.5","25.13","25.14","30.17","36.13","36.14","41.10","41.32","41.45"],"setting":["2.17","2.20","2.27","3.29","9.1","9.5","12.20","13.29","19.5","25.13","25.14","36.13"],"srt":["2.27","2.28","2.29"],"并调用":["2.44"],"但数据意外未出现":["2.56"],"属性名字全部都是大写的形式":["3.0"],"未来容易发生变动":["3.0"],"new":["3.1","3.3","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.22","3.23","3.24","3.25","3.26","3.30","3.31","10.8","10.10","10.11","10.12","10.14","11.1","13.2","13.3","13.5","13.6","13.9","13.10","13.11","13.12","13.17","13.18","13.20","13.21","13.22","13.25","13.27","13.30","13.31","13.32","15.4","15.35","15.36","15.38","21.0","30.3","30.5","30.6","30.8","30.12","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.34","30.35","30.36","30.37","30.40","30.43","30.44","30.46","30.47","32.0","41.6","41.11","41.34","41.36","41.40"],"container":["3.1","3.2","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.30","3.31","3.32","10.8","10.9","10.10","10.11","10.12","10.14","10.15","12.1","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","13.28","15.4","15.5","15.6","15.14","15.16","15.23","15.25","15.35","15.36","15.39","19.1","19.5","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.25","30.26","30.27","30.35","30.36","30.37","30.43","30.47","31.7","41.3","41.6","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.25","41.27","41.36","41.40","41.43","41.44","41.46","41.47"],"art":["3.13","3.14","3.15","3.18","3.19","3.24","3.25","3.30","10.8","10.10","10.12","11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.21","13.22","13.24","13.25","13.26","13.27","13.30","13.31","13.32","15.4","15.38","30.3","30.5","30.6","30.8","30.12","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.36","30.37","30.43","30.44","30.46","30.47","41.11","41.26","41.36"],"show":["4.0","6.2","6.3","6.4","14.0","16.2","16.3","21.0","22.0","23.0","30.28","30.30","32.0","33.0","34.0"],"block":["4.0","14.0"],"hide":["4.0","14.0","25.9"],"controls":["4.0","5.34","15.34","25.8","36.8"],"tooltip":["4.0","7.1","9.6","19.6","41.31"],"muted":["5.2","5.3","5.24","15.2","15.3","24.4","35.4","41.10"],"seek":["5.10","5.12"],"t":["5.11"],"right":["5.19","5.21","8.3","8.4","14.0","17.1","18.3","18.4","25.8","25.12","36.8","41.28"],"switch":["5.19"],"click":["5.19","5.21","6.1","8.1","8.2","8.3","15.37","16.1","18.1","18.2","18.3","25.9","25.12","30.28","30.31","36.8","36.9","36.12","41.28","41.30","41.31"],"function":["5.19","5.21","6.1","8.1","8.2","8.3","16.1","18.1","18.2","18.3","25.7","25.9","25.12","30.28","30.31","36.7","36.9","36.12","41.28","41.30"],"log":["5.40","15.40"],"theme":["5.40","15.40","25.4","36.4"],"settimeout":["5.41","6.5","8.5","9.8","10.13","15.41","16.5","18.5","19.8","41.2"],"object":["6.1","8.1"],"组件样式对象":["6.1","8.1"],"false":["6.2","6.3","6.4","9.4","13.17","13.18","13.31","16.2","16.3","16.4","19.4","30.30","35.4"],"update":["6.5","8.5","9.8","16.5","19.8"],"组件挂载后触发":["7.1"],"组件的提示文本":["7.1"],"yellow":["7.2","17.2"],"02":["7.2","17.2"],"onselect":["7.2","17.2"],"item":["7.2","9.4","17.2"],"dom":["7.2","17.2"],"args":["7.3","8.2","8.3","17.3","18.2","18.3","30.28","30.31","41.28","41.30"],"mounted":["7.3","8.2","8.3","17.3","18.2","18.3"],"style":["7.4","14.0","17.4","20.5","25.11","30.31","31.4","31.5","36.11","41.31"],"color":["7.4","17.4","30.31","41.31"],"red":["7.4","17.4"],"control":["7.5","17.1","17.5"],"by":["7.5","8.5","9.8","17.5","18.5","19.8","24.4","30.10"],"absolute":["8.4","14.0","18.4"],"top":["8.4","14.0","18.4"],"50px":["8.4","18.4"],"the":["8.5","9.8","18.5","19.8","25.6","30.10"],"quality":["9.2","19.2"],"1080p":["9.2","19.2"],"src":["9.4","14.0","19.4","23.0","30.38","34.0","41.38"],"state":["9.4","30.38","41.38"],"svg":["9.4","9.7","19.4","19.7"],"settings":["9.5","10.4","19.5"],"slider":["9.5"],"5x":["9.5","9.6","19.5","19.6"],"img":["9.5","9.6","14.0","19.4","19.6"],"width":["9.5","9.6","14.0","19.4","19.6","20.5","30.1","41.1"],"icon":["9.6","19.6"],"range":["9.7","19.7","25.11"],"instance":["10.0"],"which":["10.0","11.0","15.0"],"reminder":["10.1"],"if":["10.1","10.4","15.37","20.8","25.9","25.10","30.45","36.9","36.10"],"you":["10.1","10.4","15.30","15.37"],"directly":["10.1"],"and":["10.2","10.4","12.44","17.1"],"plain":["10.2"],"objects":["10.2"],"in":["10.2"],"are":["10.2","15.15"],"mouseleave":["10.3"],"instances":["10.4"],"share":["10.4"],"same":["10.4","15.11"],"localstorage":["10.4"],"want":["10.4"],"different":["10.4"],"players":["10.4"],"use":["10.4","28.7","30.1"],"loading":["10.5","12.52"],"this":["10.5","30.39"],"using":["10.6"],"can":["10.6","30.39"],"only":["10.6","28.10","30.39"],"var":["10.8","10.10","11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","15.4","15.38","21.0","30.5","30.6","30.8","30.12","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.26","30.34","30.36","30.40","30.43","30.44","30.46","30.47","32.0","41.11","41.34","41.36"],"artplayer":["10.8","10.10","10.11","10.12","10.14","11.1","13.1","13.23","15.4","15.5","15.14","15.35","15.36","15.38","15.39","21.0","30.3","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.25","30.27","30.34","30.35","30.36","30.37","30.43","30.44","30.47","32.0","41.6","41.11","41.12","41.18","41.20","41.22","41.23","41.27","41.34","41.36","41.40","41.43","41.46","41.47"],"flip":["10.15"],"playbackrate":["10.15"],"aspectratio":["10.15"],"constructor":["11.0"],"please":["11.6","25.10"],"refer":["11.6"],"remove":["12.0"],"end":["12.40","12.41"],"without":["12.40","12.41"],"duration":["12.43"],"is":["12.44","12.46","12.52","15.30"],"sent":["12.44"],"reached":["12.45"],"not":["12.46","15.30","20.4"],"has":["12.47","12.54","12.55"],"due":["12.51","15.19","15.21","30.17"],"changed":["12.53"],"unexpectedly":["12.56"],"been":["12.57"],"currenttime":["12.58","28.7","39.7"],"attribute":["12.58"],"temporarily":["12.60"],"uppercase":["13.0"],"subject":["13.0"],"change":["13.0"],"defaults":["13.19"],"ads":["14.0"],"100px":["14.0"],"display":["14.0","25.5","36.11"],"none":["14.0"],"20px":["14.0"],"have":["15.11"],"functionality":["15.11"],"however":["15.11"],"method":["15.11"],"a":["15.11","29.0"],"promise":["15.11"],"such":["15.15"],"as":["15.15"],"that":["15.15"],"being":["15.15"],"live":["15.15"],"streamed":["15.15"],"or":["15.15","30.1"],"note":["15.19","30.2"],"to":["15.19","15.21"],"browser":["15.19","15.21","30.17"],"security":["15.19","15.21"],"mechanisms":["15.19","15.21"],"before":["15.19"],"triggering":["15.19"],"jpg":["15.22"],"json":["15.26"],"stringify":["15.26"],"but":["15.30","30.45"],"do":["15.30"],"know":["15.30"],"exact":["15.30"],"property":["15.30"],"tip":["15.37","20.8","30.19"],"need":["15.37"],"event":["16.1","18.1","25.9","28.8","36.9","39.8"],"left":["17.1"],"heigth":["19.4"],"pnpm":["20.1","24.2","25.2","26.2","27.2","28.3","31.1","35.2","36.2","37.2","38.2","39.3"],"com":["20.2","20.8","31.2","31.8"],"of":["20.3","30.45"],"so":["20.3"],"responsive":["20.4"],"modifying":["20.4"],"https":["20.5","31.5"],"org":["20.5","31.5"],"600px":["20.5"],"height":["20.5","30.1","41.1"],"400px":["20.5","30.1","41.1"],"margin":["20.5"],"volume":["20.6","31.6"],"options":["20.7"],"option":["20.7","31.7"],"unpkg":["20.8","31.8"],"else":["21.0","22.0","32.0","33.0"],"notice":["21.0","22.0","23.0","32.0","33.0","34.0"],"unsupported":["21.0","22.0","23.0","32.0","33.0","34.0"],"playback":["21.0","22.0","23.0","32.0","33.0","34.0"],"format":["21.0","22.0","23.0","32.0","33.0","34.0"],"mpd":["21.0","32.0"],"vnd":["23.0","34.0"],"apple":["23.0","34.0"],"mpegurl":["23.0","34.0"],"m3u8":["23.0","34.0"],"at":["24.4"],"any":["24.4"],"time":["24.4"],"playduration":["24.4"],"total":["24.4"],"whether":["24.4"],"填":["25.4","36.4"],"则为无限制":["25.4","36.4"],"maxwidth":["25.4","36.4"],"输入框最大宽度":["25.4","36.4"],"infinity":["25.4","36.4"],"则为":["25.4","36.4"],"宽度":["25.4","36.4"],"outline":["25.5"],"mode":["25.5","36.5"],"for":["25.5","30.2"],"scrolling":["25.5"],"artplayerplugindanmuku":["25.6","25.13","25.14","36.6","36.13","36.14"],"file":["25.6","30.2"],"consistent":["25.6"],"with":["25.6"],"asynchronously":["25.7"],"resolve":["25.7"],"xml":["25.8","36.8"],"enter":["25.10"],"test":["25.10"],"size":["25.11","30.7"],"input":["25.11"],"type":["25.11","28.12","39.12"],"min":["25.11","36.11"],"max":["25.11","36.11"],"step":["25.11","36.11"],"value":["25.11","36.11"],"plugins":["25.13","25.14","36.6","36.13","36.14"],"stop":["25.15","36.15"],"弹幕停止":["25.15","36.15"],"start":["25.15","36.15"],"async":["28.7"],"keyword":["28.7","39.7"],"await":["28.7","39.7"],"iframe":["28.9"],"run":["28.10","30.11"],"artplayerpluginiframe":["28.12","39.11"],"own":["29.0"],"when":["29.0","30.7"],"cannot":["29.0"],"be":["29.0"],"matched":["29.0"],"lang":["29.2","29.3","40.2"],"script":["29.2","40.2"],"i18n":["29.3","35.4","40.0","40.3"],"play":["29.4","30.19","40.4"],"300px":["30.1","41.1"],"support":["30.2"],"three":["30.2"],"formats":["30.2"],"last":["30.7"],"upon":["30.10"],"entering":["30.10"],"cover":["30.11"],"div":["30.11","31.3"],"classname":["30.11"],"code":["30.11"],"space":["30.19"],"toggle":["30.19"],"pause":["30.19"],"these":["30.19"],"document":["30.26"],"queryselector":["30.26"],"setting02":["30.29","41.29"],"green":["30.31","41.31"],"one":["30.33","41.33"],"more":["30.33","41.33"],"chance":["30.33","41.33"],"gif":["30.38","41.38"],"recognition":["30.39"],"extensions":["30.39"],"player":["30.39"],"parse":["30.39"],"cache":["30.45"],"progress":["30.45"],"class":["31.3"],"types":["31.7"],"const":["31.7"],"广告总时长":["35.4"],"totalduration":["35.4"],"视频广告是否默认静音":["35.4"],"多语言支持":["35.4"],"close":["35.4"],"关闭广告":["35.4"],"countdown":["35.4"],"s秒":["35.4"],"是否显示描边":["36.5"],"弹幕模式":["36.5"],"0表示滚动":["36.5"],"1静止":["36.5"],"弹幕":["36.6"],"resovle":["36.7"],"隐藏弹幕":["36.8"],"prompt":["36.10"],"请输入弹幕文本":["36.10"],"弹幕测试文本":["36.10"],"trim":["36.10"],"flex":["36.11"],"alignitems":["36.11"],"播放器的功能":["39.1"],"当无法匹配到语言时":["40.0"],"会默认显示英文":["40.0"],"或者使用":["41.1"],"aspect":["41.1"],"热键":["41.19"],"描述":["41.19"],"增加音量":["41.19"],"降低音量":["41.19"],"innerhtml":["41.26"],"opacity":["41.28"],"sd":["41.32"],"ploading":["41.38"],"后缀的识别":["41.39"],"播放器只能解析这种后缀":["41.39"],"因为播放器默认使用":["41.45"]},{"0":["20.5","20.6","31.5"],"1":["25.7","36.7"],"2":["5.28","25.5","36.5"],"4":["30.11"],"5":["5.7","5.8","5.14","15.7","20.6","41.7"],"8":["2.0"],"9":["5.29","30.1"],"10":["5.10","5.12","15.10","15.12"],"16":["5.29","15.29","25.10","30.1","36.10","41.1"],"22":["19.5"],"60":["30.35","41.35"],"100":["28.5","39.5"],"111":["25.7","36.7"],"120":["30.33"],"180":["30.33","41.33"],"222":["25.5","25.7","36.7"],"240":["41.33"],"333":["36.5"],"360":["9.2","19.2"],"720":["9.2","19.2"],"1000":["0.8","0.9","0.10","0.15","10.8","10.9","41.2"],"1080":["9.2","19.2"],"5000":["0.13","10.13"],"比较少用":["0.0"],"warning":["0.1","0.5","0.6","0.7","0.8","5.15","5.19","5.21","5.26","5.30","5.37","10.3","10.7","10.9","10.13","15.26","20.5","30.28","30.29","30.30","30.31","30.38","30.41","30.48","31.3","41.2","41.4","41.7","41.17","41.19","41.30","41.31","41.38","41.41"],"提示":["0.1","5.15","5.19","5.21","5.30","31.3","41.2","41.7","41.10","41.17"],"假如直接修改这个":["0.1"],"元素都是以":["0.2"],"开头命名的":["0.2"],"这是所有":["0.2"],"元素的定义":["0.2"],"mouseleave":["0.3"],"poster":["0.3","10.3"],"jpg":["0.3","10.3"],"then":["0.3","10.3","20.8","30.45"],"img":["0.3","10.3","19.5"],"loading":["0.5","12.47"],"这是所有图标的定义":["0.5"],"types":["0.5","1.6","40.0","41.48"],"使用":["0.6"],"只能更新实例化之后的":["0.6"],"to":["0.7","11.6","30.2","30.30","30.31"],"play":["0.7","4.0","5.2","10.7","15.2","29.3","30.2","40.3"],"如果想马上隐藏":["0.7"],"settimeout":["0.8","0.9","0.10","0.12","0.13","0.14","0.15","5.2","5.3","5.7","5.10","5.12","5.20","6.4","7.4","8.4","9.7","10.8","10.9","10.10","10.15","15.2","15.7","15.10","15.12","16.4","17.4","18.4","19.7"],"false":["0.8","0.9","0.10","0.14","0.15","10.8","10.9","10.10","10.15","24.4","30.28","41.28","41.30"],"left":["0.9","7.1","10.9"],"true":["0.10","0.12","2.19","3.4","3.5","3.6","3.27","3.28","5.1","5.13","5.24","5.31","6.3","10.10","12.16","12.19","12.21","12.22","12.23","12.24","12.25","12.38","13.4","13.5","13.6","13.27","13.28","13.29","15.1","15.3","15.24","15.31","16.3","19.1","30.24","30.32","41.17","41.24"],"srt":["0.11","12.27","12.28","12.29"],"on":["0.16","2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.13","2.14","2.15","2.16","2.17","2.19","2.20","2.21","2.22","2.24","2.25","2.26","2.27","2.28","2.29","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.7","3.8","3.9","3.16","5.1","5.2","5.3","5.4","5.5","5.6","5.16","5.23","5.24","5.25","5.35","5.36","8.4","9.7","10.8","10.11","10.12","10.14","10.15","12.1","12.3","12.4","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.17","12.19","12.20","12.21","12.22","12.24","12.25","12.26","12.27","12.28","12.29","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.7","13.8","13.9","13.16","15.1","15.2","15.3","15.5","15.6","15.9","15.14","15.16","15.17","15.18","15.20","15.21","15.23","15.24","15.25","15.35","15.36","18.4","19.7","25.13","25.14","35.4","36.13","36.14","41.4"],"非常少使用":["1.0"],"sample":["1.1","3.1","3.2","3.3","3.10","3.11","3.12","3.17","3.20","3.21","3.22","3.23","3.26","3.30","3.31","3.32","5.4","5.39","11.1","12.1","13.5","13.6","13.7","13.8","13.9","13.10","13.11","13.12","13.16","13.20","13.21","13.27","13.32","15.4","15.5","15.6","15.16","15.23","15.25","15.35","15.36","15.38","15.39","20.7","22.0","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.25","30.27","30.34","30.36","30.37","30.40","30.43","30.44","30.47","31.7","33.0","41.6","41.8","41.9","41.11","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.25","41.27","41.34","41.40","41.43","41.44","41.46","41.47"],"video":["1.1","3.7","3.8","3.9","3.10","3.11","3.12","3.16","3.20","3.21","3.22","3.23","3.30","3.32","5.4","5.38","10.12","10.14","11.1","12.1","12.36","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","15.4","15.23","15.38","19.1","20.7","29.1","30.9","30.27","31.7","41.5","41.6","41.8","41.9","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.25","41.27","41.36","41.37","41.41","41.43","41.44","41.46","41.47"],"mp4":["1.1","3.7","3.8","3.9","3.16","3.21","3.27","5.4","5.5","5.6","5.16","5.23","5.25","5.35","5.36","5.38","5.39","10.11","10.12","10.14","12.1","12.3","12.4","12.5","12.11","12.14","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.39","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","13.28","15.4","15.5","15.6","15.14","15.16","15.23","15.25","15.35","15.36","15.38","15.39","19.1","20.7","29.1","30.5","30.14","30.16","30.24","30.36","30.37","30.41","31.7","41.5","41.8","41.9","41.13","41.14","41.15","41.16","41.17","41.21","41.25","41.36","41.37","41.41","41.44"],"artplayer":["1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.11","1.12","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","22.0","23.0","30.11","30.21","30.40","30.46","33.0","34.0"],"d":["1.6"],"info":["1.11","2.12","5.14","5.27","5.37","5.38","9.4","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","15.8","15.13","15.14","15.22","15.27","15.28","15.29","15.32","15.33","19.4","20.5","28.8","30.31","31.5","39.8","41.31"],"const":["2.0","5.17","5.18","9.4","12.0","15.17","15.18","19.4","20.7","25.11","36.11"],"onready":["2.0","12.0"],"console":["2.1","2.3","2.4","2.5","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.28","2.29","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.39","5.24","5.37","5.38","5.39","9.4","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","12.7","12.8","12.9","12.10","12.12","12.13","12.15","12.26","15.8","15.13","15.14","15.22","15.27","15.28","15.29","15.32","15.33","15.39","19.4","20.5","25.14","28.8","31.5","35.4","36.14","39.8","41.31"],"event":["2.5","2.7","2.8","2.9","2.10","2.12","2.13","5.37","9.4","12.5","12.7","12.8","12.9","12.10","12.12","12.13"],"reconnecttime":["2.11","12.11"],"state":["2.12","2.15","2.16","2.21","2.22","2.23","2.24","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","9.5","9.6","12.12","12.15","12.21","12.22","12.23","12.24","12.31","12.32","12.33","12.34","12.35","12.37","19.6"],"height":["2.18","19.5","31.5"],"datauri":["2.25","12.25"],"currenttime":["2.26","12.26","28.12","39.12"],"offset":["2.27"],"text":["2.28","10.8","10.9","10.10","12.28","25.7","36.7"],"ass":["2.30","12.30"],"load":["2.44","12.44"],"方法重新加载它":["2.44"],"基本上用不到":["3.0"],"app":["3.1","3.3","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.23","3.24","3.25","3.26","3.30","3.31","11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","15.4","15.38","20.7","21.0","22.0","23.0","28.5","28.13","30.3","30.5","30.6","30.8","30.11","30.12","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.34","30.40","30.43","30.44","30.46","30.47","31.7","32.0","33.0","34.0","39.5","39.13","41.3","41.11","41.34"],"url":["3.1","3.2","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.22","3.23","3.24","3.25","3.26","3.30","3.31","3.32","11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.21","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","15.4","15.38","20.7","30.3","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.34","30.37","30.43","30.44","30.46","30.47","31.7","41.6","41.11","41.12","41.18","41.20","41.22","41.23","41.26","41.27","41.34","41.43","41.46","41.47"],"assets":["3.1","3.2","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.30","3.31","3.32","11.1","13.2","13.3","13.7","13.8","13.9","13.10","13.11","13.12","13.16","13.20","13.21","13.22","13.30","13.31","13.32","15.4","15.35","15.36","15.38","15.39","20.7","22.0","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.34","30.36","30.37","30.40","30.43","30.44","30.46","30.47","31.7","33.0","41.3","41.6","41.8","41.9","41.11","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.21","41.22","41.23","41.25","41.26","41.27","41.34","41.40","41.43","41.44","41.46","41.47"],"loop":["3.4","3.5","3.6","13.4","13.5","13.6"],"flip":["3.4","3.5","3.6","13.4"],"dblclick":["3.16"],"setting":["3.27","3.28","12.17","12.27","13.27","13.28","19.1","25.11","36.11"],"playbackrate":["3.27","13.27"],"contextmenu":["3.27","3.28","3.29","13.28","13.29"],"aspectratio":["3.28","13.28"],"show":["3.28","3.29","9.7","13.29","19.7","25.9","36.9","41.28","41.30"],"click":["4.0","5.34","5.37","14.0","15.34","25.8","35.4"],"marginright":["4.0","14.0"],"比较常用":["5.0"],"muted":["5.1","15.1","15.24"],"ready":["5.2","5.3","5.5","5.6","5.7","5.9","5.16","5.20","5.23","5.24","5.25","6.4","7.4","8.4","9.7","10.8","10.11","10.12","10.14","10.15","12.0","12.6","15.2","15.3","15.7","15.9","15.12","15.14","15.17","15.18","15.20","15.24","15.27","16.4","17.4","18.4","19.7","25.14","36.14"],"seek":["5.7","15.7","15.10","15.12"],"switch":["5.11"],"和":["5.11","7.1","36.6"],"的功能是一样的":["5.11"],"只是":["5.11"],"有的视频是没有时长的":["5.15"],"async":["5.17","5.18","15.17","15.18"],"await":["5.17","5.18","15.17","15.18"],"t":["5.22"],"json":["5.26"],"stringify":["5.26"],"resize":["5.30","36.13"],"当你的容器只有宽度":["5.30"],"playsinline":["5.31","15.31","41.37"],"m3u8":["5.32","30.2","41.40"],"000":["5.33"],"right":["5.34","7.1","15.34"],"html":["5.34","10.8","10.9","10.10","15.34","20.1","31.1"],"green":["5.40","15.40"],"1080p":["5.41","15.41"],"组件点击事件":["6.1","8.1"],"mounted":["6.1","8.1","16.1","18.1","25.11","30.28","36.11","41.28"],"组件挂载后触发":["6.1","8.1"],"get":["6.2","6.3","7.2","7.3","8.2","8.3","16.2","16.3","17.2","17.3","18.2","18.3"],"the":["6.2","6.3","6.4","6.5","7.2","7.3","7.4","8.2","8.3","8.4","9.7","16.2","16.3","16.4","16.5","17.2","17.3","17.4","18.2","18.3","18.4","19.7","30.19","30.30"],"element":["6.2","6.3","7.2","7.3","8.2","8.3","16.2","16.3","17.2","17.3","18.2","18.3"],"of":["6.2","6.3","7.2","7.3","8.2","8.3","12.51","15.37","16.2","16.3","17.2","17.3","18.2","18.3","25.6","30.38"],"by":["6.2","6.3","6.4","6.5","7.2","7.4","8.4","16.2","16.3","16.4","16.5","17.2","17.4","18.4","29.0"],"delete":["6.4","7.4","8.4","9.7"],"控制控制器出现的左右位置":["7.1"],"selector":["7.1","17.1"],"array":["7.1","17.1"],"return":["7.2","17.2","25.10"],"control":["7.2","7.3","7.4","17.2","17.3","17.4"],"200px":["8.5","18.5"],"720p":["9.2","19.2"],"360p":["9.2","19.2"],"nextstate":["9.4","19.4"],"heigth":["9.5","9.6","19.6"],"src":["9.5","9.6","19.5","19.6"],"svg":["9.5","9.6","19.5","19.6"],"pip":["9.8","19.8"],"mode":["9.8","19.8"],"close":["9.8","19.8","24.4"],"are":["10.0","11.0","15.0"],"less":["10.0"],"commonly":["10.0","15.0"],"modify":["10.1","10.4","20.8"],"this":["10.1"],"object":["10.1"],"named":["10.2"],"starting":["10.2"],"with":["10.2"],"a":["10.2","12.46","15.21","20.3"],"here":["10.2"],"is":["10.2","10.5","16.1","18.1","30.7","30.45","35.4"],"definition":["10.2","10.5","30.38"],"if":["10.3","10.6","30.2","30.4","30.17"],"you":["10.3","10.6","20.3","30.45"],"need":["10.3","20.8","30.2","30.45"],"some":["10.3","10.8","10.9","10.10"],"only":["10.3","10.13","15.37","30.19"],"exist":["10.3","15.37"],"can":["10.4","15.11","20.3"],"accordingly":["10.4"],"after":["10.6","10.13","16.1","18.1","30.19"],"instantiation":["10.6"],"want":["10.6"],"before":["10.6"],"please":["10.6","20.8","30.29","30.30"],"immediately":["10.7"],"hide":["10.7","25.15","36.15"],"position":["10.9","15.34"],"shortcut":["10.13"],"keys":["10.13"],"will":["10.13","20.4","30.19"],"work":["10.13","30.19"],"subtitleoffset":["10.15"],"something":["10.16"],"dosomething":["10.16"],"very":["11.0","15.30"],"rarely":["11.0"],"container":["11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","15.38","20.7","21.0","22.0","23.0","30.3","30.21","30.34","30.40","30.44","30.46","32.0","33.0","34.0","41.34"],"following":["11.6","20.8"],"address":["11.6","30.17"],"off":["12.0"],"having":["12.40"],"stop":["12.40"],"for":["12.40","12.41","29.0","30.10","30.48"],"stopping":["12.41"],"content":["12.41"],"property":["12.43"],"changes":["12.43"],"method":["12.44","28.7","39.7"],"called":["12.44"],"end":["12.45"],"point":["12.45"],"supported":["12.46"],"finished":["12.47"],"lack":["12.51"],"resources":["12.52"],"completed":["12.54"],"started":["12.55"],"has":["12.56","12.58"],"not":["12.56"],"suspended":["12.57"],"missing":["12.60"],"future":["13.0"],"and":["13.0","20.8"],"new":["13.1","13.13","13.14","13.15","13.23","13.24","13.26","20.6","22.0","30.11","30.26","31.6","33.0","41.26"],"art":["13.23","20.6","28.12","30.11","30.26","31.6","39.12"],"controls":["14.0"],"tooltip":["14.0"],"quite":["15.0"],"when":["15.11"],"it":["15.11","15.30","15.37"],"resolves":["15.11"],"indicates":["15.11"],"that":["15.11"],"played":["15.11"],"been":["15.15"],"fully":["15.15"],"decoded":["15.15"],"in":["15.15","20.4"],"which":["15.15"],"page":["15.19","30.10"],"must":["15.19","20.3","30.10"],"have":["15.19","20.3"],"had":["15.19"],"an":["15.19","17.1","30.4"],"user":["15.21"],"interaction":["15.21"],"e":["15.21"],"g":["15.21"],"useful":["15.30"],"as":["15.30","30.2","30.7"],"s":["15.30"],"during":["15.37"],"lifespan":["15.37"],"triggered":["16.1","18.1"],"context":["16.4"],"controller":["17.1"],"objects":["17.1"],"selection":["17.1"],"list":["17.1"],"onselect":["17.1"],"item":["19.4"],"width":["19.5","28.5","31.5","39.5"],"tip":["20.3","20.6","31.6","31.8"],"see":["20.3","24.4"],"more":["20.3","30.41"],"examples":["20.3"],"directly":["20.4"],"60px":["20.5","31.5"],"auto":["20.5","31.5"],"non":["20.5"],"responsive":["20.5"],"support":["20.8","24.4"],"even":["20.8"],"older":["20.8"],"configuration":["20.8","30.28","30.30","30.31"],"akamaized":["21.0","32.0"],"net":["21.0","32.0"],"akamai":["21.0","32.0"],"bbb":["21.0","32.0"],"30fps":["21.0","32.0"],"var":["22.0","23.0","30.11","33.0","34.0"],"test":["23.0","34.0"],"streams":["23.0","34.0"],"mux":["23.0","34.0"],"x36xhzz":["23.0","34.0"],"default":["24.4","29.0"],"multilingual":["24.4"],"i18n":["24.4","29.0"],"countdown":["24.4"],"detail":["24.4","35.4"],"details":["24.4"],"canbeclosed":["24.4","35.4"],"until":["24.4"],"dark":["25.4","36.4"],"输入框自定义挂载时的主题色":["25.4","36.4"],"默认为":["25.4","36.4"],"可以选填亮色":["25.4","36.4"],"light":["25.4","36.4"],"heatmap":["25.4","36.4"],"是否开启弹幕热度图":["25.4","36.4"],"beforeemit":["25.4","36.4"],"trim":["25.4","25.10","36.4"],"stationary":["25.5"],"red":["25.5","36.5"],"format":["25.6"],"bilibili":["25.6","36.6"],"website":["25.6"],"time":["25.7","30.7","36.7"],"function":["25.8","25.11","36.8","36.11","41.31"],"target":["25.9","36.9"],"innertext":["25.9","36.9"],"else":["25.9","36.9"],"color":["25.10","36.10"],"math":["25.10","36.10"],"floor":["25.10","36.10"],"random":["25.10","36.10"],"0xffffff":["25.10","36.10"],"tostring":["25.10","36.10"],"display":["25.11"],"flex":["25.11"],"alignitems":["25.11"],"center":["25.11","36.11"],"queryselector":["25.11","36.11"],"config":["25.12","36.12"],"xml":["25.13","25.14","36.13","36.14"],"弹幕开始":["25.15","36.15"],"弹幕隐藏":["25.15","36.15"],"or":["28.1","28.7","30.2","39.7"],"retrieve":["28.1"],"values":["28.1"],"div":["28.5","28.13","39.5","39.13"],"class":["28.5","28.13","39.5","39.13"],"style":["28.5","39.5"],"resolve":["28.7","39.7"],"currenttime2":["28.7","39.7"],"js":["28.9"],"inside":["28.10","30.4"],"artplayerpluginiframe":["28.11"],"data":["28.12","39.12"],"displayed":["29.0"],"usage":["29.0"],"lang":["29.1","40.1"],"window":["29.2","40.2"],"imported":["29.4","40.4"],"aspect":["30.1"],"ratio":["30.1","41.1"],"ogg":["30.2","41.2"],"webm":["30.2","41.2"],"other":["30.2"],"such":["30.2","30.7"],"callback":["30.4"],"refers":["30.4"],"instance":["30.4"],"but":["30.4","30.39"],"arrow":["30.4"],"initialized":["30.7"],"next":["30.7"],"refreshing":["30.7"],"be":["30.10"],"set":["30.10"],"security":["30.17"],"mechanisms":["30.17"],"source":["30.17"],"player":["30.19"],"gains":["30.19"],"focus":["30.19"],"innerhtml":["30.26"],"component":["30.28","30.30","30.31"],"refer":["30.30","30.31"],"sd":["30.32"],"480p":["30.32","41.32"],"谁でもいいはずなのに":["30.33","41.33"],"夏の想い出がまわる":["30.33","41.33"],"png":["30.35","30.38","41.35","41.38"],"all":["30.38"],"cannot":["30.39"],"zh":["30.42","41.42"],"cn":["30.42","41.42"],"same":["30.45"],"different":["30.45"],"reference":["30.48"],"syntax":["30.48"],"播放器的尺寸依赖于容器":["31.3"],"的尺寸":["31.3"],"所以你的容器":["31.3"],"非响应式":["31.4"],"在":["31.4"],"600px":["31.5"],"400px":["31.5"],"margin":["31.5"],"全部":["31.6"],"volume":["31.7"],"假如你要兼容更古老的浏览器时":["31.8"],"查看详情":["35.4"],"s秒后可关闭广告":["35.4"],"ad":["35.4"],"clicked":["35.4"],"文件":["36.6"],"网站的弹幕格式一致":["36.6"],"切换弹幕":["36.12"],"或者获取":["39.1"],"里":["39.10"],"写法参考":["40.0","41.48"],"默认支持三种视频文件格式":["41.2"],"播放器会缓存最后一次音量的大小":["41.7"],"假如希望默认进入页面就能自动播放视频":["41.10"],"必需为":["41.10"],"视频快进":["41.19"],"视频快退":["41.19"],"space":["41.19"],"切换播放":["41.19"],"暂停":["41.19"],"subtitle":["41.24"],"组件配置":["41.30"],"args":["41.31"],"hd":["41.32"],"webkit":["41.37"],"全部图标的定义":["41.38"],"但无法解析这种后缀":["41.39"],"作为":["41.45"],"key":["41.45"],"来缓存播放进度的":["41.45"],"但假如你的同一个视频的":["41.45"]},{"0":["5.9","5.10","5.12","5.15","5.22","15.9","15.10","15.12","15.15","15.22","20.7","31.7"],"1":["9.6","19.6"],"2":["5.7","15.7","15.28","25.7","36.7"],"3":["25.5","25.7","36.5","36.7"],"5":["5.5","5.6","9.6","15.5","15.6","15.8","15.14","19.6","20.7","31.7"],"9":["15.29","41.1"],"10":["9.6","19.6","30.35","41.35"],"100":["28.13","39.13"],"240":["30.33"],"300":["30.33","41.33"],"333":["25.5","25.7","36.7"],"404":["3.13","3.14","13.13","13.14"],"1000":["0.12","0.14","10.10","10.12","10.14","10.15","28.7","39.7"],"3000":["5.2","5.3","5.7","5.10","5.12","5.20","5.41","6.4","6.5","7.4","7.5","8.4","8.5","9.7","9.8","15.2","15.3","15.7","15.10","15.12","15.20","15.41","16.4","16.5","17.4","17.5","18.4","18.5","19.7","19.8"],"对象":["0.1"],"播放器不会马上做出响应":["0.1"],"types":["0.2","2.0","10.2","10.5","11.6","29.0","30.38","30.48","41.38"],"d":["0.2","0.5","2.0","10.2","10.5","11.6","12.0","29.0","30.38","30.48","40.0","41.38","41.48"],"ts":["0.2","0.5","1.6","2.0","10.2","10.5","11.6","12.0","29.0","30.38","30.48","40.0","41.38","41.48"],"warning":["0.3","0.9","0.10","0.13","0.15","2.0","10.8","10.10","10.15","12.0","30.1","30.35","30.42","31.5","41.1","41.28","41.29","41.35","41.42"],"提示":["0.3","0.13","5.26","5.37","41.1","41.4","41.19"],"假如你需要一些":["0.3","5.37"],"事件只存在于播放器的生命周期上时":["0.3","5.37"],"强烈建议使用这些函数":["0.3"],"以避免造成内存泄漏":["0.3","5.37"],"your":["0.4","10.4"],"假如想在实例化之前更新":["0.6"],"请使用基础选项的":["0.6"],"来更新":["0.6"],"的显示":["0.7"],"组件配置":["0.8","0.9","0.10","41.28","41.31"],"请参考以下地址":["0.8","0.9","0.10","0.15","41.28","41.29","41.30","41.31"],"component":["0.8","0.9","0.10","0.15","10.8","10.9","10.10","10.15","30.29","41.28","41.29","41.30","41.31"],"color":["0.11","10.11","30.36","41.36"],"red":["0.11","10.11"],"false":["0.12","5.20","9.8","10.12","10.14","15.20","19.8"],"只在播放器获得焦点后":["0.13","41.19"],"如点击了播放器后":["0.13","41.19"],"这些快捷键才会生效":["0.13","41.19"],"true":["0.14","3.10","3.11","3.12","3.20","3.21","3.22","3.23","5.23","10.12","10.14","13.10","13.11","13.12","13.20","13.21","13.22","13.23","15.13","15.23","25.10","30.8","30.9","30.11","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.25","30.26","30.37","30.43","30.44","30.46","30.47","36.10","41.8","41.9","41.11","41.12","41.13","41.14","41.15","41.16","41.18","41.20","41.22","41.23","41.25","41.26","41.37","41.43","41.44","41.46","41.47"],"设置面板":["0.15"],"html":["0.15","10.15","24.2","25.2","26.2","27.2","28.3","30.41","30.42","35.2","36.2","37.2","38.2","39.3","41.41","41.42"],"ready":["0.16","2.0","5.1","5.4","10.16","15.1","15.4","15.5","15.6","15.16","15.23","15.25","21.0","22.0","23.0","32.0","33.0","34.0"],"off":["2.0"],"全部事件请参考以下地址":["2.0"],"events":["2.0"],"info":["2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.30","5.17","5.18","5.24","5.35","5.36","5.39","9.5","12.1","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.30","15.17","15.18","15.24","15.35","15.36","15.38","15.39","19.5","21.0","22.0","23.0","24.4","25.14","32.0","33.0","34.0","35.4","36.14"],"console":["2.2","2.6","2.19","2.27","2.30","2.38","3.7","3.8","3.9","3.16","5.17","5.18","5.35","5.36","9.5","12.1","12.2","12.3","12.4","12.5","12.6","12.11","12.14","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.27","12.28","12.29","12.30","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.7","13.8","13.9","13.16","15.17","15.18","15.24","15.35","15.36","15.38","19.5","21.0","22.0","23.0","24.4","32.0","33.0","34.0"],"log":["2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","3.7","3.8","3.9","3.16","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","13.7","13.8","13.9","13.16"],"video":["3.1","3.2","3.3","3.15","3.17","3.18","3.19","3.24","3.25","3.26","3.31","13.2","13.3","13.10","13.11","13.12","13.15","13.17","13.18","13.20","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","30.3","30.6","30.8","30.11","30.12","30.18","30.20","30.21","30.22","30.23","30.25","30.26","30.34","30.43","30.47","41.3","41.11","41.26","41.34"],"mp4":["3.1","3.2","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.22","3.23","3.24","3.25","3.26","3.30","3.31","3.32","11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.20","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","30.3","30.6","30.8","30.9","30.11","30.12","30.13","30.15","30.18","30.20","30.21","30.22","30.23","30.25","30.26","30.27","30.34","30.43","30.44","30.46","30.47","41.3","41.6","41.11","41.12","41.18","41.20","41.22","41.23","41.26","41.27","41.34","41.43","41.46","41.47"],"playbackrate":["3.4","3.5","3.6","13.4","13.5","13.6"],"aspectratio":["3.4","3.5","3.6","13.4","13.5","13.6"],"autoplayback":["3.10","3.11","3.12","13.10","13.11","13.12"],"sample":["3.13","3.14","3.15","3.18","3.19","3.24","3.25","13.1","13.2","13.3","13.13","13.14","13.15","13.17","13.18","13.22","13.23","13.24","13.25","13.26","13.30","13.31","30.3","30.11","30.21","30.26","30.46","41.3","41.26"],"autoorientation":["3.20","13.20"],"show":["3.21","3.27","13.21","13.27","13.28","25.15","36.15"],"fastforward":["3.22","3.23","13.22","13.23"],"fullscreenweb":["3.30","13.30"],"miniprogressbar":["3.32","13.32"],"pause":["4.0","14.0"],"layer":["4.0","14.0"],"png":["4.0","14.0"],"t":["5.9","5.10","5.12","15.9","15.10","15.12","15.22"],"方法会返回":["5.11"],"promise":["5.11"],"当":["5.11"],"resolve":["5.11"],"时表示新地址是可以播放":["5.11"],"reject":["5.11"],"时表示新地址加载错误":["5.11"],"例如直播中的视频或者没被解码完成的视频":["5.15"],"这个时候获取的时长会是":["5.15"],"由于浏览器安全机制":["5.19","5.21","41.17"],"触发窗口全屏前":["5.19"],"页面必须先存在交互":["5.19","5.21"],"例如用户点击过页面":["5.19","5.21"],"触发画中画前":["5.21"],"尺寸和坐标信息是通过":["5.26"],"getboundingclientrect":["5.26","15.26"],"获取的":["5.26"],"但不知道具体高度时":["5.30"],"这个属性很有用":["5.30"],"它能自动计算出视频的高度":["5.30"],"但你需要确定设置这个属性的时机":["5.30"],"强烈建议使用该函数":["5.37"],"4k":["5.41","15.41"],"tooltip":["6.1","8.1","16.1","18.1"],"组件的提示文本":["6.1","8.1"],"remove":["6.4","7.4","8.4","9.7","16.4","17.4","18.4","19.7"],"选择列表的对象数组":["7.1"],"onselect":["7.1"],"选择列表的元素被点击时触发的函数":["7.1"],"by":["7.3","8.2","8.3","9.7","17.3","18.2","18.3","19.7"],"left":["8.5","18.5","30.2"],"switchquality":["9.2","19.2"],"open":["9.4","19.4"],"return":["9.4","9.5","19.4","19.5"],"item":["9.5","17.1","19.5"],"event":["9.5"],"x":["9.5","19.5"],"range":["9.6","19.6"],"switch":["9.8","19.8"],"used":["10.0","11.0","15.0","30.4"],"will":["10.1","15.15","20.5","30.4"],"not":["10.1","13.0","20.5","30.4"],"respond":["10.1"],"immediately":["10.1"],"during":["10.3"],"lifecycle":["10.3"],"it":["10.3","12.44","20.8","30.7"],"strongly":["10.3"],"recommended":["10.3","15.37"],"use":["10.3","10.6","15.37","20.3","30.39"],"these":["10.3"],"functions":["10.3"],"avoid":["10.3","15.37"],"causing":["10.3","15.37"],"memory":["10.3","15.37"],"leaks":["10.3","15.37"],"from":["10.6","17.1"],"basic":["10.6"],"options":["10.6","30.1"],"for":["10.6","12.0","30.4"],"of":["10.7","12.0"],"configuration":["10.8","10.9","10.10"],"please":["10.8","10.9","10.10","10.15","12.0","30.2","30.10","30.28"],"refer":["10.8","10.9","10.10","10.15","12.0","20.8","29.0","30.2","30.28","30.29"],"following":["10.8","10.9","10.10","10.15","12.0","20.3","30.28","30.29","30.30","30.31"],"address":["10.8","10.9","10.10","12.0","30.28","30.29","30.30","30.31"],"srt":["10.11","30.24","41.24"],"settimeout":["10.12","10.14","15.3","15.20","28.7","39.7"],"has":["10.13"],"gained":["10.13"],"focus":["10.13"],"e":["10.13","15.19"],"g":["10.13","15.19"],"clicking":["10.13","30.19"],"link":["10.15","20.3"],"on":["10.16","15.4","15.19","24.4","30.2","30.19"],"a":["12.0"],"full":["12.0"],"list":["12.0"],"state":["12.36","12.38"],"further":["12.40"],"buffering":["12.40","12.41"],"to":["12.44","15.30","30.28","30.29"],"reload":["12.44"],"format":["12.46"],"data":["12.51","12.60"],"appeared":["12.56"],"changed":["12.58"],"basically":["13.0"],"needed":["13.0"],"assets":["13.1","13.13","13.14","13.15","13.17","13.18","13.23","13.24","13.25","13.26","30.3","30.11","30.26"],"flip":["13.5","13.6"],"dblclick":["13.16"],"contextmenu":["13.27"],"play":["14.0"],"rejects":["15.11"],"there":["15.11"],"was":["15.11"],"an":["15.11"],"error":["15.11"],"loading":["15.11"],"case":["15.15"],"obtained":["15.15","15.26"],"be":["15.15"],"interaction":["15.19"],"user":["15.19"],"clicked":["15.19","17.1","24.4"],"page":["15.21","30.7"],"must":["15.21"],"occur":["15.21","30.17"],"before":["15.21"],"triggering":["15.21"],"coordinates":["15.26"],"are":["15.26","30.17"],"via":["15.26"],"need":["15.30"],"make":["15.30"],"sure":["15.30"],"m3u8":["15.32","30.40","41.2"],"000":["15.33"],"highly":["15.37"],"this":["15.37","30.7"],"text":["16.1","18.1"],"when":["17.1"],"script":["20.1","24.2","25.2","26.2","27.2","28.3","31.1","35.2","36.2","37.2","38.2","39.3"],"at":["20.3"],"packages":["20.3","20.6","31.3","31.6"],"template":["20.3","31.3"],"change":["20.4","20.5","36.11"],"the":["20.4","20.5","30.28","30.29","30.31"],"player":["20.4"],"in":["20.5"],"directly":["20.5"],"modifying":["20.5"],"complete":["20.6"],"definitions":["20.6"],"volume":["20.7"],"art8":["20.7","31.7"],"new":["20.7","31.7"],"yourself":["20.8"],"scripts":["20.8","31.8"],"documentation":["20.8"],"browserslist":["20.8","31.8"],"type":["21.0","23.0","32.0","34.0"],"customtype":["21.0","22.0","23.0","32.0","33.0","34.0"],"click":["24.4"],"skip":["24.4","35.4"],"发送弹幕前的自定义校验":["25.4","36.4"],"通过":["25.4","36.4"],"mount":["25.4","36.4"],"选项可以自定义输入框挂载的位置":["25.4","36.4"],"默认挂载于播放器底部":["25.4","36.4"],"仅在当宽度小于最小值时生效":["25.4","36.4"],"document":["25.4","36.4"],"queryselector":["25.4","36.4"],"artplayer":["25.4","36.4"],"green":["25.5","36.5"],"border":["25.10","36.10"],"addeventlistener":["25.11","36.11"],"number":["25.11","36.11"],"v2":["25.12","36.12"],"resize":["25.13"],"弹幕显示":["25.15","36.15"],"destroy":["25.15","36.15"],"弹幕销毁":["25.15","36.15"],"height":["28.5","28.13","39.5","39.13"],"style":["28.13","39.13"],"width":["28.13","39.13"],"or":["29.1","40.1"],"tip":["30.1","31.3"],"among":["30.1"],"all":["30.1"],"only":["30.1"],"is":["30.1"],"mandatory":["30.1"],"flv":["30.2","41.2"],"third":["30.2"],"party":["30.2"],"libraries":["30.2"],"side":["30.2"],"point":["30.4"],"jpg":["30.5","41.5"],"ffad00":["30.6","41.6"],"read":["30.7","30.10"],"cached":["30.7"],"value":["30.7"],"more":["30.10","30.42"],"information":["30.10"],"policy":["30.10","41.10"],"changes":["30.10","41.10"],"url":["30.11","30.26"],"setting":["30.14","30.15","30.16","30.24","41.14","41.15","41.16","41.24"],"website":["30.17"],"cross":["30.17"],"origin":["30.17"],"failure":["30.17"],"may":["30.17"],"such":["30.19"],"as":["30.19"],"hd":["30.32"],"720p":["30.32","41.32"],"こんなとこにあるはずもないのに":["30.33","41.33"],"终わり":["30.33","41.33"],"online":["30.35"],"generation":["30.35"],"tool":["30.35","41.35"],"03a9f4":["30.36","41.36"],"font":["30.36","41.36"],"size":["30.36","41.36"],"30px":["30.36","41.36"],"webkit":["30.37"],"playsinline":["30.37"],"therefore":["30.39"],"if":["30.39"],"you":["30.39"],"best":["30.39"],"well":["30.39"],"settings":["30.41","30.42"],"start":["30.41","30.42","41.41","41.42"],"i18n":["30.41","41.41"],"tw":["30.42","41.42"],"identify":["30.45"],"unique":["30.45"],"必须是有尺寸的":["31.3"],"以下链接可以看到更多的使用例子":["31.3"],"里直接修改":["31.4","31.5"],"是不会改变播放器的":["31.4","31.5"],"非响应式":["31.5"],"在":["31.5"],"定义":["31.6"],"请修改以下配置然后自行构建":["31.8"],"构建配置":["31.8"],"build":["31.8"],"参考文档":["31.8"],"skipped":["35.4"],"显示弹幕":["36.8","36.9"],"hide":["36.9"],"播放器的值":["39.1"],"全部选项里":["41.1"],"只有":["41.1"],"是必填的":["41.1"],"如需要播放":["41.2"],"或者":["41.2"],"等其它格式":["41.2"],"请参考左侧的":["41.2"],"第三方库":["41.2"],"回调函数里的":["41.4"],"就是播放器实例":["41.4"],"但回调函数假如使用了箭头函数":["41.4"],"则不会指向播放器实例":["41.4"],"下次初始化时":["41.7"],"如刷新页面":["41.7"],"播放器会读取该缓存值":["41.7"],"更多信息请阅读":["41.10"],"假如视频源地址和网站是跨域的":["41.17"],"可能会出现截图失败":["41.17"],"在线生成预览图":["41.35"],"thumbnail":["41.35"],"所以假如你使用了":["41.39"],"最好同时要指明":["41.39"],"function":["41.40"],"更多的语言设置":["41.41","41.42"],"是不同的话":["41.45"],"那么你需要使用":["41.45"],"来标识视频的唯一":["41.45"]}]'},t={"0.0":{t:"# 高级属性",p:`这里的 高级属性 是指挂载在 实例 的 二级属性，比较少用 +`,l:"advanced/built-in.html",a:"高级属性"},"0.1":{t:"`option`",p:`播放器的选项 +<div className="run-code">▶ Run Code< ...`,l:"advanced/built-in.html#option",a:"option"},"0.2":{t:"`template`",p:`管理播放器所有的 DOM 元素 +<div className="run-code">▶ Ru ...`,l:"advanced/built-in.html#template",a:"template"},"0.3":{t:"`events`",p:"管理播放器所有的 DOM 事件，实质上是代理了 addEventListener 和 removeEventListener ...",l:"advanced/built-in.html#events",a:"events"},"0.4":{t:"`storage`",p:`管理播放器的本地存储 + +name 属性用于设置缓存的 key +set 方法用于设置缓存 +get 方法用于获取缓存 +del 方 ...`,l:"advanced/built-in.html#storage",a:"storage"},"0.5":{t:"`icons`",p:`管理播放器所有的 svg 图标 +<div className="run-code">▶ Ru ...`,l:"advanced/built-in.html#icons",a:"icons"},"0.6":{t:"`i18n`",p:`管理播放器的 i18n + +get 方法用于获取 i18n 的值 +update 方法用于更新 i18n 对象 + +<div ...`,l:"advanced/built-in.html#i18n",a:"i18n"},"0.7":{t:"`notice`",p:`管理播放器的提示语，只有一个 show 属性用于显示提示语 +<div className="run-code ...`,l:"advanced/built-in.html#notice",a:"notice"},"0.8":{t:"`layers`",p:`管理播放器的层 + +add 方法用于动态添加层 +remove 方法用于动态删除层 +update 方法用于动态更新层 +show ...`,l:"advanced/built-in.html#layers",a:"layers"},"0.9":{t:"`controls`",p:`管理播放器的控制器 + +add 方法用于动态添加控制器 +remove 方法用于动态删除控制器 +update 方法用于动态更新控 ...`,l:"advanced/built-in.html#controls",a:"controls"},"0.10":{t:"`contextmenu`",p:`管理播放器的右键菜单 + +add 方法用于动态添加菜单 +remove 方法用于动态删除菜单 +update 方法用于动态更新菜单 ...`,l:"advanced/built-in.html#contextmenu",a:"contextmenu"},"0.11":{t:"`subtitle`",p:`管理播放器的字幕功能 + +url 属性设置和返回当前字幕地址 +style 方法设置当前字幕的样式 +switch 方法设置当前字 ...`,l:"advanced/built-in.html#subtitle",a:"subtitle"},"0.12":{t:"`loading`",p:`管理播放器的加载层 + +show 属性用于设置是否显示加载层 +toggle 属性用于切换是否显示加载层 + +<div cl ...`,l:"advanced/built-in.html#loading",a:"loading"},"0.13":{t:"`hotkey`",p:`管理播放器的快捷键功能 + +add 方法用于添加快捷键 +remove 方法用于删除快捷键 + +<div className ...`,l:"advanced/built-in.html#hotkey",a:"hotkey"},"0.14":{t:"`mask`",p:`管理播放器的遮罩层 + +show 属性用于设置是否显示遮罩层 +toggle 属性用于切换是否显示遮罩层 + +<div cl ...`,l:"advanced/built-in.html#mask",a:"mask"},"0.15":{t:"`setting`",p:`管理播放器的设置面板 + +add 方法用于动态添加设置项 +remove 方法用于动态删除设置项 +update 方法用于动态更新 ...`,l:"advanced/built-in.html#setting",a:"setting"},"0.16":{t:"`plugins`",p:`管理播放器的插件功能，只有一个方法 add 用于动态添加插件 +<div className="run-cod ...`,l:"advanced/built-in.html#plugins",a:"plugins"},"1.0":{t:"# 静态属性",p:`这里的 静态属性 是指挂载在 构造函数 的 一级属性，非常少使用 +`,l:"advanced/class.html",a:"静态属性"},"1.1":{t:"`instances`",p:`返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性 +<div className=" ...`,l:"advanced/class.html#instances",a:"instances"},"1.2":{t:"`version`",p:`返回播放器的版本信息 +<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#version",a:"version"},"1.3":{t:"`env`",p:`返回播放器的环境变量 +<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#env",a:"env"},"1.4":{t:"`build`",p:`返回播放器的打包时间 +<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#build",a:"build"},"1.5":{t:"`config`",p:`返回视频的默认配置 +<div className="run-code">▶ Run Code ...`,l:"advanced/class.html#config",a:"config"},"1.6":{t:"`utils`",p:`返回播放器的工具函数集合 +<div className="run-code">▶ Run C ...`,l:"advanced/class.html#utils",a:"utils"},"1.7":{t:"`scheme`",p:`返回播放器选项的校验方案 +<div className="run-code">▶ Run C ...`,l:"advanced/class.html#scheme",a:"scheme"},"1.8":{t:"`Emitter`",p:`返回事件分发器的构造函数 +<div className="run-code">▶ Run C ...`,l:"advanced/class.html#emitter",a:"emitter"},"1.9":{t:"`validator`",p:`返回选项的校验函数 +<div className="run-code">▶ Run Code ...`,l:"advanced/class.html#validator",a:"validator"},"1.10":{t:"`kindOf`",p:`返回类型检测的函数工具 +<div className="run-code">▶ Run Co ...`,l:"advanced/class.html#kindof",a:"kindof"},"1.11":{t:"`html`",p:`返回播放器所需的 html 字符串 +<div className="run-code">▶ ...`,l:"advanced/class.html#html",a:"html"},"1.12":{t:"`option`",p:`返回播放器的默认选项 +<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#option",a:"option"},"2.0":{t:"# 实例事件",p:`播放器的事件分为两种，一种视频的 原生事件 (前缀 video:)，另外一种是 自定义事件 +监听事件： +<div cl ...`,l:"advanced/event.html",a:"实例事件"},"2.1":{t:"`ready`",p:`当播放器首次可以播放器时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#ready",a:"ready"},"2.2":{t:"`restart`",p:`当播放器切换地址后并可以播放时触发 +<div className="run-code">▶ ...`,l:"advanced/event.html#restart",a:"restart"},"2.3":{t:"`pause`",p:`当播放器暂停时触发 +<div className="run-code">▶ Run Code ...`,l:"advanced/event.html#pause",a:"pause"},"2.4":{t:"`play`",p:`当播放器播放时触发 +<div className="run-code">▶ Run Code ...`,l:"advanced/event.html#play",a:"play"},"2.5":{t:"`hotkey`",p:`当播放器热键被按下时触发 +<div className="run-code">▶ Run C ...`,l:"advanced/event.html#hotkey",a:"hotkey"},"2.6":{t:"`destroy`",p:`当播放器销毁时触发 +<div className="run-code">▶ Run Code ...`,l:"advanced/event.html#destroy",a:"destroy"},"2.7":{t:"`focus`",p:`当播放器获得焦点时触发 +<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#focus",a:"focus"},"2.8":{t:"`blur`",p:`当播放器失去焦点时触发 +<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#blur",a:"blur"},"2.9":{t:"`dblclick`",p:`当播放器被双击时触发 +<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#dblclick",a:"dblclick"},"2.10":{t:"`click`",p:`当播放器被单击时触发 +<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#click",a:"click"},"2.11":{t:"`error`",p:`当播放器加载视频发生错误时触发 +<div className="run-code">▶ Ru ...`,l:"advanced/event.html#error",a:"error"},"2.12":{t:"`hover`",p:`当播放器被鼠标移出或者移入时触发 +<div className="run-code">▶ R ...`,l:"advanced/event.html#hover",a:"hover"},"2.13":{t:"`mousemove`",p:`当播放器被鼠标经过时触发 +<div className="run-code">▶ Run C ...`,l:"advanced/event.html#mousemove",a:"mousemove"},"2.14":{t:"`resize`",p:`当播放器尺寸变化时触发 +<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#resize",a:"resize"},"2.15":{t:"`view`",p:`当播放器出现在视口时触发 +<div className="run-code">▶ Run C ...`,l:"advanced/event.html#view",a:"view"},"2.16":{t:"`lock`",p:`在移动端，当锁定的状态发生变化时触发 +<div className="run-code">▶ ...`,l:"advanced/event.html#lock",a:"lock"},"2.17":{t:"`aspectRatio`",p:`当播放器长宽比变化时触发 +<div className="run-code">▶ Run C ...`,l:"advanced/event.html#aspectratio",a:"aspectratio"},"2.18":{t:"`autoHeight`",p:`当播放器自动设置高度时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#autoheight",a:"autoheight"},"2.19":{t:"`autoSize`",p:`当播放器自动设置尺寸时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#autosize",a:"autosize"},"2.20":{t:"`flip`",p:`当播放器发生翻转时触发 +<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#flip",a:"flip"},"2.21":{t:"`fullscreen`",p:`当播放器发生窗口全屏时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#fullscreen",a:"fullscreen"},"2.22":{t:"`fullscreenWeb`",p:`当播放器发生网页全屏时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#fullscreenweb",a:"fullscreenweb"},"2.23":{t:"`mini`",p:`当播放器进入迷你模式时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#mini",a:"mini"},"2.24":{t:"`pip`",p:`当播放器进入画中画时触发 +<div className="run-code">▶ Run C ...`,l:"advanced/event.html#pip",a:"pip"},"2.25":{t:"`screenshot`",p:`当播放器被截图时触发 +<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#screenshot",a:"screenshot"},"2.26":{t:"`seek`",p:`当播放器发生时间跳转时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#seek",a:"seek"},"2.27":{t:"`subtitleOffset`",p:`当播放器发生字幕偏移时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#subtitleoffset",a:"subtitleoffset"},"2.28":{t:"`subtitleUpdate`",p:`当字幕更新时触发 +<div className="run-code">▶ Run Code& ...`,l:"advanced/event.html#subtitleupdate",a:"subtitleupdate"},"2.29":{t:"`subtitleLoad`",p:`当字幕加载时触发 +<div className="run-code">▶ Run Code& ...`,l:"advanced/event.html#subtitleload",a:"subtitleload"},"2.30":{t:"`subtitleSwitch`",p:`当字幕切换时触发 +<div className="run-code">▶ Run Code& ...`,l:"advanced/event.html#subtitleswitch",a:"subtitleswitch"},"2.31":{t:"`info`",p:`当信息面板显示或隐藏时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#info",a:"info"},"2.32":{t:"`layer`",p:`当自定义层显示或隐藏时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#layer",a:"layer"},"2.33":{t:"`loading`",p:`当加载器显示或隐藏时触发 +<div className="run-code">▶ Run C ...`,l:"advanced/event.html#loading",a:"loading"},"2.34":{t:"`mask`",p:`当遮罩层显示或隐藏时触发 +<div className="run-code">▶ Run C ...`,l:"advanced/event.html#mask",a:"mask"},"2.35":{t:"`subtitle`",p:`当字幕层显示或隐藏时触发 +<div className="run-code">▶ Run C ...`,l:"advanced/event.html#subtitle",a:"subtitle"},"2.36":{t:"`contextmenu`",p:`当右键菜单显示或隐藏时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#contextmenu",a:"contextmenu"},"2.37":{t:"`control`",p:`当控制器显示或隐藏时触发 +<div className="run-code">▶ Run C ...`,l:"advanced/event.html#control",a:"control"},"2.38":{t:"`setting`",p:`当设置面板显示或隐藏时触发 +<div className="run-code">▶ Run ...`,l:"advanced/event.html#setting",a:"setting"},"2.39":{t:"`muted`",p:`当静音的状态变化时触发 +<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#muted",a:"muted"},"2.40":{t:"`video:canplay`",p:`浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容 +`,l:"advanced/event.html#video-canplay",a:"video-canplay"},"2.41":{t:"`video:canplaythrough`",p:`浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束 +`,l:"advanced/event.html#video-canplaythrough",a:"video-canplaythrough"},"2.42":{t:"`video:complete`",p:`OfflineAudioContext 渲染完成 +`,l:"advanced/event.html#video-complete",a:"video-complete"},"2.43":{t:"`video:durationchange`",p:`duration 属性的值改变时触发 +`,l:"advanced/event.html#video-durationchange",a:"video-durationchange"},"2.44":{t:"`video:emptied`",p:"媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载 ...",l:"advanced/event.html#video-emptied",a:"video-emptied"},"2.45":{t:"`video:ended`",p:`视频停止播放，因为 media 已经到达结束点 +`,l:"advanced/event.html#video-ended",a:"video-ended"},"2.46":{t:"`video:error`",p:`获取媒体数据时出错，或者资源类型不是受支持的媒体格式 +`,l:"advanced/event.html#video-error",a:"video-error"},"2.47":{t:"`video:loadeddata`",p:`media 中的首帧已经完成加载 +`,l:"advanced/event.html#video-loadeddata",a:"video-loadeddata"},"2.48":{t:"`video:loadedmetadata`",p:`已加载元数据 +`,l:"advanced/event.html#video-loadedmetadata",a:"video-loadedmetadata"},"2.49":{t:"`video:pause`",p:`播放已暂停 +`,l:"advanced/event.html#video-pause",a:"video-pause"},"2.50":{t:"`video:play`",p:`播放已开始 +`,l:"advanced/event.html#video-play",a:"video-play"},"2.51":{t:"`video:playing`",p:`由于缺乏数据而暂停或延迟后，播放准备开始 +`,l:"advanced/event.html#video-playing",a:"video-playing"},"2.52":{t:"`video:progress`",p:`在浏览器加载资源时周期性触发 +`,l:"advanced/event.html#video-progress",a:"video-progress"},"2.53":{t:"`video:ratechange`",p:`播放速率发生变化 +`,l:"advanced/event.html#video-ratechange",a:"video-ratechange"},"2.54":{t:"`video:seeked`",p:`跳帧（seek）操作完成 +`,l:"advanced/event.html#video-seeked",a:"video-seeked"},"2.55":{t:"`video:seeking`",p:`跳帧（seek）操作开始 +`,l:"advanced/event.html#video-seeking",a:"video-seeking"},"2.56":{t:"`video:stalled`",p:`用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现 +`,l:"advanced/event.html#video-stalled",a:"video-stalled"},"2.57":{t:"`video:suspend`",p:`媒体数据加载已暂停 +`,l:"advanced/event.html#video-suspend",a:"video-suspend"},"2.58":{t:"`video:timeupdate`",p:`currentTime 属性指定的时间发生变化 +`,l:"advanced/event.html#video-timeupdate",a:"video-timeupdate"},"2.59":{t:"`video:volumechange`",p:`音量发生变化 +`,l:"advanced/event.html#video-volumechange",a:"video-volumechange"},"2.60":{t:"`video:waiting`",p:`由于暂时缺少数据，播放已停止 +`,l:"advanced/event.html#video-waiting",a:"video-waiting"},"3.0":{t:"# 全局属性",p:`这里的 全局属性 也是指挂载在 构造函数 的 一级属性，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到 +`,l:"advanced/global.html",a:"全局属性"},"3.1":{t:"DEBUG",p:`是否开始 debug 模式，可以打印出视频全部的内置事件，默认关闭 +<div className="run- ...`,l:"advanced/global.html#debug",a:"debug"},"3.2":{t:"CONTEXTMENU",p:`是否开启右键菜单，默认开启 +<div className="run-code">▶ Run ...`,l:"advanced/global.html#contextmenu",a:"contextmenu"},"3.3":{t:"NOTICE_TIME",p:`提示信息的显示时长，单位为毫秒，默认为 2000 +<div className="run-code" ...`,l:"advanced/global.html#notice-time",a:"notice-time"},"3.4":{t:"SETTING_WIDTH",p:`设置面板的默认宽度，单位为像素，默认为 250 +<div className="run-code" ...`,l:"advanced/global.html#setting-width",a:"setting-width"},"3.5":{t:"SETTING_ITEM_WIDTH",p:`设置面板的设置项的默认宽度，单位为像素，默认为 200 +<div className="run-code&q ...`,l:"advanced/global.html#setting-item-width",a:"setting-item-width"},"3.6":{t:"SETTING_ITEM_HEIGHT",p:`设置面板的设置项的默认高度，单位为像素，默认为 35 +<div className="run-code&qu ...`,l:"advanced/global.html#setting-item-height",a:"setting-item-height"},"3.7":{t:"RESIZE_TIME",p:`resize 事件的节流时间，单位为毫秒，默认为 200 +<div className="run-code& ...`,l:"advanced/global.html#resize-time",a:"resize-time"},"3.8":{t:"SCROLL_TIME",p:`scroll 事件的节流时间，单位为毫秒，默认为 200 +<div className="run-code& ...`,l:"advanced/global.html#scroll-time",a:"scroll-time"},"3.9":{t:"SCROLL_GAP",p:`view 事件的边界容差距离，单位为像素，默认为 50 +<div className="run-code&q ...`,l:"advanced/global.html#scroll-gap",a:"scroll-gap"},"3.10":{t:"AUTO_PLAYBACK_MAX",p:`自动回放功能的最大记录数，默认为 10 +<div className="run-code"> ...`,l:"advanced/global.html#auto-playback-max",a:"auto-playback-max"},"3.11":{t:"AUTO_PLAYBACK_MIN",p:`自动回放功能的最小记录时长，单位为秒，默认为 5 +<div className="run-code" ...`,l:"advanced/global.html#auto-playback-min",a:"auto-playback-min"},"3.12":{t:"AUTO_PLAYBACK_TIMEOUT",p:`自动回放功能的隐藏延迟时长，单位为毫秒，默认为 3000 +<div className="run-code& ...`,l:"advanced/global.html#auto-playback-timeout",a:"auto-playback-timeout"},"3.13":{t:"RECONNECT_TIME_MAX",p:`发生连接错误时，自动连接的最大次数，默认为 5 +<div className="run-code" ...`,l:"advanced/global.html#reconnect-time-max",a:"reconnect-time-max"},"3.14":{t:"RECONNECT_SLEEP_TIME",p:`发生连接错误时，自动连接的延迟时间，单位为毫秒，默认为 1000 +<div className="run-c ...`,l:"advanced/global.html#reconnect-sleep-time",a:"reconnect-sleep-time"},"3.15":{t:"CONTROL_HIDE_TIME",p:`底部控制栏的自动隐藏的延迟时间，单位为毫秒，默认为 3000 +<div className="run-cod ...`,l:"advanced/global.html#control-hide-time",a:"control-hide-time"},"3.16":{t:"DBCLICK_TIME",p:`双击事件的延迟事件，单位为毫秒，默认为 300 +<div className="run-code" ...`,l:"advanced/global.html#dbclick-time",a:"dbclick-time"},"3.17":{t:"DBCLICK_FULLSCREEN",p:`在桌面端，是否双击切换全屏，默认为 true +<div className="run-code"& ...`,l:"advanced/global.html#dbclick-fullscreen",a:"dbclick-fullscreen"},"3.18":{t:"MOBILE_DBCLICK_PLAY",p:`在移动端，是否双击切换播放暂停，默认为 true +<div className="run-code" ...`,l:"advanced/global.html#mobile-dbclick-play",a:"mobile-dbclick-play"},"3.19":{t:"MOBILE_CLICK_PLAY",p:`在移动端，是否单击切换播放暂停，默认为 false +<div className="run-code&quo ...`,l:"advanced/global.html#mobile-click-play",a:"mobile-click-play"},"3.20":{t:"AUTO_ORIENTATION_TIME",p:`在移动端，自动旋屏的延迟时间，单位为毫秒，默认为 200 +<div className="run-code& ...`,l:"advanced/global.html#auto-orientation-time",a:"auto-orientation-time"},"3.21":{t:"INFO_LOOP_TIME",p:`信息面板的刷新时间，单位为毫秒，默认为 1000 +<div className="run-code" ...`,l:"advanced/global.html#info-loop-time",a:"info-loop-time"},"3.22":{t:"FAST_FORWARD_VALUE",p:`在移动端，长按加速的速率倍数，默认为 3 +<div className="run-code"> ...`,l:"advanced/global.html#fast-forward-value",a:"fast-forward-value"},"3.23":{t:"FAST_FORWARD_TIME",p:`在移动端，长按加速的延迟时间，单位为毫秒，默认为 1000 +<div className="run-code ...`,l:"advanced/global.html#fast-forward-time",a:"fast-forward-time"},"3.24":{t:"TOUCH_MOVE_RATIO",p:`在移动端，左右滑动进度的速率倍数，默认为 0.5 +<div className="run-code" ...`,l:"advanced/global.html#touch-move-ratio",a:"touch-move-ratio"},"3.25":{t:"VOLUME_STEP",p:`快捷键调节音量的幅度比例，默认为 0.1 +<div className="run-code"> ...`,l:"advanced/global.html#volume-step",a:"volume-step"},"3.26":{t:"SEEK_STEP",p:`快捷键调节播放进度的幅度，单位为秒，默认为 5 +<div className="run-code" ...`,l:"advanced/global.html#seek-step",a:"seek-step"},"3.27":{t:"PLAYBACK_RATE",p:`内置播放速率的列表，默认为 [0.5, 0.75, 1, 1.25, 1.5, 2] +<div className=& ...`,l:"advanced/global.html#playback-rate",a:"playback-rate"},"3.28":{t:"ASPECT_RATIO",p:`内置视频长宽比的列表，默认为 ['default', '4:3', '16:9'] +<div className=&q ...`,l:"advanced/global.html#aspect-ratio",a:"aspect-ratio"},"3.29":{t:"FLIP",p:`内置视频翻转的列表，默认为 ['normal', 'horizontal', 'vertical'] +<div cla ...`,l:"advanced/global.html#flip",a:"flip"},"3.30":{t:"FULLSCREEN_WEB_IN_BODY",p:`网页全屏时，是否把播放器挂在在 body 元素下，默认为 false +<div className="run ...`,l:"advanced/global.html#fullscreen-web-in-body",a:"fullscreen-web-in-body"},"3.31":{t:"LOG_VERSION",p:`设置是否打印播放器版本，默认为 true +<div className="run-code"> ...`,l:"advanced/global.html#log-version",a:"log-version"},"3.32":{t:"USE_RAF",p:`设置是否使用 requestAnimationFrame ，默认为 false，目前主要用于进度条的平滑效果 +<div ...`,l:"advanced/global.html#use-raf",a:"use-raf"},"4.0":{t:"# 编写插件",p:`但你已经知道播放器的属性, 方法和事件后，再编写插件是非常简单的事 +可以在实例化的时候加载插件的函数 +<div cla ...`,l:"advanced/plugin.html",a:"编写插件"},"5.0":{t:"# 实例属性",p:`这里的 实例属性 是指挂载在 实例 的 一级属性，比较常用 +`,l:"advanced/property.html",a:"实例属性"},"5.1":{t:"`play`",p:` +Type: Function + +播放视频 +<div className="run-code"&g ...`,l:"advanced/property.html#play",a:"play"},"5.2":{t:"`pause`",p:` +Type: Function + +暂停视频 +<div className="run-code"&g ...`,l:"advanced/property.html#pause",a:"pause"},"5.3":{t:"`toggle`",p:` +Type: Function + +切换视频的播放和暂停 +<div className="run-code&q ...`,l:"advanced/property.html#toggle",a:"toggle"},"5.4":{t:"`destroy`",p:` +Type: Function +Parameter: Boolean + +销毁播放器，接受一个参数表示是否销毁后同时移除播放器 ...`,l:"advanced/property.html#destroy",a:"destroy"},"5.5":{t:"`seek`",p:` +Type: Setter +Parameter: Number + +视频时间跳转，单位秒 +<div className= ...`,l:"advanced/property.html#seek",a:"seek"},"5.6":{t:"`forward`",p:` +Type: Setter +Parameter: Number + +视频时间快进，单位秒 +<div className= ...`,l:"advanced/property.html#forward",a:"forward"},"5.7":{t:"`backward`",p:` +Type: Setter +Parameter: Number + +视频时间快退，单位秒 +<div className= ...`,l:"advanced/property.html#backward",a:"backward"},"5.8":{t:"`volume`",p:` +Type: Setter/Getter +Parameter: Number + +设置和获取视频音量，范围在：[0, 1] +& ...`,l:"advanced/property.html#volume",a:"volume"},"5.9":{t:"`url`",p:` +Type: Setter/Getter +Parameter: String + +设置和获取视频地址 +<div clas ...`,l:"advanced/property.html#url",a:"url"},"5.10":{t:"`switch`",p:` +Type: Setter +Parameter: String + +设置视频地址，设置时和 art.url 类似，但会执行一些 ...`,l:"advanced/property.html#switch",a:"switch"},"5.11":{t:"`switchUrl`",p:` +Type: Function +Parameter: String + +设置视频地址，设置时和 art.url 类似，但会执行 ...`,l:"advanced/property.html#switchurl",a:"switchurl"},"5.12":{t:"`switchQuality`",p:` +Type: Function +Parameter: String + +设置视频画质地址，和 art.switchUrl 类似 ...`,l:"advanced/property.html#switchquality",a:"switchquality"},"5.13":{t:"`muted`",p:` +Type: Setter/Getter +Parameter: Boolean + +设置和获取视频是否静音 +<div c ...`,l:"advanced/property.html#muted",a:"muted"},"5.14":{t:"`currentTime`",p:` +Type: Setter/Getter +Parameter: Number + +设置和获取视频当前时间，设置时间时和 see ...`,l:"advanced/property.html#currenttime",a:"currenttime"},"5.15":{t:"`duration`",p:` +Type: Getter + +获取视频时长 +<div className="run-code"&g ...`,l:"advanced/property.html#duration",a:"duration"},"5.16":{t:"`screenshot`",p:` +Type: Function + +下载当前视频帧的截图 +<div className="run-code&q ...`,l:"advanced/property.html#screenshot",a:"screenshot"},"5.17":{t:"`getDataURL`",p:` +Type: Function + +获取当前视频帧的截图的base64地址，返回的是一个 Promise +<div cl ...`,l:"advanced/property.html#getdataurl",a:"getdataurl"},"5.18":{t:"`getBlobUrl`",p:` +Type: Function + +获取当前视频帧的截图的blob地址，返回的是一个 Promise +<div clas ...`,l:"advanced/property.html#getbloburl",a:"getbloburl"},"5.19":{t:"`fullscreen`",p:` +Type: Setter/Getter +Parameter: Boolean + +设置和获取播放器窗口全屏 +<div ...`,l:"advanced/property.html#fullscreen",a:"fullscreen"},"5.20":{t:"`fullscreenWeb`",p:` +Type: Setter/Getter +Parameter: Boolean + +设置和获取播放器网页全屏 +<div ...`,l:"advanced/property.html#fullscreenweb",a:"fullscreenweb"},"5.21":{t:"`pip`",p:` +Type: Setter/Getter +Parameter: Boolean + +设置和获取播放器画中画模式 +<div ...`,l:"advanced/property.html#pip",a:"pip"},"5.22":{t:"`poster`",p:` +Type: Setter/Getter +Parameter: String + +设置和获取视频海报，只有在视频播放前才能看到 ...`,l:"advanced/property.html#poster",a:"poster"},"5.23":{t:"`mini`",p:` +Type: Setter/Getter +Parameter: Boolean + +设置和获取播放器迷你模式 +<div ...`,l:"advanced/property.html#mini",a:"mini"},"5.24":{t:"`playing`",p:` +Type: Getter +Parameter: Boolean + +获取视频是否正在播放中 +<div classNam ...`,l:"advanced/property.html#playing",a:"playing"},"5.25":{t:"`autoSize`",p:` +Type: Function + +设置视频是否自适应尺寸 +<div className="run-code& ...`,l:"advanced/property.html#autosize",a:"autosize"},"5.26":{t:"`rect`",p:` +Type: Getter + +获取播放器的尺寸和坐标信息 +<div className="run-code& ...`,l:"advanced/property.html#rect",a:"rect"},"5.27":{t:"`flip`",p:` +Type: Setter/Getter +Parameter: String + +设置和获取播放器翻转，支持normal, ...`,l:"advanced/property.html#flip",a:"flip"},"5.28":{t:"`playbackRate`",p:` +Type: Setter/Getter +Parameter: Number + +设置和获取播放器播放速度 +<div c ...`,l:"advanced/property.html#playbackrate",a:"playbackrate"},"5.29":{t:"`aspectRatio`",p:` +Type: Setter/Getter +Parameter: String + +设置和获取播放器长宽比 +<div cl ...`,l:"advanced/property.html#aspectratio",a:"aspectratio"},"5.30":{t:"`autoHeight`",p:` +Type: Function + +当容器只有宽度，该属性可以自动计算出并设置视频的高度 +<div className= ...`,l:"advanced/property.html#autoheight",a:"autoheight"},"5.31":{t:"`attr`",p:` +Type: Function +Parameter: String + +动态获取和设置 video 元素的属性 +<div ...`,l:"advanced/property.html#attr",a:"attr"},"5.32":{t:"`type`",p:` +Type: Setter/Getter +Parameter: String + +动态获取和设置视频类型 +<div cl ...`,l:"advanced/property.html#type",a:"type"},"5.33":{t:"`theme`",p:` +Type: Setter/Getter +Parameter: String + +动态获取和设置播放器主题颜色 +<div ...`,l:"advanced/property.html#theme",a:"theme"},"5.34":{t:"`airplay`",p:` +Type: Function + +开启隔空播放 +<div className="run-code" ...`,l:"advanced/property.html#airplay",a:"airplay"},"5.35":{t:"`loaded`",p:` +Type: Getter + +视频缓存的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用 +&l ...`,l:"advanced/property.html#loaded",a:"loaded"},"5.36":{t:"`played`",p:` +Type: Getter + +视频播放的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用 +&l ...`,l:"advanced/property.html#played",a:"played"},"5.37":{t:"`proxy`",p:` +Type: Function + +DOM 事件的代理函数，实质上代理了 addEventListener 和 removeE ...`,l:"advanced/property.html#proxy",a:"proxy"},"5.38":{t:"`query`",p:` +Type: Function + +DOM 的查询函数，类似 document.querySelector，但被查询的对象局限 ...`,l:"advanced/property.html#query",a:"query"},"5.39":{t:"`video`",p:` +Type: Element + +快捷返回播放器的 video 元素 +<div className="run- ...`,l:"advanced/property.html#video",a:"video"},"5.40":{t:"`cssVar`",p:` +Type: Function + +动态获取或设置 css 变量 +<div className="run-co ...`,l:"advanced/property.html#cssvar",a:"cssvar"},"5.41":{t:"`quality`",p:` +Type: Setter +Parameter: Array + +动态设置画质列表 +<div className=&qu ...`,l:"advanced/property.html#quality",a:"quality"},"6.0":{t:"# 右键菜单",p:"",l:"component/contextmenu.html",a:"右键菜单"},"6.1":{t:"配置",p:` + + +属性 +类型 +描述 + + + + +disable +Boolean +是否禁用组件 + + +name +String +组件唯一名称，用于 ...`,l:"component/contextmenu.html#配置",a:"配置"},"6.2":{t:"创建",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/contextmenu.html#创建",a:"创建"},"6.3":{t:"添加",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/contextmenu.html#添加",a:"添加"},"6.4":{t:"删除",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/contextmenu.html#删除",a:"删除"},"6.5":{t:"更新",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/contextmenu.html#更新",a:"更新"},"7.0":{t:"# 控制器",p:"",l:"component/controls.html",a:"控制器"},"7.1":{t:"配置",p:` + + +属性 +类型 +描述 + + + + +disable +Boolean +是否禁用组件 + + +name +String +组件唯一名称，用于 ...`,l:"component/controls.html#配置",a:"配置"},"7.2":{t:"创建",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/controls.html#创建",a:"创建"},"7.3":{t:"添加",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/controls.html#添加",a:"添加"},"7.4":{t:"删除",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/controls.html#删除",a:"删除"},"7.5":{t:"更新",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/controls.html#更新",a:"更新"},"8.0":{t:"# 业务层",p:"",l:"component/layers.html",a:"业务层"},"8.1":{t:"配置",p:` + + +属性 +类型 +描述 + + + + +disable +Boolean +是否禁用组件 + + +name +String +组件唯一名称，用于 ...`,l:"component/layers.html#配置",a:"配置"},"8.2":{t:"创建",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/layers.html#创建",a:"创建"},"8.3":{t:"添加",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/layers.html#添加",a:"添加"},"8.4":{t:"删除",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/layers.html#删除",a:"删除"},"8.5":{t:"更新",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/layers.html#更新",a:"更新"},"9.0":{t:"# 设置面板",p:"",l:"component/setting.html",a:"设置面板"},"9.1":{t:"内置",p:"须先打开设置面板，然后自带四个内置项：flip, playbackRate, aspectRatio, subtitleOf ...",l:"component/setting.html#内置",a:"内置"},"9.2":{t:"创建 - 选择列表",p:` + + +属性 +类型 +描述 + + + + +html +String, Element +元素的 DOM + + +icon +String, El ...`,l:"component/setting.html#创建-选择列表",a:"创建-选择列表"},"9.3":{t:"创建 - 列表嵌套",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/setting.html#创建-列表嵌套",a:"创建-列表嵌套"},"9.4":{t:"创建 - 切换按钮",p:` + + +属性 +类型 +描述 + + + + +html +String, Element +元素的 DOM 元素 + + +icon +String, ...`,l:"component/setting.html#创建-切换按钮",a:"创建-切换按钮"},"9.5":{t:"创建 - 范围滑块",p:` + + +属性 +类型 +描述 + + + + +html +String, Element +元素的 DOM 元素 + + +icon +String, ...`,l:"component/setting.html#创建-范围滑块",a:"创建-范围滑块"},"9.6":{t:"添加",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/setting.html#添加",a:"添加"},"9.7":{t:"删除",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/setting.html#删除",a:"删除"},"9.8":{t:"更新",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/setting.html#更新",a:"更新"},"10.0":{t:"# Advanced Properties",p:"The advanced properties here refer to the secondary attributes ...",l:"en/advanced/built-in.html",a:"advanced-properties"},"10.1":{t:"`option`",p:`Options for the player +<div className="run-code"& ...`,l:"en/advanced/built-in.html#option",a:"option"},"10.2":{t:"`template`",p:`Manages all of the DOM elements of the player +<div classNam ...`,l:"en/advanced/built-in.html#template",a:"template"},"10.3":{t:"`events`",p:"Manages all DOM events in the player, which is essentially a p ...",l:"en/advanced/built-in.html#events",a:"events"},"10.4":{t:"`storage`",p:`Manages the local storage of the player + +The name attribute is ...`,l:"en/advanced/built-in.html#storage",a:"storage"},"10.5":{t:"`icons`",p:`Manage all the svg icons of the player +<div className=" ...`,l:"en/advanced/built-in.html#icons",a:"icons"},"10.6":{t:"`i18n`",p:`Manage the player's i18n + +The get method is used to retrieve t ...`,l:"en/advanced/built-in.html#i18n",a:"i18n"},"10.7":{t:"`notice`",p:"Manage the player's notices, there's only one show property us ...",l:"en/advanced/built-in.html#notice",a:"notice"},"10.8":{t:"`layers`",p:`Manage the layers of the player + +The add method is used for dy ...`,l:"en/advanced/built-in.html#layers",a:"layers"},"10.9":{t:"`controls`",p:`Manage the player's controllers + +add method is used to dynamic ...`,l:"en/advanced/built-in.html#controls",a:"controls"},"10.10":{t:"`contextmenu`",p:`Manage the right-click context menu of the player + +The add met ...`,l:"en/advanced/built-in.html#contextmenu",a:"contextmenu"},"10.11":{t:"`subtitle`",p:`Manage the subtitle features of the player + +url property sets ...`,l:"en/advanced/built-in.html#subtitle",a:"subtitle"},"10.12":{t:"`loading`",p:`Manage the loading layer of the player + +show property is used ...`,l:"en/advanced/built-in.html#loading",a:"loading"},"10.13":{t:"`hotkey`",p:`Manage the hotkey functionality of the player + +The add method ...`,l:"en/advanced/built-in.html#hotkey",a:"hotkey"},"10.14":{t:"`mask`",p:`Manage the player's mask layer + +show property is used to set w ...`,l:"en/advanced/built-in.html#mask",a:"mask"},"10.15":{t:"`setting`",p:`Manage the player's settings panel + +add method is used to dyna ...`,l:"en/advanced/built-in.html#setting",a:"setting"},"10.16":{t:"`plugins`",p:"Manage the player's plugin features, with only one method add ...",l:"en/advanced/built-in.html#plugins",a:"plugins"},"11.0":{t:"# Static Properties",p:"Here, Static Properties refer to the first-level properties mo ...",l:"en/advanced/class.html",a:"static-properties"},"11.1":{t:"`instances`",p:"Returns an array of all player instances. You can use this pro ...",l:"en/advanced/class.html#instances",a:"instances"},"11.2":{t:"`version`",p:`Returns the version information of the player. +<div classNa ...`,l:"en/advanced/class.html#version",a:"version"},"11.3":{t:"`env`",p:`Returns the environment variables of the player. +<div class ...`,l:"en/advanced/class.html#env",a:"env"},"11.4":{t:"`build`",p:`Returns the build time of the player +<div className="r ...`,l:"en/advanced/class.html#build",a:"build"},"11.5":{t:"`config`",p:`Returns the default configuration of the video +<div classNa ...`,l:"en/advanced/class.html#config",a:"config"},"11.6":{t:"`utils`",p:`Returns a collection of utility functions for the player +<d ...`,l:"en/advanced/class.html#utils",a:"utils"},"11.7":{t:"`scheme`",p:`Returns the validation scheme for the player options +<div c ...`,l:"en/advanced/class.html#scheme",a:"scheme"},"11.8":{t:"`Emitter`",p:`Returns the constructor for the event dispatcher +<div class ...`,l:"en/advanced/class.html#emitter",a:"emitter"},"11.9":{t:"`validator`",p:`Returns the validation function for options +<div className= ...`,l:"en/advanced/class.html#validator",a:"validator"},"11.10":{t:"`kindOf`",p:`Returns the function tool for type checking +<div className= ...`,l:"en/advanced/class.html#kindof",a:"kindof"},"11.11":{t:"`html`",p:`Returns the html string required for the player +<div classN ...`,l:"en/advanced/class.html#html",a:"html"},"11.12":{t:"`option`",p:`Returns the player's default options +<div className="r ...`,l:"en/advanced/class.html#option",a:"option"},"12.0":{t:"# Example Events",p:"Player events are divided into two types, one is the video's n ...",l:"en/advanced/event.html",a:"example-events"},"12.1":{t:"`ready`",p:`Triggered when the player is able to play for the first time +& ...`,l:"en/advanced/event.html#ready",a:"ready"},"12.2":{t:"`restart`",p:"Triggered when the player switches the address and is able to ...",l:"en/advanced/event.html#restart",a:"restart"},"12.3":{t:"`pause`",p:`Triggered when the player is paused +<div className="ru ...`,l:"en/advanced/event.html#pause",a:"pause"},"12.4":{t:"`play`",p:`Triggered when the player starts playing +<div className=&qu ...`,l:"en/advanced/event.html#play",a:"play"},"12.5":{t:"`hotkey`",p:`Triggered when a hotkey on the player is pressed +<div class ...`,l:"en/advanced/event.html#hotkey",a:"hotkey"},"12.6":{t:"`destroy`",p:`Triggered when the player is destroyed +<div className=" ...`,l:"en/advanced/event.html#destroy",a:"destroy"},"12.7":{t:"`focus`",p:`Triggered when the player gains focus +<div className=" ...`,l:"en/advanced/event.html#focus",a:"focus"},"12.8":{t:"`blur`",p:`Triggered when the player loses focus +<div className=" ...`,l:"en/advanced/event.html#blur",a:"blur"},"12.9":{t:"`dblclick`",p:`Triggered when the player is double-clicked +<div className= ...`,l:"en/advanced/event.html#dblclick",a:"dblclick"},"12.10":{t:"`click`",p:`Triggered when the player is clicked +<div className="r ...`,l:"en/advanced/event.html#click",a:"click"},"12.11":{t:"`error`",p:"Triggered when an error occurs while the player is loading the ...",l:"en/advanced/event.html#error",a:"error"},"12.12":{t:"`hover`",p:"Triggered when the player is hovered or unhovered by the mouse ...",l:"en/advanced/event.html#hover",a:"hover"},"12.13":{t:"`mousemove`",p:`Triggered when the mouse moves over the player +<div classNa ...`,l:"en/advanced/event.html#mousemove",a:"mousemove"},"12.14":{t:"`resize`",p:`Triggered when the player size changes +<div className=" ...`,l:"en/advanced/event.html#resize",a:"resize"},"12.15":{t:"`view`",p:`Triggered when the player appears in the viewport +<div clas ...`,l:"en/advanced/event.html#view",a:"view"},"12.16":{t:"`lock`",p:`On mobile, triggered when the locked state changes +<div cla ...`,l:"en/advanced/event.html#lock",a:"lock"},"12.17":{t:"`aspectRatio`",p:`Triggered when the aspect ratio of the player changes +<div ...`,l:"en/advanced/event.html#aspectratio",a:"aspectratio"},"12.18":{t:"`autoHeight`",p:`Triggered when the player automatically sets the height +<di ...`,l:"en/advanced/event.html#autoheight",a:"autoheight"},"12.19":{t:"`autoSize`",p:`Triggered when the player automatically sets the size +<div ...`,l:"en/advanced/event.html#autosize",a:"autosize"},"12.20":{t:"`flip`",p:`Triggered when the player flips +<div className="run-co ...`,l:"en/advanced/event.html#flip",a:"flip"},"12.21":{t:"`fullscreen`",p:`Triggered when the player goes into full screen +<div classN ...`,l:"en/advanced/event.html#fullscreen",a:"fullscreen"},"12.22":{t:"`fullscreenWeb`",p:`Triggered when the player enters web fullscreen +<div classN ...`,l:"en/advanced/event.html#fullscreenweb",a:"fullscreenweb"},"12.23":{t:"`mini`",p:`Triggered when the player enters mini mode +<div className=& ...`,l:"en/advanced/event.html#mini",a:"mini"},"12.24":{t:"`pip`",p:`Triggered when the player enters Picture-in-Picture mode +<d ...`,l:"en/advanced/event.html#pip",a:"pip"},"12.25":{t:"`screenshot`",p:`Triggered when the player takes a screenshot +<div className ...`,l:"en/advanced/event.html#screenshot",a:"screenshot"},"12.26":{t:"`seek`",p:`Triggered when the player jumps in time +<div className=&quo ...`,l:"en/advanced/event.html#seek",a:"seek"},"12.27":{t:"`subtitleOffset`",p:`Triggered when the subtitle offset occurs in the player +<di ...`,l:"en/advanced/event.html#subtitleoffset",a:"subtitleoffset"},"12.28":{t:"`subtitleUpdate`",p:`Triggered when the subtitle updates +<div className="ru ...`,l:"en/advanced/event.html#subtitleupdate",a:"subtitleupdate"},"12.29":{t:"`subtitleLoad`",p:`Triggered when the subtitle loads +<div className="run- ...`,l:"en/advanced/event.html#subtitleload",a:"subtitleload"},"12.30":{t:"`subtitleSwitch`",p:`Triggered when subtitles switch +<div className="run-co ...`,l:"en/advanced/event.html#subtitleswitch",a:"subtitleswitch"},"12.31":{t:"`info`",p:`Triggered when the information panel is shown or hidden +<di ...`,l:"en/advanced/event.html#info",a:"info"},"12.32":{t:"`layer`",p:`Triggered when a custom layer is shown or hidden +<div class ...`,l:"en/advanced/event.html#layer",a:"layer"},"12.33":{t:"`loading`",p:`Triggered when a loader is shown or hidden +<div className=& ...`,l:"en/advanced/event.html#loading",a:"loading"},"12.34":{t:"`mask`",p:`Triggered when a mask layer is shown or hidden +<div classNa ...`,l:"en/advanced/event.html#mask",a:"mask"},"12.35":{t:"`subtitle`",p:`Triggered when the subtitle layer is shown or hidden +<div c ...`,l:"en/advanced/event.html#subtitle",a:"subtitle"},"12.36":{t:"`contextmenu`",p:`Triggered when the right-click menu is shown or hidden +<div ...`,l:"en/advanced/event.html#contextmenu",a:"contextmenu"},"12.37":{t:"`control`",p:`Triggered when the controller is shown or hidden +<div class ...`,l:"en/advanced/event.html#control",a:"control"},"12.38":{t:"`setting`",p:`Triggered when the settings panel is shown or hidden +<div c ...`,l:"en/advanced/event.html#setting",a:"setting"},"12.39":{t:"`muted`",p:`Triggered when the muted state changes +<div className=" ...`,l:"en/advanced/event.html#muted",a:"muted"},"12.40":{t:"`video:canplay`",p:"The browser can play the media file, but estimates there is no ...",l:"en/advanced/event.html#video-canplay",a:"video-canplay"},"12.41":{t:"`video:canplaythrough`",p:"The browser estimates it can play the media through to the end ...",l:"en/advanced/event.html#video-canplaythrough",a:"video-canplaythrough"},"12.42":{t:"`video:complete`",p:`OfflineAudioContext rendering is complete +`,l:"en/advanced/event.html#video-complete",a:"video-complete"},"12.43":{t:"`video:durationchange`",p:`Triggered when the value of the duration property changes +`,l:"en/advanced/event.html#video-durationchange",a:"video-durationchange"},"12.44":{t:"`video:emptied`",p:"The media content becomes empty; for example, when this media ...",l:"en/advanced/event.html#video-emptied",a:"video-emptied"},"12.45":{t:"`video:ended`",p:`The video has stopped because the media reached the end point +`,l:"en/advanced/event.html#video-ended",a:"video-ended"},"12.46":{t:"`video:error`",p:"An error occurred while fetching media data, or the resource t ...",l:"en/advanced/event.html#video-error",a:"video-error"},"12.47":{t:"`video:loadeddata`",p:`The first frame of the media has finished loading +`,l:"en/advanced/event.html#video-loadeddata",a:"video-loadeddata"},"12.48":{t:"`video:loadedmetadata`",p:`Metadata has been loaded +`,l:"en/advanced/event.html#video-loadedmetadata",a:"video-loadedmetadata"},"12.49":{t:"`video:pause`",p:`Playback has been paused +`,l:"en/advanced/event.html#video-pause",a:"video-pause"},"12.50":{t:"`video:play`",p:`Playback has started +`,l:"en/advanced/event.html#video-play",a:"video-play"},"12.51":{t:"`video:playing`",p:"Playback is ready to start following a pause or delay due to l ...",l:"en/advanced/event.html#video-playing",a:"video-playing"},"12.52":{t:"`video:progress`",p:`Periodically triggered while the browser is loading resources +`,l:"en/advanced/event.html#video-progress",a:"video-progress"},"12.53":{t:"`video:ratechange`",p:`The playback rate has changed +`,l:"en/advanced/event.html#video-ratechange",a:"video-ratechange"},"12.54":{t:"`video:seeked`",p:`A seek (frame skipping) operation has completed +`,l:"en/advanced/event.html#video-seeked",a:"video-seeked"},"12.55":{t:"`video:seeking`",p:`A seek (frame skipping) operation has started +`,l:"en/advanced/event.html#video-seeking",a:"video-seeking"},"12.56":{t:"`video:stalled`",p:"The user agent is trying to fetch media data, but the data une ...",l:"en/advanced/event.html#video-stalled",a:"video-stalled"},"12.57":{t:"`video:suspend`",p:`Media data loading has been suspended +`,l:"en/advanced/event.html#video-suspend",a:"video-suspend"},"12.58":{t:"`video:timeupdate`",p:`The time specified by the currentTime attribute has changed +`,l:"en/advanced/event.html#video-timeupdate",a:"video-timeupdate"},"12.59":{t:"`video:volumechange`",p:`Volume changed +`,l:"en/advanced/event.html#video-volumechange",a:"video-volumechange"},"12.60":{t:"`video:waiting`",p:`Playback has stopped due to temporarily missing data +`,l:"en/advanced/event.html#video-waiting",a:"video-waiting"},"13.0":{t:"# Global Attributes",p:"Here, Global Attributes refer to the first-level properties mo ...",l:"en/advanced/global.html",a:"global-attributes"},"13.1":{t:"DEBUG",p:"Whether to start debug mode, which can print out all built-in ...",l:"en/advanced/global.html#debug",a:"debug"},"13.2":{t:"CONTEXTMENU",p:"Whether to enable the right-click context menu, enabled by def ...",l:"en/advanced/global.html#contextmenu",a:"contextmenu"},"13.3":{t:"NOTICE_TIME",p:"The display duration of the notification message, in milliseco ...",l:"en/advanced/global.html#notice-time",a:"notice-time"},"13.4":{t:"SETTING_WIDTH",p:"The default width of the settings panel, in pixels, defaults t ...",l:"en/advanced/global.html#setting-width",a:"setting-width"},"13.5":{t:"SETTING_ITEM_WIDTH",p:"Set the default width of the settings items in the panel, in p ...",l:"en/advanced/global.html#setting-item-width",a:"setting-item-width"},"13.6":{t:"SETTING_ITEM_HEIGHT",p:"Set the default height of the settings items in the panel, in ...",l:"en/advanced/global.html#setting-item-height",a:"setting-item-height"},"13.7":{t:"RESIZE_TIME",p:"Throttle time for the resize event, in milliseconds, defaults ...",l:"en/advanced/global.html#resize-time",a:"resize-time"},"13.8":{t:"SCROLL_TIME",p:"Throttle time for the scroll event, in milliseconds, defaults ...",l:"en/advanced/global.html#scroll-time",a:"scroll-time"},"13.9":{t:"SCROLL_GAP",p:"The boundary tolerance distance for the view event, in pixels, ...",l:"en/advanced/global.html#scroll-gap",a:"scroll-gap"},"13.10":{t:"AUTO_PLAYBACK_MAX",p:"The maximum number of records for the automatic playback featu ...",l:"en/advanced/global.html#auto-playback-max",a:"auto-playback-max"},"13.11":{t:"AUTO_PLAYBACK_MIN",p:"The minimum duration for the auto playback feature, in seconds ...",l:"en/advanced/global.html#auto-playback-min",a:"auto-playback-min"},"13.12":{t:"AUTO_PLAYBACK_TIMEOUT",p:"The delay duration for hiding the auto playback feature, in mi ...",l:"en/advanced/global.html#auto-playback-timeout",a:"auto-playback-timeout"},"13.13":{t:"RECONNECT_TIME_MAX",p:"The maximum number of automatic reconnection attempts when a c ...",l:"en/advanced/global.html#reconnect-time-max",a:"reconnect-time-max"},"13.14":{t:"RECONNECT_SLEEP_TIME",p:"The delay time for the automatic reconnection attempt when a c ...",l:"en/advanced/global.html#reconnect-sleep-time",a:"reconnect-sleep-time"},"13.15":{t:"CONTROL_HIDE_TIME",p:`... +Auto-hide delay time for the bottom control bar, measured ...`,l:"en/advanced/global.html#control-hide-time",a:"control-hide-time"},"13.16":{t:"DBCLICK_TIME",p:"Double-click event delay time, measured in milliseconds, defau ...",l:"en/advanced/global.html#dbclick-time",a:"dbclick-time"},"13.17":{t:"DBCLICK_FULLSCREEN",p:"On desktop, whether to switch to fullscreen on double click, d ...",l:"en/advanced/global.html#dbclick-fullscreen",a:"dbclick-fullscreen"},"13.18":{t:"MOBILE_DBCLICK_PLAY",p:"On mobile, whether to toggle play/pause on double click, defau ...",l:"en/advanced/global.html#mobile-dbclick-play",a:"mobile-dbclick-play"},"13.19":{t:"MOBILE_CLICK_PLAY",p:"On mobile, whether to play/pause on single click, default is f ...",l:"en/advanced/global.html#mobile-click-play",a:"mobile-click-play"},"13.20":{t:"AUTO_ORIENTATION_TIME",p:"On mobile devices, the delay time for auto-rotation, in millis ...",l:"en/advanced/global.html#auto-orientation-time",a:"auto-orientation-time"},"13.21":{t:"INFO_LOOP_TIME",p:"Info panel refresh time, unit in milliseconds, default is 1000 ...",l:"en/advanced/global.html#info-loop-time",a:"info-loop-time"},"13.22":{t:"FAST_FORWARD_VALUE",p:"On mobile, the multiplier rate of the speed when long-pressing ...",l:"en/advanced/global.html#fast-forward-value",a:"fast-forward-value"},"13.23":{t:"FAST_FORWARD_TIME",p:"The time, in milliseconds, to fast-forward when double-tapped, ...",l:"en/advanced/global.html#fast-forward-time",a:"fast-forward-time"},"13.24":{t:"TOUCH_MOVE_RATIO",p:"On mobile, the ratio of the speed of sliding left and right to ...",l:"en/advanced/global.html#touch-move-ratio",a:"touch-move-ratio"},"13.25":{t:"VOLUME_STEP",p:"The step ratio of adjusting volume with shortcuts, default is ...",l:"en/advanced/global.html#volume-step",a:"volume-step"},"13.26":{t:"SEEK_STEP",p:"The increment by which the playback progress is adjusted via k ...",l:"en/advanced/global.html#seek-step",a:"seek-step"},"13.27":{t:"PLAYBACK_RATE",p:"The list of built-in playback speeds, by default [0.5, 0.75, 1 ...",l:"en/advanced/global.html#playback-rate",a:"playback-rate"},"13.28":{t:"ASPECT_RATIO",p:"Built-in list of video aspect ratios, default is ['default', ' ...",l:"en/advanced/global.html#aspect-ratio",a:"aspect-ratio"},"13.29":{t:"FLIP",p:"Built-in list of video flips, defaults to ['normal', 'horizont ...",l:"en/advanced/global.html#flip",a:"flip"},"13.30":{t:"FULLSCREEN_WEB_IN_BODY",p:"When in web fullscreen, whether to mount the player under the ...",l:"en/advanced/global.html#fullscreen-web-in-body",a:"fullscreen-web-in-body"},"13.31":{t:"LOG_VERSION",p:"Setting whether to print the player version, the default is tr ...",l:"en/advanced/global.html#log-version",a:"log-version"},"13.32":{t:"USE_RAF",p:"Setting whether to use requestAnimationFrame, the default is f ...",l:"en/advanced/global.html#use-raf",a:"use-raf"},"14.0":{t:"# Writing Plugins",p:"Once you know the player's properties, methods, and events, wr ...",l:"en/advanced/plugin.html",a:"writing-plugins"},"15.0":{t:"# Instance Properties",p:"Here, instance properties refer to the primary properties moun ...",l:"en/advanced/property.html",a:"instance-properties"},"15.1":{t:"`play`",p:` +Type: Function + +Play video +<div className="run-code&q ...`,l:"en/advanced/property.html#play",a:"play"},"15.2":{t:"`pause`",p:` +Type: Function + +Pause video +<div className="run-code& ...`,l:"en/advanced/property.html#pause",a:"pause"},"15.3":{t:"`toggle`",p:` +Type: Function + +Toggle the play and pause state of the video + ...`,l:"en/advanced/property.html#toggle",a:"toggle"},"15.4":{t:"`destroy`",p:` +Type: Function +Parameter: Boolean + +Destroy the player. Accept ...`,l:"en/advanced/property.html#destroy",a:"destroy"},"15.5":{t:"`seek`",p:` +Type: Setter +Parameter: Number + +Jump to a specific time in th ...`,l:"en/advanced/property.html#seek",a:"seek"},"15.6":{t:"`forward`",p:` +Type: Setter +Parameter: Number + +Fast forward the video time, ...`,l:"en/advanced/property.html#forward",a:"forward"},"15.7":{t:"`backward`",p:` +Type: Setter +Parameter: Number + +Video rewind time in seconds + ...`,l:"en/advanced/property.html#backward",a:"backward"},"15.8":{t:"`volume`",p:` +Type: Setter/Getter +Parameter: Number + +Sets and gets the vide ...`,l:"en/advanced/property.html#volume",a:"volume"},"15.9":{t:"`url`",p:` +Type: Setter/Getter +Parameter: String + +Set and retrieve the v ...`,l:"en/advanced/property.html#url",a:"url"},"15.10":{t:"`switch`",p:` +Type: Setter +Parameter: String + +Set the video address, which ...`,l:"en/advanced/property.html#switch",a:"switch"},"15.11":{t:"`switchUrl`",p:` +Type: Function +Parameter: String + +Set the video address, simi ...`,l:"en/advanced/property.html#switchurl",a:"switchurl"},"15.12":{t:"`switchQuality`",p:` +Type: Function +Parameter: String + +Set video quality address, ...`,l:"en/advanced/property.html#switchquality",a:"switchquality"},"15.13":{t:"`muted`",p:` +Type: Setter/Getter +Parameter: Boolean + +Set and get whether t ...`,l:"en/advanced/property.html#muted",a:"muted"},"15.14":{t:"`currentTime`",p:` +Type: Setter/Getter +Parameter: Number + +Set and get the curren ...`,l:"en/advanced/property.html#currenttime",a:"currenttime"},"15.15":{t:"`duration`",p:` +Type: Getter + +Get the video duration +<div className=" ...`,l:"en/advanced/property.html#duration",a:"duration"},"15.16":{t:"`screenshot`",p:` +Type: Function + +Download a screenshot of the current video fr ...`,l:"en/advanced/property.html#screenshot",a:"screenshot"},"15.17":{t:"`getDataURL`",p:` +Type: Function + +Gets the base64 address of the screenshot of ...`,l:"en/advanced/property.html#getdataurl",a:"getdataurl"},"15.18":{t:"`getBlobUrl`",p:` +Type: Function + +Gets the blob address of the screenshot of th ...`,l:"en/advanced/property.html#getbloburl",a:"getbloburl"},"15.19":{t:"`fullscreen`",p:` +Type: Setter/Getter +Parameter: Boolean + +Set and get the playe ...`,l:"en/advanced/property.html#fullscreen",a:"fullscreen"},"15.20":{t:"`fullscreenWeb`",p:` +Type: Setter/Getter +Parameter: Boolean + +Set and get the playe ...`,l:"en/advanced/property.html#fullscreenweb",a:"fullscreenweb"},"15.21":{t:"`pip`",p:` +Type: Setter/Getter +Parameter: Boolean + +Set and get the playe ...`,l:"en/advanced/property.html#pip",a:"pip"},"15.22":{t:"`poster`",p:` +Type: Setter/Getter +Parameter: String + +Set and get the video ...`,l:"en/advanced/property.html#poster",a:"poster"},"15.23":{t:"`mini`",p:` +Type: Setter/Getter +Parameter: Boolean + +Set and get the playe ...`,l:"en/advanced/property.html#mini",a:"mini"},"15.24":{t:"`playing`",p:` +Type: Getter +Parameter: Boolean + +Get whether the video is cur ...`,l:"en/advanced/property.html#playing",a:"playing"},"15.25":{t:"`autoSize`",p:` +Type: Function + +Sets whether the video should auto adjust its ...`,l:"en/advanced/property.html#autosize",a:"autosize"},"15.26":{t:"`rect`",p:` +Type: Getter + +Gets the size and position information of the p ...`,l:"en/advanced/property.html#rect",a:"rect"},"15.27":{t:"`flip`",p:` +Type: Setter/Getter +Parameter: String + +Set and get the player ...`,l:"en/advanced/property.html#flip",a:"flip"},"15.28":{t:"`playbackRate`",p:` +Type: Setter/Getter +Parameter: Number +Set and get the playbac ...`,l:"en/advanced/property.html#playbackrate",a:"playbackrate"},"15.29":{t:"`aspectRatio`",p:` +Type: Setter/Getter +Parameter: String + +Set and get the aspect ...`,l:"en/advanced/property.html#aspectratio",a:"aspectratio"},"15.30":{t:"`autoHeight`",p:` +Type: Function + +When the container has only width, this attri ...`,l:"en/advanced/property.html#autoheight",a:"autoheight"},"15.31":{t:"`attr`",p:` +Type: Function +Parameter: String + +Dynamically get and set the ...`,l:"en/advanced/property.html#attr",a:"attr"},"15.32":{t:"`type`",p:` +Type: Setter/Getter +Parameter: String + +Dynamically get and se ...`,l:"en/advanced/property.html#type",a:"type"},"15.33":{t:"`theme`",p:` +Type: Setter/Getter +Parameter: String + +Dynamically get and se ...`,l:"en/advanced/property.html#theme",a:"theme"},"15.34":{t:"`airplay`",p:` +Type: Function + +Activate airplay +<div className="run- ...`,l:"en/advanced/property.html#airplay",a:"airplay"},"15.35":{t:"`loaded`",p:` +Type: Getter + +The proportion of the video that is cached, ran ...`,l:"en/advanced/property.html#loaded",a:"loaded"},"15.36":{t:"`played`",p:` +Type: Getter + +The proportion of the video that has been playe ...`,l:"en/advanced/property.html#played",a:"played"},"15.37":{t:"`proxy`",p:` +Type: Function + +A proxy function for DOM events, which essent ...`,l:"en/advanced/property.html#proxy",a:"proxy"},"15.38":{t:"`query`",p:` +Type: Function + +DOM query function, similar to document.query ...`,l:"en/advanced/property.html#query",a:"query"},"15.39":{t:"`video`",p:` +Type: Element + +A shortcut to return the video element of the ...`,l:"en/advanced/property.html#video",a:"video"},"15.40":{t:"`cssVar`",p:` +Type: Function + +Dynamically getting or setting css variables + ...`,l:"en/advanced/property.html#cssvar",a:"cssvar"},"15.41":{t:"`quality`",p:` +Type: Setter +Parameter: Array + +Dynamically setting the list o ...`,l:"en/advanced/property.html#quality",a:"quality"},"16.0":{t:"# Context Menu",p:"",l:"en/component/contextmenu.html",a:"context-menu"},"16.1":{t:"Configuration",p:` + + +Property +Type +Description + + + + +disable +Boolean +Whether to di ...`,l:"en/component/contextmenu.html#configuration",a:"configuration"},"16.2":{t:"Creation",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/contextmenu.html#creation",a:"creation"},"16.3":{t:"Add",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/contextmenu.html#add",a:"add"},"16.4":{t:"Delete",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/contextmenu.html#delete",a:"delete"},"16.5":{t:"Updates",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/contextmenu.html#updates",a:"updates"},"17.0":{t:"# Controller",p:"",l:"en/component/controls.html",a:"controller"},"17.1":{t:"Configuration",p:` + + +Property +Type +Description + + + + +disable +Boolean +Whether to di ...`,l:"en/component/controls.html#configuration",a:"configuration"},"17.2":{t:"Creation",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/controls.html#creation",a:"creation"},"17.3":{t:"Adding",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/controls.html#adding",a:"adding"},"17.4":{t:"Delete",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/controls.html#delete",a:"delete"},"17.5":{t:"Update",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/controls.html#update",a:"update"},"18.0":{t:"# Layer",p:"",l:"en/component/layers.html",a:"layer"},"18.1":{t:"Configuration",p:` + + +Property +Type +Description + + + + +disable +Boolean +Whether to di ...`,l:"en/component/layers.html#configuration",a:"configuration"},"18.2":{t:"Creation",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/layers.html#creation",a:"creation"},"18.3":{t:"Add",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/layers.html#add",a:"add"},"18.4":{t:"Delete",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/layers.html#delete",a:"delete"},"18.5":{t:"Update",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/layers.html#update",a:"update"},"19.0":{t:"# Settings Panel",p:"",l:"en/component/setting.html",a:"settings-panel"},"19.1":{t:"Built-in",p:"First, open the settings panel, and then it comes with four bu ...",l:"en/component/setting.html#built-in",a:"built-in"},"19.2":{t:"Create - Selection List",p:` + + +Property +Type +Description + + + + +html +String, Element +Element' ...`,l:"en/component/setting.html#create-selection-list",a:"create-selection-list"},"19.3":{t:"Creating - Nested Lists",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/setting.html#creating-nested-lists",a:"creating-nested-lists"},"19.4":{t:"Create - Toggle Button",p:` + + +Property +Type +Description + + + + +html +String, Element +Element' ...`,l:"en/component/setting.html#create-toggle-button",a:"create-toggle-button"},"19.5":{t:"Create - Range Slider",p:` + + +Attribute +Type +Description + + + + +html +String, Element +The ele ...`,l:"en/component/setting.html#create-range-slider",a:"create-range-slider"},"19.6":{t:"Add",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/setting.html#add",a:"add"},"19.7":{t:"Delete",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/setting.html#delete",a:"delete"},"19.8":{t:"Updates",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/setting.html#updates",a:"updates"},"20.0":{t:"# Installation and Usage",p:"",l:"en/index.html",a:"installation-and-usage"},"20.1":{t:"Installation",p:`::: code-group +npm install artplayer + +yarn add artplayer + +pnpm ...`,l:"en/index.html#installation",a:"installation"},"20.2":{t:"`CDN`",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer/dist/art ...`,l:"en/index.html#cdn",a:"cdn"},"20.3":{t:"Usage",p:`::: code-group +import Artplayer from 'artplayer'; + +const art = ...`,l:"en/index.html#usage",a:"usage"},"20.4":{t:"`Vue.js`",p:`::: code-group +<template> + <div ref="artRef&quo ...`,l:"en/index.html#vue-js",a:"vue-js"},"20.5":{t:"`React.js`",p:`::: code-group +import { useEffect, useRef } from 'react'; +impo ...`,l:"en/index.html#react-js",a:"react-js"},"20.6":{t:"TypeScript",p:"Importing Artplayer will automatically import artplayer.d.ts, ...",l:"en/index.html#typescript",a:"typescript"},"20.7":{t:"JavaScript",p:"Sometimes your js file may lose the TypeScript type hints, in ...",l:"en/index.html#javascript",a:"javascript"},"20.8":{t:"Ancient Browsers",p:"The production build of artplayer.js is only compatible with t ...",l:"en/index.html#ancient-browsers",a:"ancient-browsers"},"21.0":{t:"# dash.js",p:`👉 https://github.com/Dash-Industry-Forum/dash.js +<div clas ...`,l:"en/library/dash.html",a:"dash-js"},"22.0":{t:"# flv.js",p:`👉 https://github.com/Bilibili/flv.js +<div className=" ...`,l:"en/library/flv.html",a:"flv-js"},"23.0":{t:"# hls.js",p:`👉 https://github.com/video-dev/hls.js +<div className=" ...`,l:"en/library/hls.html",a:"hls-js"},"24.0":{t:"# Video Ads",p:"",l:"en/plugin/ads.html",a:"video-ads"},"24.1":{t:"Demo",p:`👉 View Full Demo +`,l:"en/plugin/ads.html#demo",a:"demo"},"24.2":{t:"Installation",p:`::: code-group +npm install artplayer-plugin-ads + +yarn add artp ...`,l:"en/plugin/ads.html#installation",a:"installation"},"24.3":{t:"CDN",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-a ...`,l:"en/plugin/ads.html#cdn",a:"cdn"},"24.4":{t:"Usage",p:"<div className="run-code" data-libs="./uncom ...",l:"en/plugin/ads.html#usage",a:"usage"},"25.0":{t:"# Danmuku",p:"",l:"en/plugin/danmuku.html",a:"danmuku"},"25.1":{t:"Demo",p:`👉 View Full Demo +`,l:"en/plugin/danmuku.html#demo",a:"demo"},"25.2":{t:"Installation",p:`::: code-group +npm install artplayer-plugin-danmuku + +yarn add ...`,l:"en/plugin/danmuku.html#installation",a:"installation"},"25.3":{t:"CDN",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-d ...`,l:"en/plugin/danmuku.html#cdn",a:"cdn"},"25.4":{t:"Option",p:`{ + danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组 + speed: ...`,l:"en/plugin/danmuku.html#option",a:"option"},"25.5":{t:"Using Danmuku Array",p:"<div className="run-code" data-libs="./uncom ...",l:"en/plugin/danmuku.html#using-danmuku-array",a:"using-danmuku-array"},"25.6":{t:"Using Danmuku XML",p:"<div className="run-code" data-libs="./uncom ...",l:"en/plugin/danmuku.html#using-danmuku-xml",a:"using-danmuku-xml"},"25.7":{t:"Using Asynchronous Call",p:"<div className="run-code" data-libs="./uncom ...",l:"en/plugin/danmuku.html#using-asynchronous-call",a:"using-asynchronous-call"},"25.8":{t:"`hide/show`",p:"Hide or show the bullet comments with the methods hide and sho ...",l:"en/plugin/danmuku.html#hide-show",a:"hide-show"},"25.9":{t:"`isHide`",p:"Judge whether the current barrage is hidden or displayed with ...",l:"en/plugin/danmuku.html#ishide",a:"ishide"},"25.10":{t:"`emit`",p:`Send a real-time danmaku message through the emit method +<d ...`,l:"en/plugin/danmuku.html#emit",a:"emit"},"25.11":{t:"`config`",p:"Change the barrage configuration in real-time with the config ...",l:"en/plugin/danmuku.html#config",a:"config"},"25.12":{t:"`load`",p:"The load method can be used to reload the danmu data source or ...",l:"en/plugin/danmuku.html#load",a:"load"},"25.13":{t:"`reset`",p:`Used to clear the current displayed barrages +<div className ...`,l:"en/plugin/danmuku.html#reset",a:"reset"},"25.14":{t:"`option`",p:`Used to get the current barrage configuration +<div classNam ...`,l:"en/plugin/danmuku.html#option",a:"option"},"25.15":{t:"Event",p:`var art = new Artplayer({ + container: '.artplayer-app', + ...`,l:"en/plugin/danmuku.html#event",a:"event"},"26.0":{t:"# Dash Video Quality",p:"",l:"en/plugin/dash-quality.html",a:"dash-video-quality"},"26.1":{t:"Demo",p:`👉 View the full demo +`,l:"en/plugin/dash-quality.html#demo",a:"demo"},"26.2":{t:"Installation",p:`::: code-group +npm install artplayer-plugin-dash-quality + +yarn ...`,l:"en/plugin/dash-quality.html#installation",a:"installation"},"26.3":{t:"CDN",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-d ...`,l:"en/plugin/dash-quality.html#cdn",a:"cdn"},"27.0":{t:"# HLS Quality",p:"",l:"en/plugin/hls-quality.html",a:"hls-quality"},"27.1":{t:"Demonstration",p:`👉 View the full demo +`,l:"en/plugin/hls-quality.html#demonstration",a:"demonstration"},"27.2":{t:"Installation",p:`::: code-group +npm install artplayer-plugin-hls-quality + +yarn ...`,l:"en/plugin/hls-quality.html#installation",a:"installation"},"27.3":{t:"CDN",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-h ...`,l:"en/plugin/hls-quality.html#cdn",a:"cdn"},"28.0":{t:"# Iframe Control",p:"",l:"en/plugin/iframe.html",a:"iframe-control"},"28.1":{t:"Description",p:"With this plugin, you can easily control the player inside the ...",l:"en/plugin/iframe.html#description",a:"description"},"28.2":{t:"Demonstration",p:`👉 View full demonstration +`,l:"en/plugin/iframe.html#demonstration",a:"demonstration"},"28.3":{t:"Installation",p:`::: code-group +npm install artplayer-plugin-iframe + +yarn add a ...`,l:"en/plugin/iframe.html#installation",a:"installation"},"28.4":{t:"`CDN`",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-i ...`,l:"en/plugin/iframe.html#cdn",a:"cdn"},"28.5":{t:"Usage",p:`::: code-group +<!DOCTYPE html> +<html> + <head ...`,l:"en/plugin/iframe.html#usage",a:"usage"},"28.6":{t:"`index.html` Interface",p:"",l:"en/plugin/iframe.html#index-html-interface",a:"index-html-interface"},"28.7":{t:"`commit`",p:"Push messages from index.html to iframe.html. This function wi ...",l:"en/plugin/iframe.html#commit",a:"commit"},"28.8":{t:"`message`",p:`Receive messages from iframe.html in index.html +iframe.message ...`,l:"en/plugin/iframe.html#message",a:"message"},"28.9":{t:"`destroy`",p:"After destruction, index.html can no longer communicate with i ...",l:"en/plugin/iframe.html#destroy",a:"destroy"},"28.10":{t:"`iframe.html` Interface",p:`:::warning Warning +The iframe.html interface can only run insi ...`,l:"en/plugin/iframe.html#iframe-html-interface",a:"iframe-html-interface"},"28.11":{t:"`inject`",p:`Inject a script, receive messages from index.html +ArtplayerPlu ...`,l:"en/plugin/iframe.html#inject",a:"inject"},"28.12":{t:"`postMessage`",p:`Push messages to index.html +iframe.message((event) => { + ...`,l:"en/plugin/iframe.html#postmessage",a:"postmessage"},"28.13":{t:"例子",p:"最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 ...",l:"en/plugin/iframe.html#例子",a:"例子"},"29.0":{t:"# Language Settings",p:`::: danger +Given the increasing number of bundled multilingual ...`,l:"en/start/i18n.html",a:"language-settings"},"29.1":{t:"Default Languages",p:"The default languages are: en, zh-cn, which do not require man ...",l:"en/start/i18n.html#default-languages",a:"default-languages"},"29.2":{t:"Importing Languages",p:"Language files before packaging are located in: artplayer/src/ ...",l:"en/start/i18n.html#importing-languages",a:"importing-languages"},"29.3":{t:"Add Language",p:`var art = new Artplayer({ + container: '.artplayer-app', + ...`,l:"en/start/i18n.html#add-language",a:"add-language"},"29.4":{t:"Modify Language",p:`import zhTw from 'artplayer/i18n/zh-tw.js'; + +var art = new Art ...`,l:"en/start/i18n.html#modify-language",a:"modify-language"},"30.0":{t:"# Basic Options",p:"",l:"en/start/option.html",a:"basic-options"},"30.1":{t:"`container`",p:` +Type: String, Element +Default: #artplayer + +The DOM container ...`,l:"en/start/option.html#container",a:"container"},"30.2":{t:"`url`",p:` +Type: String +Default: '' + +The video source address +<div cl ...`,l:"en/start/option.html#url",a:"url"},"30.3":{t:"`id`",p:` +Type: String +Default: '' + +The unique identifier of the player ...`,l:"en/start/option.html#id",a:"id"},"30.4":{t:"`onReady`",p:` +Type: Function +Default: undefined + +The constructor accepts a ...`,l:"en/start/option.html#onready",a:"onready"},"30.5":{t:"`poster`",p:` +Type: String +Default: '' + +The poster of the video, which only ...`,l:"en/start/option.html#poster",a:"poster"},"30.6":{t:"`theme`",p:` +Type: String +Default: #f00 + +Player theme color, currently use ...`,l:"en/start/option.html#theme",a:"theme"},"30.7":{t:"`volume`",p:` +Type: Number +Default: 0.7 + +The default volume of the player +& ...`,l:"en/start/option.html#volume",a:"volume"},"30.8":{t:"`isLive`",p:` +Type: Boolean +Default: false + +Use live mode, which will hide ...`,l:"en/start/option.html#islive",a:"islive"},"30.9":{t:"`muted`",p:` +Type: Boolean +Default: false + +Whether to mute by default +< ...`,l:"en/start/option.html#muted",a:"muted"},"30.10":{t:"`autoplay`",p:` +Type: Boolean +Default: false + +Whether to play automatically + + ...`,l:"en/start/option.html#autoplay",a:"autoplay"},"30.11":{t:"`autoSize`",p:` +Type: Boolean +Default: false + +The size of the player will by ...`,l:"en/start/option.html#autosize",a:"autosize"},"30.12":{t:"`autoMini`",p:` +Type: Boolean +Default: false + +Automatically enter mini mode w ...`,l:"en/start/option.html#automini",a:"automini"},"30.13":{t:"`loop`",p:` +Type: Boolean +Default: false + +Whether to loop the video +<d ...`,l:"en/start/option.html#loop",a:"loop"},"30.14":{t:"`flip`",p:` +Type: Boolean +Default: false + +Whether to show the video flip ...`,l:"en/start/option.html#flip",a:"flip"},"30.15":{t:"`playbackRate`",p:` +Type: Boolean +Default: false + +Whether to show the playback sp ...`,l:"en/start/option.html#playbackrate",a:"playbackrate"},"30.16":{t:"`aspectRatio`",p:` +Type: Boolean +Default: false + +Displays the video aspect ratio ...`,l:"en/start/option.html#aspectratio",a:"aspectratio"},"30.17":{t:"`screenshot`",p:` +Type: Boolean +Default: false + +Whether to show the screenshot ...`,l:"en/start/option.html#screenshot",a:"screenshot"},"30.18":{t:"`setting`",p:` +Type: Boolean +Default: false + +Display the toggle button for t ...`,l:"en/start/option.html#setting",a:"setting"},"30.19":{t:"`hotkey`",p:` +Type: Boolean +Default: true + +Whether to use hotkeys +<div c ...`,l:"en/start/option.html#hotkey",a:"hotkey"},"30.20":{t:"`pip`",p:` +Type: Boolean +Default: false +Show the Picture in Picture swit ...`,l:"en/start/option.html#pip",a:"pip"},"30.21":{t:"`mutex`",p:` +Type: Boolean +Default: true + +If there are multiple players on ...`,l:"en/start/option.html#mutex",a:"mutex"},"30.22":{t:"`fullscreen`",p:` +Type: Boolean +Default: false +Display the Window Fullscreen bu ...`,l:"en/start/option.html#fullscreen",a:"fullscreen"},"30.23":{t:"`fullscreenWeb`",p:` +Type: Boolean +Default: false + +Display the Web Fullscreen butt ...`,l:"en/start/option.html#fullscreenweb",a:"fullscreenweb"},"30.24":{t:"`subtitleOffset`",p:` + +Type: Boolean + + +Default: false + + +Subtitle time offset, the r ...`,l:"en/start/option.html#subtitleoffset",a:"subtitleoffset"},"30.25":{t:"`miniProgressBar`",p:` +Type: Boolean +Default: false + +Mini progress bar, only appears ...`,l:"en/start/option.html#miniprogressbar",a:"miniprogressbar"},"30.26":{t:"`useSSR`",p:` +Type: Boolean +Default: false + +Whether to use SSR (Server-Side ...`,l:"en/start/option.html#usessr",a:"usessr"},"30.27":{t:"`playsInline`",p:` +Type: Boolean +Default: true + +Whether to use playsInline mode ...`,l:"en/start/option.html#playsinline",a:"playsinline"},"30.28":{t:"`layers`",p:` +Type: Array +Default: [] + +Initializes custom layers +<div cl ...`,l:"en/start/option.html#layers",a:"layers"},"30.29":{t:"`settings`",p:` +Type: Array +Default: [] + +Initializes custom settings panel +&l ...`,l:"en/start/option.html#settings",a:"settings"},"30.30":{t:"`contextmenu`",p:` +Type: Array +Default: [] + +Initialize custom context menu +<d ...`,l:"en/start/option.html#contextmenu",a:"contextmenu"},"30.31":{t:"`controls`",p:` +Type: Array +Default: [] + +Initializes custom bottom control ba ...`,l:"en/start/option.html#controls",a:"controls"},"30.32":{t:"`quality`",p:` +Type: Array +Default: [] + +Whether to show the quality selectio ...`,l:"en/start/option.html#quality",a:"quality"},"30.33":{t:"`highlight`",p:` +Type: Array +Default: [] + +Show highlight information on the pr ...`,l:"en/start/option.html#highlight",a:"highlight"},"30.34":{t:"`plugins`",p:` +Type: Array +Default: [] + +Initialize custom plugins +<div cl ...`,l:"en/start/option.html#plugins",a:"plugins"},"30.35":{t:"`thumbnails`",p:` +Type: Object +Default: {} + +Set thumbnails on the progress bar + ...`,l:"en/start/option.html#thumbnails",a:"thumbnails"},"30.36":{t:"`subtitle`",p:` +Type: Object +Default: {} + +Set the video subtitles, supporting ...`,l:"en/start/option.html#subtitle",a:"subtitle"},"30.37":{t:"`moreVideoAttr`",p:` +Type: Object +Default: {'controls': false, 'preload': 'metadat ...`,l:"en/start/option.html#morevideoattr",a:"morevideoattr"},"30.38":{t:"`icons`",p:` +Type: Object +Default: {} + +Used to replace default icons, supp ...`,l:"en/start/option.html#icons",a:"icons"},"30.39":{t:"`type`",p:` +Type: String +Default: '' + +Used to specify the format of the v ...`,l:"en/start/option.html#type",a:"type"},"30.40":{t:"`customType`",p:` +Type: Object +Default: {} + +Matches the video's type to delegat ...`,l:"en/start/option.html#customtype",a:"customtype"},"30.41":{t:"`lang`",p:` +Type: String +Default: navigator.language.toLowerCase() + +Defau ...`,l:"en/start/option.html#lang",a:"lang"},"30.42":{t:"`i18n`",p:` +Type: Object +Default: {} + +Custom i18n configuration, which wi ...`,l:"en/start/option.html#i18n",a:"i18n"},"30.43":{t:"`lock`",p:` +Type: Boolean +Default: false + +Whether to display a lock butto ...`,l:"en/start/option.html#lock",a:"lock"},"30.44":{t:"`fastForward`",p:` +Type: Boolean +Default: false + +Whether to add fast forward fun ...`,l:"en/start/option.html#fastforward",a:"fastforward"},"30.45":{t:"`autoPlayback`",p:` +Type: Boolean +Default: false + +Whether to use the automatic pl ...`,l:"en/start/option.html#autoplayback",a:"autoplayback"},"30.46":{t:"`autoOrientation`",p:` +Type: Boolean +Default: false + +Whether to rotate the player on ...`,l:"en/start/option.html#autoorientation",a:"autoorientation"},"30.47":{t:"`airplay`",p:` +Type: Boolean +Default: false + +Whether to display the airplay ...`,l:"en/start/option.html#airplay",a:"airplay"},"30.48":{t:"`cssVar`",p:` +Type: Object +Default: {} + +Used to change built-in CSS variabl ...`,l:"en/start/option.html#cssvar",a:"cssvar"},"31.0":{t:"# 安装使用",p:"",l:"index.html",a:"安装使用"},"31.1":{t:"安装",p:`::: code-group +npm install artplayer + +yarn add artplayer + +pnpm ...`,l:"index.html#安装",a:"安装"},"31.2":{t:"`CDN`",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer/dist/art ...`,l:"index.html#cdn",a:"cdn"},"31.3":{t:"使用",p:`::: code-group +import Artplayer from 'artplayer'; + +const art = ...`,l:"index.html#使用",a:"使用"},"31.4":{t:"`Vue.js`",p:`::: code-group +<template> + <div ref="artRef&quo ...`,l:"index.html#vue-js",a:"vue-js"},"31.5":{t:"`React.js`",p:`::: code-group +import { useEffect, useRef } from 'react'; +impo ...`,l:"index.html#react-js",a:"react-js"},"31.6":{t:"TypeScript",p:`导入 Artplayer 时会自动导入的 artplayer.d.ts，但你也可以单独导入选项的类型 +import Artp ...`,l:"index.html#typescript",a:"typescript"},"31.7":{t:"JavaScript",p:`有时你的 js 文件会丢失 TypeScript 的类型提示，这时候你可以手动导入类型 +变量： +/** + * @type { ...`,l:"index.html#javascript",a:"javascript"},"31.8":{t:"古老的浏览器",p:`生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome：last 1 Chrome version +对于 ...`,l:"index.html#古老的浏览器",a:"古老的浏览器"},"32.0":{t:"# dash.js",p:`👉 https://github.com/Dash-Industry-Forum/dash.js +<div clas ...`,l:"library/dash.html",a:"dash-js"},"33.0":{t:"# flv.js",p:`👉 https://github.com/Bilibili/flv.js +<div className=" ...`,l:"library/flv.html",a:"flv-js"},"34.0":{t:"# hls.js",p:`👉 https://github.com/video-dev/hls.js +<div className=" ...`,l:"library/hls.html",a:"hls-js"},"35.0":{t:"# 视频广告",p:"",l:"plugin/ads.html",a:"视频广告"},"35.1":{t:"演示",p:`👉 查看完整演示 +`,l:"plugin/ads.html#演示",a:"演示"},"35.2":{t:"安装",p:`::: code-group +npm install artplayer-plugin-ads + +yarn add artp ...`,l:"plugin/ads.html#安装",a:"安装"},"35.3":{t:"CDN",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-a ...`,l:"plugin/ads.html#cdn",a:"cdn"},"35.4":{t:"使用",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/ads.html#使用",a:"使用"},"36.0":{t:"# 弹幕库",p:"",l:"plugin/danmuku.html",a:"弹幕库"},"36.1":{t:"演示",p:`👉 查看完整演示 +`,l:"plugin/danmuku.html#演示",a:"演示"},"36.2":{t:"安装",p:`::: code-group +npm install artplayer-plugin-danmuku + +yarn add ...`,l:"plugin/danmuku.html#安装",a:"安装"},"36.3":{t:"CDN",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-d ...`,l:"plugin/danmuku.html#cdn",a:"cdn"},"36.4":{t:"选项",p:`{ + danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组 + speed: ...`,l:"plugin/danmuku.html#选项",a:"选项"},"36.5":{t:"使用弹幕数组",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/danmuku.html#使用弹幕数组",a:"使用弹幕数组"},"36.6":{t:"使用弹幕 XML",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/danmuku.html#使用弹幕-xml",a:"使用弹幕-xml"},"36.7":{t:"使用异步调用",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/danmuku.html#使用异步调用",a:"使用异步调用"},"36.8":{t:"`hide/show`",p:`通过方法 hide 和 show 进行隐藏或者显示弹幕 +<div className="run-code&q ...`,l:"plugin/danmuku.html#hide-show",a:"hide-show"},"36.9":{t:"`isHide`",p:`通过属性 isHide 判断当前弹幕是隐藏或者显示 +<div className="run-code&quo ...`,l:"plugin/danmuku.html#ishide",a:"ishide"},"36.10":{t:"`emit`",p:`通过方法 emit 发送一条实时弹幕 +<div className="run-code" data ...`,l:"plugin/danmuku.html#emit",a:"emit"},"36.11":{t:"`config`",p:`通过方法 config 实时改变弹幕配置，支持属性有： + +danmuku +speed +opacity +fontSize +co ...`,l:"plugin/danmuku.html#config",a:"config"},"36.12":{t:"`load`",p:`通过 load 方法可以重载弹幕源，或者切换新弹幕 +<div className="run-code&quo ...`,l:"plugin/danmuku.html#load",a:"load"},"36.13":{t:"`reset`",p:`用于清空当前显示的弹幕 +<div className="run-code" data-libs=& ...`,l:"plugin/danmuku.html#reset",a:"reset"},"36.14":{t:"`option`",p:`用于获取当前弹幕配置 +<div className="run-code" data-libs=&q ...`,l:"plugin/danmuku.html#option",a:"option"},"36.15":{t:"事件",p:`var art = new Artplayer({ + container: '.artplayer-app', + ...`,l:"plugin/danmuku.html#事件",a:"事件"},"37.0":{t:"# Dash 画质",p:"",l:"plugin/dash-quality.html",a:"dash-画质"},"37.1":{t:"演示",p:`👉 查看完整演示 +`,l:"plugin/dash-quality.html#演示",a:"演示"},"37.2":{t:"安装",p:`::: code-group +npm install artplayer-plugin-dash-quality + +yarn ...`,l:"plugin/dash-quality.html#安装",a:"安装"},"37.3":{t:"CDN",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-d ...`,l:"plugin/dash-quality.html#cdn",a:"cdn"},"38.0":{t:"# HLS 画质",p:"",l:"plugin/hls-quality.html",a:"hls-画质"},"38.1":{t:"演示",p:`👉 查看完整演示 +`,l:"plugin/hls-quality.html#演示",a:"演示"},"38.2":{t:"安装",p:`::: code-group +npm install artplayer-plugin-hls-quality + +yarn ...`,l:"plugin/hls-quality.html#安装",a:"安装"},"38.3":{t:"CDN",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-h ...`,l:"plugin/hls-quality.html#cdn",a:"cdn"},"39.0":{t:"# Iframe 控制",p:"",l:"plugin/iframe.html",a:"iframe-控制"},"39.1":{t:"说明",p:"通过该插件，你可以轻松在 index.html 里控制跨域 iframe.html 页面里的播放器，如在 index.htm ...",l:"plugin/iframe.html#说明",a:"说明"},"39.2":{t:"演示",p:`👉 查看完整演示 +`,l:"plugin/iframe.html#演示",a:"演示"},"39.3":{t:"安装",p:`::: code-group +npm install artplayer-plugin-iframe + +yarn add a ...`,l:"plugin/iframe.html#安装",a:"安装"},"39.4":{t:"`CDN`",p:`::: code-group +https://cdn.jsdelivr.net/npm/artplayer-plugin-i ...`,l:"plugin/iframe.html#cdn",a:"cdn"},"39.5":{t:"使用",p:`::: code-group +<!DOCTYPE html> +<html> + <head ...`,l:"plugin/iframe.html#使用",a:"使用"},"39.6":{t:"`index.html` 接口",p:"",l:"plugin/iframe.html#index-html-接口",a:"index-html-接口"},"39.7":{t:"`commit`",p:"从 index.html 将消息推送到 iframe.html，该函数将在 iframe.html 内部运行，同时它也能用于 ...",l:"plugin/iframe.html#commit",a:"commit"},"39.8":{t:"`message`",p:`在 index.html 接收来自 iframe.html 的消息 +iframe.message((event) => ...`,l:"plugin/iframe.html#message",a:"message"},"39.9":{t:"`destroy`",p:`销毁后 index.html 无法与 iframe.html 通信 +iframe.destroy(); + +`,l:"plugin/iframe.html#destroy",a:"destroy"},"39.10":{t:"`iframe.html` 接口",p:`:::warning 提示 +iframe.html 接口 只能运行在 iframe.html 里 +::: +`,l:"plugin/iframe.html#iframe-html-接口",a:"iframe-html-接口"},"39.11":{t:"`inject`",p:`注入脚本，接收来自 index.html 的消息 +ArtplayerPluginIframe.inject(); + +`,l:"plugin/iframe.html#inject",a:"inject"},"39.12":{t:"`postMessage`",p:`将消息推送到 index.html +iframe.message((event) => { + console.i ...`,l:"plugin/iframe.html#postmessage",a:"postmessage"},"39.13":{t:"例子",p:"最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 ...",l:"plugin/iframe.html#例子",a:"例子"},"40.0":{t:"# 语言设置",p:`::: danger +鉴于捆绑的多国语言越来越多, 从 5.1.0 版本开始, artplayer.js 核心代码除了包含 ...`,l:"start/i18n.html",a:"语言设置"},"40.1":{t:"默认语言",p:`默认语言有: en, zh-cn, 无需手动导入 +var art = new Artplayer({ + contain ...`,l:"start/i18n.html#默认语言",a:"默认语言"},"40.2":{t:"导入语言",p:`打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言 +打包后的语言文件存放于: a ...`,l:"start/i18n.html#导入语言",a:"导入语言"},"40.3":{t:"新增语言",p:`var art = new Artplayer({ + container: '.artplayer-app', + ...`,l:"start/i18n.html#新增语言",a:"新增语言"},"40.4":{t:"修改语言",p:`import zhTw from 'artplayer/i18n/zh-tw.js'; + +var art = new Art ...`,l:"start/i18n.html#修改语言",a:"修改语言"},"41.0":{t:"# 基础选项",p:"",l:"start/option.html",a:"基础选项"},"41.1":{t:"`container`",p:` +Type: String, Element +Default: #artplayer + +播放器挂载的 DOM 容器 +< ...`,l:"start/option.html#container",a:"container"},"41.2":{t:"`url`",p:` +Type: String +Default: '' + +视频源地址 +<div className="run-c ...`,l:"start/option.html#url",a:"url"},"41.3":{t:"`id`",p:` +Type: String +Default: '' + +播放器的唯一标识，目前只用于记忆播放 autoplayback +< ...`,l:"start/option.html#id",a:"id"},"41.4":{t:"`onReady`",p:` +Type: Function +Default: undefined + +构造函数接受一个函数作为第二个参数，播放器初始化成功 ...`,l:"start/option.html#onready",a:"onready"},"41.5":{t:"`poster`",p:` +Type: String +Default: '' + +视频的海报，只会出现在播放器初始化且未播放的状态下 +<div c ...`,l:"start/option.html#poster",a:"poster"},"41.6":{t:"`theme`",p:` +Type: String +Default: #f00 + +播放器主题颜色，目前用于 进度条 和 高亮元素 上 +<div ...`,l:"start/option.html#theme",a:"theme"},"41.7":{t:"`volume`",p:` +Type: Number +Default: 0.7 + +播放器的默认音量 +<div className="r ...`,l:"start/option.html#volume",a:"volume"},"41.8":{t:"`isLive`",p:` +Type: Boolean +Default: false + +使用直播模式，会隐藏进度条和播放时间 +<div clas ...`,l:"start/option.html#islive",a:"islive"},"41.9":{t:"`muted`",p:` +Type: Boolean +Default: false + +是否默认静音 +<div className=" ...`,l:"start/option.html#muted",a:"muted"},"41.10":{t:"`autoplay`",p:` +Type: Boolean +Default: false + +是否自动播放 +<div className=" ...`,l:"start/option.html#autoplay",a:"autoplay"},"41.11":{t:"`autoSize`",p:` +Type: Boolean +Default: false + +播放器的尺寸默认会填充整个 container 容器尺寸，所以 ...`,l:"start/option.html#autosize",a:"autosize"},"41.12":{t:"`autoMini`",p:` +Type: Boolean +Default: false + +当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式 +&l ...`,l:"start/option.html#automini",a:"automini"},"41.13":{t:"`loop`",p:` +Type: Boolean +Default: false + +是否循环播放 +<div className=" ...`,l:"start/option.html#loop",a:"loop"},"41.14":{t:"`flip`",p:` +Type: Boolean +Default: false + +是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里 ...`,l:"start/option.html#flip",a:"flip"},"41.15":{t:"`playbackRate`",p:` +Type: Boolean +Default: false + +是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里 ...`,l:"start/option.html#playbackrate",a:"playbackrate"},"41.16":{t:"`aspectRatio`",p:` +Type: Boolean +Default: false + +是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里 + ...`,l:"start/option.html#aspectratio",a:"aspectratio"},"41.17":{t:"`screenshot`",p:` +Type: Boolean +Default: false + +是否在底部控制栏里显示 视频截图 功能 +<div cla ...`,l:"start/option.html#screenshot",a:"screenshot"},"41.18":{t:"`setting`",p:` +Type: Boolean +Default: false + +是否在底部控制栏里显示 设置面板 的开关按钮 +<div ...`,l:"start/option.html#setting",a:"setting"},"41.19":{t:"`hotkey`",p:` +Type: Boolean +Default: true + +是否使用快捷键 +<div className=" ...`,l:"start/option.html#hotkey",a:"hotkey"},"41.20":{t:"`pip`",p:` +Type: Boolean +Default: false + +是否在底部控制栏里显示 画中画 的开关按钮 +<div c ...`,l:"start/option.html#pip",a:"pip"},"41.21":{t:"`mutex`",p:` +Type: Boolean +Default: true + +假如页面里同时存在多个播放器，是否只能让一个播放器播放 +< ...`,l:"start/option.html#mutex",a:"mutex"},"41.22":{t:"`fullscreen`",p:` +Type: Boolean +Default: false + +是否在底部控制栏里显示播放器 窗口全屏 按钮 +<div ...`,l:"start/option.html#fullscreen",a:"fullscreen"},"41.23":{t:"`fullscreenWeb`",p:` +Type: Boolean +Default: false + +是否在底部控制栏里显示播放器 网页全屏 按钮 +<div ...`,l:"start/option.html#fullscreenweb",a:"fullscreenweb"},"41.24":{t:"`subtitleOffset`",p:` +Type: Boolean +Default: false + +字幕时间偏移，范围在 [-5s, 5s]，出现在 设置面板 里 ...`,l:"start/option.html#subtitleoffset",a:"subtitleoffset"},"41.25":{t:"`miniProgressBar`",p:` +Type: Boolean +Default: false + +迷你进度条，只在播放器失去焦点后且正在播放时出现 +<di ...`,l:"start/option.html#miniprogressbar",a:"miniprogressbar"},"41.26":{t:"`useSSR`",p:` +Type: Boolean +Default: false + +是否使用 SSR 挂载模式，假如你希望在播放器挂载前，就提前渲 ...`,l:"start/option.html#usessr",a:"usessr"},"41.27":{t:"`playsInline`",p:` +Type: Boolean +Default: true + +在移动端是否使用 playsInline 模式 +<div ...`,l:"start/option.html#playsinline",a:"playsinline"},"41.28":{t:"`layers`",p:` +Type: Array +Default: [] + +初始化自定义的 层 +<div className="ru ...`,l:"start/option.html#layers",a:"layers"},"41.29":{t:"`settings`",p:` +Type: Array +Default: [] + +初始化自定义的 设置面板 +<div className=" ...`,l:"start/option.html#settings",a:"settings"},"41.30":{t:"`contextmenu`",p:` +Type: Array +Default: [] + +初始化自定义的 右键菜单 +<div className=" ...`,l:"start/option.html#contextmenu",a:"contextmenu"},"41.31":{t:"`controls`",p:` +Type: Array +Default: [] + +初始化自定义的底部 控制栏 +<div className=&quo ...`,l:"start/option.html#controls",a:"controls"},"41.32":{t:"`quality`",p:` +Type: Array +Default: [] + +是否在底部控制栏里显示 画质选择 列表 + + + +属性 +类型 +描述 + + + + + ...`,l:"start/option.html#quality",a:"quality"},"41.33":{t:"`highlight`",p:` +Type: Array +Default: [] + +在进度条上显示 高亮信息 + + + +属性 +类型 +描述 + + + + +time +Nu ...`,l:"start/option.html#highlight",a:"highlight"},"41.34":{t:"`plugins`",p:` +Type: Array +Default: [] + +初始化自定义的 插件 +<div className="r ...`,l:"start/option.html#plugins",a:"plugins"},"41.35":{t:"`thumbnails`",p:` +Type: Object +Default: {} + +在进度条上设置 预览图 + + + +属性 +类型 +描述 + + + + +url +Str ...`,l:"start/option.html#thumbnails",a:"thumbnails"},"41.36":{t:"`subtitle`",p:` +Type: Object +Default: {} + +设置视频的字幕，支持字幕格式：vtt, srt, ass + + + +属性 + ...`,l:"start/option.html#subtitle",a:"subtitle"},"41.37":{t:"`moreVideoAttr`",p:` +Type: Object +Default: {'controls': false,'preload': 'metadata ...`,l:"start/option.html#morevideoattr",a:"morevideoattr"},"41.38":{t:"`icons`",p:` +Type: Object +Default: {} + +用于替换默认图标，支持 Html 字符串和 HTMLElement +& ...`,l:"start/option.html#icons",a:"icons"},"41.39":{t:"`type`",p:` +Type: String +Default: '' + +用于指明视频的格式，需要配合 customType 一起使用，默认视频 ...`,l:"start/option.html#type",a:"type"},"41.40":{t:"`customType`",p:` +Type: Object +Default: {} + +通过视频的 type 进行匹配，把视频解码权交给第三方程序进行处理，处 ...`,l:"start/option.html#customtype",a:"customtype"},"41.41":{t:"`lang`",p:` +Type: String +Default: navigator.language.toLowerCase() + +默认显示语 ...`,l:"start/option.html#lang",a:"lang"},"41.42":{t:"`i18n`",p:` +Type: Object +Default: {} + +自定义 i18n 配置，该配置会和自带的 i18n 进行深度合并 +新增 ...`,l:"start/option.html#i18n",a:"i18n"},"41.43":{t:"`lock`",p:` +Type: Boolean +Default: false + +是否在移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏 +< ...`,l:"start/option.html#lock",a:"lock"},"41.44":{t:"`fastForward`",p:` +Type: Boolean +Default: false + +是否在移动端添加长按视频快进功能 +<div classN ...`,l:"start/option.html#fastforward",a:"fastforward"},"41.45":{t:"`autoPlayback`",p:` +Type: Boolean +Default: false + +是否使用自动 回放功能 +<div className=& ...`,l:"start/option.html#autoplayback",a:"autoplayback"},"41.46":{t:"`autoOrientation`",p:` +Type: Boolean +Default: false + +是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器 + ...`,l:"start/option.html#autoorientation",a:"autoorientation"},"41.47":{t:"`airplay`",p:` +Type: Boolean +Default: false + +是否显示 airplay 按钮，当前只有部分浏览器支持该功能 + ...`,l:"start/option.html#airplay",a:"airplay"},"41.48":{t:"`cssVar`",p:` +Type: Object +Default: {} + +用于改变内置的css变量 +<div className=&quo ...`,l:"start/option.html#cssvar",a:"cssvar"}},n={previewLength:62,buttonLabel:"Search",placeholder:"Search docs",allow:[],ignore:[]},a={INDEX_DATA:e,PREVIEW_LOOKUP:t,Options:n};export{a as default}; diff --git a/docs/document/assets/chunks/virtual_search-data.bdabb558.js b/docs/document/assets/chunks/virtual_search-data.bdabb558.js deleted file mode 100644 index 8db3b8c98..000000000 --- a/docs/document/assets/chunks/virtual_search-data.bdabb558.js +++ /dev/null @@ -1,1465 +0,0 @@ -const t={map:'[{"高级属性":["0.0","10.0"],"option":["0.1","1.12","10.1","11.12","30.0","37.14"],"template":["0.2","10.2"],"events":["0.3","10.3"],"storage":["0.4","10.4"],"icons":["0.5","10.5","30.38","42.38"],"i18n":["0.6","10.6","30.42","42.42"],"notice":["0.7","3.3","10.7","13.3"],"layers":["0.8","10.8","18.0","30.28","42.28"],"controls":["0.9","10.9","17.0","30.31","42.31"],"contextmenu":["0.10","2.37","3.2","10.10","12.37","13.2","16.0","30.30","42.30"],"subtitle":["0.11","2.36","10.11","12.36","30.36","42.36"],"loading":["0.12","2.34","10.12","12.34"],"hotkey":["0.13","2.6","10.13","12.6","30.19","42.19"],"mask":["0.14","2.35","10.14","12.35"],"setting":["0.15","2.39","3.4","3.5","3.6","10.15","12.39","13.4","13.5","13.6","19.0","30.18","42.18"],"plugins":["0.16","10.16","30.34","42.34"],"静态属性":["1.0","11.0"],"instances":["1.1","11.1"],"version":["1.2","11.2"],"env":["1.3","11.3"],"build":["1.4","11.4","19.1"],"config":["1.5","11.5","16.1","17.1","18.1","37.11"],"utils":["1.6","11.6"],"scheme":["1.7","11.7"],"emitter":["1.8","11.8"],"validator":["1.9","11.9"],"kindof":["1.10","11.10"],"html":["1.11","11.11"],"实例事件":["2.0","12.0"],"ready":["2.1","12.1"],"restart":["2.2","12.2"],"loop":["2.3","5.30","12.3","15.30","30.13","42.13"],"pause":["2.4","5.2","12.4","15.2"],"play":["2.5","5.1","12.5","15.1"],"destroy":["2.7","5.4","12.7","15.4","28.9","40.9"],"focus":["2.8","12.8"],"blur":["2.9","12.9"],"dblclick":["2.10","12.10"],"click":["2.11","12.11"],"error":["2.12","12.12"],"hover":["2.13","12.13"],"mousemove":["2.14","12.14"],"resize":["2.15","3.7","12.15","13.7"],"view":["2.16","12.16"],"lock":["2.17","12.17","30.43","42.43"],"aspectratio":["2.18","5.29","12.18","15.29","30.16","42.16"],"autoheight":["2.19","5.31","12.19","15.31"],"autosize":["2.20","5.25","12.20","15.25","30.11","42.11"],"flip":["2.21","3.29","5.27","12.21","13.29","15.27","30.14","42.14"],"fullscreen":["2.22","3.30","5.19","12.22","13.30","15.19","30.22","42.22"],"fullscreenweb":["2.23","5.20","12.23","15.20","30.23","42.23"],"mini":["2.24","5.23","12.24","15.23"],"pip":["2.25","5.21","12.25","15.21","30.20","42.20"],"screenshot":["2.26","5.16","12.26","15.16","30.17","42.17"],"seek":["2.27","3.26","5.5","12.27","13.26","15.5"],"subtitleoffset":["2.28","12.28","30.24","42.24"],"subtitleupdate":["2.29","12.29"],"subtitleload":["2.30","12.30"],"subtitleswitch":["2.31","12.31"],"info":["2.32","3.21","12.32","13.21"],"layer":["2.33","12.33"],"control":["2.38","3.15","12.38","13.15"],"muted":["2.40","5.13","12.40","15.13","30.9","42.9"],"video":["2.41","2.42","2.43","2.44","2.45","2.46","2.47","2.48","2.49","2.50","2.51","2.52","2.53","2.54","2.55","2.56","2.57","2.58","2.59","2.60","2.61","5.40","12.41","12.42","12.43","12.44","12.45","12.46","12.47","12.48","12.49","12.50","12.51","12.52","12.53","12.54","12.55","12.56","12.57","12.58","12.59","12.60","12.61","15.40"],"全局属性":["3.0","13.0"],"debug":["3.1","13.1"],"scroll":["3.8","3.9","13.8","13.9"],"auto":["3.10","3.11","3.12","3.20","13.10","13.11","13.12","13.20"],"reconnect":["3.13","3.14","13.13","13.14"],"dbclick":["3.16","3.17","13.16","13.17"],"mobile":["3.18","3.19","13.18","13.19"],"fast":["3.22","3.23","13.22","13.23"],"touch":["3.24","13.24"],"volume":["3.25","5.8","13.25","15.8","30.7","42.7"],"playback":["3.27","13.27"],"aspect":["3.28","13.28"],"log":["3.31","13.31"],"use":["3.32","13.32","20.3"],"编写插件":["4.0","14.0"],"实例属性":["5.0"],"toggle":["5.3","15.3"],"forward":["5.6","15.6"],"backward":["5.7","15.7"],"url":["5.9","15.9","30.2","42.2"],"switch":["5.10","15.10"],"switchurl":["5.11","15.11"],"switchquality":["5.12","15.12"],"currenttime":["5.14","15.14"],"duration":["5.15","15.15"],"getdataurl":["5.17","15.17"],"getbloburl":["5.18","15.18"],"poster":["5.22","15.22","30.5","42.5"],"playing":["5.24","15.24"],"rect":["5.26","15.26"],"playbackrate":["5.28","15.28","30.15","42.15"],"attr":["5.32","15.32"],"type":["5.33","15.33","30.39","42.39"],"theme":["5.34","15.34","30.6","42.6"],"airplay":["5.35","15.35","30.47","42.47"],"loaded":["5.36","15.36"],"played":["5.37","15.37"],"proxy":["5.38","15.38"],"query":["5.39","15.39"],"cssvar":["5.41","30.48","42.48"],"quality":["5.42","15.41","30.32","42.32"],"右键菜单":["6.0"],"配置":["6.1","7.1","8.1"],"创建":["6.2","7.2","8.2","9.2","9.3","9.4","9.5"],"添加":["6.3","7.3","8.3","9.6"],"删除":["6.4","7.4","8.4","9.7"],"更新":["6.5","7.5","8.5","9.8"],"控制器":["7.0"],"业务层":["8.0"],"设置面板":["9.0"],"内置":["9.1"],"instance":["15.0"],"init":["16.2","17.2","18.2","19.2","19.3","19.4","19.5"],"add":["16.3","17.3","18.3","19.6"],"remove":["16.4","17.4","18.4","19.7"],"update":["16.5","17.5","18.5","19.8"],"danger":["20.0"],"install":["20.1"],"cdn":["20.2","24.3","25.3","26.3","27.3","28.4","31.2","35.3","36.3","37.3","38.3","39.3","40.4"],"vue":["20.4","31.4"],"react":["20.5","31.5"],"typescript":["20.6","31.6"],"javascript":["20.7","31.7"],"old":["20.8"],"dash":["21.0","26.0","32.0","38.0"],"flv":["22.0","33.0"],"hls":["23.0","27.0","34.0","39.0"],"视频广告":["24.0","35.0"],"演示":["24.1","25.1","26.1","27.1","28.2","35.1","36.1","37.1","38.1","39.1","40.2"],"安装":["24.2","25.2","26.2","27.2","28.3","31.1","35.2","36.2","37.2","38.2","39.2","40.3"],"使用":["24.4","25.4","28.5","31.3","35.4","36.4","40.5"],"控制器皮肤":["25.0","36.0"],"enable":["25.5","36.5"],"iframe":["28.0","28.10","40.0","40.10"],"说明":["28.1","40.1"],"index":["28.6","40.6"],"commit":["28.7","40.7"],"message":["28.8","40.8"],"inject":["28.11","40.11"],"postmessage":["28.12","40.12"],"例子":["28.13","40.13"],"language":["29.0"],"default":["29.1"],"import":["29.2"],"new":["29.3"],"change":["29.4"],"container":["30.1","42.1"],"id":["30.3","42.3"],"onready":["30.4","42.4"],"islive":["30.8","42.8"],"autoplay":["30.10","42.10"],"automini":["30.12","42.12"],"mutex":["30.21","42.21"],"miniprogressbar":["30.25","42.25"],"usessr":["30.26","42.26"],"playsinline":["30.27","42.27"],"settings":["30.29","42.29"],"highlight":["30.33","42.33"],"thumbnails":["30.35","42.35"],"morevideoattr":["30.37","42.37"],"customtype":["30.40","42.40"],"lang":["30.41","42.41"],"fastforward":["30.44","42.44"],"autoplayback":["30.45","42.45"],"autoorientation":["30.46","42.46"],"安装使用":["31.0"],"古老的浏览器":["31.8"],"弹幕库":["37.0"],"选项":["37.4"],"使用弹幕数组":["37.5"],"使用弹幕":["37.6"],"使用异步调用":["37.7"],"hide":["37.8"],"ishide":["37.9"],"emit":["37.10"],"load":["37.12"],"reset":["37.13"],"事件":["37.15"],"语言设置":["41.0"],"默认语言":["41.1"],"导入语言":["41.2"],"新增语言":["41.3"],"修改语言":["41.4"],"基础选项":["42.0"]},{"0":["3.27","5.36","5.37","13.27","30.7","42.7"],"1":["31.8","37.4"],"3":["3.28","13.28"],"4":["3.28","13.28","29.3","41.3"],"5":["3.27","8.2","13.27","18.2","37.4"],"7":["8.3","18.3","30.7"],"9":["41.3"],"10":["37.4"],"15":["4.0","14.0"],"21":["8.5","9.8","18.5","19.8"],"26":["7.5","17.5"],"27":["9.8","19.8"],"75":["3.27","13.27"],"250":["3.4","13.4"],"这里的":["0.0","1.0","3.0","5.0","10.0","11.0","13.0"],"播放器的选项":["0.1","10.1"],"div":["0.1","0.2","0.4","0.5","0.7","0.13","0.16","1.1","1.6","2.0","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.30","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","3.2","4.0","5.1","5.2","5.3","5.15","5.26","5.31","5.35","5.42","6.2","6.3","6.4","6.5","7.2","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.3","9.6","9.7","9.8","10.1","10.2","10.4","10.5","10.7","10.13","10.16","11.1","11.6","12.0","12.1","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.30","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","12.40","13.2","14.0","15.15","15.41","16.2","16.3","16.4","16.5","17.2","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.3","19.6","19.7","19.8","21.0","22.0","23.0","24.4","25.4","25.5","30.2","30.28","30.29","32.0","33.0","34.0","35.4","36.4","36.5","37.5","37.6","37.7","37.8","37.9","37.10","37.12","37.13","37.14","42.2","42.28","42.29","42.30","42.31"],"classname":["0.1","0.2","0.16","2.0","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.30","2.31","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","4.0","5.42","6.2","6.3","6.4","6.5","7.2","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.3","9.6","9.7","9.8","10.1","10.2","10.16","12.0","12.1","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.30","12.31","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","12.40","14.0","15.15","15.41","16.2","16.3","16.4","16.5","17.2","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.3","19.6","19.7","19.8","21.0","22.0","23.0","24.4","25.4","30.2","30.28","30.29","32.0","33.0","34.0","35.4","36.4","37.5","37.6","37.7","37.9","37.10","37.12","37.13","37.14","42.2","42.28","42.29"],"run":["0.1","0.2","2.0","2.2","2.3","2.7","2.12","2.13","2.18","2.19","2.21","2.22","2.23","2.24","2.25","2.26","2.28","2.29","2.30","2.31","2.39","4.0","5.42","6.2","6.3","6.4","6.5","7.2","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.3","9.6","9.7","9.8","10.1","10.2","12.0","12.2","12.3","12.7","12.12","12.13","12.18","12.19","12.21","12.22","12.23","12.24","12.25","12.26","12.28","12.29","12.30","12.31","12.39","14.0","16.2","16.3","16.4","16.5","17.2","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.3","19.6","19.7","19.8","21.0","22.0","23.0","24.4","25.4","30.2","30.28","32.0","33.0","34.0","35.4","36.4","37.5","37.6","37.7","37.9","37.10","37.12","37.13","37.14","42.2","42.28","42.29"],"管理播放器所有的":["0.2","0.3","0.5","10.2","10.3","10.5"],"dom":["0.2","0.3","5.38","5.39","9.2","9.4","9.5","10.2","10.3","15.38","15.39","19.2","19.4","19.5","30.1","42.1"],"元素":["0.2","9.4","9.5","10.2"],"事件":["0.3","4.0","10.3","14.0"],"实质上是代理了":["0.3","10.3"],"addeventlistener":["0.3","5.38","10.3","15.38"],"和":["0.3","4.0","5.12","10.3","14.0","37.8","42.4"],"removeeventlistener":["0.3","10.3"],"当使用以下方法来处理事件":["0.3","10.3"],"播放器销毁时也会自动销毁该事件":["0.3","10.3"],"proxy":["0.3","10.3"],"方法用于代理":["0.3","10.3"],"管理播放器的本地存储":["0.4","10.4"],"name":["0.4","4.0","10.4","14.0","17.1"],"属性用于设置缓存的":["0.4","10.4"],"key":["0.4","10.4"],"set":["0.4","10.4","15.8","15.12","15.13","15.14","15.19","15.20","15.21","15.22","15.25","15.27","15.29","15.30","15.41","30.35","30.36"],"方法用于设置缓存":["0.4","10.4"],"get":["0.4","0.6","10.4","10.6","15.14","15.15","15.17","15.18","15.19","15.21","15.24","15.26","15.32","15.34"],"方法用于获取缓存":["0.4","10.4"],"del":["0.4","10.4"],"方法用于删除缓存":["0.4","10.4"],"clear":["0.4","10.4"],"方法用于清空缓存":["0.4","10.4"],"svg":["0.5","10.5"],"图标":["0.5","10.5"],"管理播放器的":["0.6","10.6"],"方法用于获取":["0.6","10.6"],"的值":["0.6","10.6"],"update":["0.6","0.8","0.9","0.10","0.15","10.6"],"管理播放器的提示语":["0.7","10.7"],"只有一个":["0.7","10.7"],"show":["0.7","0.12","0.14","10.7","10.8","10.9","10.10","10.12","10.14","10.15","37.8"],"属性用于显示提示语":["0.7","10.7"],"管理播放器的层":["0.8","10.8"],"add":["0.8","0.9","0.10","0.13","0.15","0.16","10.8","10.9","10.10","10.13","10.15","10.16"],"方法用于动态添加层":["0.8","10.8"],"remove":["0.8","0.9","0.10","0.13","0.15","10.13"],"方法用于动态删除层":["0.8"],"管理播放器的控制器":["0.9","10.9"],"方法用于动态添加控制器":["0.9","10.9"],"方法用于动态删除控制器":["0.9"],"管理播放器的右键菜单":["0.10","10.10"],"方法用于动态添加菜单":["0.10","10.10"],"方法用于动态删除菜单":["0.10"],"方法用于动态更新菜单":["0.10"],"管理播放器的字幕功能":["0.11","10.11"],"url":["0.11","5.11","10.11","15.11","37.15"],"属性设置和返回当前字幕地址":["0.11","10.11"],"style":["0.11","10.11"],"方法设置当前字幕的样式":["0.11","10.11"],"管理播放器的加载层":["0.12","10.12"],"属性用于设置是否显示加载层":["0.12","10.12"],"toggle":["0.12","0.14","10.8","10.9","10.10","10.12","10.14","10.15"],"管理播放器的快捷键功能":["0.13","10.13"],"方法用于添加快捷键":["0.13","10.13"],"方法用于删除快捷键":["0.13","10.13"],"管理播放器的遮罩层":["0.14","10.14"],"属性用于设置是否显示遮罩层":["0.14","10.14"],"管理播放器的设置面板":["0.15","10.15"],"方法用于动态添加设置项":["0.15","10.15"],"方法用于动态删除设置项":["0.15"],"方法用于动态更新设置项":["0.15"],"管理播放器的插件功能":["0.16","10.16"],"只有一个方法":["0.16","10.16"],"用于动态添加插件":["0.16","10.16"],"返回全部播放器实例的数组":["1.1","11.1"],"假如你想同时管理多个播放器的时候":["1.1","11.1"],"可以用到该属性":["1.1","11.1"],"返回播放器的版本信息":["1.2","11.2"],"返回播放器的环境变量":["1.3","11.3"],"返回播放器的打包时间":["1.4","11.4"],"返回视频的默认配置":["1.5","11.5"],"返回播放器的工具函数集合":["1.6","11.6"],"返回播放器选项的校验方案":["1.7","11.7"],"返回事件分发器的构造函数":["1.8","11.8"],"返回选项的校验函数":["1.9","11.9"],"返回类型检测的函数工具":["1.10","11.10"],"返回播放器所需的":["1.11","11.11"],"返回播放器的默认选项":["1.12","11.12"],"播放器的事件分为两种":["2.0","12.0"],"一种视频的":["2.0","12.0"],"原生事件":["2.0","12.0"],"前缀":["2.0","12.0"],"video":["2.0","12.0","15.1","15.2","15.3","15.7","15.10","15.11","15.12","15.15","15.36","15.37","23.0","30.2","30.5","30.36","30.39","30.40","34.0"],"另外一种是":["2.0","12.0"],"自定义事件":["2.0","12.0"],"监听事件":["2.0","12.0"],"code":["2.0","2.2","2.28","2.31","4.0","6.2","6.3","6.4","6.5","7.2","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.3","9.6","9.7","9.8","12.0","12.2","12.28","12.31","14.0","16.2","16.3","16.4","16.5","17.2","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.3","19.6","19.7","19.8","20.1","20.2","20.3","20.4","20.5","21.0","22.0","23.0","24.2","24.3","24.4","25.2","25.3","25.4","26.2","26.3","27.2","27.3","28.3","28.4","28.5","30.2","31.1","31.2","31.3","31.4","31.5","32.0","33.0","34.0","35.2","35.3","35.4","36.2","36.3","36.4","37.2","37.3","37.5","37.6","37.7","37.9","37.10","37.12","37.13","37.14","38.2","38.3","39.2","39.3","40.3","40.4","40.5","42.2","42.28"],"js":["2.0","4.0","6.5","7.2","7.3","7.5","8.2","8.3","8.5","9.3","9.7","9.8","12.0","14.0","16.5","17.2","17.3","17.5","18.2","18.3","18.5","19.3","19.7","19.8","20.3","20.4","20.5","20.7","20.8","21.0","22.0","23.0","24.4","29.2","29.3","29.4","31.3","31.4","31.5","31.7","31.8","32.0","33.0","34.0","35.4","37.4","37.15","41.2","41.3","41.4"],"当播放器首次可以播放器时触发":["2.1","12.1"],"当播放器切换地址后并可以播放时触发":["2.2","12.2"],"当出现区间循环时触发":["2.3","12.3"],"当播放器暂停时触发":["2.4","12.4"],"当播放器播放时触发":["2.5","12.5"],"当播放器热键被按下时触发":["2.6","12.6"],"当播放器销毁时触发":["2.7","12.7"],"当播放器获得焦点时触发":["2.8","12.8"],"当播放器失去焦点时触发":["2.9","12.9"],"当播放器被双击时触发":["2.10","12.10"],"当播放器被单击时触发":["2.11","12.11"],"当播放器加载视频发生错误时触发":["2.12","12.12"],"当播放器被鼠标移出或者移入时触发":["2.13","12.13"],"当播放器被鼠标经过时触发":["2.14","12.14"],"当播放器尺寸变化时触发":["2.15","12.15"],"当播放器出现在视口时触发":["2.16","12.16"],"在移动端":["2.17","3.18","3.19","3.20","3.22","3.23","3.24","12.17","13.18","13.19","13.20","13.22","13.23","13.24"],"当锁定的状态发生变化时触发":["2.17","12.17"],"当播放器长宽比变化时触发":["2.18","12.18"],"当播放器自动设置高度时触发":["2.19","12.19"],"当播放器自动设置尺寸时触发":["2.20","12.20"],"当播放器发生翻转时触发":["2.21","12.21"],"当播放器发生窗口全屏时触发":["2.22","12.22"],"当播放器发生网页全屏时触发":["2.23","12.23"],"当播放器进入迷你模式时触发":["2.24","12.24"],"当播放器进入画中画时触发":["2.25","12.25"],"当播放器被截图时触发":["2.26","12.26"],"当播放器发生时间跳转时触发":["2.27","12.27"],"当播放器发生字幕偏移时触发":["2.28","12.28"],"当字幕更新时触发":["2.29","12.29"],"当字幕加载时触发":["2.30","12.30"],"当字幕切换时触发":["2.31","12.31"],"当信息面板显示或隐藏时触发":["2.32","12.32"],"当自定义层显示或隐藏时触发":["2.33","12.33"],"当加载器显示或隐藏时触发":["2.34","12.34"],"当遮罩层显示或隐藏时触发":["2.35","12.35"],"当字幕层显示或隐藏时触发":["2.36","12.36"],"当右键菜单显示或隐藏时触发":["2.37","12.37"],"当控制器显示或隐藏时触发":["2.38","12.38"],"当设置面板显示或隐藏时触发":["2.39","12.39"],"当静音的状态变化时触发":["2.40","12.40"],"canplay":["2.41","12.41"],"canplaythrough":["2.42","12.42"],"complete":["2.43","12.43"],"durationchange":["2.44","12.44"],"emptied":["2.45","12.45"],"ended":["2.46","12.46"],"error":["2.47","12.47"],"loadeddata":["2.48","12.48"],"loadedmetadata":["2.49","12.49"],"pause":["2.50","12.50"],"play":["2.51","3.18","3.19","12.51","13.18","13.19","30.10"],"playing":["2.52","12.52"],"progress":["2.53","12.53","30.33"],"ratechange":["2.54","12.54"],"seeked":["2.55","12.55"],"seeking":["2.56","12.56"],"stalled":["2.57","12.57"],"suspend":["2.58","12.58"],"timeupdate":["2.59","12.59"],"volumechange":["2.60","12.60"],"waiting":["2.61","12.61"],"是否开始":["3.1","13.1"],"模式":["3.1","13.1"],"是否开启右键菜单":["3.2","13.2"],"默认开启":["3.2","13.2"],"time":["3.3","3.7","3.8","3.13","3.14","3.15","3.16","3.20","3.21","3.23","13.3","13.7","13.8","13.13","13.14","13.15","13.16","13.20","13.21","13.23","30.24"],"提示信息的显示时长":["3.3","13.3"],"单位为毫秒":["3.3","3.7","3.8","3.12","3.15","3.16","3.21","13.3","13.7","13.8","13.12","13.15","13.16","13.21"],"width":["3.4","3.5","9.2","13.4","13.5","15.31"],"设置面板的默认宽度":["3.4","13.4"],"单位为像素":["3.4","3.5","3.6","3.9","13.4","13.5","13.6","13.9"],"默认为":["3.4","3.5","3.6","3.10","3.16","3.25","3.27","3.28","3.29","3.31","3.32","13.4","13.5","13.6","13.10","13.16","13.25","13.27","13.28","13.29","13.31","13.32"],"item":["3.5","3.6","13.5","13.6"],"设置面板的设置项的默认宽度":["3.5","13.5"],"height":["3.6","13.6"],"设置面板的设置项的默认高度":["3.6","13.6"],"事件的节流时间":["3.7","3.8","13.7","13.8"],"gap":["3.9","13.9"],"view":["3.9","13.9","29.0"],"事件的边界容差距离":["3.9","13.9"],"playback":["3.10","3.11","3.12","13.10","13.11","13.12","15.3","30.45"],"max":["3.10","3.13","13.10","13.13"],"自动回放功能的最大记录数":["3.10","13.10"],"min":["3.11","13.11"],"自动回放功能的最小记录时长":["3.11","13.11"],"单位为秒":["3.11","3.26","13.11","13.26"],"timeout":["3.12","13.12"],"自动回放功能的隐藏延迟时长":["3.12","13.12"],"发生连接错误时":["3.13","3.14","13.13","13.14"],"自动连接的最大次数":["3.13","13.13"],"sleep":["3.14","13.14"],"自动连接的延迟时间":["3.14","13.14"],"hide":["3.15","13.15"],"底部控制栏的自动隐藏的延迟时间":["3.15","13.15"],"双击事件的延迟事件":["3.16","13.16"],"fullscreen":["3.17","13.17"],"在桌面端":["3.17","13.17"],"是否双击切换全屏":["3.17","13.17"],"dbclick":["3.18","13.18"],"是否双击切换播放暂停":["3.18","13.18"],"click":["3.19","13.19"],"是否单击切换播放暂停":["3.19","13.19"],"orientation":["3.20","13.20"],"自动旋屏的延迟时间":["3.20","13.20"],"loop":["3.21","13.21"],"信息面板的刷新时间":["3.21","13.21"],"forward":["3.22","3.23","13.22","13.23"],"value":["3.22","13.22"],"长按加速的速率倍数":["3.22","13.22"],"长按加速的延迟时间":["3.23","13.23"],"move":["3.24","13.24"],"ratio":["3.24","3.28","13.24","13.28"],"左右滑动进度的速率倍数":["3.24","13.24"],"step":["3.25","3.26","13.25","13.26"],"快捷键调节音量的幅度比例":["3.25","13.25"],"快捷键调节播放进度的幅度":["3.26","13.26"],"rate":["3.27","13.27"],"内置播放速率的列表":["3.27","13.27"],"内置视频长宽比的列表":["3.28","13.28"],"default":["3.28","13.28","30.1","30.2","30.3","30.4","30.5","30.6","30.7","30.8","30.9","30.10","30.11","30.12","30.13","30.14","30.15","30.16","30.17","30.18","30.19","30.20","30.21","30.22","30.23","30.24","30.25","30.26","30.27","30.28","30.29","30.30","30.31","30.32","30.33","30.34","30.35","30.36","30.37","30.38","30.39","30.40","30.41","30.42","30.43","30.44","30.45","30.46","30.47","30.48","42.1","42.2","42.3","42.4","42.5","42.6","42.7","42.8","42.9","42.10","42.11","42.12","42.13","42.14","42.15","42.16","42.17","42.18","42.19","42.20","42.21","42.22","42.23","42.24","42.25","42.26","42.27","42.28","42.29","42.30","42.31","42.32","42.33","42.34","42.35","42.36","42.37","42.38","42.39","42.40","42.41","42.42","42.43","42.44","42.45","42.46","42.47","42.48"],"内置视频翻转的列表":["3.29","13.29"],"normal":["3.29","13.29"],"horizontal":["3.29","13.29"],"vertical":["3.29","13.29"],"web":["3.30","13.30"],"in":["3.30","13.30","19.1","29.0","29.2"],"body":["3.30","13.30"],"网页全屏时":["3.30","13.30"],"version":["3.31","13.31"],"设置是否打印播放器版本":["3.31","13.31"],"raf":["3.32","13.32"],"设置是否使用":["3.32","13.32"],"requestanimationframe":["3.32","13.32"],"但你已经知道播放器的":["4.0","14.0"],"属性":["4.0","6.1","7.1","8.1","9.2","9.4","9.5","14.0","42.32","42.33","42.35","42.36"],"方法":["4.0","14.0"],"后":["4.0","14.0"],"再编写插件是非常简单的事":["4.0","14.0"],"可以在实例化的时候加载插件的函数":["4.0","14.0"],"function":["4.0","5.1","5.2","5.3","5.4","5.11","5.12","5.16","5.17","5.18","5.25","5.31","5.32","5.35","5.38","5.39","5.41","9.2","14.0","15.1","15.2","15.3","15.4","15.11","15.12","15.16","15.17","15.18","15.32","15.35","15.38","15.39","19.2","30.4","42.4"],"myplugin":["4.0","14.0"],"art":["4.0","5.11","7.2","14.0","17.2","37.15"],"console":["4.0","14.0"],"info":["4.0","14.0"],"return":["4.0","14.0","15.40"],"something":["4.0","14.0"],"type":["5.1","5.2","5.3","5.4","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.14","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.23","5.24","5.25","5.26","5.27","5.28","5.29","5.30","5.31","5.32","5.34","5.35","5.36","5.37","5.38","5.39","5.40","5.41","5.42","15.1","15.2","15.3","15.4","15.5","15.6","15.7","15.8","15.9","15.10","15.11","15.12","15.13","15.14","15.15","15.16","15.17","15.18","15.19","15.20","15.21","15.22","15.23","15.24","15.25","15.26","15.27","15.28","15.29","15.30","15.31","15.32","15.34","15.35","15.36","15.37","15.38","15.39","15.40","15.41","16.1","17.1","18.1","19.2","19.4","19.5","20.7","25.5","30.1","30.2","30.3","30.4","30.5","30.6","30.7","30.8","30.9","30.10","30.11","30.12","30.13","30.14","30.15","30.16","30.17","30.18","30.19","30.20","30.21","30.22","30.23","30.24","30.25","30.26","30.27","30.28","30.29","30.30","30.31","30.32","30.33","30.34","30.35","30.36","30.37","30.38","30.40","30.41","30.42","30.43","30.44","30.45","30.46","30.47","30.48","36.5","42.1","42.2","42.3","42.4","42.5","42.6","42.7","42.8","42.9","42.10","42.11","42.12","42.13","42.14","42.15","42.16","42.17","42.18","42.19","42.20","42.21","42.22","42.23","42.24","42.25","42.26","42.27","42.28","42.29","42.30","42.31","42.32","42.33","42.34","42.35","42.36","42.37","42.38","42.40","42.41","42.42","42.43","42.44","42.45","42.46","42.47","42.48"],"播放视频":["5.1"],"暂停视频":["5.2"],"切换视频的播放和暂停":["5.3"],"parameter":["5.4","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.14","5.19","5.20","5.21","5.22","5.23","5.24","5.27","5.28","5.29","5.30","5.32","5.33","5.34","5.42","15.4","15.5","15.6","15.7","15.8","15.9","15.10","15.11","15.12","15.13","15.14","15.19","15.20","15.21","15.22","15.23","15.24","15.25","15.27","15.28","15.29","15.30","15.31","15.32","15.33","15.34","25.5","30.4","36.5"],"boolean":["5.4","5.13","5.19","5.20","5.21","5.24","7.1","15.4","15.13","15.19","15.20","15.21","15.24","15.25","15.31","16.1","17.1","18.1","25.5","30.8","30.9","30.10","30.11","30.12","30.13","30.14","30.15","30.16","30.17","30.18","30.19","30.20","30.21","30.22","30.23","30.24","30.25","30.26","30.27","30.43","30.44","30.45","30.46","30.47","36.5","42.8","42.9","42.10","42.11","42.12","42.13","42.14","42.15","42.16","42.17","42.18","42.19","42.20","42.21","42.22","42.23","42.24","42.25","42.26","42.27","42.43","42.44","42.45","42.46","42.47"],"setter":["5.5","5.6","5.7","5.8","5.9","5.10","5.13","5.14","5.19","5.20","5.21","5.22","5.23","5.27","5.28","5.29","5.30","5.33","5.34","5.42","15.5","15.6","15.7","15.8","15.9","15.10","15.13","15.14","15.19","15.20","15.21","15.22","15.23","15.25","15.27","15.28","15.29","15.30","15.31","15.33","15.34","15.41","25.5","36.5"],"number":["5.5","5.6","5.7","5.8","5.14","5.28","15.5","15.6","15.7","15.8","15.14","15.28","30.7","42.7"],"getter":["5.8","5.9","5.13","5.14","5.15","5.19","5.20","5.21","5.22","5.23","5.24","5.26","5.27","5.28","5.29","5.30","5.33","5.34","5.36","5.37","15.8","15.9","15.13","15.14","15.15","15.19","15.20","15.21","15.22","15.23","15.24","15.25","15.26","15.27","15.28","15.29","15.30","15.31","15.33","15.34","15.36","15.37","25.5","36.5"],"string":["5.10","5.11","5.12","5.22","5.27","5.29","5.32","5.33","5.34","9.2","9.4","9.5","15.9","15.10","15.11","15.12","15.22","15.27","15.29","15.32","15.33","15.34","17.1","19.2","19.4","19.5","30.1","30.2","30.3","30.5","30.6","30.39","30.41","42.1","42.2","42.3","42.5","42.6","42.39","42.41"],"设置视频地址":["5.10","5.11"],"设置时和":["5.10","5.11"],"设置视频画质地址":["5.12"],"获取视频时长":["5.15"],"下载当前视频帧的截图":["5.16"],"获取当前视频帧的截图的":["5.17","5.18"],"base64":["5.17","15.17"],"地址":["5.17","5.18","37.4"],"blob":["5.18","15.18"],"设置和获取视频海报":["5.22"],"设置视频是否自适应尺寸":["5.25"],"获取播放器的尺寸和坐标信息":["5.26"],"array":["5.30","5.42","9.2","15.30","19.2","30.28","30.29","30.30","30.31","30.32","30.33","30.34","42.28","42.29","42.30","42.31","42.32","42.33","42.34"],"设置和获取区间循序播放":["5.30"],"单位秒":["5.30","37.4"],"当容器只有宽度":["5.31"],"该属性可以自动计算出并设置视频的高度":["5.31"],"动态获取和设置":["5.32"],"开启隔空播放":["5.35"],"视频缓存的比例":["5.36"],"范围是":["5.36","5.37"],"视频播放的比例":["5.37"],"事件的代理函数":["5.38"],"实质上代理了":["5.38"],"的查询函数":["5.39"],"element":["5.40","9.2","9.4","9.5","15.40","19.2","19.4","19.5","30.1","42.1"],"快捷返回播放器的":["5.40"],"动态获取或设置":["5.41"],"css":["5.41"],"变量":["5.41","31.7"],"动态设置画质列表":["5.42"],"类型":["6.1","7.1","8.1","9.2","9.4","9.5","42.33","42.35","42.36"],"描述":["6.1","7.1","8.1","9.2","9.4","9.5"],"disable":["6.1","7.1","8.1","16.1","17.1","18.1"],"var":["7.2","9.3","17.2","37.15"],"new":["7.2","17.2","37.15"],"artplayer":["7.2","17.2","20.3","20.5","20.6","20.8","24.4","29.2","30.1","31.3","31.5","31.6","31.8","35.4","37.5","37.15","41.2","41.4","42.1"],"container":["7.2","15.31","17.2","37.15"],"须先打开设置面板":["9.1"],"然后自带四个内置项":["9.1"],"flip":["9.1"],"playbackrate":["9.1"],"选择列表":["9.2"],"html":["9.2","9.4","9.5","19.2","19.4","19.5","28.5","28.6","28.7","28.10","28.13","40.5","40.6","40.7","40.10","40.13","42.38"],"元素的":["9.2","9.4","9.5"],"icon":["9.2","9.4","9.5","19.2","19.4","19.5"],"元素的图标":["9.2"],"selector":["9.2","19.2"],"元素列表":["9.2"],"onselect":["9.2","19.2"],"元素点击事件":["9.2"],"列表嵌套":["9.3"],"切换按钮":["9.4"],"范围滑块":["9.5"],"属性用于设置是否显示全部层":["10.8"],"属性用于设置是否显示全部控制器":["10.9"],"属性用于设置是否显示全部菜单":["10.10"],"属性用于设置是否显示全部设置项":["10.15"],"属性用于切换是否显示全部设置项":["10.15"],"property":["15.0","16.1","17.1","18.1","19.2","19.4","19.5"],"the":["15.0","15.10","15.11","15.12","15.17","15.18","15.21","15.26","15.31","15.36","15.37","15.38","15.39","15.40","15.41","17.1","19.1","20.6","20.7","20.8","29.0","29.1","29.2","30.1","30.3","30.4","30.6","30.11","30.26","30.28","30.29","30.30","30.31","30.32","30.33","30.35","30.36","30.39","30.40","30.42"],"to":["15.4","15.11","16.1","17.1","18.1","30.1","30.10","30.17","30.19","30.26","30.32","30.38","30.39","30.45","30.46","30.48"],"setting":["15.10","15.11","30.29"],"is":["15.11","20.6","30.38","30.39"],"similar":["15.11"],"that":["15.11","20.6","29.0"],"and":["15.14","15.19","15.21","15.22","15.26","15.30","15.32","15.38","30.36"],"download":["15.16"],"a":["15.16","30.4"],"address":["15.17","15.18","30.2"],"full":["15.19"],"obtain":["15.22","15.30"],"size":["15.26","30.11"],"interval":["15.30"],"when":["15.31","30.8","30.12"],"has":["15.31"],"only":["15.31","20.8"],"this":["15.31"],"attribute":["15.31"],"enable":["15.35"],"proportion":["15.36","15.37"],"of":["15.36","15.37","15.38","15.39","20.7","20.8","29.0","30.11","30.36","30.39"],"event":["15.38"],"essentially":["15.38"],"proxies":["15.38"],"dynamically":["15.41"],"list":["15.41","19.2","19.3"],"describe":["16.1","17.1","18.1","19.2","19.4","19.5"],"whether":["16.1","17.1","18.1","30.10","30.14","30.15","30.16","30.17","30.18","30.19","30.20","30.22","30.23","30.26","30.32","30.43","30.44","30.45","30.46","30.47"],"component":["17.1"],"you":["19.1"],"must":["19.1"],"open":["19.1"],"settings":["19.1"],"select":["19.2"],"nesting":["19.3"],"switch":["19.4"],"button":["19.4"],"range":["19.5"],"slider":["19.5"],"important":["20.0"],"note":["20.0"],"group":["20.1","20.2","20.3","20.4","20.5","24.2","24.3","25.2","25.3","26.2","26.3","27.2","27.3","28.3","28.4","28.5","31.1","31.2","31.3","31.4","31.5","35.2","35.3","36.2","36.3","37.2","37.3","38.2","38.3","39.2","39.3","40.3","40.4","40.5"],"bash":["20.2","24.2","24.3","25.2","25.3","26.2","26.3","27.2","27.3","28.3","28.4","31.2","35.2","35.3","36.2","36.3","37.2","37.3","38.2","38.3","39.2","39.3","40.3","40.4"],"index":["20.3","24.4","28.5","28.7","28.12","28.13","31.3","35.4","40.5","40.7","40.12","40.13"],"import":["20.3","20.5","29.4","31.3","31.5","41.4"],"from":["20.3","20.5","29.4","31.5","41.4"],"jsx":["20.5","31.5"],"useeffect":["20.5","31.5"],"useref":["20.5","31.5"],"d":["20.6","31.6"],"ts":["20.6","31.6"],"automatically":["20.6"],"sometimes":["20.7"],"your":["20.7"],"file":["20.7"],"will":["20.7","30.42"],"lose":["20.7"],"prompt":["20.7"],"browsers":["20.8"],"production":["20.8"],"builds":["20.8"],"are":["20.8","29.2"],"compatible":["20.8"],"with":["20.8"],"last":["20.8","31.8"],"https":["21.0","22.0","23.0","32.0","33.0","34.0"],"github":["21.0","22.0","23.0","32.0","33.0","34.0"],"com":["21.0","22.0","23.0","32.0","33.0","34.0"],"industry":["21.0","32.0"],"forum":["21.0","32.0"],"bilibili":["22.0","33.0"],"data":["22.0","23.0","24.4","33.0","34.0","35.4","37.5","37.7","37.9","37.10","37.14"],"dev":["23.0","34.0"],"libs":["23.0","24.4","34.0","35.4","37.5","37.7","37.10"],"查看完整演示":["24.1","25.1","26.1","27.1","28.2","35.1","36.1","37.1","38.1","39.1","40.2"],"jsdelivr":["24.3","25.3","26.3","27.3","28.4","35.3","36.3","37.3","38.3","39.3","40.4"],"uncompiled":["24.4","35.4","37.5"],"plugin":["24.4","35.4","37.5"],"ads":["24.4","35.4"],"是否启用新的控制器皮肤":["25.5","36.5"],"画质":["26.0","27.0","38.0","39.0"],"控制":["28.0","40.0"],"通过该插件":["28.1","40.1"],"你可以轻松在":["28.1","40.1"],"doctype":["28.5","40.5"],"从":["28.7","40.7","41.0"],"将消息推送到":["28.7","28.12","40.7","40.12"],"iframe":["28.7","28.13","40.7","40.13"],"该函数将在":["28.7","40.7"],"在":["28.8","40.8"],"销毁后":["28.9","40.9"],"注入脚本":["28.11","40.11"],"最常遇到的问题是":["28.13","40.13"],"播放器在":["28.13","40.13"],"里进行网页全屏":["28.13","40.13"],"但在":["28.13","40.13"],"danger":["29.0","41.0"],"fact":["29.0"],"more":["29.0"],"language":["29.1","29.2","29.3","29.4","30.41","42.41"],"languages":["29.1"],"files":["29.2"],"before":["29.2"],"packaging":["29.2"],"stored":["29.2"],"src":["29.2","41.2"],"i18n":["29.2","41.2"],"welcome":["29.2"],"zhtw":["29.4","41.4"],"attached":["30.1"],"source":["30.2"],"unique":["30.3"],"undefined":["30.4","42.4"],"constructor":["30.4"],"accepts":["30.4"],"as":["30.4"],"second":["30.4"],"which":["30.4","30.42"],"posters":["30.5"],"f00":["30.6","42.6"],"false":["30.8","30.9","30.10","30.11","30.12","30.13","30.14","30.15","30.16","30.17","30.18","30.20","30.22","30.23","30.24","30.25","30.26","30.37","30.43","30.44","30.45","30.46","30.47","42.10","42.11","42.12","42.14","42.15","42.16","42.17","42.24","42.26","42.43","42.45","42.47"],"display":["30.17","30.32","30.33"],"true":["30.19","30.21","30.27","42.19"],"use":["30.19","30.26","30.45"],"shortcut":["30.19"],"if":["30.21"],"subtitle":["30.24"],"mini":["30.25"],"ssr":["30.26","42.26"],"initialize":["30.28","30.29","30.30","30.31","30.34"],"customized":["30.28","30.29","30.30","30.31","30.34"],"on":["30.33","30.35"],"object":["30.35","30.36","30.37","30.38","30.40","30.42","30.48","42.35","42.36","42.37","42.38","42.40","42.42","42.48"],"image":["30.35"],"support":["30.36"],"controls":["30.37","42.37"],"preload":["30.37"],"it":["30.38","30.39"],"used":["30.38","30.39","30.48"],"replace":["30.38"],"indicate":["30.39"],"format":["30.39"],"needs":["30.39"],"by":["30.40"],"matching":["30.40"],"s":["30.40"],"navigator":["30.41","42.41"],"customize":["30.42"],"configuration":["30.42"],"be":["30.42"],"deeply":["30.42"],"merged":["30.42"],"automatic":["30.45"],"导入":["31.6"],"时会自动导入的":["31.6"],"有时你的":["31.7"],"文件会丢失":["31.7"],"typescript":["31.7"],"的类型提示":["31.7"],"这时候你可以手动导入类型":["31.7"],"生产构建的":["31.8"],"只兼容最新一个主版本的":["31.8"],"chrome":["31.8"],"danmuku":["37.4","37.11"],"弹幕库":["37.4"],"支持数组":["37.4"],"xml":["37.4","37.6"],"promise返回数组":["37.4"],"speed":["37.4","37.11"],"弹幕持续时间":["37.4"],"范围在":["37.4"],"opacity":["37.4","37.11"],"通过方法":["37.8","37.10","37.11"],"进行隐藏或者显示弹幕":["37.8"],"通过属性":["37.9"],"判断当前弹幕是隐藏或者显示":["37.9"],"发送一条实时弹幕":["37.10"],"实时改变弹幕配置":["37.11"],"支持属性有":["37.11"],"fontsize":["37.11"],"color":["37.11"],"mode":["37.11"],"margin":["37.11"],"通过":["37.12"],"方法可以重载弹幕源":["37.12"],"或者切换新弹幕":["37.12"],"用于清空当前显示的弹幕":["37.13"],"用于获取当前弹幕配置":["37.14"],"app":["37.15"],"assets":["37.15"],"sample":["37.15"],"鉴于捆绑的多国语言越来越多":["41.0"],"默认语言有":["41.1"],"en":["41.1"],"zh":["41.1"],"打包前的语言文件存放于":["41.2"],"欢迎来添加你的语言":["41.2"],"打包后的语言文件存放于":["41.2"],"dist":["41.2"],"播放器挂载的":["42.1"],"视频源地址":["42.2"],"播放器的唯一标识":["42.3"],"构造函数接受一个函数作为第二个参数":["42.4"],"播放器初始化成功且视频可以播放时触发":["42.4"],"ready":["42.4"],"视频的海报":["42.5"],"是否自动播放":["42.10"],"是否使用快捷键":["42.19"],"字幕时间偏移":["42.24"],"是否使用":["42.26"],"初始化自定义的":["42.28","42.29","42.30","42.34"],"层":["42.28"],"设置面板":["42.29"],"右键菜单":["42.30"],"初始化自定义的底部":["42.31"],"控制栏":["42.31"],"是否在底部控制栏里显示":["42.32"],"画质选择":["42.32"],"列表":["42.32"],"在进度条上显示":["42.33"],"高亮信息":["42.33"],"插件":["42.34"],"在进度条上设置":["42.35"],"预览图":["42.35"],"设置视频的字幕":["42.36"],"支持字幕格式":["42.36"],"vtt":["42.36"],"srt":["42.36"],"ass":["42.36"],"用于替换默认图标":["42.38"],"支持":["42.38"],"用于指明视频的格式":["42.39"],"需要配合":["42.39"],"customtype":["42.39"],"通过视频的":["42.40"],"自定义":["42.42"],"配置":["42.42"],"该配置会和自带的":["42.42"],"进行深度合并":["42.42"],"新增你的语言":["42.42"],"是否使用自动":["42.45"],"回放功能":["42.45"],"用于改变内置的css变量":["42.48"]},{"0":["3.24","3.25","5.8","13.24","13.25","15.8","15.36","15.37","23.0","34.0","37.4","41.0"],"1":["3.25","3.27","5.8","5.36","5.37","13.25","13.27","15.36","15.37","20.8","22.0","31.7","33.0","41.0"],"2":["3.27","13.27","21.0","22.0","31.6","32.0","33.0"],"3":["3.22","13.22","23.0","30.2","31.7","34.0","42.2"],"4":["6.2","16.2","21.0","30.45","32.0","42.42"],"5":["3.11","3.13","3.24","3.26","13.11","13.13","13.24","13.26","21.0","30.28","30.29","32.0","41.0","42.28","42.29"],"6":["2.0","6.3","7.3","12.0","16.3","17.3","22.0","33.0"],"7":["15.15","42.7"],"8":["23.0","34.0"],"9":["3.28","9.6","13.28","19.6","29.3","42.42"],"10":["2.2","3.10","7.2","12.2","13.10","17.2"],"11":["2.28","12.28"],"13":["2.31","6.2","6.3","12.31","16.2","16.3"],"14":["9.6","19.6"],"16":["3.28","13.28"],"19":["5.42","15.41"],"21":["6.4","6.5","7.3","7.4","8.4","16.4","16.5","17.3","17.4","18.4"],"22":["8.2","8.3","9.7","18.2","18.3","19.7"],"23":["30.28","42.28"],"24":["6.5","16.5"],"25":["3.27","13.27","37.4"],"29":["5.42","8.5","15.41","18.5"],"34":["30.29","42.29"],"35":["3.6","13.6"],"40":["7.5","17.5"],"50":["3.9","13.9"],"200":["3.5","3.7","3.8","3.20","13.5","13.7","13.8","13.20"],"300":["3.16","13.16"],"1000":["3.14","3.21","3.23","13.14","13.21","13.23"],"2000":["3.3","13.3"],"3000":["3.12","3.15","13.12","13.15"],"code":["0.1","0.2","0.4","0.5","0.6","0.7","0.12","0.13","0.14","0.15","0.16","1.1","1.6","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.29","2.30","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","3.2","3.4","3.5","3.6","3.16","3.28","3.29","5.1","5.2","5.3","5.11","5.13","5.15","5.16","5.19","5.20","5.21","5.22","5.24","5.25","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.35","5.41","5.42","9.2","10.1","10.2","10.4","10.5","10.6","10.7","10.8","10.9","10.10","10.12","10.13","10.14","10.15","10.16","11.1","11.6","12.1","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.29","12.30","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","12.40","13.2","13.4","13.5","13.6","13.16","13.28","13.29","15.1","15.2","15.15","15.19","15.30","15.35","15.41","19.2","25.5","30.1","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.34","30.42","30.45","36.5","37.8","37.11","41.2","42.1","42.4","42.10","42.19","42.29","42.30","42.31","42.34","42.38","42.42","42.45","42.48"],"js":["0.2","0.4","0.13","0.16","2.2","2.19","2.24","2.28","2.29","2.30","2.31","5.42","6.2","6.3","6.4","7.4","8.4","9.2","9.6","10.2","10.4","10.13","10.16","12.2","12.19","12.24","12.28","12.29","12.30","12.31","15.15","15.41","16.2","16.3","16.4","17.4","18.4","19.2","19.6","28.7","28.12","30.1","30.2","30.28","30.29","30.31","30.45","37.5","37.7","37.9","37.10","37.12","40.7","40.12","41.1","42.2","42.4","42.28","42.29","42.31","42.42"],"var":["0.2","0.4","2.0","2.31","4.0","5.42","6.2","6.3","6.4","6.5","7.3","7.4","7.5","8.2","8.3","8.4","8.5","9.2","9.6","9.7","9.8","10.2","10.4","12.0","12.31","14.0","15.15","15.41","16.2","16.3","16.4","16.5","17.3","17.4","17.5","18.2","18.3","18.4","18.5","19.2","19.3","19.6","19.7","19.8","24.4","28.7","29.3","30.2","30.28","30.29","35.4","37.5","40.7","41.3","41.4","42.2","42.28","42.29"],"hover":["0.3","10.3"],"方法用于代理自定义的":["0.3","10.3"],"loadimg":["0.3","10.3"],"方法用于监听图片的":["0.3","10.3"],"load":["0.3","10.3"],"加载事件":["0.3","10.3"],"div":["0.3","0.6","0.8","0.9","0.10","0.11","0.12","0.14","0.15","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.11","1.12","3.1","3.3","3.4","3.5","3.6","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","3.16","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.28","3.29","3.31","3.32","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.14","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.23","5.24","5.25","5.27","5.28","5.29","5.30","5.32","5.33","5.34","5.38","5.40","5.41","9.1","9.2","10.3","10.6","10.8","10.9","10.10","10.11","10.12","10.14","10.15","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","13.1","13.3","13.4","13.5","13.6","13.7","13.8","13.9","13.10","13.11","13.12","13.13","13.14","13.15","13.16","13.17","13.18","13.19","13.20","13.21","13.22","13.23","13.24","13.25","13.26","13.27","13.28","13.29","13.31","13.32","15.1","15.2","15.3","15.7","15.11","15.19","15.21","15.26","15.30","15.35","19.2","20.4","30.1","30.7","30.10","30.19","30.30","30.31","30.34","30.42","30.45","31.4","37.11","42.1","42.3","42.4","42.5","42.7","42.8","42.9","42.10","42.13","42.17","42.19","42.21","42.25","42.34","42.38","42.42","42.44","42.45","42.48"],"classname":["0.4","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.13","0.14","0.15","1.1","1.2","1.3","1.4","1.5","1.6","1.7","1.8","1.9","1.10","1.12","3.1","3.2","3.3","3.4","3.5","3.6","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.15","3.16","3.17","3.18","3.19","3.21","3.22","3.25","3.26","3.28","3.29","3.31","3.32","5.1","5.2","5.3","5.5","5.6","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.23","5.24","5.25","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.35","5.40","5.41","9.1","9.2","10.4","10.5","10.6","10.7","10.8","10.9","10.10","10.11","10.12","10.13","10.14","10.15","11.1","11.2","11.3","11.4","11.5","11.6","11.7","11.8","11.9","11.10","11.12","13.1","13.2","13.3","13.4","13.5","13.6","13.7","13.8","13.9","13.10","13.11","13.12","13.13","13.15","13.16","13.17","13.18","13.19","13.21","13.22","13.25","13.26","13.28","13.29","13.31","13.32","15.1","15.2","15.3","15.11","15.19","15.21","15.26","15.30","15.35","19.2","25.5","30.1","30.7","30.10","30.19","30.30","30.31","30.34","30.42","30.45","36.5","37.8","37.11","42.1","42.3","42.4","42.5","42.7","42.9","42.10","42.13","42.17","42.19","42.30","42.31","42.34","42.38","42.42","42.44","42.45","42.48"],"run":["0.4","0.5","0.6","0.7","0.10","0.11","0.12","0.13","0.14","0.15","0.16","1.1","1.6","2.1","2.4","2.5","2.6","2.8","2.9","2.10","2.11","2.14","2.15","2.16","2.17","2.20","2.27","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.40","3.2","3.4","3.5","3.6","3.7","3.8","3.9","3.10","3.16","3.21","3.28","3.29","3.31","5.1","5.2","5.3","5.7","5.9","5.11","5.13","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.24","5.25","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.35","5.41","9.1","9.2","10.4","10.5","10.6","10.7","10.8","10.9","10.10","10.11","10.12","10.13","10.14","10.15","10.16","11.1","11.6","12.1","12.4","12.5","12.6","12.8","12.9","12.10","12.11","12.14","12.15","12.16","12.17","12.20","12.27","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.40","13.2","13.4","13.5","13.6","13.7","13.8","13.9","13.10","13.16","13.21","13.28","13.29","13.31","15.1","15.2","15.3","15.11","15.15","15.19","15.21","15.30","15.35","15.41","19.2","25.5","30.1","30.7","30.10","30.19","30.29","30.30","30.31","30.34","30.42","30.45","36.5","37.8","37.11","42.1","42.4","42.5","42.7","42.10","42.19","42.30","42.31","42.34","42.38","42.42","42.45","42.48"],"art":["0.4","2.0","5.10","5.12","5.42","6.2","6.3","6.4","6.5","7.3","7.4","7.5","8.2","8.3","8.5","9.2","9.3","9.6","9.7","9.8","10.4","12.0","15.10","15.11","15.12","16.2","16.3","16.4","16.5","17.3","17.4","17.5","18.2","18.3","18.5","19.2","19.3","19.6","19.7","19.8","20.3","20.5","24.4","29.3","30.2","31.3","31.7","35.4","37.5","41.3","42.2"],"new":["0.4","2.0","4.0","6.2","6.3","6.4","6.5","7.3","7.4","7.5","8.3","9.2","9.3","9.6","9.7","9.8","10.4","12.0","14.0","16.2","16.3","16.4","16.5","17.3","17.4","17.5","18.3","19.3","19.6","19.7","19.8","20.3","24.4","30.2","31.3","35.4","41.3","42.2"],"artplayer":["0.4","2.0","4.0","6.2","6.3","6.4","6.5","7.3","7.4","7.5","9.2","9.3","9.7","9.8","10.4","12.0","14.0","16.2","16.3","16.4","16.5","17.3","17.4","17.5","19.3","19.7","19.8","20.4","25.4","25.5","26.2","27.2","28.5","29.4","30.2","31.4","31.7","36.4","36.5","37.6","37.7","37.8","37.9","37.10","37.12","37.13","37.14","38.2","39.2","40.5","42.2"],"container":["0.4","2.0","4.0","6.4","6.5","7.3","7.5","9.2","9.3","9.7","9.8","10.4","12.0","14.0","16.4","16.5","17.3","17.5","19.3","19.7","19.8","20.3","24.4","30.2","30.11","31.3","35.4","42.11"],"方法用于更新":["0.6","10.6"],"对象":["0.6","10.6"],"方法用于动态更新层":["0.8"],"show":["0.8","0.9","0.10","0.15"],"属性用于设置是否显示全部层":["0.8"],"toggle":["0.8","0.9","0.10","0.15"],"方法用于切换是否显示全部层":["0.8"],"方法用于动态更新控制器":["0.9"],"属性用于设置是否显示全部控制器":["0.9"],"方法用于切换是否显示全部控制器":["0.9"],"属性用于设置是否显示全部菜单":["0.10"],"方法用于切换是否显示全部菜单":["0.10"],"switch":["0.11","9.4","10.11","30.18"],"方法设置当前字幕地址和选项":["0.11","10.11"],"属性用于切换是否显示加载层":["0.12","10.12"],"属性用于切换是否显示遮罩层":["0.14","10.14"],"属性用于设置是否显示全部设置项":["0.15"],"方法用于切换是否显示全部设置项":["0.15"],"字符串":["1.11","11.11"],"app":["2.0","4.0","7.2","7.5","9.2","9.3","9.7","9.8","12.0","14.0","17.2","17.5","19.3","19.7","19.8","20.3","24.4","30.2","35.4"],"url":["2.0","4.0","5.10","7.2","7.5","9.3","9.8","12.0","14.0","15.10","17.2","17.5","19.3","19.8","20.3","24.4","30.35","30.36","35.4","42.35","42.36"],"assets":["2.0","4.0","7.2","8.2","8.3","8.4","8.5","9.3","9.8","12.0","14.0","17.2","18.2","18.3","18.4","18.5","19.3","19.8","24.4","30.2","30.28","35.4","42.28"],"sample":["2.0","4.0","7.2","8.2","8.3","8.4","8.5","9.3","9.8","12.0","14.0","17.2","18.2","18.3","18.4","18.5","19.3","19.8","24.4","30.2","30.28","35.4","42.28"],"mp4":["2.0","4.0","7.2","12.0","14.0","17.2","37.15"],"on":["2.0","4.0","12.0","14.0","19.5","30.43"],"canplay":["2.0","12.0"],"浏览器可以播放媒体文件了":["2.41","12.41"],"浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束":["2.42","12.42"],"offlineaudiocontext":["2.43","12.43"],"duration":["2.44","12.44"],"媒体内容变为空":["2.45","12.45"],"例如":["2.45","12.45"],"视频停止播放":["2.46","12.46"],"获取媒体数据时出错":["2.47","12.47"],"media":["2.48","12.48"],"已加载元数据":["2.49","12.49"],"播放已暂停":["2.50","12.50"],"播放已开始":["2.51","12.51"],"由于缺乏数据而暂停或延迟后":["2.52","12.52"],"在浏览器加载资源时周期性触发":["2.53","12.53"],"播放速率发生变化":["2.54","12.54"],"跳帧":["2.55","2.56","12.55","12.56"],"用户代理":["2.57","12.57"],"媒体数据加载已暂停":["2.58","12.58"],"currenttime":["2.59","12.59"],"音量发生变化":["2.60","12.60"],"由于暂时缺少数据":["2.61","12.61"],"可以打印出视频全部的内置事件":["3.1","13.1"],"默认关闭":["3.1","13.1"],"默认为":["3.3","3.7","3.8","3.9","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.26","3.30","5.4","13.3","13.7","13.8","13.9","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.19","13.20","13.21","13.22","13.23","13.24","13.26","13.30"],"单位为毫秒":["3.14","3.20","3.23","13.14","13.20","13.23"],"true":["3.17","3.18","3.31","5.4","13.17","13.18","13.31","37.15","42.21","42.27"],"false":["3.19","3.30","3.32","13.19","13.30","13.32","42.8","42.9","42.13","42.18","42.20","42.22","42.23","42.25","42.37","42.44","42.46"],"是否把播放器挂在在":["3.30","13.30"],"元素下":["3.30","13.30"],"目前主要用于进度条的平滑效果":["3.32","13.32"],"dosomething":["4.0","14.0"],"video":["4.0","5.32","5.36","5.37","7.2","9.3","9.8","14.0","15.5","15.6","15.8","15.9","15.13","15.14","15.16","15.17","15.18","15.22","15.24","15.25","15.31","15.32","15.33","17.2","19.3","19.8","30.4","30.14","30.15","30.16","30.17","30.37","30.44","37.15","42.40"],"plugins":["4.0","14.0","37.15"],"ready":["4.0","14.0"],"可以在实例化之后再加载插件的函数":["4.0","14.0"],"销毁播放器":["5.4"],"接受一个参数表示是否销毁后同时移除播放器的":["5.4"],"html":["5.4","28.1","28.8","28.12","30.38","40.1","40.8","40.12","42.26","42.32"],"视频时间跳转":["5.5"],"单位秒":["5.5","5.6","5.7","42.33"],"视频时间快进":["5.6"],"视频时间快退":["5.7"],"设置和获取视频音量":["5.8"],"范围在":["5.8","42.24"],"string":["5.9","6.1","7.1","8.1","16.1","18.1","30.35","30.36","30.38","42.32","42.33","42.35","42.36"],"设置和获取视频地址":["5.9"],"类似":["5.10","5.11","5.12","5.14","5.39"],"但会执行一些优化操作":["5.10","5.11"],"switchurl":["5.12","15.12"],"但会带上之前的播放进度":["5.12"],"设置和获取视频是否静音":["5.13"],"设置和获取视频当前时间":["5.14"],"设置时间时和":["5.14"],"seek":["5.14"],"但它不会触发额外的事件":["5.14"],"返回的是一个":["5.17","5.18"],"promise":["5.17","5.18"],"设置和获取播放器窗口全屏":["5.19"],"设置和获取播放器网页全屏":["5.20"],"设置和获取播放器画中画模式":["5.21"],"只有在视频播放前才能看到海报效果":["5.22"],"boolean":["5.23","6.1","8.1","9.4","15.23","19.4","42.32"],"设置和获取播放器迷你模式":["5.23"],"获取视频是否正在播放中":["5.24"],"设置和获取播放器翻转":["5.27"],"支持":["5.27"],"normal":["5.27","15.27"],"horizontal":["5.27"],"vertical":["5.27"],"设置和获取播放器播放速度":["5.28"],"设置和获取播放器长宽比":["5.29"],"元素的属性":["5.32"],"动态获取和设置视频类型":["5.33"],"动态获取和设置播放器主题颜色":["5.34"],"常配合":["5.36","5.37"],"timeupdate":["5.36","5.37"],"事件使用":["5.36","5.37"],"和":["5.38","42.6","42.14","42.15","42.16"],"removeeventlistener":["5.38","15.38"],"当使用":["5.38"],"来处理事件":["5.38"],"播放器销毁时也会自动销毁该事件":["5.38"],"document":["5.39","15.39"],"queryselector":["5.39","15.39"],"但被查询的对象局限于当前播放器内":["5.39"],"可以避免同类名的错误":["5.39"],"元素":["5.40"],"是否禁用组件":["6.1","7.1","8.1"],"name":["6.1","7.1","7.2","8.1","16.1","17.2","18.1"],"组件唯一名称":["7.1"],"用于标记类名":["7.1"],"index":["7.1","7.2","17.1","17.2","28.1","28.8","28.9","37.5","37.7","37.9","37.10","37.12","37.14","40.1","40.8","40.9"],"controls":["7.2","17.2"],"your":["7.2","17.2","29.2","30.42"],"button":["7.2","17.2","30.18","30.43","30.47"],"img":["8.2","8.3","8.4","8.5","18.2","18.3","18.4","18.5","30.28","42.28"],"layer":["8.2","8.3","8.4","8.5","18.2","18.3","18.4","18.5"],"png":["8.2","8.3","8.5","18.2","18.3","18.5"],"aspectratio":["9.1"],"subtitleoffset":["9.1"],"number":["9.2","17.1","19.2","30.33","42.33","42.35"],"列表宽度":["9.2"],"tooltip":["9.2","9.4","9.5","19.2"],"提示文本":["9.2","9.5"],"元素的图标":["9.4","9.5"],"按钮默认状态":["9.4"],"onswitch":["9.4","19.4"],"function":["9.4","9.5","19.4","19.5","20.5","30.14","30.17","30.45","31.5"],"按钮切换事件":["9.4"],"range":["9.5","15.8","15.36","15.37","30.24"],"array":["9.5","19.5"],"默认状态数组":["9.5"],"onrange":["9.5","19.5"],"完成时触发的事件":["9.5"],"onchange":["9.5","19.5"],"变化时触发的事件":["9.5"],"属性用于切换是否显示全部层":["10.8"],"属性用于切换是否显示全部控制器":["10.9"],"属性用于切换是否显示全部菜单":["10.10"],"update":["10.15"],"方法动态更新设置项":["10.15"],"是指挂载在":["11.0"],"here":["15.0"],"and":["15.3","15.8","15.9","15.13","15.20","15.23","15.27","15.28","15.29","15.31","15.33","15.34","19.1","29.0","30.4","30.38"],"pause":["15.3"],"the":["15.4","15.13","15.14","15.16","15.22","15.24","15.25","15.29","15.32","16.1","18.1","20.0","30.5","30.8","30.12","30.14","30.15","30.16","30.17","30.18","30.20","30.21","30.22","30.23","30.24","30.27","30.38","30.41","30.46","30.47"],"player":["15.4","15.19","15.20","15.21","15.23","15.26","15.27","15.28","15.29","15.34","15.38","20.5","30.1","30.3","30.4","30.6","30.7","30.11","30.12","30.22","30.23","30.46","31.5"],"accept":["15.4"],"a":["15.4","30.43"],"indicating":["15.4"],"whether":["15.4","15.13","15.24","15.25","30.9","30.13","30.27"],"time":["15.5","15.6","15.7","15.14","20.7","30.33","42.33"],"jump":["15.5"],"in":["15.5","15.6","15.7","15.21","15.30","30.13","30.17","30.20","30.21","30.32","30.42","30.48"],"seconds":["15.5","15.7","15.30"],"fast":["15.6"],"rewind":["15.7"],"get":["15.8","15.9","15.13","15.20","15.23","15.27","15.28","15.33"],"set":["15.9","15.23","15.28","15.31","15.32","15.33","15.34"],"is":["15.10","15.13","15.24","15.25","15.31","15.38","15.39","30.4","30.6","30.26","30.40"],"similar":["15.10","15.12","15.39"],"to":["15.10","15.12","15.38","15.39","20.3","29.2","30.9","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.27","30.40","30.43","30.44","30.47"],"that":["15.10"],"of":["15.10","15.11","15.14","15.16","15.17","15.18","15.19","15.20","15.21","15.26","15.31","15.32","15.40","30.3","30.7","30.24"],"but":["15.11","15.12","15.39","20.6"],"some":["15.11"],"optimization":["15.11"],"operations":["15.11"],"will":["15.11","15.38","30.5","30.11","30.37"],"be":["15.11","30.4","30.39"],"performed":["15.11"],"quality":["15.12"],"address":["15.12"],"current":["15.14","15.16","15.17","15.18"],"setting":["15.14","37.15"],"screenshot":["15.17","15.18"],"screen":["15.19","15.20"],"window":["15.19","30.22"],"full":["15.20","30.23"],"picture":["15.21","30.20"],"mode":["15.21","30.8","30.26","37.4"],"posters":["15.22"],"you":["15.22","20.6","20.7","30.26"],"can":["15.22","15.31","20.6","20.7","30.4"],"only":["15.22","30.5","30.25"],"see":["15.22"],"effect":["15.22"],"adaptive":["15.25"],"size":["15.25"],"coordinate":["15.26"],"information":["15.26"],"rollover":["15.27"],"support":["15.27"],"playback":["15.28","15.30","15.37","30.15"],"speed":["15.28","30.15"],"obtain":["15.29"],"aspect":["15.29","30.16"],"ratio":["15.29","30.16"],"sequential":["15.30"],"automatically":["15.31","30.10"],"calculate":["15.31"],"height":["15.31"],"after":["15.31"],"it":["15.31"],"attributes":["15.32","30.37"],"element":["15.32"],"types":["15.33"],"dynamically":["15.33","15.34"],"color":["15.34","30.6","37.4"],"cache":["15.36"],"with":["15.36","15.37","19.1","30.24","30.39","30.42"],"when":["15.38","20.6","30.4","30.5","30.25"],"used":["15.38","17.1"],"process":["15.38"],"component":["16.1","18.1"],"unique":["16.1","17.1","18.1"],"mark":["17.1"],"class":["17.1"],"panel":["19.1"],"first":["19.1"],"then":["19.1"],"come":["19.1"],"four":["19.1"],"click":["19.2"],"event":["19.2","19.5"],"width":["19.2"],"prompt":["19.2"],"text":["19.2","42.33"],"default":["19.4","19.5","20.5","31.5"],"state":["19.4","19.5"],"fired":["19.5"],"completion":["19.5"],"english":["20.0"],"bash":["20.1","31.1"],"npm":["20.1","24.2","25.2","26.2","27.2","28.3","31.1","35.2","36.2","37.2","38.2","39.2","40.3"],"jsdelivr":["20.2","31.2"],"net":["20.2","24.3","25.3","26.3","27.3","28.4","31.2","35.3","36.3","37.3","38.3","39.3","40.4"],"https":["20.2","24.3","25.3","26.3","27.3","28.4","31.2","35.3","36.3","37.3","38.3","39.3","40.4"],"const":["20.3","20.5","31.3","31.5"],"path":["20.3"],"template":["20.4","31.4"],"ref":["20.4"],"export":["20.5","31.5"],"option":["20.5","31.5"],"getinstance":["20.5","31.5"],"rest":["20.5","31.5"],"artref":["20.5","31.5"],"imported":["20.6"],"importing":["20.6"],"also":["20.6"],"typescript":["20.7"],"at":["20.7"],"this":["20.7"],"manually":["20.7"],"import":["20.7","31.6","31.7"],"variable":["20.7"],"major":["20.8"],"version":["20.8","29.0","31.8"],"chrome":["20.8"],"for":["20.8"],"older":["20.8"],"use":["20.8","30.27"],"data":["21.0","25.4","25.5","32.0","36.4","36.5","37.6","37.8","37.11","37.12","37.13"],"libs":["21.0","22.0","25.4","25.5","32.0","33.0","36.4","36.5","37.6","37.8","37.9","37.11","37.12","37.13","37.14"],"cdnjs":["21.0","22.0","23.0","32.0","33.0","34.0"],"cloudflare":["21.0","22.0","23.0","32.0","33.0","34.0"],"ajax":["21.0","22.0","23.0","32.0","33.0","34.0"],"dashjs":["21.0","32.0"],"all":["21.0","32.0"],"beta":["23.0","34.0"],"min":["23.0","34.0"],"install":["24.2","25.2","26.2","27.2","28.3","35.2","36.2","37.2","38.2","39.2","40.3"],"uncompiled":["25.4","25.5","36.4","36.5","37.6","37.7","37.8","37.9","37.10","37.11","37.12","37.13","37.14"],"plugin":["25.4","25.5","36.4","36.5","37.6","37.7","37.8","37.9","37.10","37.12","37.13","37.14"],"里控制跨域":["28.1","40.1"],"head":["28.5","40.5"],"title":["28.5","40.5"],"meta":["28.5","40.5"],"接口":["28.6","28.10","40.6","40.10"],"内部运行":["28.7","40.7"],"同时它也能用于异步获取":["28.7","40.7"],"里的值":["28.7","40.7"],"warning":["28.10","40.10"],"接收来自":["28.11","40.11"],"iframe":["28.12","40.12"],"是不生效的":["28.13","40.13"],"这时候只要监听":["28.13","40.13"],"里的":["28.13","40.13"],"fullscreenweb":["28.13","40.13"],"事件并通知到":["28.13","40.13"],"languages":["29.0"],"are":["29.0","29.1","30.21"],"bundled":["29.0"],"starting":["29.0"],"from":["29.0","31.3","31.6"],"en":["29.1","42.41"],"zh":["29.1","29.4","41.2","41.4","42.41"],"cn":["29.1","41.1"],"add":["29.2","30.42","30.44"],"packaged":["29.2"],"dist":["29.2"],"i18n":["29.4","41.4"],"tw":["29.4","41.2","41.4"],"identifier":["30.3"],"currently":["30.3","30.6","30.41"],"triggered":["30.4"],"initialized":["30.4"],"successfully":["30.4"],"played":["30.4"],"just":["30.4"],"appear":["30.5"],"using":["30.8"],"live":["30.8"],"progress":["30.8","30.25","30.35"],"mute":["30.9"],"by":["30.9","30.11"],"fill":["30.11"],"entire":["30.11"],"scrolls":["30.12"],"outside":["30.12"],"play":["30.13"],"display":["30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.41","30.43","30.47"],"bottom":["30.17","30.32"],"control":["30.17","30.32"],"keys":["30.19"],"there":["30.21"],"multiple":["30.21"],"players":["30.21"],"offset":["30.24"],"5s":["30.24","42.24"],"bar":["30.25","30.32","30.33","30.35"],"appears":["30.25"],"mount":["30.26"],"useful":["30.26"],"if":["30.26"],"want":["30.26"],"render":["30.26"],"list":["30.32"],"property":["30.32","30.33","30.35","30.36"],"describe":["30.32","30.33","30.35","30.36"],"thumbnail":["30.35"],"format":["30.36"],"vtt":["30.36"],"srt":["30.36"],"ass":["30.36"],"metadata":["30.37","42.37"],"more":["30.37"],"which":["30.37"],"icon":["30.38"],"supports":["30.38"],"together":["30.39"],"customtype":["30.39"],"decoding":["30.40"],"right":["30.40"],"handed":["30.40"],"over":["30.40"],"tolowercase":["30.41","42.41"],"built":["30.42","30.48"],"language":["30.42"],"long":["30.44"],"press":["30.44"],"rotate":["30.46"],"according":["30.46"],"change":["30.48"],"css":["30.48"],"variables":["30.48"],"但你也可以单独导入选项的类型":["31.6"],"type":["31.7"],"let":["31.7"],"null":["31.7"],"参数":["31.7"],"对于古老的浏览器":["31.8"],"可以使用":["31.8"],"legacy":["31.8"],"文件":["31.8"],"弹幕透明度":["37.4"],"fontsize":["37.4"],"字体大小":["37.4"],"支持数字和百分比":["37.4"],"ffffff":["37.4"],"默认字体颜色":["37.4"],"默认模式":["37.4"],"danmuku":["37.5","37.7","37.9","37.10","37.12","37.13","37.14","37.15"],"antioverlap":["37.11"],"synchronousplayback":["37.11"],"filter":["37.11"],"locktime":["37.11"],"beforeemit":["37.11"],"artplayerplugindanmuku":["37.15"],"xml":["37.15"],"无需手动导入":["41.1"],"手动导入的语言有":["41.2"],"cs":["41.2"],"es":["41.2"],"fa":["41.2"],"fr":["41.2"],"id":["41.2"],"pl":["41.2"],"ru":["41.2"],"group":["41.2"],"容器":["42.1"],"目前只用于记忆播放":["42.3"],"autoplayback":["42.3"],"事件一样":["42.4"],"只会出现在播放器初始化且未播放的状态下":["42.5"],"播放器主题颜色":["42.6"],"目前用于":["42.6"],"进度条":["42.6"],"播放器的默认音量":["42.7"],"使用直播模式":["42.8"],"会隐藏进度条和播放时间":["42.8"],"是否默认静音":["42.9"],"播放器的尺寸默认会填充整个":["42.11"],"容器尺寸":["42.11"],"所以经常出现黑边":["42.11"],"该值能自动调整播放器尺寸以隐藏黑边":["42.11"],"当播放器滚动到浏览器视口以外时":["42.12"],"自动进入":["42.12"],"迷你播放":["42.12"],"模式":["42.12","42.27"],"是否循环播放":["42.13"],"是否显示视频翻转功能":["42.14"],"目前只出现在":["42.14"],"设置面板":["42.14","42.15","42.16","42.18","42.24"],"右键菜单":["42.14","42.15","42.16"],"是否显示视频播放速度功能":["42.15"],"会出现在":["42.15","42.16"],"是否显示视频长宽比功能":["42.16"],"是否在底部控制栏里显示":["42.17","42.18","42.20"],"视频截图":["42.17"],"功能":["42.17"],"的开关按钮":["42.18","42.20"],"画中画":["42.20"],"假如页面里同时存在多个播放器":["42.21"],"是否只能让一个播放器播放":["42.21"],"是否在底部控制栏里显示播放器":["42.22","42.23"],"窗口全屏":["42.22"],"按钮":["42.22","42.23","42.47"],"网页全屏":["42.23"],"出现在":["42.24"],"迷你进度条":["42.25"],"只在播放器失去焦点后且正在播放时出现":["42.25"],"挂载模式":["42.26"],"假如你希望在播放器挂载前":["42.26"],"就提前渲染好播放器所需的":["42.26"],"时有用":["42.26"],"你可以通过":["42.26"],"在移动端是否使用":["42.27"],"类型":["42.32"],"描述":["42.32","42.33","42.35","42.36"],"默认画质":["42.32"],"画质名字":["42.32"],"高亮时间":["42.33"],"高亮文本":["42.33"],"预览图地址":["42.35"],"预览图数量":["42.35"],"column":["42.35"],"字幕地址":["42.36"],"字幕类型":["42.36"],"可选":["42.36"],"preload":["42.37"],"更多视频属性":["42.37"],"这些属性将直接写入视频元素里":["42.37"],"字符串和":["42.38"],"htmlelement":["42.38"],"一起使用":["42.39"],"默认视频的格式就是视频地址的后缀":["42.39"],"如":["42.39"],"m3u8":["42.39"],"mkv":["42.39"],"ts":["42.39"],"但有时候视频地地址没有正确的后缀":["42.39"],"进行匹配":["42.40"],"把视频解码权交给第三方程序进行处理":["42.40"],"处理的函数能接收三个参数":["42.40"],"视频":["42.40"],"dom":["42.40"],"默认显示语言":["42.41"],"目前支持":["42.41"],"是否在移动端显示一个":["42.43"],"锁定按钮":["42.43"],"用于隐藏底部":["42.43"],"控制栏":["42.43"],"是否在移动端添加长按视频快进功能":["42.44"],"是否在移动端的网页全屏时":["42.46"],"根据视频尺寸和视口尺寸":["42.46"],"旋转播放器":["42.46"],"是否显示":["42.47"],"当前只有部分浏览器支持该功能":["42.47"]},{"0":["9.5","29.0"],"1":["9.5","15.8","19.5","20.7","29.0"],"2":["20.6","30.1","42.1"],"3":["20.7"],"4":["30.7","30.10","30.19","30.30","30.31","30.42","41.1","42.10","42.19","42.30","42.31","42.38","42.45","42.48"],"5":["9.5","19.5","29.0","30.45","42.45"],"6":["2.1","2.3","2.4","2.5","2.6","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.27","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","12.1","12.3","12.4","12.5","12.6","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.27","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","12.40"],"7":["2.20","2.22","2.23","2.25","2.26","5.15","5.26","5.31","12.20","12.22","12.23","12.25","12.26","30.4","42.4","42.38"],"8":["2.18","2.21","5.1","5.13","5.20","5.28","5.29","5.30","5.32","5.33","5.34","5.41","12.18","12.21","15.30","28.5","40.5","42.36"],"9":["2.29","2.30","5.11","5.19","5.21","5.22","5.35","12.29","12.30","15.11","15.19","15.21","15.35","30.4","30.42","42.4"],"10":["2.7","2.19","2.24","7.5","9.5","12.7","12.19","12.24","17.5","19.5"],"11":["5.2","5.3","5.20","5.31","15.2","20.8","31.8"],"12":["30.30","42.30"],"15":["30.34","42.34"],"16":["30.31","42.31"],"17":["4.0","14.0"],"18":["21.0","32.0"],"19":["22.0","33.0"],"21":["21.0","23.0","34.0"],"22":["22.0"],"23":["32.0"],"24":["23.0","33.0"],"25":["21.0"],"26":["22.0","34.0"],"28":["23.0"],"250":["9.2","19.2"],"是指挂载在":["0.0","1.0","5.0","10.0"],"js":["0.1","0.3","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.14","0.15","1.1","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.20","2.21","2.22","2.23","2.25","2.26","2.27","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","3.2","3.4","3.5","3.6","3.7","3.8","3.9","3.16","3.27","3.28","3.29","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.11","5.12","5.13","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.22","5.24","5.25","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.35","5.38","5.41","9.1","9.4","9.5","10.1","10.3","10.5","10.6","10.7","10.8","10.9","10.10","10.11","10.12","10.14","10.15","11.1","12.1","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.20","12.21","12.22","12.23","12.25","12.26","12.27","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","12.40","13.2","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.27","13.28","13.29","15.1","15.2","15.3","15.11","15.19","15.21","15.26","15.30","15.35","19.5","25.4","25.5","29.0","30.4","30.7","30.10","30.19","30.30","30.34","30.42","36.4","36.5","37.6","37.8","37.11","37.13","37.14","41.0","42.1","42.7","42.10","42.19","42.30","42.33","42.34","42.38","42.45","42.48"],"var":["0.1","0.3","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.13","0.14","0.15","0.16","2.1","2.2","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.30","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","5.2","5.3","5.11","5.13","5.15","5.19","5.21","5.22","5.26","5.28","5.29","5.30","5.31","5.32","5.33","5.34","5.35","5.41","9.4","10.1","10.3","10.5","10.6","10.7","10.8","10.9","10.10","10.11","10.12","10.13","10.14","10.15","10.16","12.1","12.2","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.30","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","12.40","15.2","15.11","15.19","15.21","15.30","25.5","29.4","30.1","30.4","30.7","30.10","30.19","30.30","30.31","30.42","30.45","36.5","37.7","37.8","37.9","37.10","37.11","37.12","37.14","41.1","42.1","42.4","42.10","42.19","42.30","42.31","42.38","42.42","42.45"],"art":["0.1","0.2","0.5","0.6","0.7","0.10","0.13","0.15","0.16","2.2","2.3","2.7","2.12","2.13","2.17","2.18","2.19","2.21","2.22","2.23","2.24","2.25","2.26","2.28","2.29","2.30","2.31","2.39","5.15","5.19","5.21","5.22","5.26","5.30","5.31","5.41","8.4","9.4","10.1","10.2","10.5","10.6","10.7","10.8","10.9","10.10","10.13","10.15","10.16","12.2","12.3","12.7","12.12","12.13","12.17","12.18","12.19","12.21","12.22","12.23","12.24","12.25","12.26","12.28","12.29","12.30","12.31","12.39","15.15","15.19","15.21","15.30","15.41","18.4","20.7","21.0","23.0","28.7","29.4","30.1","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.42","30.45","31.5","32.0","34.0","37.7","37.9","37.10","37.11","37.12","40.7","41.1","41.4","42.1","42.4","42.19","42.28","42.29","42.30","42.31","42.34","42.38","42.40","42.42","42.45"],"new":["0.1","0.2","0.6","0.7","0.13","0.15","0.16","2.2","2.7","2.18","2.19","2.21","2.24","2.28","2.29","2.30","2.31","5.11","5.22","5.30","5.41","5.42","8.2","8.4","8.5","10.1","10.2","10.6","10.7","10.8","10.9","10.10","10.13","10.15","10.16","12.2","12.7","12.18","12.19","12.21","12.24","12.28","12.29","12.30","12.31","15.11","15.15","15.19","15.21","15.30","15.41","18.2","18.4","18.5","19.2","20.5","28.7","29.4","30.1","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.42","30.45","31.5","37.5","37.7","37.9","37.10","37.11","37.12","40.7","41.4","42.1","42.4","42.28","42.29","42.30","42.31","42.42"],"artplayer":["0.2","0.3","0.7","0.13","0.15","0.16","2.2","2.24","2.28","2.29","2.30","2.31","3.4","3.5","3.6","3.28","3.29","5.11","5.22","5.30","5.42","8.2","8.3","8.4","8.5","9.6","10.2","10.3","10.7","10.9","10.10","10.13","10.15","10.16","12.2","12.24","12.28","12.29","12.30","12.31","13.4","13.5","13.6","13.28","13.29","15.11","15.15","15.19","15.30","15.41","18.2","18.3","18.4","18.5","19.2","19.6","20.1","20.7","24.2","24.3","25.2","25.3","26.3","27.3","28.3","28.4","28.7","29.0","29.3","30.7","30.10","30.19","30.28","30.29","30.30","30.31","30.42","30.45","31.1","35.2","35.3","36.2","36.3","37.2","37.3","37.11","38.3","39.3","40.3","40.4","40.7","41.0","41.3","42.4","42.26","42.28","42.29","42.30","42.31","42.42"],"container":["0.2","0.3","0.13","0.16","2.2","2.28","2.31","5.11","5.30","5.42","6.2","6.3","7.4","8.2","8.3","8.4","8.5","9.6","10.2","10.3","10.10","10.13","10.15","10.16","12.2","12.28","12.31","15.11","15.15","15.19","15.30","15.41","16.2","16.3","17.4","18.2","18.3","18.4","18.5","19.2","19.6","20.5","28.7","29.3","29.4","30.7","30.10","30.19","30.28","30.29","30.31","30.42","30.45","31.5","37.5","37.9","37.10","37.12","40.7","41.3","41.4","42.2","42.4","42.28","42.29","42.31","42.42"],"app":["0.2","0.4","0.13","2.31","5.42","6.2","6.3","6.4","6.5","7.3","7.4","8.2","8.3","8.4","8.5","9.6","10.2","10.4","10.13","12.31","15.11","15.15","15.19","15.41","16.2","16.3","16.4","16.5","17.3","17.4","18.2","18.3","18.4","18.5","19.2","19.6","20.4","28.7","30.1","30.19","30.28","30.29","30.45","31.3","37.5","37.9","37.10","40.7","41.4","42.2","42.4","42.28","42.29","42.42"],"url":["0.2","0.4","5.42","6.2","6.3","6.4","6.5","7.3","7.4","8.2","8.3","8.5","9.2","9.6","9.7","10.2","10.4","15.15","15.41","16.2","16.3","16.4","16.5","17.3","17.4","18.2","18.3","18.5","19.2","19.6","19.7","21.0","22.0","23.0","28.7","30.28","30.29","30.32","30.45","31.3","32.0","33.0","34.0","37.5","37.10","40.7","42.28","42.29","42.32","42.40","42.42"],"classname":["0.3","1.11","3.14","3.20","3.23","3.24","3.27","3.30","5.4","5.14","5.27","5.36","5.37","5.38","5.39","9.4","10.3","11.11","13.14","13.20","13.23","13.24","13.27","13.30","15.5","15.6","15.7","15.8","15.9","15.12","15.13","15.16","15.20","15.22","15.23","15.24","15.27","15.28","15.29","15.31","15.32","15.33","15.34","15.38","15.40","19.4","30.4","30.9","30.13","30.17","30.33","30.38","30.41","30.48","42.6","42.8","42.12","42.14","42.15","42.16","42.18","42.20","42.21","42.22","42.23","42.24","42.25","42.26","42.27","42.32","42.33","42.37","42.39","42.41","42.43","42.46","42.47"],"run":["0.3","0.8","0.9","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.11","1.12","3.1","3.3","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.22","3.23","3.24","3.25","3.26","3.27","3.30","3.32","5.4","5.5","5.6","5.8","5.10","5.12","5.14","5.23","5.27","5.36","5.37","5.38","5.39","5.40","9.4","10.3","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","13.1","13.3","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.19","13.20","13.22","13.23","13.24","13.25","13.26","13.27","13.30","13.32","15.5","15.6","15.7","15.8","15.9","15.13","15.16","15.20","15.22","15.23","15.24","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.34","15.38","15.40","19.4","30.4","30.9","30.13","30.17","30.33","30.38","30.48","42.3","42.6","42.8","42.9","42.12","42.13","42.14","42.15","42.16","42.17","42.18","42.20","42.21","42.22","42.23","42.24","42.25","42.27","42.32","42.33","42.37","42.39","42.41","42.43","42.44","42.46","42.47"],"code":["0.3","0.8","0.9","0.10","0.11","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.12","3.1","3.3","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.30","3.31","3.32","5.4","5.5","5.6","5.7","5.8","5.9","5.10","5.12","5.14","5.17","5.18","5.23","5.27","5.36","5.37","5.38","5.39","5.40","9.1","9.4","10.3","10.11","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.12","13.1","13.3","13.7","13.8","13.9","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.19","13.20","13.21","13.22","13.23","13.24","13.25","13.26","13.27","13.30","13.31","13.32","15.3","15.5","15.6","15.7","15.8","15.9","15.11","15.13","15.16","15.20","15.21","15.24","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.34","15.40","19.4","28.13","29.0","29.2","30.4","30.17","30.33","30.38","30.48","40.13","42.3","42.5","42.7","42.8","42.9","42.12","42.13","42.17","42.18","42.20","42.21","42.22","42.23","42.24","42.25","42.27","42.32","42.33","42.37","42.39","42.41","42.43","42.44","42.46","42.47"],"document":["0.3","10.3","20.0","30.1"],"queryselector":["0.3","10.3"],"assets":["0.4","5.42","6.2","6.3","6.4","6.5","7.3","7.4","7.5","9.2","9.6","9.7","10.4","15.15","15.41","16.2","16.3","16.4","16.5","17.3","17.4","17.5","19.2","19.6","19.7","30.29","30.45","37.5","37.10","42.2","42.29","42.42"],"sample":["0.4","5.42","6.2","6.3","6.4","6.5","7.3","7.4","7.5","9.2","9.7","10.4","15.41","16.2","16.3","16.4","16.5","17.3","17.4","17.5","19.2","19.7","30.29","37.5","42.2","42.29","42.42"],"video":["0.4","5.42","6.2","6.3","6.4","6.5","7.3","7.5","8.2","8.3","8.5","9.2","9.7","10.4","16.2","16.3","16.4","16.5","17.3","17.5","18.2","18.3","18.5","19.2","19.7","20.3","21.0","22.0","24.4","30.29","30.46","31.3","32.0","33.0","35.4","37.5","42.2"],"mp4":["0.4","6.3","6.4","6.5","7.3","7.5","8.2","8.3","8.5","9.2","9.3","9.7","9.8","10.4","16.3","16.4","16.5","17.3","17.5","18.2","18.3","18.5","19.2","19.3","19.7","19.8","20.3","24.4","30.2","31.3","35.4","42.2"],"test":["0.4","10.4"],"foo":["0.4","10.4"],"bar":["0.4","10.4","30.6","30.8","30.17"],"const":["0.4","9.5","10.4","19.5"],"console":["1.1","2.0","11.1","12.0","37.15"],"info":["2.0","12.0","37.15"],"只监听一次事件":["2.0","12.0"],"但估计没有足够的数据来支撑播放到结束":["2.41","12.41"],"渲染完成":["2.43","12.43"],"属性的值改变时触发":["2.44","12.44"],"当这个":["2.45","12.45"],"因为":["2.46","12.46"],"或者资源类型不是受支持的媒体格式":["2.47","12.47"],"中的首帧已经完成加载":["2.48","12.48"],"播放准备开始":["2.52","12.52"],"seek":["2.55","2.56","12.55","12.56","15.14"],"user":["2.57","12.57"],"属性指定的时间发生变化":["2.59","12.59"],"播放已停止":["2.61","12.61"],"也是指挂载在":["3.0","13.0"],"构造函数":["3.0","11.0","13.0"],"div":["3.30","5.4","5.36","5.37","5.39","9.4","13.30","15.5","15.6","15.8","15.9","15.12","15.13","15.16","15.17","15.18","15.20","15.22","15.23","15.24","15.27","15.28","15.29","15.31","15.32","15.33","15.34","15.38","15.40","19.4","30.3","30.4","30.9","30.13","30.17","30.24","30.33","30.38","30.41","30.48","42.6","42.12","42.14","42.15","42.16","42.18","42.20","42.22","42.23","42.24","42.26","42.27","42.32","42.33","42.37","42.39","42.40","42.41","42.43","42.46","42.47"],"组件唯一名称":["6.1","8.1"],"用于标记类名":["6.1","8.1"],"index":["6.1","7.5","8.1","16.1","17.5","18.1","25.4","25.5","28.11","36.4","36.5","37.6","37.8","37.11","37.13","40.11"],"number":["6.1","7.1","8.1","16.1","18.1","30.35"],"contextmenu":["6.4","6.5","16.4","16.5"],"name":["6.5","7.5","9.8","16.5","17.5","19.8","30.32"],"组件索引":["7.1"],"用于显示的优先级":["7.1"],"html":["7.1","7.2","9.3","9.8","15.4","17.1","17.2","19.3","19.8","20.3","24.4","28.9","30.26","30.32","35.4","40.9"],"element":["7.1","17.1"],"position":["7.2","7.5","17.2","17.5"],"left":["7.2","17.2"],"tooltip":["7.2","9.8","17.2","19.4","19.5","19.8"],"style":["7.2","9.2","17.1","17.2","30.36","42.36"],"color":["7.2","17.2"],"red":["7.2","17.2"],"click":["7.2","17.2"],"function":["7.2","17.2","21.0","22.0","23.0","30.15","30.16","30.34","30.40","30.44","31.7","32.0","33.0","34.0","42.34"],"args":["7.2","17.2"],"controls":["7.3","7.5","17.3","17.5"],"add":["7.3"],"button1":["7.5","17.5"],"png":["8.4","18.4","30.28","42.28"],"setting":["9.2","9.3","9.7","9.8","15.25","19.2","19.3","19.7","19.8","30.14","30.15","30.16"],"true":["9.2","9.3","9.7","9.8","15.25","15.31","19.2","19.3","19.7","19.8","24.4","35.4","37.4"],"settings":["9.2","9.3","9.8","19.2","19.3","19.8","30.24"],"subtitle":["9.2","19.2"],"01":["9.2","9.3","19.2"],"default":["9.2"],"span":["9.2"],"multi":["9.3","19.3"],"level":["9.3","19.3"],"selector":["9.3","19.3"],"提示文本":["9.4"],"value":["9.5","30.11"],"min":["9.5","21.0","22.0","32.0","33.0"],"flip":["9.7","19.1","19.7"],"slider":["9.8","19.8"],"5x":["9.8","19.8"],"icon":["9.8","19.8"],"的":["11.0","42.11"],"refers":["15.0"],"to":["15.0","15.14","15.25","15.31","20.8","28.7","29.1","31.3","40.7"],"remove":["15.4"],"s":["15.4"],"after":["15.4","15.25"],"seconds":["15.6"],"but":["15.10","15.14","30.39"],"some":["15.10","30.47"],"optimization":["15.10"],"operations":["15.10"],"will":["15.10","15.14","15.25","15.31","30.8","30.15","30.16"],"be":["15.10","15.31","30.37"],"performed":["15.10"],"with":["15.12"],"previous":["15.12"],"playback":["15.12","30.8"],"progress":["15.12","30.6"],"is":["15.14","15.22","15.36","15.37","30.2","30.5"],"similar":["15.14"],"it":["15.14","15.25","15.38","30.12"],"frame":["15.16","15.17","15.18"],"and":["15.17","15.18","30.5","30.6","30.8","30.25","30.46"],"return":["15.17","15.18","20.5"],"a":["15.17","15.18","30.13","30.40"],"promise":["15.17","15.18"],"web":["15.20","30.23","37.4"],"page":["15.20","30.21","30.23"],"before":["15.22","30.26"],"played":["15.22","30.5"],"mode":["15.23","30.27"],"horizontal":["15.27"],"vertical":["15.27"],"executed":["15.31"],"once":["15.31"],"dynamically":["15.32"],"often":["15.36","15.37","30.11"],"used":["15.36","15.37","16.1","18.1","30.3","30.6"],"in":["15.36","15.37","30.14","30.15","30.16","30.18","30.22","30.23","30.24","30.26"],"conjunction":["15.36","15.37"],"also":["15.38"],"automatically":["15.38","30.11","30.12"],"destroy":["15.38"],"destroyed":["15.38"],"queried":["15.39"],"object":["15.39","17.1","42.11"],"limited":["15.39"],"current":["15.39","20.5","31.5"],"player":["15.39","15.40","30.5","30.25","30.26"],"mark":["16.1","18.1"],"class":["16.1","18.1"],"for":["17.1","30.3","30.40"],"display":["17.1"],"priority":["17.1"],"dom":["17.1"],"of":["17.1","20.6","30.18"],"built":["19.1"],"items":["19.1"],"playbackrate":["19.1"],"aspectratio":["19.1"],"toggle":["19.4"],"event":["19.4","28.12","30.4","40.12"],"prompt":["19.4","19.5"],"text":["19.4","19.5","30.33"],"change":["19.5"],"has":["20.0"],"not":["20.0","30.2","30.5"],"head":["20.3"],"title":["20.3"],"demo":["20.3"],"artref":["20.4","31.4"],"if":["20.5","23.0","31.5","34.0"],"typeof":["20.5","31.5"],"import":["20.6","20.8","29.1","31.8","41.2"],"type":["20.6","31.6"],"options":["20.6"],"individually":["20.6"],"let":["20.7"],"null":["20.7"],"parameters":["20.7"],"legacy":["20.8"],"file":["20.8"],"up":["20.8"],"ie":["20.8","31.8"],"plaympd":["21.0","32.0"],"playflv":["22.0","33.0"],"playm3u8":["23.0","34.0"],"plugin":["24.2","24.3","25.2","25.3","26.2","26.3","27.2","27.3","28.3","28.4","35.2","35.3","36.2","36.3","37.2","37.3","37.11","38.2","38.3","39.2","39.3","40.3","40.4"],"ads":["24.2","35.2"],"npm":["24.3","25.3","26.3","27.3","28.4","35.3","36.3","37.3","38.3","39.3","40.4"],"autosize":["24.4","35.4"],"fullscreen":["24.4","35.4"],"fullscreenweb":["24.4","35.4"],"plugins":["24.4","35.4"],"artplayerpluginads":["24.4","35.4"],"html广告":["24.4","35.4"],"假如是视频广告则忽略该值":["24.4","35.4"],"control":["25.2","25.4","25.5","36.2","36.4","36.5"],"dash":["26.2","26.3","38.2","38.3"],"quality":["26.2","26.3","27.2","27.3","38.2","38.3","39.2","39.3"],"hls":["27.2","27.3","39.2","39.3"],"iframe":["28.1","28.3","28.5","28.8","40.1","40.3","40.5","40.8"],"charset":["28.5","40.5"],"utf":["28.5","40.5","42.36"],"body":["28.5","40.5"],"id":["28.5","29.2","40.5"],"path":["28.7","31.3","40.7"],"接收来自":["28.8","40.8"],"无法与":["28.9","40.9"],"提示":["28.10","40.10"],"message":["28.12","40.12"],"即可":["28.13","40.13"],"group":["28.13","40.13"],"doctype":["28.13","40.13"],"core":["29.0"],"no":["29.1"],"need":["29.1"],"manually":["29.2"],"imported":["29.2"],"languages":["29.2"],"cs":["29.2"],"es":["29.2"],"fa":["29.2"],"fr":["29.2"],"pl":["29.2"],"ru":["29.2"],"zh":["29.2","30.41"],"tw":["29.2"],"sometimes":["30.2","30.39"],"the":["30.2","30.25","30.37","30.43","30.44"],"known":["30.2"],"so":["30.2","30.11"],"quickly":["30.2"],"at":["30.2","30.21"],"this":["30.2","30.11"],"only":["30.3","30.14","30.47"],"autoplayback":["30.3"],"like":["30.4"],"ready":["30.4"],"initialized":["30.5"],"on":["30.6","30.27","30.44","37.15"],"time":["30.8","30.21"],"black":["30.11"],"edges":["30.11"],"appear":["30.11","30.15","30.16"],"can":["30.11","30.21"],"viewport":["30.12","30.46"],"enters":["30.12"],"currently":["30.14","30.47"],"appears":["30.14","30.24"],"bottom":["30.18","30.20","30.22"],"switch":["30.20"],"button":["30.20","30.22","30.23"],"same":["30.21"],"full":["30.22"],"screen":["30.22","30.23"],"loses":["30.25"],"focus":["30.25"],"required":["30.26"],"by":["30.26"],"advance":["30.26"],"mobile":["30.27","30.43"],"end":["30.27","30.43"],"layer":["30.28","42.28"],"boolean":["30.32"],"string":["30.32","30.33"],"myplugin":["30.34","42.34"],"column":["30.35"],"width":["30.35","42.35"],"encoding":["30.36","42.36"],"directly":["30.37"],"written":["30.37"],"into":["30.37"],"htmlelement":["30.38"],"suffix":["30.39"],"address":["30.39"],"such":["30.39"],"as":["30.39"],"m3u8":["30.39"],"mkv":["30.39"],"ts":["30.39"],"does":["30.39"],"third":["30.40"],"party":["30.40"],"program":["30.40"],"processing":["30.40"],"supports":["30.41"],"en":["30.41"],"cn":["30.41","42.41"],"hide":["30.43"],"fast":["30.44"],"forward":["30.44"],"size":["30.46"],"when":["30.46"],"browsers":["30.47"],"support":["30.47"],"install":["31.1"],"ref":["31.4"],"option":["31.6"],"param":["31.7"],"getinstance":["31.7"],"可以兼容到":["31.8"],"from":["31.8","41.2"],"danmuku":["37.2","37.6","37.8"],"滚动":["37.4"],"静止":["37.4"],"margin":["37.4"],"弹幕上下边距":["37.4"],"antioverlap":["37.4"],"是否防重叠":["37.4"],"useworker":["37.4"],"是否使用":["37.4"],"worker":["37.4"],"emit":["37.15"],"danmu":["37.15"],"新增弹幕":["37.15"],"loaded":["37.15"],"版本开始":["41.0"],"核心代码除了包含":["41.0"],"zhtw":["41.2"],"高亮元素":["42.6"],"上":["42.6"],"类似":["42.11"],"css":["42.11"],"fit":["42.11"],"里":["42.14","42.15","42.16","42.24"],"访问到播放器所需的":["42.26"],"画质地址":["42.32"],"预览图列数":["42.35"],"预览图宽度":["42.35"],"height":["42.35"],"预览图高度":["42.35"],"字幕样式":["42.36"],"字幕编码":["42.36"],"默认":["42.36"],"escape":["42.36"],"所以需要特别指明":["42.39"],"元素":["42.40"],"视频地址":["42.40"],"当前实例":["42.40"]},{"0":["19.5"],"1":["3.28","9.2","13.28","19.2"],"2":["3.28","9.5","13.28","19.5","42.3"],"3":["9.5"],"4":["9.1","29.1","30.17","30.33","30.38","30.48","31.7","42.5","42.7","42.8","42.9","42.13","42.17","42.21","42.24","42.25","42.32","42.33","42.37","42.39","42.41","42.44"],"5":["28.7","40.7"],"6":["5.39","5.40","31.7"],"7":["5.4","5.5","5.6","5.9","5.16","5.17","5.18","5.23","5.36","5.37","15.5","15.6","15.9","15.26","15.31","25.4","30.38","36.4","42.37"],"8":["5.8","5.14","5.24","5.25","5.27","5.38","15.1","15.8","15.13","15.20","15.24","15.27","15.28","15.29","15.32","15.33","15.34","15.38","20.3","28.13","30.36","40.13"],"9":["5.10","5.12","15.12","15.22"],"10":["5.7","5.38","7.3","7.4","15.7","15.11","15.38","17.3","17.4"],"11":["15.3","15.20","15.31"],"14":["42.32"],"22":["9.8","19.8"],"25":["30.33","42.33"],"40":["3.6","13.6"],"50":["37.4"],"100":["3.9","13.9"],"111":["37.5"],"150":["9.3","19.3"],"300":["3.4","3.5","13.4","13.5"],"500":["3.7","3.8","3.16","13.7","13.8","13.16"],"实例":["0.0","5.0","10.0"],"artplayer":["0.1","0.5","0.6","0.8","0.9","0.10","0.11","0.12","0.14","1.1","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.25","2.26","2.27","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","3.1","3.2","3.3","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","3.16","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.30","3.31","3.32","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.19","5.20","5.21","5.24","5.26","5.27","5.28","5.29","5.31","5.32","5.33","5.34","5.35","5.38","5.41","9.1","9.4","10.1","10.5","10.6","10.8","10.11","10.12","10.14","11.1","12.1","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.25","12.26","12.27","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","12.40","13.1","13.2","13.3","13.7","13.8","13.9","13.10","13.11","13.12","13.13","13.14","13.15","13.16","13.17","13.18","13.19","13.20","13.21","13.22","13.23","13.24","13.25","13.26","13.27","13.30","13.31","13.32","15.2","15.3","15.21","15.26","15.31","15.35","15.38","19.4","20.2","28.13","30.4","30.17","30.38","31.2","40.13","41.1","42.10","42.19","42.33","42.38","42.39","42.45","42.48"],"container":["0.1","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.14","0.15","2.3","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.29","2.30","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","5.2","5.3","5.8","5.10","5.12","5.13","5.15","5.19","5.20","5.21","5.22","5.26","5.28","5.29","5.31","5.32","5.33","5.34","5.35","5.38","5.41","9.4","10.1","10.5","10.6","10.7","10.8","10.9","10.11","10.12","10.14","12.3","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.29","12.30","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","12.40","15.2","15.21","15.26","15.38","19.4","25.5","30.4","30.17","30.30","30.38","31.6","36.5","37.7","37.8","37.11","37.13","37.14","41.1","41.2","42.10","42.19","42.30","42.33","42.38","42.45","42.48"],"app":["0.1","0.3","0.5","0.6","0.7","0.8","0.9","0.10","0.15","0.16","2.2","2.7","2.18","2.19","2.21","2.24","2.28","2.29","2.30","5.11","5.15","5.19","5.21","5.22","5.26","5.30","5.31","5.32","5.41","9.4","10.1","10.3","10.5","10.6","10.7","10.8","10.9","10.10","10.15","10.16","12.2","12.7","12.18","12.19","12.21","12.24","12.28","12.29","12.30","15.21","15.30","15.31","19.4","25.5","29.3","29.4","30.4","30.7","30.10","30.30","30.31","30.42","31.4","36.5","37.7","37.8","37.11","37.12","37.14","41.3","42.1","42.19","42.30","42.31","42.38","42.45"],"assets":["0.2","0.3","0.6","0.7","0.10","0.13","0.15","0.16","2.2","2.28","2.31","5.11","5.22","5.30","5.41","9.4","10.2","10.3","10.6","10.7","10.8","10.9","10.10","10.13","10.15","10.16","12.2","12.28","12.31","15.11","15.19","15.21","15.30","19.4","25.5","29.3","29.4","30.1","30.4","30.7","30.10","30.19","30.30","30.31","30.42","36.5","37.7","37.8","37.9","37.11","37.12","41.3","41.4","42.1","42.4","42.30","42.31"],"sample":["0.2","0.3","0.6","0.13","0.15","0.16","2.2","2.28","2.31","5.11","5.22","5.30","9.4","9.6","10.2","10.3","10.6","10.9","10.10","10.13","10.15","10.16","12.2","12.28","12.31","15.11","15.15","15.19","15.21","15.30","19.4","19.6","29.4","30.1","30.4","30.7","30.10","30.19","30.30","30.31","30.42","30.45","37.7","37.9","37.10","37.11","37.12","41.4","42.4","42.30","42.31"],"video":["0.2","0.3","0.13","0.15","0.16","2.31","5.11","5.30","7.4","8.4","9.4","9.6","10.2","10.3","10.10","10.13","10.15","10.16","12.31","15.19","15.21","15.30","15.41","17.4","18.4","19.6","28.7","29.4","30.1","30.7","30.10","30.19","30.28","30.30","30.31","30.42","30.45","37.7","37.9","37.10","37.11","37.12","40.7","41.4","42.4","42.28","42.29","42.31","42.42"],"mp4":["0.2","0.13","0.16","2.31","5.11","5.30","5.42","6.2","7.4","8.4","9.4","9.6","10.2","10.13","10.15","10.16","12.31","15.11","15.15","15.19","15.21","15.30","15.41","16.2","17.4","18.4","19.6","28.7","30.1","30.4","30.7","30.10","30.19","30.28","30.29","30.31","30.42","30.45","37.5","37.9","37.10","37.11","37.12","40.7","41.4","42.4","42.28","42.29","42.42"],"console":["0.2","0.4","1.6","7.2","10.2","10.4","11.6","15.15","15.30","17.2","28.12","30.34","40.12","42.34"],"info":["0.2","0.4","1.1","7.2","10.2","10.4","11.1","17.2","28.12","30.34","40.12","42.34"],"art":["0.3","0.8","0.9","0.11","0.12","0.14","2.1","2.4","2.5","2.6","2.8","2.9","2.10","2.11","2.14","2.15","2.16","2.20","2.27","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.40","3.4","3.5","3.6","3.29","5.1","5.2","5.3","5.5","5.6","5.7","5.8","5.9","5.13","5.14","5.16","5.17","5.18","5.20","5.23","5.24","5.25","5.27","5.28","5.29","5.32","5.33","5.34","5.35","9.1","10.3","10.11","10.12","10.14","12.1","12.4","12.5","12.6","12.8","12.9","12.10","12.11","12.14","12.15","12.16","12.20","12.27","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.40","13.4","13.5","13.6","13.29","15.1","15.2","15.3","15.7","15.8","15.9","15.13","15.22","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.34","15.35","19.4","22.0","25.5","30.4","30.17","30.33","30.34","30.38","30.48","33.0","36.5","37.6","37.8","37.13","37.14","41.2","42.5","42.7","42.10","42.17","42.32","42.33","42.39","42.48"],"new":["0.3","0.5","0.8","0.9","0.10","0.11","0.12","0.14","2.1","2.3","2.4","2.5","2.6","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.20","2.22","2.23","2.25","2.26","2.27","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","3.4","3.29","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.15","5.16","5.17","5.18","5.19","5.20","5.21","5.24","5.25","5.26","5.27","5.28","5.29","5.31","5.32","5.33","5.34","5.35","9.1","9.4","10.3","10.5","10.11","10.12","10.14","12.1","12.3","12.4","12.5","12.6","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.20","12.22","12.23","12.25","12.26","12.27","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","12.40","13.4","13.29","15.1","15.2","15.3","15.7","15.8","15.22","15.26","15.28","15.29","15.31","15.32","15.33","15.34","15.35","19.4","23.0","25.5","30.4","30.17","30.33","30.38","34.0","36.5","37.6","37.8","37.13","37.14","41.1","41.2","42.7","42.10","42.19","42.33","42.38","42.39","42.45","42.48"],"url":["0.3","0.6","0.7","0.9","0.10","0.13","0.15","0.16","2.2","2.19","2.24","2.28","2.29","2.30","2.31","5.19","5.22","5.30","5.31","5.41","8.4","9.4","10.3","10.6","10.7","10.8","10.9","10.10","10.13","10.15","10.16","12.2","12.19","12.24","12.28","12.29","12.30","12.31","15.19","15.21","15.30","15.31","18.4","19.4","25.5","29.3","29.4","30.1","30.4","30.7","30.10","30.19","30.30","30.31","30.42","36.5","37.7","37.8","37.9","37.11","37.12","41.3","41.4","42.1","42.4","42.30","42.31","42.38","42.45"],"function":["0.13","6.5","10.13","16.5","17.1","20.7","30.47","42.36"],"构造函数":["1.0"],"var":["1.1","3.4","3.5","3.6","3.16","3.29","5.1","5.5","5.6","5.7","5.8","5.9","5.10","5.12","5.14","5.16","5.17","5.18","5.20","5.23","5.24","5.25","5.27","5.36","5.37","5.38","5.40","9.1","11.1","13.4","13.5","13.6","13.16","13.29","15.1","15.3","15.7","15.8","15.9","15.13","15.20","15.22","15.24","15.26","15.27","15.28","15.29","15.31","15.32","15.33","15.34","15.35","15.38","19.4","25.4","29.1","30.17","30.33","30.38","30.48","36.4","37.6","37.13","41.2","42.3","42.5","42.7","42.17","42.24","42.32","42.33","42.39","42.48"],"js":["1.6","3.1","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.30","3.31","3.32","5.4","5.5","5.6","5.14","5.23","5.27","5.36","5.37","5.39","5.40","11.6","13.1","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.19","13.20","13.21","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","15.5","15.6","15.7","15.8","15.9","15.10","15.12","15.13","15.16","15.17","15.18","15.20","15.22","15.23","15.24","15.27","15.28","15.29","15.31","15.32","15.33","15.34","15.38","15.40","19.4","29.1","30.17","30.33","30.38","30.41","30.48","42.3","42.5","42.8","42.9","42.12","42.13","42.14","42.15","42.16","42.17","42.18","42.20","42.21","42.22","42.23","42.24","42.25","42.26","42.27","42.32","42.37","42.39","42.41","42.43","42.44","42.46","42.47"],"code":["1.11","9.5","11.11","15.10","15.12","15.14","15.17","15.18","15.22","15.23","15.38","19.1","20.8","30.3","30.5","30.9","30.13","30.24","30.27","30.32","30.36","30.37","30.41","31.8","42.6","42.11","42.14","42.15","42.16","42.26","42.35","42.40"],"once":["2.0","12.0","15.25"],"subtitle":["2.31","7.2","7.5","12.31","17.2","17.5"],"不必停下来进一步缓冲内容":["2.41","12.41"],"media":["2.45","2.46","12.45","12.46"],"已经加载完成":["2.45","12.45"],"操作完成":["2.55","12.55"],"操作开始":["2.56","12.56"],"agent":["2.57","12.57"],"的":["3.0","13.0"],"false":["3.2","13.2","20.5","31.5","37.4"],"add":["4.0","6.3","8.3","14.0","24.2","25.2","26.2","27.2","28.3","35.2","36.2","37.2","38.2","39.2","40.3"],"例如我想写一个在视频暂停后":["4.0","14.0"],"显示一个图片广告的插件":["4.0","14.0"],"on":["5.11","15.11","15.15","15.30"],"document":["5.38","15.38","42.1"],"queryselector":["5.38","15.38","30.1","42.1"],"default":["5.42","7.5","15.4","15.41","17.5","19.2","31.7"],"true":["5.42","7.5","9.6","15.4","15.41","17.5","19.6","30.4","30.10","30.29","30.45","37.5","42.4","42.29","42.36"],"html":["5.42","6.1","6.2","6.3","6.4","6.5","7.3","7.5","8.1","8.2","8.3","8.5","9.7","15.19","15.41","16.1","16.2","16.3","16.4","16.5","17.3","17.5","18.1","18.2","18.3","18.5","19.7","28.11","30.28","30.29","30.36","31.3","40.11","42.28","42.29","42.36"],"sd":["5.42","15.41"],"480p":["5.42","15.41"],"组件索引":["6.1","8.1"],"用于显示的优先级":["6.1","8.1"],"contextmenu":["6.2","6.3","16.2","16.3","30.14","30.15","30.16"],"name":["6.2","6.3","6.4","7.3","7.4","8.2","8.3","8.4","8.5","9.7","16.2","16.3","16.4","17.3","17.4","18.2","18.3","18.4","18.5","19.7","30.28","30.34","42.28","42.34"],"your":["6.2","6.3","6.4","6.5","7.3","16.2","16.3","16.4","16.5","17.3","30.45","42.42"],"menu":["6.2","6.3","6.4","6.5","16.2","16.3","16.4","16.5"],"click":["6.4","6.5","16.4","16.5","17.1"],"args":["6.5","16.5"],"组件的":["7.1"],"dom":["7.1","30.40"],"元素":["7.1"],"style":["7.1","8.2","8.3","8.5","18.2","18.3","18.5","19.2","30.28"],"object":["7.1"],"mounted":["7.2","17.1","17.2","30.26"],"button1":["7.3","7.4","17.3","17.4"],"index":["7.3","7.4","17.3","17.4"],"position":["7.3","15.19","17.3"],"left":["7.3","17.3"],"controls":["7.4","15.19","15.21","17.4"],"right":["7.5","15.19","17.5"],"selector":["7.5","17.5","30.29","42.29"],"01":["7.5","17.5","19.3"],"layers":["8.2","8.3","8.4","8.5","18.2","18.3","18.4","18.5"],"potser":["8.2","8.3","8.5","18.2","18.3","18.5","30.28","42.28"],"width":["8.2","8.3","8.5","9.3","9.8","18.2","18.3","18.5","19.3","19.8","30.28"],"100px":["8.2","8.3","8.5","18.2","18.3","18.5"],"src":["8.2","8.5","9.8","18.2","18.5","19.8","24.4","35.4"],"color":["9.2","19.2"],"red":["9.2","19.2"],"srt":["9.2","19.2"],"id":["9.2","19.2","30.45"],"yellow":["9.2"],"02":["9.2"],"setting":["9.4","9.6","19.6","37.5","42.29"],"max":["9.5","19.5"],"step":["9.5","19.5"],"div":["9.5","15.10","15.14","15.25","15.36","15.37","19.1","20.3","20.5","30.5","30.6","30.8","30.12","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.32","30.35","30.37","30.39","30.43","30.44","30.47","31.5","42.11","42.35"],"classname":["9.5","15.10","15.14","15.17","15.18","15.25","15.36","15.37","19.1","30.3","30.5","30.6","30.8","30.12","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.24","30.25","30.27","30.32","30.35","30.37","30.39","30.43","30.44","30.47","42.11","42.35","42.40"],"run":["9.5","15.10","15.12","15.14","15.17","15.18","15.36","15.37","19.1","30.3","30.5","30.6","30.8","30.12","30.14","30.15","30.16","30.18","30.20","30.22","30.24","30.25","30.27","30.32","30.35","30.37","30.39","30.41","30.44","30.47","42.11","42.26","42.35","42.40"],"settings":["9.7","19.7"],"slider":["9.7","19.7"],"tooltip":["9.7","19.7"],"5x":["9.7","19.7"],"icon":["9.7","19.7"],"img":["9.8","19.8","24.4","35.4"],"heigth":["9.8","19.8"],"state":["9.8","19.8"],"svg":["9.8","19.8"],"一级属性":["11.0"],"primary":["15.0"],"destruction":["15.4"],"value":["15.4","19.5"],"is":["15.4","30.25","30.46"],"ready":["15.11","15.15","15.30"],"seek":["15.11","28.7","40.7"],"settimeout":["15.11"],"not":["15.14","30.39"],"trigger":["15.14"],"additional":["15.14"],"events":["15.14"],"only":["15.25","30.21"],"be":["15.25","30.8"],"executed":["15.25"],"timeupdate":["15.36","15.37"],"event":["15.36","15.37","17.1"],"which":["15.39"],"can":["15.39","30.2","30.26","30.40"],"avoid":["15.39"],"errors":["15.39"],"same":["15.39"],"for":["16.1","18.1"],"display":["16.1","18.1"],"priority":["16.1","18.1"],"element":["16.1","18.1","30.6","30.37","30.40"],"triggered":["17.1"],"after":["17.1"],"subtitleoffset":["19.1"],"span":["19.2"],"min":["19.5"],"yet":["20.0"],"been":["20.0"],"yarn":["20.1","24.2","25.2","26.2","27.2","28.3","31.1","35.2","36.2","37.2","38.2","39.2","40.3"],"npm":["20.2","31.2"],"dist":["20.2","20.8","24.3","25.3","26.3","27.3","28.4","31.2","31.8","35.3","36.3","37.3","38.3","39.3","40.4"],"meta":["20.3","28.13","40.13"],"charset":["20.3","28.13","40.13"],"utf":["20.3","28.13","30.36","40.13"],"body":["20.3"],"class":["20.3"],"get":["20.4","28.7","40.7"],"instance":["20.4"],"destroy":["20.5","21.0","22.0","23.0","31.5","32.0","33.0","34.0"],"ref":["20.5","31.5"],"from":["20.6","20.8","29.2"],"option":["20.6"],"param":["20.7"],"getinstance":["20.7"],"properties":["20.7"],"group":["20.8","29.2","31.8"],"bash":["20.8","31.8"],"jsdelivr":["20.8","31.8"],"net":["20.8"],"if":["21.0","22.0","32.0","33.0"],"supportsmediasource":["21.0","32.0"],"const":["21.0","22.0","23.0","31.6","32.0","33.0","34.0"],"mediaplayer":["21.0","32.0"],"flvjs":["22.0","33.0"],"issupported":["22.0","23.0","33.0","34.0"],"loadsource":["23.0","34.0"],"ads":["24.3","35.3"],"poster":["24.4","35.4"],"jpg":["24.4","35.4"],"视频广告的地址":["24.4","35.4"],"test1":["24.4","35.4"],"广告跳转网址":["24.4","35.4"],"control":["25.3","30.18","30.20","30.22","30.23","30.43","36.3"],"页面里的播放器":["28.1","40.1"],"如在":["28.1","40.1"],"iframe":["28.4","28.9","40.4","40.9"],"the":["28.7","40.7"],"的消息":["28.8","40.8"],"head":["28.13","31.3","40.13"],"title":["28.13","31.3","40.13"],"will":["29.0"],"no":["29.0"],"longer":["29.0"],"bundle":["29.0"],"other":["29.0"],"except":["29.0"],"simplified":["29.0"],"manually":["29.1"],"zhtw":["29.2"],"you":["30.1","30.2"],"may":["30.1"],"time":["30.2"],"set":["30.2"],"asynchronously":["30.2"],"muted":["30.4","42.4"],"highlighted":["30.6"],"hidden":["30.8"],"adjust":["30.11"],"to":["30.11","30.36"],"hide":["30.11"],"mini":["30.12"],"mode":["30.12"],"and":["30.14","30.15","30.16"],"bar":["30.18","30.20","30.22","30.23","30.43"],"hotkeys":["30.19"],"one":["30.21"],"player":["30.21"],"play":["30.21","42.42"],"bottom":["30.23","30.43"],"playing":["30.25"],"access":["30.26"],"setting01":["30.29","42.29"],"return":["30.34","31.5","31.7","42.34"],"height":["30.35"],"escape":["30.36"],"boolean":["30.36","42.36"],"whether":["30.36"],"tag":["30.36"],"have":["30.39"],"correct":["30.39"],"so":["30.39"],"specially":["30.39"],"specified":["30.39"],"receive":["30.40"],"three":["30.40"],"parameters":["30.40"],"lang":["30.42","42.42"],"mobile":["30.44","30.46"],"terminal":["30.44"],"warning":["30.45"],"page":["30.46"],"full":["30.46"],"screen":["30.46"],"this":["30.47"],"types":["31.6"],"属性":["31.7"],"export":["31.7"],"data":["31.7"],"create":["32.0"],"danmuku":["37.3"],"synchronousplayback":["37.4"],"是否同步到播放速度":["37.4"],"filter":["37.4"],"danmu":["37.4"],"text":["37.4","37.5"],"length":["37.4","37.15"],"弹幕过滤函数":["37.4"],"返回":["37.4"],"则可以发送":["37.4"],"locktime":["37.4"],"plugins":["37.5","37.9","37.10","37.11","37.12"],"artplayerplugindanmuku":["37.5","37.9","37.10","37.11","37.12"],"弹幕数组":["37.5"],"danmus":["37.15"],"加载弹幕":["37.15"],"error":["37.15"],"简体中文":["41.0"],"和":["41.0"],"英文":["41.0"],"有时候":["42.2"],"地址没那么快知道":["42.2"],"这时候你可以异步设置":["42.2"],"cover":["42.11"],"是否转义":["42.36"],"标签":["42.36"],"默认为":["42.36"],"onvttload":["42.36"],"用于修改":["42.36"],"文本的函数":["42.36"]},{"0":["15.11"],"1":["3.24","9.8","13.24","19.8","37.5"],"2":["3.25","9.2","13.25","19.2","30.3"],"3":["3.27","13.27","19.5","42.1"],"4":["3.27","13.27","19.1","20.7","30.5","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.24","30.25","30.27","30.32","30.35","30.37","30.39","30.41","30.44","30.47","42.6","42.11","42.12","42.14","42.15","42.16","42.18","42.20","42.22","42.23","42.27","42.35","42.36","42.40","42.43","42.46","42.47"],"5":["3.22","3.28","9.8","13.22","13.28","15.30","19.8","24.4","30.7","35.4"],"6":["3.28","13.28","15.40","20.7","30.2","42.2"],"7":["15.16","15.17","15.18","15.23","15.36","15.37","30.37","42.26"],"8":["15.14","30.35","31.3","42.35","42.40"],"9":["15.10"],"10":["3.11","3.13","3.26","5.11","9.8","13.11","13.13","13.26","15.30","19.8"],"12":["42.36"],"14":["30.32"],"20":["3.10","13.10"],"22":["9.4"],"60":["37.4"],"100":["37.4"],"200":["37.4"],"500":["3.20","13.20","37.4"],"2000":["3.21","3.23","13.21","13.23"],"3000":["3.14","13.14","15.11"],"5000":["3.3","3.12","3.15","13.3","13.12","13.15"],"的":["0.0","0.4","1.0","5.0","10.0","10.4"],"url":["0.1","0.5","0.8","0.12","0.14","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.20","2.21","2.22","2.23","2.25","2.26","2.27","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","3.4","3.29","5.1","5.2","5.3","5.7","5.8","5.12","5.13","5.14","5.15","5.17","5.18","5.20","5.21","5.24","5.26","5.27","5.28","5.29","5.32","5.33","5.34","5.35","9.1","9.5","10.1","10.5","10.12","10.14","12.1","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.20","12.21","12.22","12.23","12.25","12.26","12.27","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","12.40","13.4","13.29","15.1","15.2","15.3","15.7","15.8","15.12","15.13","15.22","15.26","15.27","15.28","15.29","15.32","15.33","15.34","15.35","15.38","29.2","30.17","30.33","30.38","30.39","30.40","31.6","37.6","37.13","37.14","41.1","41.2","42.7","42.10","42.19","42.33","42.39","42.48"],"assets":["0.1","0.5","0.8","0.9","0.11","0.12","0.14","2.3","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.29","2.30","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","3.29","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.19","5.20","5.21","5.24","5.26","5.27","5.28","5.29","5.31","5.32","5.33","5.34","5.35","9.1","9.5","10.1","10.5","10.11","10.12","10.14","12.3","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.29","12.30","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","12.40","13.29","15.2","15.3","15.8","15.13","15.22","15.26","15.28","15.29","15.31","15.32","15.33","15.34","15.35","15.38","29.2","30.17","30.33","30.38","30.39","31.6","37.6","37.13","37.14","41.1","41.2","42.10","42.19","42.32","42.33","42.38","42.39","42.45","42.48"],"sample":["0.1","0.5","0.7","0.8","0.9","0.10","0.11","0.12","0.14","2.3","2.7","2.12","2.13","2.17","2.18","2.19","2.21","2.22","2.23","2.24","2.25","2.26","2.29","2.30","2.39","5.2","5.3","5.8","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.19","5.20","5.21","5.26","5.27","5.28","5.29","5.31","5.32","5.33","5.34","5.41","9.5","10.1","10.5","10.7","10.8","10.11","10.12","10.14","12.3","12.7","12.12","12.13","12.17","12.18","12.19","12.21","12.22","12.23","12.24","12.25","12.26","12.29","12.30","12.39","15.2","15.22","15.26","15.29","15.31","15.32","15.38","25.5","29.3","30.17","30.33","30.38","30.39","31.6","36.5","37.6","37.8","37.13","37.14","41.2","41.3","42.1","42.10","42.19","42.32","42.33","42.38","42.39","42.45","42.48"],"video":["0.1","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.12","0.14","2.2","2.3","2.7","2.13","2.18","2.19","2.21","2.22","2.23","2.24","2.25","2.26","2.28","2.29","2.30","5.2","5.3","5.8","5.10","5.12","5.13","5.15","5.19","5.21","5.22","5.26","5.28","5.29","5.31","5.33","5.34","5.41","10.1","10.5","10.6","10.7","10.8","10.9","10.11","10.12","10.14","12.2","12.3","12.7","12.13","12.18","12.19","12.21","12.22","12.23","12.24","12.25","12.26","12.28","12.29","12.30","15.26","15.38","19.4","25.5","29.3","30.33","30.38","31.6","36.5","37.8","37.13","37.14","41.2","41.3","42.1","42.10","42.19","42.30","42.33","42.38","42.39","42.45"],"mp4":["0.3","0.5","0.6","0.7","0.8","0.9","0.10","0.11","0.15","2.2","2.18","2.19","2.21","2.24","2.28","2.29","2.30","5.15","5.19","5.21","5.22","5.26","5.29","5.31","5.32","5.41","10.3","10.5","10.6","10.7","10.8","10.9","10.10","10.11","12.2","12.18","12.19","12.21","12.24","12.28","12.29","12.30","15.22","15.26","15.31","15.38","19.4","25.5","29.3","29.4","30.17","30.30","30.38","36.5","37.7","37.8","37.13","37.14","41.2","41.3","42.1","42.10","42.19","42.30","42.31","42.33","42.38","42.45"],"click":["0.3","0.13","6.2","6.3","7.1","7.3","10.3","10.13","15.19","15.21","16.2","16.3","17.3","30.30","37.10"],"event":["0.3","0.13","9.2","9.3","10.3","10.13","19.3"],"console":["0.3","0.6","0.13","0.16","5.30","6.2","6.3","6.4","6.5","9.2","9.3","10.3","10.6","10.13","10.16","16.2","16.3","16.4","16.5","19.2","19.3","30.29"],"info":["0.3","0.6","0.13","0.16","1.6","5.30","6.2","6.3","6.4","6.5","9.2","9.3","10.3","10.6","10.13","10.16","11.6","15.15","15.30","16.2","16.3","16.4","16.5","19.2","19.3","30.29"],"warning":["0.4","10.4","11.0","15.11","15.15","15.19","20.3","30.7","30.10","41.0"],"提示":["0.4","10.4"],"默认所有播放器实例都是共享同一个":["0.4","10.4"],"localstorage":["0.4","10.4"],"而且默认的":["0.4","10.4"],"是":["0.4","10.4"],"settings":["0.4","9.4","10.4","19.4"],"如果你想不同的播放器使用不同的":["0.4","10.4"],"play":["0.6","10.6","30.4","30.42","42.4"],"on":["0.7","0.8","0.9","0.10","2.2","5.30","5.31","5.41","7.5","8.5","9.8","10.7","10.8","10.9","10.10","12.2","15.31","17.5","18.5","19.8","21.0","23.0","32.0","34.0"],"ready":["0.9","0.10","2.2","5.11","5.30","5.41","7.5","10.8","10.9","10.10","12.2","15.31","17.5"],"app":["0.11","0.12","0.14","2.1","2.3","2.4","2.5","2.6","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.20","2.22","2.23","2.25","2.26","2.27","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","3.4","3.5","3.6","3.29","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.16","5.17","5.18","5.20","5.24","5.25","5.27","5.28","5.29","5.33","5.34","5.35","5.38","9.1","9.5","10.11","10.12","10.14","12.1","12.3","12.4","12.5","12.6","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.20","12.22","12.23","12.25","12.26","12.27","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","12.40","13.4","13.5","13.6","13.29","15.1","15.2","15.3","15.7","15.8","15.9","15.10","15.12","15.13","15.20","15.22","15.24","15.26","15.27","15.28","15.29","15.32","15.33","15.34","15.35","15.38","20.5","29.2","30.17","30.33","30.38","30.39","30.48","31.5","31.6","37.6","37.13","41.1","41.2","42.7","42.10","42.17","42.24","42.26","42.32","42.33","42.39","42.48"],"hotkeyevent":["0.13","10.13"],"true":["0.15","2.28","3.1","3.19","3.30","3.32","7.2","9.4","10.15","12.28","13.1","13.19","13.30","13.32","17.2","19.4","25.5","30.17","30.36","36.5"],"flip":["0.15","10.15"],"playbackrate":["0.15","10.15"],"aspectratio":["0.15","10.15"],"function":["0.16","6.2","6.3","6.4","7.1","7.3","9.3","10.16","15.19","15.21","16.2","16.3","16.4","17.3","19.3","28.7","30.29","30.30","30.36","37.10","40.7","42.29"],"myplugin":["0.16","10.16"],"art":["1.1","3.1","3.2","3.3","3.7","3.8","3.9","3.10","3.11","3.12","3.16","3.17","3.20","3.21","3.22","3.23","3.26","3.27","3.28","3.31","3.32","5.4","5.36","5.37","5.38","5.39","5.40","9.5","11.1","13.1","13.2","13.3","13.7","13.8","13.9","13.10","13.11","13.12","13.16","13.17","13.20","13.21","13.22","13.23","13.26","13.27","13.28","13.31","13.32","15.5","15.6","15.14","15.16","15.17","15.18","15.20","15.23","15.24","15.38","15.40","19.1","19.5","25.4","29.1","29.2","30.3","30.5","30.9","30.13","30.24","30.32","30.35","30.39","30.40","30.41","36.4","42.3","42.6","42.8","42.9","42.12","42.13","42.14","42.15","42.16","42.18","42.20","42.21","42.22","42.23","42.24","42.25","42.27","42.35","42.37","42.41","42.43","42.44","42.46","42.47"],"new":["1.1","3.2","3.5","3.6","3.7","3.8","3.9","3.10","3.16","3.21","3.27","3.28","3.32","5.4","5.5","5.6","5.23","5.36","5.37","5.38","5.39","5.40","9.5","11.1","13.2","13.5","13.6","13.7","13.8","13.9","13.10","13.16","13.21","13.27","13.28","13.32","15.5","15.6","15.9","15.10","15.12","15.13","15.14","15.16","15.17","15.18","15.20","15.23","15.24","15.27","15.38","15.40","19.1","19.5","25.4","29.1","29.2","30.9","30.24","30.32","30.35","30.39","30.41","30.48","36.4","42.3","42.5","42.8","42.9","42.12","42.13","42.14","42.15","42.16","42.17","42.18","42.20","42.21","42.22","42.23","42.24","42.25","42.27","42.32","42.35","42.37","42.41","42.43","42.44","42.46","42.47"],"container":["1.1","2.1","2.4","2.5","2.15","3.4","3.5","3.6","3.7","3.8","3.9","3.16","3.28","3.29","5.1","5.4","5.5","5.6","5.7","5.9","5.14","5.16","5.17","5.18","5.23","5.24","5.25","5.27","5.36","5.37","5.39","5.40","9.1","9.5","11.1","12.1","12.4","12.5","12.15","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.28","13.29","15.1","15.3","15.5","15.6","15.7","15.8","15.9","15.10","15.12","15.13","15.17","15.18","15.20","15.22","15.24","15.27","15.28","15.29","15.32","15.33","15.34","15.35","19.5","20.6","25.4","29.1","29.2","30.24","30.32","30.33","30.39","30.41","30.48","36.4","37.6","42.5","42.7","42.17","42.24","42.26","42.32","42.35","42.37","42.39","42.41"],"js":["1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.12","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.12","15.14","15.25","15.36","15.37","19.1","20.2","24.3","25.3","26.3","27.3","28.4","28.8","28.11","30.3","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.24","30.25","30.27","30.32","30.35","30.37","30.39","30.43","30.44","30.47","31.2","35.3","36.3","37.3","38.3","39.3","40.4","40.8","40.11","42.6","42.11","42.35","42.36","42.40"],"artplayer":["1.6","5.4","5.5","5.6","5.16","5.23","5.25","5.36","5.37","5.39","5.40","9.5","11.6","15.1","15.5","15.6","15.7","15.8","15.9","15.10","15.12","15.13","15.16","15.17","15.18","15.20","15.22","15.23","15.24","15.27","15.28","15.29","15.32","15.33","15.34","15.40","19.1","19.5","29.1","30.24","30.26","30.32","30.33","30.39","30.41","30.48","42.3","42.5","42.7","42.8","42.9","42.13","42.14","42.15","42.16","42.17","42.21","42.24","42.25","42.32","42.35","42.37","42.41","42.44"],"手动触发事件":["2.0","12.0"],"subtitle":["2.28","2.29","2.30","12.28","12.29","12.30"],"srt":["2.31","12.31"],"或者部分加载完成":["2.45","12.45"],"则发送此事件":["2.45","12.45"],"已经到达结束点":["2.46","12.46"],"正在尝试获取媒体数据":["2.57","12.57"],"一级属性":["3.0","13.0"],"var":["3.1","3.2","3.3","3.7","3.8","3.9","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.28","3.30","3.31","3.32","5.4","5.39","9.5","13.1","13.2","13.3","13.7","13.8","13.9","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.19","13.20","13.21","13.22","13.23","13.24","13.25","13.26","13.27","13.28","13.30","13.31","13.32","15.5","15.6","15.10","15.12","15.14","15.16","15.17","15.18","15.23","15.36","15.37","15.40","19.1","19.5","29.2","30.3","30.5","30.9","30.13","30.24","30.27","30.32","30.35","30.37","30.39","30.41","42.6","42.8","42.9","42.12","42.13","42.14","42.15","42.16","42.18","42.20","42.21","42.22","42.23","42.25","42.26","42.27","42.35","42.36","42.37","42.40","42.41","42.43","42.44","42.46","42.47"],"false":["3.17","3.18","3.31","6.5","13.17","13.18","13.31","16.5","37.5"],"adsplugin":["4.0","14.0"],"option":["4.0","14.0","20.4","21.0","31.4","32.0","37.15"],"layers":["4.0","14.0"],"ads":["4.0","14.0"],"html":["4.0","7.4","8.4","9.6","14.0","15.21","17.4","18.4","19.6","30.30","30.31","37.9","37.10","37.11","37.12","42.30","42.31"],"img":["4.0","9.4","9.7","14.0","19.4","19.7","42.38"],"style":["4.0","6.1","7.3","8.1","8.4","14.0","16.1","17.3","18.1","18.4","20.4","42.28"],"width":["4.0","8.4","9.4","9.7","14.0","18.4","19.7","42.28"],"100px":["4.0","8.4","14.0","18.4","30.28","42.28"],"src":["4.0","8.3","8.4","9.7","14.0","18.3","18.4","19.7","30.28","42.28"],"display":["4.0","14.0"],"none":["4.0","14.0"],"position":["4.0","5.19","7.4","8.2","8.3","8.5","14.0","15.21","17.1","17.4","18.2","18.3","18.5","30.28","30.31","37.9","37.10","37.11","37.12","42.28","42.31"],"absolute":["4.0","8.2","8.3","8.5","14.0","18.2","18.3","18.5","30.28","42.28"],"top":["4.0","8.2","8.3","8.5","14.0","18.2","18.3","18.5","30.28","42.28"],"20px":["4.0","14.0","30.28","42.28"],"right":["4.0","7.2","7.4","8.2","8.5","14.0","15.21","17.2","17.4","18.2","18.5","30.28","37.9","37.10","37.11","37.12"],"seek":["5.11"],"settimeout":["5.11","7.5","17.5","30.2"],"controls":["5.19","5.21","25.5","36.5","37.9","37.10","37.11","37.12"],"jpg":["5.22"],"hd":["5.42","15.41"],"720p":["5.42","15.41"],"element":["6.1","8.1"],"组件的":["6.1","8.1"],"dom":["6.1","8.1","9.3","16.1","18.1","19.3"],"元素":["6.1","8.1"],"args":["6.2","6.3","6.4","16.2","16.3","16.4","30.29","30.30","42.29"],"show":["6.5","9.6","9.8","16.5","19.6","19.8"],"组件样式对象":["7.1"],"组件点击事件":["7.1"],"mounted":["7.1"],"selector":["7.2","17.2"],"default":["7.2","17.2","20.7","29.4","41.4"],"span":["7.2","17.2"],"01":["7.2","17.2","30.29","42.29"],"button":["7.3","7.4","17.3","17.4"],"tooltip":["7.3","7.4","8.2","8.3","17.1","17.3","17.4","18.2","18.3","30.31"],"color":["7.3","17.3","37.5"],"red":["7.3","17.3"],"your":["7.4","17.4","30.30","30.31","42.30","42.31","42.45"],"02":["7.5","9.3","17.5","19.2","19.3","30.29","42.29"],"update":["7.5"],"the":["7.5","17.5","20.3","29.4","30.7","30.45","41.4"],"tip":["8.2","8.3","15.11","15.15","15.19","18.2","18.3","20.3","30.7","30.10","30.45"],"50px":["8.2","8.3","8.5","18.2","18.3","18.5"],"potser":["8.4","18.4"],"item":["9.2","9.3","19.2","19.3"],"onselect":["9.3","19.3","30.29","42.29"],"pip":["9.4","19.4"],"mode":["9.4","19.4"],"close":["9.4","19.4"],"heigth":["9.4","9.7","19.7"],"add":["9.6","20.1","31.1"],"slider":["9.6","19.6"],"state":["9.7","19.7"],"range":["9.8","19.8","37.11"],"非常少使用":["11.0"],"attached":["15.0"],"div":["15.4","15.39","19.5","30.26","30.36","30.40","30.46","42.36"],"classname":["15.4","15.39","19.5","30.21","30.26","30.36","30.40","30.46","42.36"],"run":["15.4","15.25","15.39","19.5","30.21","30.23","30.26","30.36","30.40","30.43","30.46","42.36"],"code":["15.4","15.25","15.36","15.37","15.39","19.5","30.6","30.8","30.12","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.26","30.35","30.39","30.43","30.44","30.46","30.47","42.36"],"t":["15.11"],"functions":["15.11","30.36"],"some":["15.15"],"videos":["15.15"],"have":["15.15"],"switch":["15.19"],"resize":["15.31"],"class":["15.39"],"name":["15.39"],"of":["16.1","18.1","20.3","30.1"],"object":["16.1","18.1","30.11"],"is":["17.1","20.0"],"text":["17.1","30.36","37.10"],"left":["17.1","30.31","42.31"],"yellow":["19.2"],"setting":["19.4","37.14"],"completed":["20.0"],"everything":["20.0"],"unpkg":["20.2","20.8","24.3","25.3","26.3","27.3","28.4","31.2","35.3","36.3","37.3","38.3","39.3","40.4"],"size":["20.3","30.1"],"getinstance":["20.4","31.4"],"types":["20.6"],"const":["20.6"],"export":["20.7"],"data":["20.7"],"return":["20.7"],"https":["20.8","31.8"],"cdn":["20.8","31.8"],"npm":["20.8","31.8"],"com":["20.8","24.3","25.3","26.3","27.3","28.4","35.3","36.3","37.3","38.3","39.3","40.4"],"create":["21.0"],"initialize":["21.0","30.1","32.0"],"autoplay":["21.0","32.0"],"createplayer":["22.0","33.0"],"type":["22.0","33.0","37.11"],"attachmediaelement":["22.0","33.0"],"load":["22.0","33.0"],"attachmedia":["23.0","34.0"],"else":["23.0","34.0"],"canplaytype":["23.0","34.0"],"为空则不跳转":["24.4","35.4"],"http":["24.4","35.4"],"org":["24.4","35.4"],"必须观看的时长":["24.4","35.4"],"期间不能被跳过":["24.4","35.4"],"单位为秒":["24.4","35.4"],"当该值大于或等于totalduration时":["24.4","35.4"],"不能提前关闭广告":["24.4","35.4"],"当该值等于或小于0时":["24.4","35.4"],"则随时都可以关闭广告":["24.4","35.4"],"playduration":["24.4","35.4"],"fullscreen":["25.5","36.5"],"fullscreenweb":["25.5","36.5"],"里通过代码控制":["28.1","40.1"],"value":["28.7","40.7"],"from":["28.7","40.7"],"async":["28.7","40.7"],"use":["28.7","40.7"],"通信":["28.9","40.9"],"只能运行在":["28.10","40.10"],"的消息":["28.11","40.11"],"commit":["28.12","40.12"],"artplayerpluginiframe":["28.12","40.12"],"body":["28.13","31.3","40.13"],"id":["28.13","40.13","42.45"],"chinese":["29.0"],"english":["29.0"],"you":["29.0","30.10"],"need":["29.0","30.1"],"to":["29.0","30.4"],"import":["29.0"],"elements":["30.1"],"such":["30.1"],"as":["30.1","30.45"],"css":["30.1","42.1"],"this":["30.4","42.4"],"equivalent":["30.4"],"will":["30.7"],"cache":["30.7"],"muted":["30.10"],"if":["30.10"],"want":["30.10"],"similar":["30.11"],"fit":["30.11"],"contain":["30.11"],"sescribe":["30.19"],"volume":["30.19"],"up":["30.19"],"down":["30.19"],"fast":["30.19"],"forward":["30.19"],"rewind":["30.19"],"through":["30.26"],"opacity":["30.28"],"menu":["30.30","42.30"],"control":["30.31","42.31"],"something":["30.34","42.34"],"dosomething":["30.34","42.34"],"onvttload":["30.36"],"for":["30.36"],"modifying":["30.36"],"loading":["30.38","42.38"],"player":["30.40","30.45"],"instance":["30.40","31.4"],"modify":["30.42"],"existing":["30.42"],"because":["30.45"],"uses":["30.45"],"key":["30.45"],"by":["30.45"],"demo":["31.3"],"meta":["31.3"],"charset":["31.3"],"utf":["31.3"],"get":["31.4"],"选项":["31.7"],"net":["31.8"],"application":["34.0"],"输入框锁定时间":["37.4"],"maxlength":["37.4"],"输入框最大可输入的字数":["37.4"],"minwidth":["37.4"],"输入框最小宽度":["37.4"],"弹幕文本":["37.5"],"time":["37.5"],"发送时间":["37.5"],"单位秒":["37.5"],"fff":["37.5"],"弹幕局部颜色":["37.5"],"border":["37.5"],"plugins":["37.7","37.8"],"artplayerplugindanmuku":["37.7","37.8"],"使用":["37.7"],"promise":["37.7"],"异步返回":["37.7"],"xml":["37.9","37.10","37.11","37.12"],"隐藏弹幕":["37.9"],"发送弹幕":["37.10"],"弹幕大小":["37.11"],"input":["37.11"],"重载弹幕":["37.12"],"加载错误":["37.15"],"config":["37.15"],"配置变化":["37.15"],"外":["41.0"],"不再捆绑其它多国语言":["41.0"],"需要自行导入需要的语言":["41.0"],"lang":["41.3"],"change":["41.4"],"language":["41.4"],"您可能需要初始化容器元素的大小":["42.1"],"如":["42.1"],"等同于":["42.4"],"document":["42.26"],"queryselector":["42.26"],"修改现有的语言":["42.42"]},{"0":["5.11","31.6","37.5"],"1":["9.7","19.7","37.11"],"3":["30.1"],"4":["30.6","30.20","30.21","30.22","30.23","30.36","30.40","30.43","30.46"],"5":["5.30","9.7","19.7","31.6"],"6":["15.39"],"7":["15.4","30.26"],"8":["15.25","30.40"],"9":["30.28","42.28"],"10":["5.30","9.7","19.7","24.4","35.4"],"11":["30.42","42.42"],"12":["30.36","37.11"],"22":["9.5","9.6","19.4","19.6"],"25":["37.11"],"32":["0.13","10.13"],"50":["37.11"],"60":["30.33","42.33"],"120":["42.33"],"150":["9.2","19.2"],"222":["37.5"],"400":["37.4"],"404":["2.12","12.12"],"1000":["30.2"],"3000":["5.11"],"二级属性":["0.0","10.0"],"mp4":["0.1","0.12","0.14","2.1","2.3","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.20","2.22","2.23","2.25","2.26","2.27","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","3.4","3.5","3.6","3.28","3.29","5.1","5.2","5.3","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.17","5.18","5.20","5.24","5.27","5.28","5.33","5.34","5.35","5.38","9.1","9.5","10.1","10.12","10.14","12.1","12.3","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.20","12.22","12.23","12.25","12.26","12.27","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","12.40","13.4","13.5","13.6","13.28","13.29","15.1","15.2","15.3","15.7","15.8","15.9","15.10","15.12","15.13","15.17","15.18","15.20","15.24","15.27","15.28","15.29","15.32","15.33","15.34","15.35","19.5","20.5","20.6","29.2","30.32","30.33","30.35","30.48","31.5","31.6","37.6","41.1","42.7","42.24","42.32","42.35","42.48"],"console":["0.1","0.5","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.11","1.12","5.8","5.13","5.14","5.15","5.22","5.26","5.27","5.28","5.29","5.32","5.33","5.34","5.41","7.3","8.2","8.3","10.1","10.5","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","15.8","15.26","15.29","15.32","15.38","17.3","18.2","18.3","30.28","30.30","30.31","42.28","42.29","42.30"],"info":["0.1","0.5","1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.12","5.8","5.13","5.15","5.22","5.26","5.28","5.29","5.32","5.33","5.34","7.3","8.2","8.3","10.1","10.5","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.12","15.26","15.32","15.38","17.3","18.2","18.3","30.28","30.30","30.31","42.28","42.29","42.30"],"warning":["0.2","1.6","5.11","5.30","10.2","11.6","15.21","15.30","15.31","15.38","20.4","29.0","30.2","30.4","30.17","30.19","30.39","31.4","42.10","42.39","42.45","42.48"],"提示":["0.2","5.11","10.2","11.0","15.31","42.45"],"为了方便区别":["0.2","10.2"],"元素和普通对象":["0.2","10.2"],"播放器里的所有":["0.2","10.2"],"mouseenter":["0.3","10.3"],"你可以修改":["0.4","10.4"],"即可":["0.4","10.4"],"zh":["0.6","10.6"],"cn":["0.6","10.6","29.4","41.4"],"your":["0.6","10.6","15.31","29.3","29.4","30.3","41.3","41.4","42.3"],"ready":["0.7","0.8","0.11","0.12","0.13","0.14","0.15","2.7","2.19","2.24","2.31","5.8","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.22","5.26","5.27","5.28","5.29","5.31","5.32","5.33","5.34","5.42","6.5","8.5","9.8","10.7","10.11","10.12","10.13","10.14","10.15","12.7","12.19","12.24","12.31","15.8","15.12","15.13","15.22","15.26","15.27","15.28","15.29","15.32","15.33","15.34","15.41","16.5","18.5","19.8"],"html":["0.8","0.9","0.10","5.19","5.21","10.8","10.9","10.10","25.5","36.5","37.8"],"some":["0.8","0.9","0.10","10.8","10.9","10.10"],"text":["0.8","0.9","0.10","10.8","10.9","10.10"],"position":["0.9","5.21","5.35","7.1","8.4","10.9","18.4","25.5","36.5","37.8"],"on":["0.11","0.12","0.13","0.14","0.15","2.3","2.7","2.12","2.13","2.19","2.24","2.31","5.7","5.8","5.9","5.10","5.12","5.13","5.14","5.15","5.17","5.18","5.20","5.22","5.26","5.27","5.28","5.29","5.32","5.33","5.34","5.42","6.4","6.5","7.4","10.11","10.12","10.13","10.14","10.15","12.3","12.7","12.12","12.13","12.19","12.24","12.31","15.7","15.8","15.10","15.12","15.13","15.22","15.26","15.27","15.28","15.29","15.32","15.33","15.34","15.41","16.4","16.5","17.4","20.3","22.0","30.4","33.0"],"subtitleoffset":["0.15","10.15"],"return":["0.16","9.2","9.3","10.16","19.2","19.3","28.7","37.7","37.10","40.7"],"name":["0.16","10.16"],"something":["0.16","10.16"],"dosomething":["0.16","10.16"],"一级属性":["1.0","5.0"],"app":["1.1","3.2","3.7","3.8","3.9","3.10","3.11","3.12","3.16","3.21","3.22","3.27","3.28","3.32","5.4","5.5","5.6","5.23","5.36","5.37","5.39","5.40","11.1","13.2","13.7","13.8","13.9","13.10","13.11","13.12","13.16","13.21","13.22","13.27","13.28","13.32","15.5","15.6","15.14","15.16","15.17","15.18","15.23","15.36","15.37","15.40","19.1","19.5","20.6","25.4","29.1","30.5","30.9","30.13","30.24","30.32","30.35","30.36","30.37","30.41","36.4","42.5","42.6","42.8","42.9","42.12","42.13","42.14","42.15","42.16","42.18","42.20","42.21","42.22","42.23","42.25","42.27","42.35","42.36","42.37","42.40","42.41","42.43","42.44","42.46","42.47"],"url":["1.1","3.5","3.6","3.7","3.8","3.9","3.16","3.21","3.27","3.28","5.4","5.5","5.6","5.16","5.23","5.25","5.36","5.37","5.38","5.39","5.40","11.1","13.5","13.6","13.7","13.8","13.9","13.16","13.21","13.27","13.28","15.5","15.6","15.14","15.16","15.17","15.18","15.20","15.23","15.24","15.36","15.37","15.40","19.1","19.5","20.5","20.6","25.4","29.1","30.3","30.24","30.41","30.48","31.5","36.4","42.3","42.5","42.8","42.9","42.13","42.14","42.15","42.16","42.17","42.21","42.24","42.25","42.37","42.41","42.44"],"assets":["1.1","2.1","2.4","2.5","2.15","3.4","3.5","3.6","3.7","3.8","3.9","3.16","3.27","3.28","5.1","5.4","5.5","5.6","5.16","5.23","5.25","5.36","5.37","5.38","5.39","5.40","11.1","12.1","12.4","12.5","12.15","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.27","13.28","15.1","15.5","15.6","15.7","15.9","15.10","15.12","15.14","15.16","15.17","15.18","15.20","15.23","15.24","15.27","19.1","19.5","20.5","20.6","25.4","29.1","30.24","30.32","30.35","30.41","30.48","31.5","36.4","42.5","42.7","42.17","42.24","42.35","42.36","42.37","42.41"],"全部工具函数请参考以下地址":["1.6","11.6"],"js":["1.11","11.11","15.4","15.39","28.9","30.21","30.26","30.36","30.40","30.46","40.9"],"emit":["2.0","12.0"],"focus":["2.0","12.0"],"移除事件":["2.0","12.0"],"sample":["2.1","2.4","2.5","2.6","2.8","2.9","2.10","2.11","2.14","2.15","2.16","2.20","2.27","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.40","3.4","3.5","3.6","3.7","3.8","3.9","3.16","3.27","3.28","3.29","5.1","5.5","5.6","5.7","5.9","5.16","5.23","5.24","5.25","5.35","5.36","5.37","5.38","5.39","9.1","12.1","12.4","12.5","12.6","12.8","12.9","12.10","12.11","12.14","12.15","12.16","12.20","12.27","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.40","13.4","13.5","13.6","13.7","13.8","13.9","13.16","13.27","13.28","13.29","15.1","15.3","15.5","15.6","15.7","15.8","15.9","15.10","15.12","15.13","15.14","15.17","15.18","15.20","15.24","15.27","15.28","15.33","15.34","15.35","19.1","19.5","20.5","20.6","25.4","29.1","29.2","30.24","30.32","30.35","30.41","30.48","31.5","36.4","41.1","42.5","42.7","42.17","42.24","42.35","42.36","42.37","42.41"],"video":["2.1","2.4","2.5","2.6","2.8","2.9","2.10","2.11","2.14","2.15","2.16","2.17","2.20","2.27","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","3.4","3.5","3.6","3.27","3.28","3.29","5.1","5.5","5.6","5.7","5.9","5.14","5.16","5.17","5.18","5.20","5.23","5.24","5.25","5.27","5.35","5.38","9.1","9.5","12.1","12.4","12.5","12.6","12.8","12.9","12.10","12.11","12.14","12.15","12.16","12.17","12.20","12.27","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","12.40","13.4","13.5","13.6","13.27","13.28","13.29","15.20","15.27","15.28","15.29","15.34","15.35","19.5","20.5","20.6","29.2","30.24","30.32","30.35","30.41","30.48","31.5","37.6","41.1","42.7","42.17","42.24","42.32","42.35","42.36","42.48"],"true":["2.17","2.18","2.21","2.22","2.23","2.24","2.25","2.26","2.39","3.29","5.2","5.3","5.20","6.2","6.4","6.5","9.1","9.5","10.10","12.17","12.18","12.21","12.22","12.23","12.24","12.25","12.26","12.39","13.29","15.2","15.3","15.20","16.2","16.4","16.5","19.5","37.13","37.14","42.10","42.32","42.45"],"setting":["2.18","2.21","2.28","3.29","9.1","9.5","12.18","12.21","12.28","13.29","19.5","37.13"],"srt":["2.28","2.29","2.30","12.28","12.29","12.30"],"并调用":["2.45","12.45"],"但数据意外未出现":["2.57","12.57"],"属性名字全部都是大写的形式":["3.0","13.0"],"未来容易发生变动":["3.0","13.0"],"new":["3.1","3.3","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.22","3.23","3.24","3.25","3.26","3.30","3.31","13.1","13.3","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.19","13.20","13.22","13.23","13.24","13.25","13.26","13.30","13.31","15.4","15.25","15.36","15.37","15.39","21.0","30.3","30.5","30.6","30.8","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.34","30.36","30.37","30.43","30.44","30.46","30.47","32.0","42.6","42.11","42.34","42.36","42.40"],"container":["3.1","3.2","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.27","3.30","3.31","3.32","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.19","13.20","13.21","13.22","13.23","13.24","13.25","13.26","13.27","13.30","13.31","13.32","15.4","15.14","15.16","15.23","15.25","15.36","15.37","15.40","19.1","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.25","30.26","30.27","30.35","30.36","30.37","30.44","30.47","31.7","42.3","42.6","42.8","42.9","42.12","42.13","42.14","42.15","42.16","42.18","42.20","42.21","42.22","42.23","42.25","42.27","42.36","42.40","42.43","42.44","42.46","42.47"],"art":["3.13","3.14","3.15","3.18","3.19","3.24","3.25","3.30","13.13","13.14","13.15","13.18","13.19","13.24","13.25","13.30","15.4","15.25","15.36","15.37","15.39","30.6","30.8","30.12","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.36","30.37","30.43","30.44","30.46","30.47","42.11","42.26","42.36"],"show":["4.0","6.2","6.3","6.4","14.0","16.2","16.3","16.4","21.0","22.0","23.0","30.28","30.30","32.0","33.0","34.0"],"block":["4.0","14.0"],"hide":["4.0","14.0"],"controls":["4.0","5.35","14.0","15.35","37.8"],"tooltip":["4.0","7.1","9.6","14.0","19.6","42.31"],"muted":["5.2","5.3","5.24","15.2","15.3","24.4","35.4","42.10"],"seek":["5.10","5.12"],"t":["5.11"],"right":["5.19","5.21","8.3","8.4","17.1","18.3","18.4","25.5","36.5","37.8","42.28"],"switch":["5.19","15.11","25.5","36.5"],"click":["5.19","5.21","6.1","8.1","8.2","8.3","15.38","16.1","18.1","18.2","18.3","30.28","30.31","37.8","37.9","37.12","42.28","42.30","42.31"],"function":["5.19","5.21","6.1","8.1","8.2","8.3","16.1","18.1","18.2","18.3","30.28","30.31","37.7","37.9","37.12","42.28","42.30"],"log":["5.41"],"theme":["5.41","37.4"],"settimeout":["5.42","6.5","8.5","9.8","10.8","15.41","16.5","18.5","19.8","42.2"],"object":["6.1","8.1"],"组件样式对象":["6.1","8.1"],"false":["6.2","6.3","6.4","9.4","16.2","16.3","16.4","19.4","24.4","35.4"],"update":["6.5","8.5","9.8"],"组件挂载后触发":["7.1"],"组件的提示文本":["7.1"],"yellow":["7.2","17.2"],"02":["7.2","17.2"],"onselect":["7.2","17.2"],"item":["7.2","9.4","17.2"],"dom":["7.2","17.2"],"args":["7.3","8.2","8.3","17.3","18.2","18.3","30.28","30.31","42.28","42.30"],"mounted":["7.3","8.2","8.3","16.1","17.3","18.1","18.2","18.3"],"style":["7.4","17.4","20.5","30.31","31.4","31.5","37.11","42.31"],"color":["7.4","17.4","30.31","42.31"],"red":["7.4","17.4"],"control":["7.5","17.1","17.5"],"by":["7.5","8.5","9.8","17.5","18.5","19.8","30.10"],"absolute":["8.4","18.4"],"top":["8.4","18.4"],"50px":["8.4","18.4"],"the":["8.5","9.8","15.19","18.5","19.8","30.10"],"quality":["9.2","19.2"],"1080p":["9.2","19.2"],"src":["9.4","19.4","23.0","30.38","34.0","42.38"],"state":["9.4","30.38","42.38"],"svg":["9.4","9.7","19.4","19.7"],"settings":["9.5","19.5"],"slider":["9.5"],"5x":["9.5","9.6","19.5","19.6"],"img":["9.5","9.6","19.5","19.6","30.38"],"width":["9.5","9.6","19.4","19.6","20.5","30.1","42.1"],"icon":["9.6","19.6"],"range":["9.7","19.7"],"left":["10.9"],"有些属性是全大写的":["11.0"],"which":["15.0"],"var":["15.4","15.25","15.39","21.0","30.6","30.8","30.12","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.26","30.34","30.36","30.40","30.43","30.44","30.46","30.47","32.0","42.11","42.34"],"artplayer":["15.4","15.14","15.25","15.36","15.37","15.39","21.0","30.3","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.34","30.35","30.36","30.37","30.43","30.44","30.47","32.0","42.6","42.11","42.12","42.18","42.20","42.22","42.23","42.27","42.34","42.36","42.40","42.43","42.46","42.47"],"and":["15.11","17.1","30.7"],"are":["15.11","30.2"],"same":["15.11"],"except":["15.11"],"no":["15.15"],"such":["15.15"],"as":["15.15"],"live":["15.15"],"or":["15.15","30.1"],"due":["15.19","15.21","30.17"],"to":["15.19","15.21","15.30","20.0"],"browser":["15.19","15.21","30.17"],"security":["15.19","15.21","30.17"],"mechanism":["15.19","15.21"],"page":["15.19","30.10"],"must":["15.19"],"have":["15.19"],"tip":["15.21","15.30","15.38","20.4","20.8","30.2","30.4","30.17","30.19"],"before":["15.21"],"jpg":["15.22"],"json":["15.26"],"stringify":["15.26"],"delete":["15.30"],"looping":["15.30"],"just":["15.30"],"useful":["15.31"],"but":["15.31","30.45"],"if":["15.38","20.8","30.45","37.9","37.10"],"you":["15.38","20.8"],"event":["16.1","18.1","28.8","37.9","40.8"],"positions":["17.1"],"where":["17.1"],"controller":["17.1"],"appears":["17.1"],"selector":["17.1"],"heigth":["19.4"],"subject":["20.0"],"pnpm":["20.1","24.2","25.2","26.2","27.2","28.3","31.1","35.2","36.2","37.2","38.2","39.2","40.3"],"com":["20.2","31.2","31.8"],"player":["20.3","30.39"],"depends":["20.3"],"so":["20.3"],"modifying":["20.4"],"https":["20.5","31.5"],"org":["20.5","31.5"],"600px":["20.5"],"height":["20.5","30.1","42.1"],"volume":["20.6","31.6"],"option":["20.7","31.7"],"types":["20.7","31.7"],"want":["20.8"],"else":["21.0","22.0","32.0","33.0"],"notice":["21.0","22.0","23.0","32.0","33.0","34.0"],"unsupported":["21.0","22.0","23.0","32.0","33.0","34.0"],"playback":["21.0","22.0","23.0","32.0","33.0","34.0"],"format":["21.0","22.0","23.0","32.0","33.0","34.0"],"mpd":["21.0","32.0"],"application":["23.0"],"vnd":["23.0","34.0"],"apple":["23.0","34.0"],"mpegurl":["23.0","34.0"],"m3u8":["23.0","34.0"],"广告总时长":["24.4","35.4"],"totalduration":["24.4","35.4"],"视频广告是否默认静音":["24.4","35.4"],"多语言支持":["24.4","35.4"],"i18n":["24.4","29.3","35.4","41.0","41.3"],"close":["24.4","35.4"],"关闭广告":["24.4","35.4"],"countdown":["24.4","35.4"],"s秒":["24.4","35.4"],"button":["25.5","36.5"],"ui":["25.5","36.5"],"播放器的功能":["28.1","40.1"],"keyword":["28.7","40.7"],"currenttime":["28.7","40.7"],"await":["28.7","40.7"],"artplayerpluginiframe":["28.11","40.11"],"type":["28.12","40.12"],"required":["29.0"],"when":["29.0"],"cannot":["29.0"],"be":["29.0"],"lang":["29.2","29.3","41.2"],"script":["29.2","41.2"],"play":["29.4","30.19","41.4"],"400px":["30.1","42.1"],"300px":["30.1","42.1"],"use":["30.1"],"three":["30.2"],"file":["30.2"],"formats":["30.2"],"supported":["30.2"],"size":["30.7"],"last":["30.7"],"enter":["30.10"],"css":["30.11"],"div":["30.11","31.3"],"classname":["30.11"],"run":["30.11"],"code":["30.11","30.40"],"policy":["30.17"],"space":["30.19"],"toggle":["30.19"],"pause":["30.19"],"these":["30.19"],"document":["30.26"],"queryselector":["30.26"],"setting02":["30.29","42.29"],"green":["30.31","42.31"],"one":["30.33","42.33"],"more":["30.33","42.33"],"chance":["30.33","42.33"],"ploading":["30.38","42.38"],"gif":["30.38","42.38"],"identification":["30.39"],"can":["30.39"],"only":["30.39"],"resolve":["30.39"],"this":["30.39"],"cache":["30.45"],"progress":["30.45"],"of":["30.45"],"class":["31.3"],"const":["31.7"],"unpkg":["31.8"],"填":["37.4"],"则为无限制":["37.4"],"maxwidth":["37.4"],"输入框最大宽度":["37.4"],"infinity":["37.4"],"则为":["37.4"],"宽度":["37.4"],"是否显示描边":["37.5"],"mode":["37.5"],"弹幕模式":["37.5"],"0表示滚动":["37.5"],"1静止":["37.5"],"plugins":["37.6","37.13","37.14"],"artplayerplugindanmuku":["37.6","37.13","37.14"],"弹幕":["37.6"],"resovle":["37.7"],"xml":["37.8"],"隐藏弹幕":["37.8"],"prompt":["37.10"],"请输入弹幕文本":["37.10"],"弹幕测试文本":["37.10"],"trim":["37.10"],"min":["37.11"],"max":["37.11"],"step":["37.11"],"value":["37.11"],"display":["37.11"],"flex":["37.11"],"alignitems":["37.11"],"stop":["37.15"],"弹幕停止":["37.15"],"start":["37.15"],"当无法匹配到语言时":["41.0"],"会默认显示英文":["41.0"],"或者使用":["42.1"],"aspect":["42.1"],"热键":["42.19"],"描述":["42.19"],"增加音量":["42.19"],"降低音量":["42.19"],"innerhtml":["42.26"],"opacity":["42.28"],"sd":["42.32"],"后缀的识别":["42.39"],"播放器只能解析这种后缀":["42.39"],"因为播放器默认使用":["42.45"]},{"0":["20.5","20.6","31.5"],"1":["37.7"],"2":["5.28","37.5"],"4":["30.11"],"5":["5.7","5.8","5.14","15.7","20.6","42.7"],"8":["2.0","12.0"],"9":["5.29","30.1"],"10":["5.10","5.12","15.10","15.12","30.35"],"16":["5.29","15.29","30.1","37.10","42.1"],"22":["19.5"],"60":["30.35","42.35"],"100":["28.5","40.5"],"111":["37.7"],"120":["30.33"],"180":["30.33","42.33"],"222":["37.7"],"240":["42.33"],"333":["37.5"],"360":["9.2"],"720":["9.2","19.2"],"1000":["0.8","0.9","0.10","0.15","10.8","10.9","10.10","10.15","42.2"],"1080":["9.2","19.2"],"5000":["0.13","10.13"],"比较少用":["0.0","10.0"],"warning":["0.1","0.5","0.6","0.7","0.8","5.15","5.19","5.21","5.26","5.31","5.38","10.1","10.5","10.6","10.7","10.8","10.9","10.10","15.26","30.28","30.29","30.30","30.31","30.38","30.41","30.48","31.3","42.2","42.4","42.7","42.17","42.19","42.30","42.31","42.38","42.41"],"提示":["0.1","5.15","5.19","5.21","5.30","5.31","10.1","31.3","42.2","42.7","42.10","42.17"],"假如直接修改这个":["0.1","10.1"],"元素都是以":["0.2","10.2"],"开头命名的":["0.2","10.2"],"这是所有":["0.2","10.2"],"元素的定义":["0.2","10.2"],"mouseleave":["0.3","10.3"],"poster":["0.3","10.3"],"jpg":["0.3","10.3"],"then":["0.3","10.3"],"img":["0.3","10.3"],"loading":["0.5","10.5"],"这是所有图标的定义":["0.5","10.5"],"types":["0.5","1.6","10.5","11.6","30.48","41.0","42.48"],"使用":["0.6","10.6"],"只能更新实例化之后的":["0.6","10.6"],"to":["0.7","10.7","30.2","30.29","30.30","30.31"],"play":["0.7","4.0","5.2","10.7","14.0","15.2","29.3","30.2","41.3"],"如果想马上隐藏":["0.7","10.7"],"settimeout":["0.8","0.9","0.10","0.12","0.13","0.14","0.15","5.2","5.3","5.7","5.10","5.12","5.20","6.4","7.4","8.4","9.7","10.9","10.10","10.12","10.13","10.14","10.15","15.2","15.7","15.10","15.12","16.4","17.4","18.4","19.7"],"false":["0.8","0.9","0.10","0.14","0.15","10.8","10.9","10.10","10.14","10.15","30.28","30.30","42.28","42.30"],"left":["0.9","7.1"],"true":["0.10","0.12","2.20","3.4","3.5","3.6","3.27","3.28","5.1","5.13","5.24","5.32","6.3","10.12","12.20","13.4","13.5","13.6","13.27","13.28","15.1","15.24","15.32","16.3","19.1","25.4","30.24","30.32","36.4","42.17","42.24"],"srt":["0.11","10.11"],"on":["0.16","2.1","2.4","2.5","2.6","2.8","2.9","2.10","2.11","2.14","2.15","2.16","2.17","2.18","2.20","2.21","2.22","2.23","2.25","2.26","2.27","2.28","2.29","2.30","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","3.7","3.8","3.9","3.16","5.1","5.2","5.3","5.4","5.5","5.6","5.16","5.23","5.24","5.25","5.36","5.37","8.4","9.7","10.16","12.1","12.4","12.5","12.6","12.8","12.9","12.10","12.11","12.14","12.15","12.16","12.17","12.18","12.20","12.21","12.22","12.23","12.25","12.26","12.27","12.28","12.29","12.30","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","12.40","13.7","13.8","13.9","13.16","15.1","15.2","15.3","15.5","15.6","15.9","15.14","15.16","15.17","15.18","15.20","15.23","15.24","15.36","15.37","18.4","19.7","24.4","35.4","37.13","37.14","42.4"],"非常少使用":["1.0"],"sample":["1.1","3.1","3.2","3.3","3.10","3.11","3.12","3.17","3.20","3.21","3.22","3.23","3.26","3.30","3.31","3.32","5.4","5.40","11.1","13.1","13.2","13.3","13.10","13.11","13.12","13.17","13.20","13.21","13.22","13.23","13.26","13.30","13.31","13.32","15.4","15.16","15.23","15.25","15.36","15.37","15.39","15.40","20.7","22.0","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.34","30.36","30.37","30.40","30.43","30.44","30.47","31.7","33.0","42.6","42.8","42.9","42.11","42.12","42.13","42.14","42.15","42.16","42.18","42.20","42.21","42.22","42.23","42.25","42.27","42.34","42.40","42.43","42.44","42.46","42.47"],"video":["1.1","3.7","3.8","3.9","3.10","3.11","3.12","3.16","3.20","3.21","3.22","3.23","3.30","3.32","5.4","5.39","11.1","13.7","13.8","13.9","13.10","13.11","13.12","13.16","13.20","13.21","13.22","13.23","13.30","13.32","15.4","15.23","15.39","19.1","20.7","25.4","29.1","30.9","30.13","30.27","31.7","36.4","42.5","42.6","42.8","42.9","42.12","42.13","42.14","42.15","42.16","42.18","42.20","42.21","42.22","42.23","42.25","42.27","42.37","42.41","42.43","42.44","42.46","42.47"],"mp4":["1.1","3.7","3.8","3.9","3.16","3.21","3.27","5.4","5.5","5.6","5.16","5.23","5.25","5.36","5.37","5.39","5.40","11.1","13.7","13.8","13.9","13.16","13.21","13.27","15.4","15.5","15.6","15.14","15.16","15.23","15.25","15.36","15.37","15.39","15.40","19.1","20.7","25.4","29.1","30.5","30.14","30.15","30.16","30.24","30.36","30.37","30.41","31.7","36.4","42.5","42.8","42.9","42.13","42.14","42.15","42.16","42.17","42.21","42.25","42.36","42.37","42.41","42.44"],"artplayer":["1.2","1.3","1.4","1.5","1.7","1.8","1.9","1.10","1.11","1.12","11.2","11.3","11.4","11.5","11.7","11.8","11.9","11.10","11.11","11.12","22.0","23.0","30.11","30.40","30.46","33.0","34.0"],"d":["1.6","11.6"],"info":["1.11","2.3","2.13","5.14","5.27","5.38","5.39","9.4","11.11","12.3","12.13","15.8","15.13","15.14","15.22","15.27","15.28","15.29","15.33","15.34","19.4","20.5","28.8","31.5","40.8","42.31"],"const":["2.0","5.17","5.18","9.4","12.0","15.17","15.18","19.4","20.7","25.5","36.5","37.11"],"onready":["2.0","12.0"],"console":["2.1","2.3","2.4","2.5","2.6","2.8","2.9","2.10","2.11","2.12","2.13","2.14","2.15","2.16","2.17","2.18","2.19","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.29","2.30","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.40","5.24","5.38","5.39","5.40","9.4","12.1","12.3","12.4","12.5","12.6","12.8","12.9","12.10","12.11","12.12","12.13","12.14","12.15","12.16","12.17","12.18","12.19","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.29","12.30","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.40","15.13","15.14","15.22","15.27","15.28","15.33","15.34","15.40","19.4","20.5","24.4","28.8","31.5","35.4","37.14","40.8","42.31"],"start":["2.3","12.3"],"end":["2.3","12.3"],"event":["2.6","2.8","2.9","2.10","2.11","2.13","2.14","5.38","9.4","12.6","12.8","12.9","12.10","12.11","12.13","12.14"],"reconnecttime":["2.12","12.12"],"state":["2.13","2.16","2.17","2.22","2.23","2.24","2.25","2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","9.5","9.6","12.13","12.16","12.17","12.22","12.23","12.24","12.25","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","12.40","19.6"],"height":["2.19","12.19","31.5"],"datauri":["2.26","12.26"],"currenttime":["2.27","12.27","28.12","40.12"],"offset":["2.28","12.28"],"text":["2.29","12.29","37.7"],"ass":["2.31","12.31"],"load":["2.45","12.45"],"方法重新加载它":["2.45","12.45"],"基本上用不到":["3.0","13.0"],"app":["3.1","3.3","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.23","3.24","3.25","3.26","3.30","3.31","13.1","13.3","13.13","13.14","13.15","13.17","13.18","13.19","13.20","13.23","13.24","13.25","13.26","13.30","13.31","15.4","15.25","15.39","20.7","21.0","22.0","23.0","28.5","28.13","30.3","30.6","30.8","30.11","30.12","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.26","30.27","30.34","30.40","30.43","30.44","30.46","30.47","31.7","32.0","33.0","34.0","40.5","40.13","42.3","42.11","42.34"],"url":["3.1","3.2","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.22","3.23","3.24","3.25","3.26","3.30","3.31","3.32","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.19","13.20","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","15.4","15.25","15.39","20.7","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.34","30.37","30.43","30.44","30.46","30.47","31.7","42.6","42.11","42.12","42.18","42.20","42.22","42.23","42.26","42.27","42.34","42.43","42.46","42.47"],"assets":["3.1","3.2","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.21","3.22","3.23","3.24","3.25","3.26","3.30","3.31","3.32","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.19","13.20","13.21","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","15.4","15.25","15.36","15.37","15.39","15.40","20.7","22.0","30.5","30.6","30.8","30.9","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.21","30.22","30.23","30.25","30.27","30.34","30.36","30.37","30.40","30.43","30.44","30.46","30.47","31.7","33.0","42.3","42.6","42.8","42.9","42.11","42.12","42.13","42.14","42.15","42.16","42.18","42.20","42.21","42.22","42.23","42.25","42.26","42.27","42.34","42.40","42.43","42.44","42.46","42.47"],"loop":["3.4","3.5","3.6","13.4","13.5","13.6"],"flip":["3.4","3.5","3.6","13.4","13.5","13.6"],"dblclick":["3.16","13.16"],"setting":["3.27","3.28","13.27","13.28","19.1","37.11"],"playbackrate":["3.27","13.27"],"contextmenu":["3.27","3.28","3.29","13.27","13.28","13.29"],"aspectratio":["3.28","13.28"],"show":["3.28","3.29","9.7","13.28","13.29","19.7","37.9","42.28","42.30"],"click":["4.0","5.35","5.38","14.0","15.35","24.4","25.5","35.4","36.5"],"marginright":["4.0","14.0"],"比较常用":["5.0"],"muted":["5.1","15.1","15.24"],"ready":["5.2","5.3","5.5","5.6","5.7","5.9","5.16","5.20","5.23","5.24","5.25","6.4","7.4","8.4","9.7","15.2","15.3","15.5","15.6","15.7","15.9","15.10","15.14","15.17","15.18","15.20","15.24","16.4","17.4","18.4","19.7","37.14"],"seek":["5.7","15.7","15.10","15.12"],"switch":["5.11"],"和":["5.11","7.1","37.6"],"的功能是一样的":["5.11"],"只是":["5.11"],"有的视频是没有时长的":["5.15"],"async":["5.17","5.18","15.17","15.18"],"await":["5.17","5.18","15.17","15.18"],"t":["5.22"],"json":["5.26"],"stringify":["5.26"],"删除区间循环播放":["5.30"],"只需要设置":["5.30"],"为":["5.30"],"即可":["5.30"],"resize":["5.31","37.13"],"当你的容器只有宽度":["5.31"],"playsinline":["5.32","15.32","42.37"],"m3u8":["5.33","30.2","42.40"],"000":["5.34"],"right":["5.35","7.1","15.35"],"html":["5.35","15.35","20.1","31.1"],"green":["5.41"],"1080p":["5.42","15.41"],"组件点击事件":["6.1","8.1"],"mounted":["6.1","8.1","30.28","37.11","42.28"],"组件挂载后触发":["6.1","8.1"],"get":["6.2","6.3","7.2","7.3","8.2","8.3","16.2","16.3","17.2","17.3","18.2","18.3"],"the":["6.2","6.3","6.4","6.5","7.2","7.3","7.4","8.2","8.3","8.4","9.7","15.15","16.2","16.3","16.4","16.5","17.2","17.3","17.4","18.2","18.3","18.4","19.7","30.19"],"element":["6.2","6.3","7.2","7.3","8.2","8.3","16.2","16.3","17.2","17.3","18.2","18.3"],"of":["6.2","6.3","7.2","7.3","8.2","8.3","16.2","16.3","17.2","17.3","18.2","18.3","30.38"],"by":["6.2","6.3","6.4","6.5","7.2","7.4","8.4","16.2","16.3","16.4","16.5","17.2","17.4","18.4","29.0","30.2"],"delete":["6.4","7.4","8.4","9.7","16.4","17.4","18.4","19.7"],"控制控制器出现的左右位置":["7.1"],"selector":["7.1"],"array":["7.1","17.1"],"return":["7.2","15.11","17.2"],"control":["7.2","7.3","7.4","17.2","17.3","17.4"],"200px":["8.5","18.5"],"720p":["9.2","19.2"],"360p":["9.2","19.2"],"nextstate":["9.4","19.4"],"heigth":["9.5","9.6","19.5","19.6"],"src":["9.5","9.6","19.5","19.6"],"svg":["9.5","9.6","19.5","19.6"],"pip":["9.8","19.8"],"mode":["9.8","19.8"],"close":["9.8","19.8"],"说明这些属性是不稳定的":["11.0"],"可能会在将来被更改":["11.0"],"is":["15.0","16.1","18.1","24.4","30.45","35.4"],"more":["15.0","30.10","30.41"],"commonly":["15.0"],"method":["15.11","28.7","40.7"],"promise":["15.11"],"when":["15.11"],"resolve":["15.11","28.7","40.7"],"means":["15.11"],"address":["15.11","30.17"],"can":["15.11"],"that":["15.15","17.1"],"not":["15.15","15.31"],"been":["15.15"],"decoded":["15.15"],"obtained":["15.15"],"interaction":["15.19","15.21"],"before":["15.19"],"triggering":["15.19","15.21"],"for":["15.19","15.21","30.10"],"page":["15.21"],"must":["15.21","20.3","30.10"],"have":["15.21","20.3"],"tip":["15.26","20.6","31.6","31.8"],"dimension":["15.26"],"option":["15.30"],"aer":["15.30"],"two":["15.30"],"does":["15.31"],"know":["15.31"],"specific":["15.31"],"position":["15.35"],"need":["15.38","30.2","30.45"],"some":["15.38"],"events":["15.38"],"only":["15.38","30.19"],"exist":["15.38"],"in":["15.38","20.4","30.4"],"life":["15.38"],"cycle":["15.38"],"container":["15.39","20.7","21.0","22.0","23.0","30.3","30.21","30.23","30.34","30.40","30.43","30.46","32.0","33.0","34.0","42.34"],"triggered":["16.1","18.1"],"after":["16.1","18.1","30.19"],"tooltip":["16.1","18.1"],"objects":["17.1"],"select":["17.1"],"list":["17.1"],"onselect":["17.1"],"a":["17.1","20.3"],"item":["19.4"],"width":["19.5","28.5","31.5","40.5"],"chinese":["20.0"],"your":["20.3"],"following":["20.3","20.8","30.30","30.31"],"links":["20.3"],"directly":["20.4"],"will":["20.4","30.19"],"400px":["20.5","31.5"],"margin":["20.5","31.5"],"60px":["20.5","31.5"],"auto":["20.5","31.5"],"art":["20.6","28.12","30.11","30.26","31.6","40.12"],"new":["20.6","22.0","30.11","30.26","30.40","31.6","33.0","42.26"],"be":["20.8","30.10"],"please":["20.8","30.28","30.29","30.30","30.31"],"modify":["20.8"],"configuration":["20.8"],"and":["20.8","30.2","30.17"],"akamaized":["21.0","32.0"],"net":["21.0","32.0"],"akamai":["21.0","32.0"],"bbb":["21.0","32.0"],"30fps":["21.0","32.0"],"var":["22.0","23.0","30.11","33.0","34.0"],"test":["23.0","34.0"],"streams":["23.0","34.0"],"mux":["23.0","34.0"],"x36xhzz":["23.0","34.0"],"detail":["24.4","35.4"],"查看详情":["24.4","35.4"],"canbeclosed":["24.4","35.4"],"s秒后可关闭广告":["24.4","35.4"],"ad":["24.4","35.4"],"clicked":["24.4","35.4"],"fullscreen":["25.4","36.4"],"fullscreenweb":["25.4","36.4"],"function":["25.5","36.5","37.8","37.11","42.31"],"plugins":["25.5","36.5"],"artplayerplugincontrol":["25.5","36.5"],"或者获取":["28.1","40.1"],"div":["28.5","28.13","40.5","40.13"],"class":["28.5","28.13","40.5","40.13"],"style":["28.5","40.5"],"or":["28.7","30.2","40.7"],"currenttime2":["28.7","40.7"],"里":["28.10","40.10"],"data":["28.12","40.12"],"matched":["29.0"],"displayed":["29.0"],"default":["29.0"],"i18n":["29.0"],"lang":["29.1","41.1"],"window":["29.2","41.2"],"imported":["29.4","41.4"],"aspect":["30.1"],"ratio":["30.1","42.1"],"ogg":["30.2","42.2"],"webm":["30.2","42.2"],"if":["30.2","30.4","30.17"],"callback":["30.4"],"instance":["30.4"],"but":["30.4"],"read":["30.7"],"value":["30.7"],"at":["30.7"],"js":["30.11"],"source":["30.17"],"website":["30.17"],"are":["30.17"],"take":["30.19"],"effect":["30.19"],"player":["30.19"],"gets":["30.19"],"innerhtml":["30.26"],"refer":["30.28","30.29","30.30","30.31"],"sd":["30.32"],"480p":["30.32","42.32"],"谁でもいいはずなのに":["30.33","42.33"],"夏の想い出がまわる":["30.33","42.33"],"png":["30.35","30.38","42.35","42.38"],"definition":["30.38"],"however":["30.39"],"cannot":["30.39"],"resolved":["30.39"],"zh":["30.42","42.42"],"cn":["30.42","42.42"],"tw":["30.42"],"same":["30.45"],"different":["30.45"],"you":["30.45"],"definitions":["30.48"],"播放器的尺寸依赖于容器":["31.3"],"的尺寸":["31.3"],"所以你的容器":["31.3"],"非响应式":["31.4"],"在":["31.4"],"600px":["31.5"],"全部":["31.6"],"volume":["31.7"],"假如你要兼容更古老的浏览器时":["31.8"],"dark":["37.4"],"输入框自定义挂载时的主题色":["37.4"],"默认为":["37.4"],"可以选填亮色":["37.4"],"light":["37.4"],"heatmap":["37.4"],"是否开启弹幕热度图":["37.4"],"beforeemit":["37.4"],"trim":["37.4"],"red":["37.5"],"文件":["37.6"],"bilibili":["37.6"],"网站的弹幕格式一致":["37.6"],"time":["37.7"],"target":["37.9"],"innertext":["37.9"],"else":["37.9"],"color":["37.10"],"math":["37.10"],"floor":["37.10"],"random":["37.10"],"0xffffff":["37.10"],"tostring":["37.10"],"center":["37.11"],"queryselector":["37.11"],"切换弹幕":["37.12"],"config":["37.12"],"xml":["37.13","37.14"],"弹幕开始":["37.15"],"hide":["37.15"],"弹幕隐藏":["37.15"],"写法参考":["41.0","42.48"],"默认支持三种视频文件格式":["42.2"],"播放器会缓存最后一次音量的大小":["42.7"],"假如希望默认进入页面就能自动播放视频":["42.10"],"必需为":["42.10"],"视频快进":["42.19"],"视频快退":["42.19"],"space":["42.19"],"切换播放":["42.19"],"暂停":["42.19"],"subtitle":["42.24"],"组件配置":["42.30"],"args":["42.31"],"hd":["42.32"],"webkit":["42.37"],"全部图标的定义":["42.38"],"但无法解析这种后缀":["42.39"],"作为":["42.45"],"key":["42.45"],"来缓存播放进度的":["42.45"],"但假如你的同一个视频的":["42.45"]},{"0":["5.9","5.10","5.12","5.15","5.22","15.9","15.10","15.12","15.15","15.22","20.7","31.7"],"1":["9.6","19.6"],"2":["5.7","15.7","15.28","37.7"],"3":["37.5","37.7"],"5":["5.5","5.6","9.6","15.5","15.6","15.8","15.14","19.6","20.7","31.7"],"9":["15.29","42.1"],"10":["9.6","19.6","42.35"],"100":["28.13","40.13"],"240":["30.33"],"300":["30.33","42.33"],"333":["37.7"],"360":["19.2"],"404":["3.13","3.14","13.13","13.14"],"1000":["0.12","0.14","10.12","10.14","28.7","40.7"],"3000":["5.2","5.3","5.7","5.10","5.12","5.20","5.42","6.4","6.5","7.4","7.5","8.4","8.5","9.7","9.8","15.2","15.3","15.7","15.10","15.12","15.20","15.41","16.4","16.5","17.4","17.5","18.4","18.5","19.7","19.8"],"对象":["0.1","10.1"],"播放器不会马上做出响应":["0.1","10.1"],"types":["0.2","2.0","10.2","12.0","29.0","30.38","42.38"],"d":["0.2","0.5","2.0","10.2","10.5","12.0","29.0","30.38","30.48","41.0","42.38","42.48"],"ts":["0.2","0.5","1.6","2.0","10.2","10.5","11.6","12.0","29.0","30.38","30.48","41.0","42.38","42.48"],"warning":["0.3","0.9","0.10","0.13","0.15","2.0","10.3","10.13","10.15","12.0","20.5","30.1","30.35","30.42","31.5","42.1","42.28","42.29","42.35","42.42"],"提示":["0.3","0.13","5.26","5.38","10.3","10.13","42.1","42.4","42.19"],"假如你需要一些":["0.3","5.38","10.3"],"事件只存在于播放器的生命周期上时":["0.3","5.38","10.3"],"强烈建议使用这些函数":["0.3","10.3"],"以避免造成内存泄漏":["0.3","5.38","10.3"],"your":["0.4","10.4"],"假如想在实例化之前更新":["0.6","10.6"],"请使用基础选项的":["0.6","10.6"],"来更新":["0.6","10.6"],"的显示":["0.7","10.7"],"组件配置":["0.8","0.9","0.10","10.8","10.9","10.10","42.28","42.31"],"请参考以下地址":["0.8","0.9","0.10","0.15","10.8","10.9","10.10","10.15","42.28","42.29","42.30","42.31"],"component":["0.8","0.9","0.10","0.15","10.8","10.9","10.10","10.15","30.28","30.29","30.30","30.31","42.28","42.29","42.30","42.31"],"color":["0.11","10.11","30.36","42.36"],"red":["0.11","10.11"],"false":["0.12","5.20","9.8","10.12","15.20","19.8"],"只在播放器获得焦点后":["0.13","10.13","42.19"],"如点击了播放器后":["0.13","10.13","42.19"],"这些快捷键才会生效":["0.13","10.13","42.19"],"true":["0.14","3.10","3.11","3.12","3.20","3.21","3.22","3.23","5.23","10.14","13.10","13.11","13.12","13.20","13.21","13.22","13.23","15.13","15.23","30.8","30.9","30.11","30.12","30.13","30.14","30.15","30.16","30.18","30.20","30.22","30.23","30.25","30.26","30.37","30.43","30.44","30.46","30.47","37.10","42.8","42.9","42.11","42.12","42.13","42.14","42.15","42.16","42.18","42.20","42.22","42.23","42.25","42.26","42.37","42.43","42.44","42.46","42.47"],"设置面板":["0.15","10.15"],"html":["0.15","10.15","24.2","25.2","26.2","27.2","28.3","30.41","30.42","35.2","36.2","37.2","38.2","39.2","40.3","42.41","42.42"],"ready":["0.16","2.0","5.1","5.4","10.16","12.0","15.1","15.4","15.16","15.23","15.25","21.0","22.0","23.0","32.0","33.0","34.0"],"off":["2.0","12.0"],"全部事件请参考以下地址":["2.0","12.0"],"events":["2.0","12.0"],"info":["2.1","2.2","2.4","2.5","2.6","2.7","2.8","2.9","2.10","2.11","2.12","2.14","2.15","2.16","2.17","2.18","2.19","2.20","2.21","2.22","2.23","2.24","2.25","2.26","2.27","2.28","2.29","2.30","2.31","5.17","5.18","5.24","5.36","5.37","5.40","9.5","12.1","12.2","12.4","12.5","12.6","12.7","12.8","12.9","12.10","12.11","12.12","12.14","12.15","12.16","12.17","12.18","12.19","12.20","12.21","12.22","12.23","12.24","12.25","12.26","12.27","12.28","12.29","12.30","12.31","15.17","15.18","15.24","15.36","15.37","15.39","15.40","19.5","21.0","22.0","23.0","24.4","32.0","33.0","34.0","35.4","37.14"],"console":["2.2","2.7","2.20","2.28","2.31","2.39","3.7","3.8","3.9","3.16","5.17","5.18","5.36","5.37","9.5","12.2","12.7","12.20","12.28","12.31","12.39","13.7","13.8","13.9","13.16","15.17","15.18","15.24","15.36","15.37","15.39","19.5","21.0","22.0","23.0","32.0","33.0","34.0"],"log":["2.32","2.33","2.34","2.35","2.36","2.37","2.38","2.39","2.40","3.7","3.8","3.9","3.16","12.32","12.33","12.34","12.35","12.36","12.37","12.38","12.39","12.40","13.7","13.8","13.9","13.16"],"video":["3.1","3.2","3.3","3.15","3.17","3.18","3.19","3.24","3.25","3.26","3.31","13.1","13.2","13.3","13.15","13.17","13.18","13.19","13.24","13.25","13.26","13.31","30.3","30.6","30.8","30.11","30.12","30.18","30.20","30.21","30.22","30.23","30.25","30.26","30.34","30.43","30.47","42.3","42.11","42.26","42.34"],"mp4":["3.1","3.2","3.3","3.10","3.11","3.12","3.13","3.14","3.15","3.17","3.18","3.19","3.20","3.22","3.23","3.24","3.25","3.26","3.30","3.31","3.32","13.1","13.2","13.3","13.10","13.11","13.12","13.13","13.14","13.15","13.17","13.18","13.19","13.20","13.22","13.23","13.24","13.25","13.26","13.30","13.31","13.32","30.3","30.6","30.8","30.9","30.11","30.12","30.13","30.18","30.20","30.21","30.22","30.23","30.25","30.26","30.27","30.34","30.43","30.44","30.46","30.47","42.3","42.6","42.11","42.12","42.18","42.20","42.22","42.23","42.26","42.27","42.34","42.43","42.46","42.47"],"playbackrate":["3.4","3.5","3.6","13.4","13.5","13.6"],"aspectratio":["3.4","3.5","3.6","13.4","13.5","13.6"],"autoplayback":["3.10","3.11","3.12","13.10","13.11","13.12"],"sample":["3.13","3.14","3.15","3.18","3.19","3.24","3.25","13.13","13.14","13.15","13.18","13.19","13.24","13.25","30.3","30.11","30.26","30.46","42.3","42.26"],"autoorientation":["3.20","13.20"],"show":["3.21","3.27","13.21","13.27","37.15"],"fastforward":["3.22","3.23","13.22","13.23"],"fullscreenweb":["3.30","13.30"],"miniprogressbar":["3.32","13.32"],"pause":["4.0","14.0"],"layer":["4.0","14.0"],"png":["4.0","14.0"],"t":["5.9","5.10","5.12","15.9","15.10","15.12","15.22","15.30"],"方法会返回":["5.11"],"promise":["5.11"],"当":["5.11"],"resolve":["5.11"],"时表示新地址是可以播放":["5.11"],"reject":["5.11","15.11"],"时表示新地址加载错误":["5.11"],"例如直播中的视频或者没被解码完成的视频":["5.15"],"这个时候获取的时长会是":["5.15"],"由于浏览器安全机制":["5.19","5.21","42.17"],"触发窗口全屏前":["5.19"],"页面必须先存在交互":["5.19","5.21"],"例如用户点击过页面":["5.19","5.21"],"触发画中画前":["5.21"],"尺寸和坐标信息是通过":["5.26"],"getboundingclientrect":["5.26","15.26"],"获取的":["5.26"],"与":["5.30"],"option":["5.30"],"是两个不同的东西":["5.30"],"请勿弄乱":["5.30"],"但不知道具体高度时":["5.31"],"这个属性很有用":["5.31"],"它能自动计算出视频的高度":["5.31"],"但你需要确定设置这个属性的时机":["5.31"],"强烈建议使用该函数":["5.38"],"4k":["5.42","15.41"],"tooltip":["6.1","8.1"],"组件的提示文本":["6.1","8.1"],"remove":["6.4","7.4","8.4","9.7"],"选择列表的对象数组":["7.1"],"onselect":["7.1"],"选择列表的元素被点击时触发的函数":["7.1"],"by":["7.3","8.2","8.3","9.7","17.3","18.2","18.3","19.7"],"left":["8.5","18.5","30.2"],"switchquality":["9.2","19.2"],"open":["9.4","19.4"],"return":["9.4","9.5","19.4","19.5"],"item":["9.5","19.5"],"event":["9.5"],"x":["9.5","19.5"],"range":["9.6","19.6"],"switch":["9.8","19.8"],"used":["15.0"],"settimeout":["15.3","15.20","28.7","40.7"],"on":["15.4","15.19","15.21","15.25","30.2"],"played":["15.11"],"loaded":["15.11"],"error":["15.11"],"at":["15.15","30.39"],"this":["15.15","15.38"],"time":["15.15","15.31","30.39"],"will":["15.15","20.5","30.4"],"be":["15.15"],"example":["15.19","15.21"],"user":["15.19","15.21"],"has":["15.19","15.21"],"clicked":["15.19","15.21","17.1"],"are":["15.26"],"obtained":["15.26"],"through":["15.26"],"different":["15.30"],"things":["15.30"],"please":["15.30","30.2","30.10"],"don":["15.30"],"mix":["15.30"],"them":["15.30"],"up":["15.30"],"you":["15.31","30.39"],"need":["15.31"],"determine":["15.31"],"m3u8":["15.33","30.40","42.2"],"000":["15.34"],"we":["15.38"],"strongly":["15.38"],"recommend":["15.38"],"using":["15.38"],"avoid":["15.38"],"memory":["15.38"],"leakage":["15.38"],"text":["16.1","18.1"],"when":["17.1"],"an":["17.1"],"install":["20.0"],"script":["20.1","24.2","25.2","26.2","27.2","28.3","31.1","35.2","36.2","37.2","38.2","39.2","40.3"],"can":["20.3"],"see":["20.3"],"more":["20.3","30.42"],"examples":["20.3"],"packages":["20.3","20.6","31.3","31.6"],"template":["20.3","31.3"],"not":["20.4","20.5","30.4"],"change":["20.4","20.5","37.11"],"the":["20.4","20.5"],"player":["20.4"],"tip":["20.5","30.1","31.3"],"modifying":["20.5"],"directly":["20.5"],"in":["20.5"],"all":["20.6","30.1","30.38"],"definitions":["20.6"],"volume":["20.7"],"art8":["20.7","31.7"],"new":["20.7","31.7"],"build":["20.8","31.8"],"it":["20.8"],"yourself":["20.8"],"scripts":["20.8","31.8"],"reference":["20.8","29.0"],"documents":["20.8"],"browserslist":["20.8","31.8"],"type":["21.0","23.0","32.0","34.0"],"customtype":["21.0","22.0","23.0","32.0","33.0","34.0"],"skipped":["24.4","35.4"],"skip":["24.4","35.4"],"plugins":["25.4","36.4"],"artplayerplugincontrol":["25.4","36.4"],"播放器的值":["28.1","40.1"],"height":["28.5","28.13","40.5","40.13"],"style":["28.13","40.13"],"width":["28.13","40.13"],"writing":["29.0"],"or":["29.1","41.1"],"options":["30.1"],"only":["30.1"],"is":["30.1"],"required":["30.1"],"flv":["30.2","42.2"],"other":["30.2"],"refer":["30.2"],"libraries":["30.2"],"assets":["30.3","30.11","30.26"],"uses":["30.4"],"arrow":["30.4"],"point":["30.4"],"jpg":["30.5","42.5"],"ffad00":["30.6","42.6"],"next":["30.7"],"initialization":["30.7"],"such":["30.7","30.19"],"as":["30.7","30.19"],"refreshing":["30.7"],"page":["30.7"],"information":["30.10"],"read":["30.10"],"policy":["30.10","42.10"],"changes":["30.10","42.10"],"url":["30.11","30.26"],"cross":["30.17"],"domain":["30.17"],"may":["30.17"],"fail":["30.17"],"focus":["30.19"],"clicking":["30.19"],"srt":["30.24","42.24"],"setting":["30.24","30.31","30.41","30.42","42.14","42.15","42.16","42.24"],"to":["30.28"],"following":["30.28","30.29"],"address":["30.28","30.29","30.30","30.31"],"for":["30.28","30.29","30.30","30.31"],"hd":["30.32"],"720p":["30.32","42.32"],"こんなとこにあるはずもないのに":["30.33","42.33"],"终わり":["30.33","42.33"],"generate":["30.35"],"preview":["30.35"],"online":["30.35"],"tool":["30.35","42.35"],"03a9f4":["30.36","42.36"],"font":["30.36","42.36"],"size":["30.36","42.36"],"30px":["30.36","42.36"],"webkit":["30.37"],"playsinline":["30.37"],"if":["30.39"],"use":["30.39"],"better":["30.39"],"specify":["30.39"],"same":["30.39"],"start":["30.41","30.42","42.41","42.42"],"i18n":["30.41","42.41"],"en":["30.42"],"identify":["30.45"],"unique":["30.45"],"必须是有尺寸的":["31.3"],"以下链接可以看到更多的使用例子":["31.3"],"里直接修改":["31.4","31.5"],"是不会改变播放器的":["31.4","31.5"],"非响应式":["31.5"],"在":["31.5"],"定义":["31.6"],"请修改以下配置然后自行构建":["31.8"],"构建配置":["31.8"],"参考文档":["31.8"],"发送弹幕前的自定义校验":["37.4"],"通过":["37.4"],"mount":["37.4"],"选项可以自定义输入框挂载的位置":["37.4"],"默认挂载于播放器底部":["37.4"],"仅在当宽度小于最小值时生效":["37.4"],"document":["37.4"],"queryselector":["37.4"],"artplayer":["37.4"],"green":["37.5"],"显示弹幕":["37.8","37.9"],"hide":["37.9"],"border":["37.10"],"addeventlistener":["37.11"],"number":["37.11"],"v2":["37.12"],"弹幕显示":["37.15"],"destroy":["37.15"],"弹幕销毁":["37.15"],"全部选项里":["42.1"],"只有":["42.1"],"是必填的":["42.1"],"如需要播放":["42.2"],"或者":["42.2"],"等其它格式":["42.2"],"请参考左侧的":["42.2"],"第三方库":["42.2"],"回调函数里的":["42.4"],"就是播放器实例":["42.4"],"但回调函数假如使用了箭头函数":["42.4"],"则不会指向播放器实例":["42.4"],"下次初始化时":["42.7"],"如刷新页面":["42.7"],"播放器会读取该缓存值":["42.7"],"更多信息请阅读":["42.10"],"假如视频源地址和网站是跨域的":["42.17"],"可能会出现截图失败":["42.17"],"在线生成预览图":["42.35"],"thumbnail":["42.35"],"所以假如你使用了":["42.39"],"最好同时要指明":["42.39"],"function":["42.40"],"更多的语言设置":["42.41","42.42"],"tw":["42.42"],"是不同的话":["42.45"],"那么你需要使用":["42.45"],"来标识视频的唯一":["42.45"]}]'},e={"0.0":{t:"# 高级属性",p:`这里的 高级属性 是指挂载在 实例 的 二级属性，比较少用 -`,l:"advanced/built-in.html",a:"高级属性"},"0.1":{t:"`option`",p:`播放器的选项 -<div className="run-code">▶ Run Code< ...`,l:"advanced/built-in.html#option",a:"option"},"0.2":{t:"`template`",p:`管理播放器所有的 DOM 元素 -<div className="run-code">▶ Ru ...`,l:"advanced/built-in.html#template",a:"template"},"0.3":{t:"`events`",p:"管理播放器所有的 DOM 事件，实质上是代理了 addEventListener 和 removeEventListener ...",l:"advanced/built-in.html#events",a:"events"},"0.4":{t:"`storage`",p:`管理播放器的本地存储 - -name 属性用于设置缓存的 key -set 方法用于设置缓存 -get 方法用于获取缓存 -del 方 ...`,l:"advanced/built-in.html#storage",a:"storage"},"0.5":{t:"`icons`",p:`管理播放器所有的 svg 图标 -<div className="run-code">▶ Ru ...`,l:"advanced/built-in.html#icons",a:"icons"},"0.6":{t:"`i18n`",p:`管理播放器的 i18n - -get 方法用于获取 i18n 的值 -update 方法用于更新 i18n 对象 - -<div ...`,l:"advanced/built-in.html#i18n",a:"i18n"},"0.7":{t:"`notice`",p:`管理播放器的提示语，只有一个 show 属性用于显示提示语 -<div className="run-code ...`,l:"advanced/built-in.html#notice",a:"notice"},"0.8":{t:"`layers`",p:`管理播放器的层 - -add 方法用于动态添加层 -remove 方法用于动态删除层 -update 方法用于动态更新层 -show ...`,l:"advanced/built-in.html#layers",a:"layers"},"0.9":{t:"`controls`",p:`管理播放器的控制器 - -add 方法用于动态添加控制器 -remove 方法用于动态删除控制器 -update 方法用于动态更新控 ...`,l:"advanced/built-in.html#controls",a:"controls"},"0.10":{t:"`contextmenu`",p:`管理播放器的右键菜单 - -add 方法用于动态添加菜单 -remove 方法用于动态删除菜单 -update 方法用于动态更新菜单 ...`,l:"advanced/built-in.html#contextmenu",a:"contextmenu"},"0.11":{t:"`subtitle`",p:`管理播放器的字幕功能 - -url 属性设置和返回当前字幕地址 -style 方法设置当前字幕的样式 -switch 方法设置当前字 ...`,l:"advanced/built-in.html#subtitle",a:"subtitle"},"0.12":{t:"`loading`",p:`管理播放器的加载层 - -show 属性用于设置是否显示加载层 -toggle 属性用于切换是否显示加载层 - -<div cl ...`,l:"advanced/built-in.html#loading",a:"loading"},"0.13":{t:"`hotkey`",p:`管理播放器的快捷键功能 - -add 方法用于添加快捷键 -remove 方法用于删除快捷键 - -<div className ...`,l:"advanced/built-in.html#hotkey",a:"hotkey"},"0.14":{t:"`mask`",p:`管理播放器的遮罩层 - -show 属性用于设置是否显示遮罩层 -toggle 属性用于切换是否显示遮罩层 - -<div cl ...`,l:"advanced/built-in.html#mask",a:"mask"},"0.15":{t:"`setting`",p:`管理播放器的设置面板 - -add 方法用于动态添加设置项 -remove 方法用于动态删除设置项 -update 方法用于动态更新 ...`,l:"advanced/built-in.html#setting",a:"setting"},"0.16":{t:"`plugins`",p:`管理播放器的插件功能，只有一个方法 add 用于动态添加插件 -<div className="run-cod ...`,l:"advanced/built-in.html#plugins",a:"plugins"},"1.0":{t:"# 静态属性",p:`这里的 静态属性 是指挂载在 构造函数 的 一级属性，非常少使用 -`,l:"advanced/class.html",a:"静态属性"},"1.1":{t:"`instances`",p:`返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性 -<div className=" ...`,l:"advanced/class.html#instances",a:"instances"},"1.2":{t:"`version`",p:`返回播放器的版本信息 -<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#version",a:"version"},"1.3":{t:"`env`",p:`返回播放器的环境变量 -<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#env",a:"env"},"1.4":{t:"`build`",p:`返回播放器的打包时间 -<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#build",a:"build"},"1.5":{t:"`config`",p:`返回视频的默认配置 -<div className="run-code">▶ Run Code ...`,l:"advanced/class.html#config",a:"config"},"1.6":{t:"`utils`",p:`返回播放器的工具函数集合 -<div className="run-code">▶ Run C ...`,l:"advanced/class.html#utils",a:"utils"},"1.7":{t:"`scheme`",p:`返回播放器选项的校验方案 -<div className="run-code">▶ Run C ...`,l:"advanced/class.html#scheme",a:"scheme"},"1.8":{t:"`Emitter`",p:`返回事件分发器的构造函数 -<div className="run-code">▶ Run C ...`,l:"advanced/class.html#emitter",a:"emitter"},"1.9":{t:"`validator`",p:`返回选项的校验函数 -<div className="run-code">▶ Run Code ...`,l:"advanced/class.html#validator",a:"validator"},"1.10":{t:"`kindOf`",p:`返回类型检测的函数工具 -<div className="run-code">▶ Run Co ...`,l:"advanced/class.html#kindof",a:"kindof"},"1.11":{t:"`html`",p:`返回播放器所需的 html 字符串 -<div className="run-code">▶ ...`,l:"advanced/class.html#html",a:"html"},"1.12":{t:"`option`",p:`返回播放器的默认选项 -<div className="run-code">▶ Run Cod ...`,l:"advanced/class.html#option",a:"option"},"2.0":{t:"# 实例事件",p:`播放器的事件分为两种，一种视频的 原生事件 (前缀 video:)，另外一种是 自定义事件 -监听事件： -<div cl ...`,l:"advanced/event.html",a:"实例事件"},"2.1":{t:"`ready`",p:`当播放器首次可以播放器时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#ready",a:"ready"},"2.2":{t:"`restart`",p:`当播放器切换地址后并可以播放时触发 -<div className="run-code">▶ ...`,l:"advanced/event.html#restart",a:"restart"},"2.3":{t:"`loop`",p:`当出现区间循环时触发 -<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#loop",a:"loop"},"2.4":{t:"`pause`",p:`当播放器暂停时触发 -<div className="run-code">▶ Run Code ...`,l:"advanced/event.html#pause",a:"pause"},"2.5":{t:"`play`",p:`当播放器播放时触发 -<div className="run-code">▶ Run Code ...`,l:"advanced/event.html#play",a:"play"},"2.6":{t:"`hotkey`",p:`当播放器热键被按下时触发 -<div className="run-code">▶ Run C ...`,l:"advanced/event.html#hotkey",a:"hotkey"},"2.7":{t:"`destroy`",p:`当播放器销毁时触发 -<div className="run-code">▶ Run Code ...`,l:"advanced/event.html#destroy",a:"destroy"},"2.8":{t:"`focus`",p:`当播放器获得焦点时触发 -<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#focus",a:"focus"},"2.9":{t:"`blur`",p:`当播放器失去焦点时触发 -<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#blur",a:"blur"},"2.10":{t:"`dblclick`",p:`当播放器被双击时触发 -<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#dblclick",a:"dblclick"},"2.11":{t:"`click`",p:`当播放器被单击时触发 -<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#click",a:"click"},"2.12":{t:"`error`",p:`当播放器加载视频发生错误时触发 -<div className="run-code">▶ Ru ...`,l:"advanced/event.html#error",a:"error"},"2.13":{t:"`hover`",p:`当播放器被鼠标移出或者移入时触发 -<div className="run-code">▶ R ...`,l:"advanced/event.html#hover",a:"hover"},"2.14":{t:"`mousemove`",p:`当播放器被鼠标经过时触发 -<div className="run-code">▶ Run C ...`,l:"advanced/event.html#mousemove",a:"mousemove"},"2.15":{t:"`resize`",p:`当播放器尺寸变化时触发 -<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#resize",a:"resize"},"2.16":{t:"`view`",p:`当播放器出现在视口时触发 -<div className="run-code">▶ Run C ...`,l:"advanced/event.html#view",a:"view"},"2.17":{t:"`lock`",p:`在移动端，当锁定的状态发生变化时触发 -<div className="run-code">▶ ...`,l:"advanced/event.html#lock",a:"lock"},"2.18":{t:"`aspectRatio`",p:`当播放器长宽比变化时触发 -<div className="run-code">▶ Run C ...`,l:"advanced/event.html#aspectratio",a:"aspectratio"},"2.19":{t:"`autoHeight`",p:`当播放器自动设置高度时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#autoheight",a:"autoheight"},"2.20":{t:"`autoSize`",p:`当播放器自动设置尺寸时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#autosize",a:"autosize"},"2.21":{t:"`flip`",p:`当播放器发生翻转时触发 -<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#flip",a:"flip"},"2.22":{t:"`fullscreen`",p:`当播放器发生窗口全屏时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#fullscreen",a:"fullscreen"},"2.23":{t:"`fullscreenWeb`",p:`当播放器发生网页全屏时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#fullscreenweb",a:"fullscreenweb"},"2.24":{t:"`mini`",p:`当播放器进入迷你模式时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#mini",a:"mini"},"2.25":{t:"`pip`",p:`当播放器进入画中画时触发 -<div className="run-code">▶ Run C ...`,l:"advanced/event.html#pip",a:"pip"},"2.26":{t:"`screenshot`",p:`当播放器被截图时触发 -<div className="run-code">▶ Run Cod ...`,l:"advanced/event.html#screenshot",a:"screenshot"},"2.27":{t:"`seek`",p:`当播放器发生时间跳转时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#seek",a:"seek"},"2.28":{t:"`subtitleOffset`",p:`当播放器发生字幕偏移时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#subtitleoffset",a:"subtitleoffset"},"2.29":{t:"`subtitleUpdate`",p:`当字幕更新时触发 -<div className="run-code">▶ Run Code& ...`,l:"advanced/event.html#subtitleupdate",a:"subtitleupdate"},"2.30":{t:"`subtitleLoad`",p:`当字幕加载时触发 -<div className="run-code">▶ Run Code& ...`,l:"advanced/event.html#subtitleload",a:"subtitleload"},"2.31":{t:"`subtitleSwitch`",p:`当字幕切换时触发 -<div className="run-code">▶ Run Code& ...`,l:"advanced/event.html#subtitleswitch",a:"subtitleswitch"},"2.32":{t:"`info`",p:`当信息面板显示或隐藏时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#info",a:"info"},"2.33":{t:"`layer`",p:`当自定义层显示或隐藏时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#layer",a:"layer"},"2.34":{t:"`loading`",p:`当加载器显示或隐藏时触发 -<div className="run-code">▶ Run C ...`,l:"advanced/event.html#loading",a:"loading"},"2.35":{t:"`mask`",p:`当遮罩层显示或隐藏时触发 -<div className="run-code">▶ Run C ...`,l:"advanced/event.html#mask",a:"mask"},"2.36":{t:"`subtitle`",p:`当字幕层显示或隐藏时触发 -<div className="run-code">▶ Run C ...`,l:"advanced/event.html#subtitle",a:"subtitle"},"2.37":{t:"`contextmenu`",p:`当右键菜单显示或隐藏时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#contextmenu",a:"contextmenu"},"2.38":{t:"`control`",p:`当控制器显示或隐藏时触发 -<div className="run-code">▶ Run C ...`,l:"advanced/event.html#control",a:"control"},"2.39":{t:"`setting`",p:`当设置面板显示或隐藏时触发 -<div className="run-code">▶ Run ...`,l:"advanced/event.html#setting",a:"setting"},"2.40":{t:"`muted`",p:`当静音的状态变化时触发 -<div className="run-code">▶ Run Co ...`,l:"advanced/event.html#muted",a:"muted"},"2.41":{t:"`video:canplay`",p:`浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容 -`,l:"advanced/event.html#video-canplay",a:"video-canplay"},"2.42":{t:"`video:canplaythrough`",p:`浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束 -`,l:"advanced/event.html#video-canplaythrough",a:"video-canplaythrough"},"2.43":{t:"`video:complete`",p:`OfflineAudioContext 渲染完成 -`,l:"advanced/event.html#video-complete",a:"video-complete"},"2.44":{t:"`video:durationchange`",p:`duration 属性的值改变时触发 -`,l:"advanced/event.html#video-durationchange",a:"video-durationchange"},"2.45":{t:"`video:emptied`",p:"媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载 ...",l:"advanced/event.html#video-emptied",a:"video-emptied"},"2.46":{t:"`video:ended`",p:`视频停止播放，因为 media 已经到达结束点 -`,l:"advanced/event.html#video-ended",a:"video-ended"},"2.47":{t:"`video:error`",p:`获取媒体数据时出错，或者资源类型不是受支持的媒体格式 -`,l:"advanced/event.html#video-error",a:"video-error"},"2.48":{t:"`video:loadeddata`",p:`media 中的首帧已经完成加载 -`,l:"advanced/event.html#video-loadeddata",a:"video-loadeddata"},"2.49":{t:"`video:loadedmetadata`",p:`已加载元数据 -`,l:"advanced/event.html#video-loadedmetadata",a:"video-loadedmetadata"},"2.50":{t:"`video:pause`",p:`播放已暂停 -`,l:"advanced/event.html#video-pause",a:"video-pause"},"2.51":{t:"`video:play`",p:`播放已开始 -`,l:"advanced/event.html#video-play",a:"video-play"},"2.52":{t:"`video:playing`",p:`由于缺乏数据而暂停或延迟后，播放准备开始 -`,l:"advanced/event.html#video-playing",a:"video-playing"},"2.53":{t:"`video:progress`",p:`在浏览器加载资源时周期性触发 -`,l:"advanced/event.html#video-progress",a:"video-progress"},"2.54":{t:"`video:ratechange`",p:`播放速率发生变化 -`,l:"advanced/event.html#video-ratechange",a:"video-ratechange"},"2.55":{t:"`video:seeked`",p:`跳帧（seek）操作完成 -`,l:"advanced/event.html#video-seeked",a:"video-seeked"},"2.56":{t:"`video:seeking`",p:`跳帧（seek）操作开始 -`,l:"advanced/event.html#video-seeking",a:"video-seeking"},"2.57":{t:"`video:stalled`",p:`用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现 -`,l:"advanced/event.html#video-stalled",a:"video-stalled"},"2.58":{t:"`video:suspend`",p:`媒体数据加载已暂停 -`,l:"advanced/event.html#video-suspend",a:"video-suspend"},"2.59":{t:"`video:timeupdate`",p:`currentTime 属性指定的时间发生变化 -`,l:"advanced/event.html#video-timeupdate",a:"video-timeupdate"},"2.60":{t:"`video:volumechange`",p:`音量发生变化 -`,l:"advanced/event.html#video-volumechange",a:"video-volumechange"},"2.61":{t:"`video:waiting`",p:`由于暂时缺少数据，播放已停止 -`,l:"advanced/event.html#video-waiting",a:"video-waiting"},"3.0":{t:"# 全局属性",p:`这里的 全局属性 也是指挂载在 构造函数 的 一级属性，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到 -`,l:"advanced/global.html",a:"全局属性"},"3.1":{t:"DEBUG",p:`是否开始 debug 模式，可以打印出视频全部的内置事件，默认关闭 -<div className="run- ...`,l:"advanced/global.html#debug",a:"debug"},"3.2":{t:"CONTEXTMENU",p:`是否开启右键菜单，默认开启 -<div className="run-code">▶ Run ...`,l:"advanced/global.html#contextmenu",a:"contextmenu"},"3.3":{t:"NOTICE_TIME",p:`提示信息的显示时长，单位为毫秒，默认为 2000 -<div className="run-code" ...`,l:"advanced/global.html#notice-time",a:"notice-time"},"3.4":{t:"SETTING_WIDTH",p:`设置面板的默认宽度，单位为像素，默认为 250 -<div className="run-code" ...`,l:"advanced/global.html#setting-width",a:"setting-width"},"3.5":{t:"SETTING_ITEM_WIDTH",p:`设置面板的设置项的默认宽度，单位为像素，默认为 200 -<div className="run-code&q ...`,l:"advanced/global.html#setting-item-width",a:"setting-item-width"},"3.6":{t:"SETTING_ITEM_HEIGHT",p:`设置面板的设置项的默认高度，单位为像素，默认为 35 -<div className="run-code&qu ...`,l:"advanced/global.html#setting-item-height",a:"setting-item-height"},"3.7":{t:"RESIZE_TIME",p:`resize 事件的节流时间，单位为毫秒，默认为 200 -<div className="run-code& ...`,l:"advanced/global.html#resize-time",a:"resize-time"},"3.8":{t:"SCROLL_TIME",p:`scroll 事件的节流时间，单位为毫秒，默认为 200 -<div className="run-code& ...`,l:"advanced/global.html#scroll-time",a:"scroll-time"},"3.9":{t:"SCROLL_GAP",p:`view 事件的边界容差距离，单位为像素，默认为 50 -<div className="run-code&q ...`,l:"advanced/global.html#scroll-gap",a:"scroll-gap"},"3.10":{t:"AUTO_PLAYBACK_MAX",p:`自动回放功能的最大记录数，默认为 10 -<div className="run-code"> ...`,l:"advanced/global.html#auto-playback-max",a:"auto-playback-max"},"3.11":{t:"AUTO_PLAYBACK_MIN",p:`自动回放功能的最小记录时长，单位为秒，默认为 5 -<div className="run-code" ...`,l:"advanced/global.html#auto-playback-min",a:"auto-playback-min"},"3.12":{t:"AUTO_PLAYBACK_TIMEOUT",p:`自动回放功能的隐藏延迟时长，单位为毫秒，默认为 3000 -<div className="run-code& ...`,l:"advanced/global.html#auto-playback-timeout",a:"auto-playback-timeout"},"3.13":{t:"RECONNECT_TIME_MAX",p:`发生连接错误时，自动连接的最大次数，默认为 5 -<div className="run-code" ...`,l:"advanced/global.html#reconnect-time-max",a:"reconnect-time-max"},"3.14":{t:"RECONNECT_SLEEP_TIME",p:`发生连接错误时，自动连接的延迟时间，单位为毫秒，默认为 1000 -<div className="run-c ...`,l:"advanced/global.html#reconnect-sleep-time",a:"reconnect-sleep-time"},"3.15":{t:"CONTROL_HIDE_TIME",p:`底部控制栏的自动隐藏的延迟时间，单位为毫秒，默认为 3000 -<div className="run-cod ...`,l:"advanced/global.html#control-hide-time",a:"control-hide-time"},"3.16":{t:"DBCLICK_TIME",p:`双击事件的延迟事件，单位为毫秒，默认为 300 -<div className="run-code" ...`,l:"advanced/global.html#dbclick-time",a:"dbclick-time"},"3.17":{t:"DBCLICK_FULLSCREEN",p:`在桌面端，是否双击切换全屏，默认为 true -<div className="run-code"& ...`,l:"advanced/global.html#dbclick-fullscreen",a:"dbclick-fullscreen"},"3.18":{t:"MOBILE_DBCLICK_PLAY",p:`在移动端，是否双击切换播放暂停，默认为 true -<div className="run-code" ...`,l:"advanced/global.html#mobile-dbclick-play",a:"mobile-dbclick-play"},"3.19":{t:"MOBILE_CLICK_PLAY",p:`在移动端，是否单击切换播放暂停，默认为 false -<div className="run-code&quo ...`,l:"advanced/global.html#mobile-click-play",a:"mobile-click-play"},"3.20":{t:"AUTO_ORIENTATION_TIME",p:`在移动端，自动旋屏的延迟时间，单位为毫秒，默认为 200 -<div className="run-code& ...`,l:"advanced/global.html#auto-orientation-time",a:"auto-orientation-time"},"3.21":{t:"INFO_LOOP_TIME",p:`信息面板的刷新时间，单位为毫秒，默认为 1000 -<div className="run-code" ...`,l:"advanced/global.html#info-loop-time",a:"info-loop-time"},"3.22":{t:"FAST_FORWARD_VALUE",p:`在移动端，长按加速的速率倍数，默认为 3 -<div className="run-code"> ...`,l:"advanced/global.html#fast-forward-value",a:"fast-forward-value"},"3.23":{t:"FAST_FORWARD_TIME",p:`在移动端，长按加速的延迟时间，单位为毫秒，默认为 1000 -<div className="run-code ...`,l:"advanced/global.html#fast-forward-time",a:"fast-forward-time"},"3.24":{t:"TOUCH_MOVE_RATIO",p:`在移动端，左右滑动进度的速率倍数，默认为 0.5 -<div className="run-code" ...`,l:"advanced/global.html#touch-move-ratio",a:"touch-move-ratio"},"3.25":{t:"VOLUME_STEP",p:`快捷键调节音量的幅度比例，默认为 0.1 -<div className="run-code"> ...`,l:"advanced/global.html#volume-step",a:"volume-step"},"3.26":{t:"SEEK_STEP",p:`快捷键调节播放进度的幅度，单位为秒，默认为 5 -<div className="run-code" ...`,l:"advanced/global.html#seek-step",a:"seek-step"},"3.27":{t:"PLAYBACK_RATE",p:`内置播放速率的列表，默认为 [0.5, 0.75, 1, 1.25, 1.5, 2] -<div className=& ...`,l:"advanced/global.html#playback-rate",a:"playback-rate"},"3.28":{t:"ASPECT_RATIO",p:`内置视频长宽比的列表，默认为 ['default', '4:3', '16:9'] -<div className=&q ...`,l:"advanced/global.html#aspect-ratio",a:"aspect-ratio"},"3.29":{t:"FLIP",p:`内置视频翻转的列表，默认为 ['normal', 'horizontal', 'vertical'] -<div cla ...`,l:"advanced/global.html#flip",a:"flip"},"3.30":{t:"FULLSCREEN_WEB_IN_BODY",p:`网页全屏时，是否把播放器挂在在 body 元素下，默认为 false -<div className="run ...`,l:"advanced/global.html#fullscreen-web-in-body",a:"fullscreen-web-in-body"},"3.31":{t:"LOG_VERSION",p:`设置是否打印播放器版本，默认为 true -<div className="run-code"> ...`,l:"advanced/global.html#log-version",a:"log-version"},"3.32":{t:"USE_RAF",p:`设置是否使用 requestAnimationFrame ，默认为 false，目前主要用于进度条的平滑效果 -<div ...`,l:"advanced/global.html#use-raf",a:"use-raf"},"4.0":{t:"# 编写插件",p:`但你已经知道播放器的属性, 方法和事件后，再编写插件是非常简单的事 -可以在实例化的时候加载插件的函数 -<div cla ...`,l:"advanced/plugin.html",a:"编写插件"},"5.0":{t:"# 实例属性",p:`这里的 实例属性 是指挂载在 实例 的 一级属性，比较常用 -`,l:"advanced/property.html",a:"实例属性"},"5.1":{t:"`play`",p:` -Type: Function - -播放视频 -<div className="run-code"&g ...`,l:"advanced/property.html#play",a:"play"},"5.2":{t:"`pause`",p:` -Type: Function - -暂停视频 -<div className="run-code"&g ...`,l:"advanced/property.html#pause",a:"pause"},"5.3":{t:"`toggle`",p:` -Type: Function - -切换视频的播放和暂停 -<div className="run-code&q ...`,l:"advanced/property.html#toggle",a:"toggle"},"5.4":{t:"`destroy`",p:` -Type: Function -Parameter: Boolean - -销毁播放器，接受一个参数表示是否销毁后同时移除播放器 ...`,l:"advanced/property.html#destroy",a:"destroy"},"5.5":{t:"`seek`",p:` -Type: Setter -Parameter: Number - -视频时间跳转，单位秒 -<div className= ...`,l:"advanced/property.html#seek",a:"seek"},"5.6":{t:"`forward`",p:` -Type: Setter -Parameter: Number - -视频时间快进，单位秒 -<div className= ...`,l:"advanced/property.html#forward",a:"forward"},"5.7":{t:"`backward`",p:` -Type: Setter -Parameter: Number - -视频时间快退，单位秒 -<div className= ...`,l:"advanced/property.html#backward",a:"backward"},"5.8":{t:"`volume`",p:` -Type: Setter/Getter -Parameter: Number - -设置和获取视频音量，范围在：[0, 1] -& ...`,l:"advanced/property.html#volume",a:"volume"},"5.9":{t:"`url`",p:` -Type: Setter/Getter -Parameter: String - -设置和获取视频地址 -<div clas ...`,l:"advanced/property.html#url",a:"url"},"5.10":{t:"`switch`",p:` -Type: Setter -Parameter: String - -设置视频地址，设置时和 art.url 类似，但会执行一些 ...`,l:"advanced/property.html#switch",a:"switch"},"5.11":{t:"`switchUrl`",p:` -Type: Function -Parameter: String - -设置视频地址，设置时和 art.url 类似，但会执行 ...`,l:"advanced/property.html#switchurl",a:"switchurl"},"5.12":{t:"`switchQuality`",p:` -Type: Function -Parameter: String - -设置视频画质地址，和 art.switchUrl 类似 ...`,l:"advanced/property.html#switchquality",a:"switchquality"},"5.13":{t:"`muted`",p:` -Type: Setter/Getter -Parameter: Boolean - -设置和获取视频是否静音 -<div c ...`,l:"advanced/property.html#muted",a:"muted"},"5.14":{t:"`currentTime`",p:` -Type: Setter/Getter -Parameter: Number - -设置和获取视频当前时间，设置时间时和 see ...`,l:"advanced/property.html#currenttime",a:"currenttime"},"5.15":{t:"`duration`",p:` -Type: Getter - -获取视频时长 -<div className="run-code"&g ...`,l:"advanced/property.html#duration",a:"duration"},"5.16":{t:"`screenshot`",p:` -Type: Function - -下载当前视频帧的截图 -<div className="run-code&q ...`,l:"advanced/property.html#screenshot",a:"screenshot"},"5.17":{t:"`getDataURL`",p:` -Type: Function - -获取当前视频帧的截图的base64地址，返回的是一个 Promise -<div cl ...`,l:"advanced/property.html#getdataurl",a:"getdataurl"},"5.18":{t:"`getBlobUrl`",p:` -Type: Function - -获取当前视频帧的截图的blob地址，返回的是一个 Promise -<div clas ...`,l:"advanced/property.html#getbloburl",a:"getbloburl"},"5.19":{t:"`fullscreen`",p:` -Type: Setter/Getter -Parameter: Boolean - -设置和获取播放器窗口全屏 -<div ...`,l:"advanced/property.html#fullscreen",a:"fullscreen"},"5.20":{t:"`fullscreenWeb`",p:` -Type: Setter/Getter -Parameter: Boolean - -设置和获取播放器网页全屏 -<div ...`,l:"advanced/property.html#fullscreenweb",a:"fullscreenweb"},"5.21":{t:"`pip`",p:` -Type: Setter/Getter -Parameter: Boolean - -设置和获取播放器画中画模式 -<div ...`,l:"advanced/property.html#pip",a:"pip"},"5.22":{t:"`poster`",p:` -Type: Setter/Getter -Parameter: String - -设置和获取视频海报，只有在视频播放前才能看到 ...`,l:"advanced/property.html#poster",a:"poster"},"5.23":{t:"`mini`",p:` -Type: Setter/Getter -Parameter: Boolean - -设置和获取播放器迷你模式 -<div ...`,l:"advanced/property.html#mini",a:"mini"},"5.24":{t:"`playing`",p:` -Type: Getter -Parameter: Boolean - -获取视频是否正在播放中 -<div classNam ...`,l:"advanced/property.html#playing",a:"playing"},"5.25":{t:"`autoSize`",p:` -Type: Function - -设置视频是否自适应尺寸 -<div className="run-code& ...`,l:"advanced/property.html#autosize",a:"autosize"},"5.26":{t:"`rect`",p:` -Type: Getter - -获取播放器的尺寸和坐标信息 -<div className="run-code& ...`,l:"advanced/property.html#rect",a:"rect"},"5.27":{t:"`flip`",p:` -Type: Setter/Getter -Parameter: String - -设置和获取播放器翻转，支持normal, ...`,l:"advanced/property.html#flip",a:"flip"},"5.28":{t:"`playbackRate`",p:` -Type: Setter/Getter -Parameter: Number - -设置和获取播放器播放速度 -<div c ...`,l:"advanced/property.html#playbackrate",a:"playbackrate"},"5.29":{t:"`aspectRatio`",p:` -Type: Setter/Getter -Parameter: String - -设置和获取播放器长宽比 -<div cl ...`,l:"advanced/property.html#aspectratio",a:"aspectratio"},"5.30":{t:"`loop`",p:` -Type: Setter/Getter -Parameter: Array - -设置和获取区间循序播放，单位秒 -<div ...`,l:"advanced/property.html#loop",a:"loop"},"5.31":{t:"`autoHeight`",p:` -Type: Function - -当容器只有宽度，该属性可以自动计算出并设置视频的高度 -<div className= ...`,l:"advanced/property.html#autoheight",a:"autoheight"},"5.32":{t:"`attr`",p:` -Type: Function -Parameter: String - -动态获取和设置 video 元素的属性 -<div ...`,l:"advanced/property.html#attr",a:"attr"},"5.33":{t:"`type`",p:` -Type: Setter/Getter -Parameter: String - -动态获取和设置视频类型 -<div cl ...`,l:"advanced/property.html#type",a:"type"},"5.34":{t:"`theme`",p:` -Type: Setter/Getter -Parameter: String - -动态获取和设置播放器主题颜色 -<div ...`,l:"advanced/property.html#theme",a:"theme"},"5.35":{t:"`airplay`",p:` -Type: Function - -开启隔空播放 -<div className="run-code" ...`,l:"advanced/property.html#airplay",a:"airplay"},"5.36":{t:"`loaded`",p:` -Type: Getter - -视频缓存的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用 -&l ...`,l:"advanced/property.html#loaded",a:"loaded"},"5.37":{t:"`played`",p:` -Type: Getter - -视频播放的比例，范围是 [0, 1]，常配合 video:timeupdate 事件使用 -&l ...`,l:"advanced/property.html#played",a:"played"},"5.38":{t:"`proxy`",p:` -Type: Function - -DOM 事件的代理函数，实质上代理了 addEventListener 和 removeE ...`,l:"advanced/property.html#proxy",a:"proxy"},"5.39":{t:"`query`",p:` -Type: Function - -DOM 的查询函数，类似 document.querySelector，但被查询的对象局限 ...`,l:"advanced/property.html#query",a:"query"},"5.40":{t:"`video`",p:` -Type: Element - -快捷返回播放器的 video 元素 -<div className="run- ...`,l:"advanced/property.html#video",a:"video"},"5.41":{t:"`cssVar`",p:` -Type: Function - -动态获取或设置 css 变量 -<div className="run-co ...`,l:"advanced/property.html#cssvar",a:"cssvar"},"5.42":{t:"`quality`",p:` -Type: Setter -Parameter: Array - -动态设置画质列表 -<div className=&qu ...`,l:"advanced/property.html#quality",a:"quality"},"6.0":{t:"# 右键菜单",p:"",l:"component/contextmenu.html",a:"右键菜单"},"6.1":{t:"配置",p:` - - -属性 -类型 -描述 - - - - -disable -Boolean -是否禁用组件 - - -name -String -组件唯一名称，用于 ...`,l:"component/contextmenu.html#配置",a:"配置"},"6.2":{t:"创建",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/contextmenu.html#创建",a:"创建"},"6.3":{t:"添加",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/contextmenu.html#添加",a:"添加"},"6.4":{t:"删除",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/contextmenu.html#删除",a:"删除"},"6.5":{t:"更新",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/contextmenu.html#更新",a:"更新"},"7.0":{t:"# 控制器",p:"",l:"component/controls.html",a:"控制器"},"7.1":{t:"配置",p:` - - -属性 -类型 -描述 - - - - -disable -Boolean -是否禁用组件 - - -name -String -组件唯一名称，用于 ...`,l:"component/controls.html#配置",a:"配置"},"7.2":{t:"创建",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/controls.html#创建",a:"创建"},"7.3":{t:"添加",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/controls.html#添加",a:"添加"},"7.4":{t:"删除",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/controls.html#删除",a:"删除"},"7.5":{t:"更新",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/controls.html#更新",a:"更新"},"8.0":{t:"# 业务层",p:"",l:"component/layers.html",a:"业务层"},"8.1":{t:"配置",p:` - - -属性 -类型 -描述 - - - - -disable -Boolean -是否禁用组件 - - -name -String -组件唯一名称，用于 ...`,l:"component/layers.html#配置",a:"配置"},"8.2":{t:"创建",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/layers.html#创建",a:"创建"},"8.3":{t:"添加",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/layers.html#添加",a:"添加"},"8.4":{t:"删除",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/layers.html#删除",a:"删除"},"8.5":{t:"更新",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/layers.html#更新",a:"更新"},"9.0":{t:"# 设置面板",p:"",l:"component/setting.html",a:"设置面板"},"9.1":{t:"内置",p:"须先打开设置面板，然后自带四个内置项：flip, playbackRate, aspectRatio, subtitleOf ...",l:"component/setting.html#内置",a:"内置"},"9.2":{t:"创建 - 选择列表",p:` - - -属性 -类型 -描述 - - - - -html -String, Element -元素的 DOM - - -icon -String, El ...`,l:"component/setting.html#创建-选择列表",a:"创建-选择列表"},"9.3":{t:"创建 - 列表嵌套",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/setting.html#创建-列表嵌套",a:"创建-列表嵌套"},"9.4":{t:"创建 - 切换按钮",p:` - - -属性 -类型 -描述 - - - - -html -String, Element -元素的 DOM 元素 - - -icon -String, ...`,l:"component/setting.html#创建-切换按钮",a:"创建-切换按钮"},"9.5":{t:"创建 - 范围滑块",p:` - - -属性 -类型 -描述 - - - - -html -String, Element -元素的 DOM 元素 - - -icon -String, ...`,l:"component/setting.html#创建-范围滑块",a:"创建-范围滑块"},"9.6":{t:"添加",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/setting.html#添加",a:"添加"},"9.7":{t:"删除",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/setting.html#删除",a:"删除"},"9.8":{t:"更新",p:"<div className="run-code">▶ Run Code</div&g ...",l:"component/setting.html#更新",a:"更新"},"10.0":{t:"# 高级属性",p:`这里的 高级属性 是指挂载在 实例 的 二级属性，比较少用 -`,l:"en/advanced/built-in.html",a:"高级属性"},"10.1":{t:"`option`",p:`播放器的选项 -<div className="run-code">▶ Run Code< ...`,l:"en/advanced/built-in.html#option",a:"option"},"10.2":{t:"`template`",p:`管理播放器所有的 DOM 元素 -<div className="run-code">▶ Ru ...`,l:"en/advanced/built-in.html#template",a:"template"},"10.3":{t:"`events`",p:"管理播放器所有的 DOM 事件，实质上是代理了 addEventListener 和 removeEventListener ...",l:"en/advanced/built-in.html#events",a:"events"},"10.4":{t:"`storage`",p:`管理播放器的本地存储 - -name 属性用于设置缓存的 key -set 方法用于设置缓存 -get 方法用于获取缓存 -del 方 ...`,l:"en/advanced/built-in.html#storage",a:"storage"},"10.5":{t:"`icons`",p:`管理播放器所有的 svg 图标 -<div className="run-code">▶ Ru ...`,l:"en/advanced/built-in.html#icons",a:"icons"},"10.6":{t:"`i18n`",p:`管理播放器的 i18n - -get 方法用于获取 i18n 的值 -update 方法用于更新 i18n 对象 - -<div ...`,l:"en/advanced/built-in.html#i18n",a:"i18n"},"10.7":{t:"`notice`",p:`管理播放器的提示语，只有一个 show 属性用于显示提示语 -<div className="run-code ...`,l:"en/advanced/built-in.html#notice",a:"notice"},"10.8":{t:"`layers`",p:`管理播放器的层 - -add 方法用于动态添加层 -show 属性用于设置是否显示全部层 -toggle 属性用于切换是否显示全部层 ...`,l:"en/advanced/built-in.html#layers",a:"layers"},"10.9":{t:"`controls`",p:`管理播放器的控制器 - -add 方法用于动态添加控制器 -show 属性用于设置是否显示全部控制器 -toggle 属性用于切换是 ...`,l:"en/advanced/built-in.html#controls",a:"controls"},"10.10":{t:"`contextmenu`",p:`管理播放器的右键菜单 - -add 方法用于动态添加菜单 -show 属性用于设置是否显示全部菜单 -toggle 属性用于切换是否 ...`,l:"en/advanced/built-in.html#contextmenu",a:"contextmenu"},"10.11":{t:"`subtitle`",p:`管理播放器的字幕功能 - -url 属性设置和返回当前字幕地址 -style 方法设置当前字幕的样式 -switch 方法设置当前字 ...`,l:"en/advanced/built-in.html#subtitle",a:"subtitle"},"10.12":{t:"`loading`",p:`管理播放器的加载层 - -show 属性用于设置是否显示加载层 -toggle 属性用于切换是否显示加载层 - -<div cl ...`,l:"en/advanced/built-in.html#loading",a:"loading"},"10.13":{t:"`hotkey`",p:`管理播放器的快捷键功能 - -add 方法用于添加快捷键 -remove 方法用于删除快捷键 - -<div className ...`,l:"en/advanced/built-in.html#hotkey",a:"hotkey"},"10.14":{t:"`mask`",p:`管理播放器的遮罩层 - -show 属性用于设置是否显示遮罩层 -toggle 属性用于切换是否显示遮罩层 - -<div cl ...`,l:"en/advanced/built-in.html#mask",a:"mask"},"10.15":{t:"`setting`",p:`管理播放器的设置面板 - -add 方法用于动态添加设置项 -show 属性用于设置是否显示全部设置项 -toggle 属性用于切换 ...`,l:"en/advanced/built-in.html#setting",a:"setting"},"10.16":{t:"`plugins`",p:`管理播放器的插件功能，只有一个方法 add 用于动态添加插件 -<div className="run-cod ...`,l:"en/advanced/built-in.html#plugins",a:"plugins"},"11.0":{t:"# 静态属性",p:`这里的 静态属性 是指挂载在 构造函数 的 一级属性，非常少使用 -:::warning 提示 -有些属性是全大写的，说明这些属 ...`,l:"en/advanced/class.html",a:"静态属性"},"11.1":{t:"`instances`",p:`返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性 -<div className=" ...`,l:"en/advanced/class.html#instances",a:"instances"},"11.2":{t:"`version`",p:`返回播放器的版本信息 -<div className="run-code">▶ Run Cod ...`,l:"en/advanced/class.html#version",a:"version"},"11.3":{t:"`env`",p:`返回播放器的环境变量 -<div className="run-code">▶ Run Cod ...`,l:"en/advanced/class.html#env",a:"env"},"11.4":{t:"`build`",p:`返回播放器的打包时间 -<div className="run-code">▶ Run Cod ...`,l:"en/advanced/class.html#build",a:"build"},"11.5":{t:"`config`",p:`返回视频的默认配置 -<div className="run-code">▶ Run Code ...`,l:"en/advanced/class.html#config",a:"config"},"11.6":{t:"`utils`",p:`返回播放器的工具函数集合 -<div className="run-code">▶ Run C ...`,l:"en/advanced/class.html#utils",a:"utils"},"11.7":{t:"`scheme`",p:`返回播放器选项的校验方案 -<div className="run-code">▶ Run C ...`,l:"en/advanced/class.html#scheme",a:"scheme"},"11.8":{t:"`Emitter`",p:`返回事件分发器的构造函数 -<div className="run-code">▶ Run C ...`,l:"en/advanced/class.html#emitter",a:"emitter"},"11.9":{t:"`validator`",p:`返回选项的校验函数 -<div className="run-code">▶ Run Code ...`,l:"en/advanced/class.html#validator",a:"validator"},"11.10":{t:"`kindOf`",p:`返回类型检测的函数工具 -<div className="run-code">▶ Run Co ...`,l:"en/advanced/class.html#kindof",a:"kindof"},"11.11":{t:"`html`",p:`返回播放器所需的 html 字符串 -<div className="run-code">▶ ...`,l:"en/advanced/class.html#html",a:"html"},"11.12":{t:"`option`",p:`返回播放器的默认选项 -<div className="run-code">▶ Run Cod ...`,l:"en/advanced/class.html#option",a:"option"},"12.0":{t:"# 实例事件",p:`播放器的事件分为两种，一种视频的 原生事件 (前缀 video:)，另外一种是 自定义事件 -监听事件： -<div cl ...`,l:"en/advanced/event.html",a:"实例事件"},"12.1":{t:"`ready`",p:`当播放器首次可以播放器时触发 -<div className="run-code">▶ Run ...`,l:"en/advanced/event.html#ready",a:"ready"},"12.2":{t:"`restart`",p:`当播放器切换地址后并可以播放时触发 -<div className="run-code">▶ ...`,l:"en/advanced/event.html#restart",a:"restart"},"12.3":{t:"`loop`",p:`当出现区间循环时触发 -<div className="run-code">▶ Run Cod ...`,l:"en/advanced/event.html#loop",a:"loop"},"12.4":{t:"`pause`",p:`当播放器暂停时触发 -<div className="run-code">▶ Run Code ...`,l:"en/advanced/event.html#pause",a:"pause"},"12.5":{t:"`play`",p:`当播放器播放时触发 -<div className="run-code">▶ Run Code ...`,l:"en/advanced/event.html#play",a:"play"},"12.6":{t:"`hotkey`",p:`当播放器热键被按下时触发 -<div className="run-code">▶ Run C ...`,l:"en/advanced/event.html#hotkey",a:"hotkey"},"12.7":{t:"`destroy`",p:`当播放器销毁时触发 -<div className="run-code">▶ Run Code ...`,l:"en/advanced/event.html#destroy",a:"destroy"},"12.8":{t:"`focus`",p:`当播放器获得焦点时触发 -<div className="run-code">▶ Run Co ...`,l:"en/advanced/event.html#focus",a:"focus"},"12.9":{t:"`blur`",p:`当播放器失去焦点时触发 -<div className="run-code">▶ Run Co ...`,l:"en/advanced/event.html#blur",a:"blur"},"12.10":{t:"`dblclick`",p:`当播放器被双击时触发 -<div className="run-code">▶ Run Cod ...`,l:"en/advanced/event.html#dblclick",a:"dblclick"},"12.11":{t:"`click`",p:`当播放器被单击时触发 -<div className="run-code">▶ Run Cod ...`,l:"en/advanced/event.html#click",a:"click"},"12.12":{t:"`error`",p:`当播放器加载视频发生错误时触发 -<div className="run-code">▶ Ru ...`,l:"en/advanced/event.html#error",a:"error"},"12.13":{t:"`hover`",p:`当播放器被鼠标移出或者移入时触发 -<div className="run-code">▶ R ...`,l:"en/advanced/event.html#hover",a:"hover"},"12.14":{t:"`mousemove`",p:`当播放器被鼠标经过时触发 -<div className="run-code">▶ Run C ...`,l:"en/advanced/event.html#mousemove",a:"mousemove"},"12.15":{t:"`resize`",p:`当播放器尺寸变化时触发 -<div className="run-code">▶ Run Co ...`,l:"en/advanced/event.html#resize",a:"resize"},"12.16":{t:"`view`",p:`当播放器出现在视口时触发 -<div className="run-code">▶ Run C ...`,l:"en/advanced/event.html#view",a:"view"},"12.17":{t:"`lock`",p:`在移动端，当锁定的状态发生变化时触发 -<div className="run-code">▶ ...`,l:"en/advanced/event.html#lock",a:"lock"},"12.18":{t:"`aspectRatio`",p:`当播放器长宽比变化时触发 -<div className="run-code">▶ Run C ...`,l:"en/advanced/event.html#aspectratio",a:"aspectratio"},"12.19":{t:"`autoHeight`",p:`当播放器自动设置高度时触发 -<div className="run-code">▶ Run ...`,l:"en/advanced/event.html#autoheight",a:"autoheight"},"12.20":{t:"`autoSize`",p:`当播放器自动设置尺寸时触发 -<div className="run-code">▶ Run ...`,l:"en/advanced/event.html#autosize",a:"autosize"},"12.21":{t:"`flip`",p:`当播放器发生翻转时触发 -<div className="run-code">▶ Run Co ...`,l:"en/advanced/event.html#flip",a:"flip"},"12.22":{t:"`fullscreen`",p:`当播放器发生窗口全屏时触发 -<div className="run-code">▶ Run ...`,l:"en/advanced/event.html#fullscreen",a:"fullscreen"},"12.23":{t:"`fullscreenWeb`",p:`当播放器发生网页全屏时触发 -<div className="run-code">▶ Run ...`,l:"en/advanced/event.html#fullscreenweb",a:"fullscreenweb"},"12.24":{t:"`mini`",p:`当播放器进入迷你模式时触发 -<div className="run-code">▶ Run ...`,l:"en/advanced/event.html#mini",a:"mini"},"12.25":{t:"`pip`",p:`当播放器进入画中画时触发 -<div className="run-code">▶ Run C ...`,l:"en/advanced/event.html#pip",a:"pip"},"12.26":{t:"`screenshot`",p:`当播放器被截图时触发 -<div className="run-code">▶ Run Cod ...`,l:"en/advanced/event.html#screenshot",a:"screenshot"},"12.27":{t:"`seek`",p:`当播放器发生时间跳转时触发 -<div className="run-code">▶ Run ...`,l:"en/advanced/event.html#seek",a:"seek"},"12.28":{t:"`subtitleOffset`",p:`当播放器发生字幕偏移时触发 -<div className="run-code">▶ Run ...`,l:"en/advanced/event.html#subtitleoffset",a:"subtitleoffset"},"12.29":{t:"`subtitleUpdate`",p:`当字幕更新时触发 -<div className="run-code">▶ Run Code& ...`,l:"en/advanced/event.html#subtitleupdate",a:"subtitleupdate"},"12.30":{t:"`subtitleLoad`",p:`当字幕加载时触发 -<div className="run-code">▶ Run Code& ...`,l:"en/advanced/event.html#subtitleload",a:"subtitleload"},"12.31":{t:"`subtitleSwitch`",p:`当字幕切换时触发 -<div className="run-code">▶ Run Code& ...`,l:"en/advanced/event.html#subtitleswitch",a:"subtitleswitch"},"12.32":{t:"`info`",p:`当信息面板显示或隐藏时触发 -<div className="run-code">▶ Run ...`,l:"en/advanced/event.html#info",a:"info"},"12.33":{t:"`layer`",p:`当自定义层显示或隐藏时触发 -<div className="run-code">▶ Run ...`,l:"en/advanced/event.html#layer",a:"layer"},"12.34":{t:"`loading`",p:`当加载器显示或隐藏时触发 -<div className="run-code">▶ Run C ...`,l:"en/advanced/event.html#loading",a:"loading"},"12.35":{t:"`mask`",p:`当遮罩层显示或隐藏时触发 -<div className="run-code">▶ Run C ...`,l:"en/advanced/event.html#mask",a:"mask"},"12.36":{t:"`subtitle`",p:`当字幕层显示或隐藏时触发 -<div className="run-code">▶ Run C ...`,l:"en/advanced/event.html#subtitle",a:"subtitle"},"12.37":{t:"`contextmenu`",p:`当右键菜单显示或隐藏时触发 -<div className="run-code">▶ Run ...`,l:"en/advanced/event.html#contextmenu",a:"contextmenu"},"12.38":{t:"`control`",p:`当控制器显示或隐藏时触发 -<div className="run-code">▶ Run C ...`,l:"en/advanced/event.html#control",a:"control"},"12.39":{t:"`setting`",p:`当设置面板显示或隐藏时触发 -<div className="run-code">▶ Run ...`,l:"en/advanced/event.html#setting",a:"setting"},"12.40":{t:"`muted`",p:`当静音的状态变化时触发 -<div className="run-code">▶ Run Co ...`,l:"en/advanced/event.html#muted",a:"muted"},"12.41":{t:"`video:canplay`",p:`浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容 -`,l:"en/advanced/event.html#video-canplay",a:"video-canplay"},"12.42":{t:"`video:canplaythrough`",p:`浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束 -`,l:"en/advanced/event.html#video-canplaythrough",a:"video-canplaythrough"},"12.43":{t:"`video:complete`",p:`OfflineAudioContext 渲染完成 -`,l:"en/advanced/event.html#video-complete",a:"video-complete"},"12.44":{t:"`video:durationchange`",p:`duration 属性的值改变时触发 -`,l:"en/advanced/event.html#video-durationchange",a:"video-durationchange"},"12.45":{t:"`video:emptied`",p:"媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载 ...",l:"en/advanced/event.html#video-emptied",a:"video-emptied"},"12.46":{t:"`video:ended`",p:`视频停止播放，因为 media 已经到达结束点 -`,l:"en/advanced/event.html#video-ended",a:"video-ended"},"12.47":{t:"`video:error`",p:`获取媒体数据时出错，或者资源类型不是受支持的媒体格式 -`,l:"en/advanced/event.html#video-error",a:"video-error"},"12.48":{t:"`video:loadeddata`",p:`media 中的首帧已经完成加载 -`,l:"en/advanced/event.html#video-loadeddata",a:"video-loadeddata"},"12.49":{t:"`video:loadedmetadata`",p:`已加载元数据 -`,l:"en/advanced/event.html#video-loadedmetadata",a:"video-loadedmetadata"},"12.50":{t:"`video:pause`",p:`播放已暂停 -`,l:"en/advanced/event.html#video-pause",a:"video-pause"},"12.51":{t:"`video:play`",p:`播放已开始 -`,l:"en/advanced/event.html#video-play",a:"video-play"},"12.52":{t:"`video:playing`",p:`由于缺乏数据而暂停或延迟后，播放准备开始 -`,l:"en/advanced/event.html#video-playing",a:"video-playing"},"12.53":{t:"`video:progress`",p:`在浏览器加载资源时周期性触发 -`,l:"en/advanced/event.html#video-progress",a:"video-progress"},"12.54":{t:"`video:ratechange`",p:`播放速率发生变化 -`,l:"en/advanced/event.html#video-ratechange",a:"video-ratechange"},"12.55":{t:"`video:seeked`",p:`跳帧（seek）操作完成 -`,l:"en/advanced/event.html#video-seeked",a:"video-seeked"},"12.56":{t:"`video:seeking`",p:`跳帧（seek）操作开始 -`,l:"en/advanced/event.html#video-seeking",a:"video-seeking"},"12.57":{t:"`video:stalled`",p:`用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现 -`,l:"en/advanced/event.html#video-stalled",a:"video-stalled"},"12.58":{t:"`video:suspend`",p:`媒体数据加载已暂停 -`,l:"en/advanced/event.html#video-suspend",a:"video-suspend"},"12.59":{t:"`video:timeupdate`",p:`currentTime 属性指定的时间发生变化 -`,l:"en/advanced/event.html#video-timeupdate",a:"video-timeupdate"},"12.60":{t:"`video:volumechange`",p:`音量发生变化 -`,l:"en/advanced/event.html#video-volumechange",a:"video-volumechange"},"12.61":{t:"`video:waiting`",p:`由于暂时缺少数据，播放已停止 -`,l:"en/advanced/event.html#video-waiting",a:"video-waiting"},"13.0":{t:"# 全局属性",p:`这里的 全局属性 也是指挂载在 构造函数 的 一级属性，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到 -`,l:"en/advanced/global.html",a:"全局属性"},"13.1":{t:"DEBUG",p:`是否开始 debug 模式，可以打印出视频全部的内置事件，默认关闭 -<div className="run- ...`,l:"en/advanced/global.html#debug",a:"debug"},"13.2":{t:"CONTEXTMENU",p:`是否开启右键菜单，默认开启 -<div className="run-code">▶ Run ...`,l:"en/advanced/global.html#contextmenu",a:"contextmenu"},"13.3":{t:"NOTICE_TIME",p:`提示信息的显示时长，单位为毫秒，默认为 2000 -<div className="run-code" ...`,l:"en/advanced/global.html#notice-time",a:"notice-time"},"13.4":{t:"SETTING_WIDTH",p:`设置面板的默认宽度，单位为像素，默认为 250 -<div className="run-code" ...`,l:"en/advanced/global.html#setting-width",a:"setting-width"},"13.5":{t:"SETTING_ITEM_WIDTH",p:`设置面板的设置项的默认宽度，单位为像素，默认为 200 -<div className="run-code&q ...`,l:"en/advanced/global.html#setting-item-width",a:"setting-item-width"},"13.6":{t:"SETTING_ITEM_HEIGHT",p:`设置面板的设置项的默认高度，单位为像素，默认为 35 -<div className="run-code&qu ...`,l:"en/advanced/global.html#setting-item-height",a:"setting-item-height"},"13.7":{t:"RESIZE_TIME",p:`resize 事件的节流时间，单位为毫秒，默认为 200 -<div className="run-code& ...`,l:"en/advanced/global.html#resize-time",a:"resize-time"},"13.8":{t:"SCROLL_TIME",p:`scroll 事件的节流时间，单位为毫秒，默认为 200 -<div className="run-code& ...`,l:"en/advanced/global.html#scroll-time",a:"scroll-time"},"13.9":{t:"SCROLL_GAP",p:`view 事件的边界容差距离，单位为像素，默认为 50 -<div className="run-code&q ...`,l:"en/advanced/global.html#scroll-gap",a:"scroll-gap"},"13.10":{t:"AUTO_PLAYBACK_MAX",p:`自动回放功能的最大记录数，默认为 10 -<div className="run-code"> ...`,l:"en/advanced/global.html#auto-playback-max",a:"auto-playback-max"},"13.11":{t:"AUTO_PLAYBACK_MIN",p:`自动回放功能的最小记录时长，单位为秒，默认为 5 -<div className="run-code" ...`,l:"en/advanced/global.html#auto-playback-min",a:"auto-playback-min"},"13.12":{t:"AUTO_PLAYBACK_TIMEOUT",p:`自动回放功能的隐藏延迟时长，单位为毫秒，默认为 3000 -<div className="run-code& ...`,l:"en/advanced/global.html#auto-playback-timeout",a:"auto-playback-timeout"},"13.13":{t:"RECONNECT_TIME_MAX",p:`发生连接错误时，自动连接的最大次数，默认为 5 -<div className="run-code" ...`,l:"en/advanced/global.html#reconnect-time-max",a:"reconnect-time-max"},"13.14":{t:"RECONNECT_SLEEP_TIME",p:`发生连接错误时，自动连接的延迟时间，单位为毫秒，默认为 1000 -<div className="run-c ...`,l:"en/advanced/global.html#reconnect-sleep-time",a:"reconnect-sleep-time"},"13.15":{t:"CONTROL_HIDE_TIME",p:`底部控制栏的自动隐藏的延迟时间，单位为毫秒，默认为 3000 -<div className="run-cod ...`,l:"en/advanced/global.html#control-hide-time",a:"control-hide-time"},"13.16":{t:"DBCLICK_TIME",p:`双击事件的延迟事件，单位为毫秒，默认为 300 -<div className="run-code" ...`,l:"en/advanced/global.html#dbclick-time",a:"dbclick-time"},"13.17":{t:"DBCLICK_FULLSCREEN",p:`在桌面端，是否双击切换全屏，默认为 true -<div className="run-code"& ...`,l:"en/advanced/global.html#dbclick-fullscreen",a:"dbclick-fullscreen"},"13.18":{t:"MOBILE_DBCLICK_PLAY",p:`在移动端，是否双击切换播放暂停，默认为 true -<div className="run-code" ...`,l:"en/advanced/global.html#mobile-dbclick-play",a:"mobile-dbclick-play"},"13.19":{t:"MOBILE_CLICK_PLAY",p:`在移动端，是否单击切换播放暂停，默认为 false -<div className="run-code&quo ...`,l:"en/advanced/global.html#mobile-click-play",a:"mobile-click-play"},"13.20":{t:"AUTO_ORIENTATION_TIME",p:`在移动端，自动旋屏的延迟时间，单位为毫秒，默认为 200 -<div className="run-code& ...`,l:"en/advanced/global.html#auto-orientation-time",a:"auto-orientation-time"},"13.21":{t:"INFO_LOOP_TIME",p:`信息面板的刷新时间，单位为毫秒，默认为 1000 -<div className="run-code" ...`,l:"en/advanced/global.html#info-loop-time",a:"info-loop-time"},"13.22":{t:"FAST_FORWARD_VALUE",p:`在移动端，长按加速的速率倍数，默认为 3 -<div className="run-code"> ...`,l:"en/advanced/global.html#fast-forward-value",a:"fast-forward-value"},"13.23":{t:"FAST_FORWARD_TIME",p:`在移动端，长按加速的延迟时间，单位为毫秒，默认为 1000 -<div className="run-code ...`,l:"en/advanced/global.html#fast-forward-time",a:"fast-forward-time"},"13.24":{t:"TOUCH_MOVE_RATIO",p:`在移动端，左右滑动进度的速率倍数，默认为 0.5 -<div className="run-code" ...`,l:"en/advanced/global.html#touch-move-ratio",a:"touch-move-ratio"},"13.25":{t:"VOLUME_STEP",p:`快捷键调节音量的幅度比例，默认为 0.1 -<div className="run-code"> ...`,l:"en/advanced/global.html#volume-step",a:"volume-step"},"13.26":{t:"SEEK_STEP",p:`快捷键调节播放进度的幅度，单位为秒，默认为 5 -<div className="run-code" ...`,l:"en/advanced/global.html#seek-step",a:"seek-step"},"13.27":{t:"PLAYBACK_RATE",p:`内置播放速率的列表，默认为 [0.5, 0.75, 1, 1.25, 1.5, 2] -<div className=& ...`,l:"en/advanced/global.html#playback-rate",a:"playback-rate"},"13.28":{t:"ASPECT_RATIO",p:`内置视频长宽比的列表，默认为 ['default', '4:3', '16:9'] -<div className=&q ...`,l:"en/advanced/global.html#aspect-ratio",a:"aspect-ratio"},"13.29":{t:"FLIP",p:`内置视频翻转的列表，默认为 ['normal', 'horizontal', 'vertical'] -<div cla ...`,l:"en/advanced/global.html#flip",a:"flip"},"13.30":{t:"FULLSCREEN_WEB_IN_BODY",p:`网页全屏时，是否把播放器挂在在 body 元素下，默认为 false -<div className="run ...`,l:"en/advanced/global.html#fullscreen-web-in-body",a:"fullscreen-web-in-body"},"13.31":{t:"LOG_VERSION",p:`设置是否打印播放器版本，默认为 true -<div className="run-code"> ...`,l:"en/advanced/global.html#log-version",a:"log-version"},"13.32":{t:"USE_RAF",p:`设置是否使用 requestAnimationFrame ，默认为 false，目前主要用于进度条的平滑效果 -<div ...`,l:"en/advanced/global.html#use-raf",a:"use-raf"},"14.0":{t:"# 编写插件",p:`但你已经知道播放器的属性, 方法和事件后，再编写插件是非常简单的事 -可以在实例化的时候加载插件的函数 -<div cla ...`,l:"en/advanced/plugin.html",a:"编写插件"},"15.0":{t:"# Instance Property",p:"The Instance Property here refers to the Primary Property atta ...",l:"en/advanced/property.html",a:"instance-property"},"15.1":{t:"`play`",p:` -Type: Function - -Play video -<div className="run-code&q ...`,l:"en/advanced/property.html#play",a:"play"},"15.2":{t:"`pause`",p:` -Type: Function - -Pause video -<div className="run-code& ...`,l:"en/advanced/property.html#pause",a:"pause"},"15.3":{t:"`toggle`",p:` -Type: Function - -Toggle video playback and pause -<div class ...`,l:"en/advanced/property.html#toggle",a:"toggle"},"15.4":{t:"`destroy`",p:` -Type: Function -Parameter: Boolean - -To destroy the player, acc ...`,l:"en/advanced/property.html#destroy",a:"destroy"},"15.5":{t:"`seek`",p:` -Type: Setter -Parameter: Number - -Video time jump in seconds -&l ...`,l:"en/advanced/property.html#seek",a:"seek"},"15.6":{t:"`forward`",p:` -Type: Setter -Parameter: Number - -Video time fast forward in se ...`,l:"en/advanced/property.html#forward",a:"forward"},"15.7":{t:"`backward`",p:` -Type: Setter -Parameter: Number - -Video time rewind in seconds - ...`,l:"en/advanced/property.html#backward",a:"backward"},"15.8":{t:"`volume`",p:` -Type: Setter/Getter -Parameter: Number - -Set and get video volu ...`,l:"en/advanced/property.html#volume",a:"volume"},"15.9":{t:"`url`",p:` -Type: Setter/Getter -Parameter: String - -Set and get video url - ...`,l:"en/advanced/property.html#url",a:"url"},"15.10":{t:"`switch`",p:` -Type: Setter -Parameter: String - -Setting the video url is simi ...`,l:"en/advanced/property.html#switch",a:"switch"},"15.11":{t:"`switchUrl`",p:` -Type: Function -Parameter: String - -Setting the video url is si ...`,l:"en/advanced/property.html#switchurl",a:"switchurl"},"15.12":{t:"`switchQuality`",p:` -Type: Function -Parameter: String - -Set the video quality addre ...`,l:"en/advanced/property.html#switchquality",a:"switchquality"},"15.13":{t:"`muted`",p:` -Type: Setter/Getter -Parameter: Boolean - -Set and get whether t ...`,l:"en/advanced/property.html#muted",a:"muted"},"15.14":{t:"`currentTime`",p:` -Type: Setter/Getter -Parameter: Number - -Set and get the curren ...`,l:"en/advanced/property.html#currenttime",a:"currenttime"},"15.15":{t:"`duration`",p:` -Type: Getter - -Get video duration -<div className="run- ...`,l:"en/advanced/property.html#duration",a:"duration"},"15.16":{t:"`screenshot`",p:` -Type: Function - -Download a screenshot of the current video fr ...`,l:"en/advanced/property.html#screenshot",a:"screenshot"},"15.17":{t:"`getDataURL`",p:` -Type: Function - -Get the base64 address of the screenshot of t ...`,l:"en/advanced/property.html#getdataurl",a:"getdataurl"},"15.18":{t:"`getBlobUrl`",p:` -Type: Function - -Get the blob address of the screenshot of the ...`,l:"en/advanced/property.html#getbloburl",a:"getbloburl"},"15.19":{t:"`fullscreen`",p:` -Type: Setter/Getter -Parameter: Boolean - -Set and get full scre ...`,l:"en/advanced/property.html#fullscreen",a:"fullscreen"},"15.20":{t:"`fullscreenWeb`",p:` -Type: Setter/Getter -Parameter: Boolean - -Set and get full scre ...`,l:"en/advanced/property.html#fullscreenweb",a:"fullscreenweb"},"15.21":{t:"`pip`",p:` -Type: Setter/Getter -Parameter: Boolean - -Set and get the pictu ...`,l:"en/advanced/property.html#pip",a:"pip"},"15.22":{t:"`poster`",p:` -Type: Setter/Getter -Parameter: String - -Set and obtain video p ...`,l:"en/advanced/property.html#poster",a:"poster"},"15.23":{t:"`mini`",p:` -Type: Setter/Getter -Parameter: Boolean - -Set and get player mi ...`,l:"en/advanced/property.html#mini",a:"mini"},"15.24":{t:"`playing`",p:` -Type: Getter -Parameter: Boolean - -Get whether the video is pla ...`,l:"en/advanced/property.html#playing",a:"playing"},"15.25":{t:"`autoSize`",p:` -Type: Setter/Getter -Parameter: Boolean - -Set whether the video ...`,l:"en/advanced/property.html#autosize",a:"autosize"},"15.26":{t:"`rect`",p:` -Type: Getter - -Get the size and coordinate information of the ...`,l:"en/advanced/property.html#rect",a:"rect"},"15.27":{t:"`flip`",p:` -Type: Setter/Getter -Parameter: String - -Set and get player rol ...`,l:"en/advanced/property.html#flip",a:"flip"},"15.28":{t:"`playbackRate`",p:` -Type: Setter/Getter -Parameter: Number - -Set and get player pla ...`,l:"en/advanced/property.html#playbackrate",a:"playbackrate"},"15.29":{t:"`aspectRatio`",p:` -Type: Setter/Getter -Parameter: String - -Set and obtain the pla ...`,l:"en/advanced/property.html#aspectratio",a:"aspectratio"},"15.30":{t:"`loop`",p:` -Type: Setter/Getter -Parameter: Array - -Set and obtain interval ...`,l:"en/advanced/property.html#loop",a:"loop"},"15.31":{t:"`autoHeight`",p:` -Type: Setter/Getter -Parameter: Boolean - -When the container ha ...`,l:"en/advanced/property.html#autoheight",a:"autoheight"},"15.32":{t:"`attr`",p:` -Type: Function -Parameter: String - -Get and set the attributes ...`,l:"en/advanced/property.html#attr",a:"attr"},"15.33":{t:"`type`",p:` -Type: Setter/Getter -Parameter: String - -Get and set video type ...`,l:"en/advanced/property.html#type",a:"type"},"15.34":{t:"`theme`",p:` -Type: Setter/Getter -Parameter: String - -Get and set player the ...`,l:"en/advanced/property.html#theme",a:"theme"},"15.35":{t:"`airplay`",p:` -Type: Function - -Enable airplay -<div className="run-co ...`,l:"en/advanced/property.html#airplay",a:"airplay"},"15.36":{t:"`loaded`",p:` -Type: Getter - -The proportion of video cache, with the range o ...`,l:"en/advanced/property.html#loaded",a:"loaded"},"15.37":{t:"`played`",p:` -Type: Getter - -The proportion of video playback, with the rang ...`,l:"en/advanced/property.html#played",a:"played"},"15.38":{t:"`proxy`",p:` -Type: Function - -The proxy function of DOM event essentially p ...`,l:"en/advanced/property.html#proxy",a:"proxy"},"15.39":{t:"`query`",p:` -Type: Function - -The query function of DOM is similar to docum ...`,l:"en/advanced/property.html#query",a:"query"},"15.40":{t:"`video`",p:` -Type: Element - -Return the video element of the player -<div ...`,l:"en/advanced/property.html#video",a:"video"},"15.41":{t:"`quality`",p:` -Type: Setter - -Dynamically set the quality list -<div classN ...`,l:"en/advanced/property.html#quality",a:"quality"},"16.0":{t:"# Contextmenu",p:"",l:"en/component/contextmenu.html",a:"contextmenu"},"16.1":{t:"Config",p:` - - -Property -Type -Describe - - - - -disable -Boolean -Whether to disab ...`,l:"en/component/contextmenu.html#config",a:"config"},"16.2":{t:"Init",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/contextmenu.html#init",a:"init"},"16.3":{t:"Add",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/contextmenu.html#add",a:"add"},"16.4":{t:"Remove",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/contextmenu.html#remove",a:"remove"},"16.5":{t:"Update",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/contextmenu.html#update",a:"update"},"17.0":{t:"# Controls",p:"",l:"en/component/controls.html",a:"controls"},"17.1":{t:"Config",p:` - - -Property -Type -Describe - - - - -disable -Boolean -Whether to disab ...`,l:"en/component/controls.html#config",a:"config"},"17.2":{t:"Init",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/controls.html#init",a:"init"},"17.3":{t:"Add",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/controls.html#add",a:"add"},"17.4":{t:"Remove",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/controls.html#remove",a:"remove"},"17.5":{t:"Update",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/controls.html#update",a:"update"},"18.0":{t:"# Layers",p:"",l:"en/component/layers.html",a:"layers"},"18.1":{t:"Config",p:` - - -Property -Type -Describe - - - - -disable -Boolean -Whether to disab ...`,l:"en/component/layers.html#config",a:"config"},"18.2":{t:"Init",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/layers.html#init",a:"init"},"18.3":{t:"Add",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/layers.html#add",a:"add"},"18.4":{t:"Remove",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/layers.html#remove",a:"remove"},"18.5":{t:"Update",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/layers.html#update",a:"update"},"19.0":{t:"# Setting",p:"",l:"en/component/setting.html",a:"setting"},"19.1":{t:"Build-in",p:"You must open the settings panel first, and then come with fou ...",l:"en/component/setting.html#build-in",a:"build-in"},"19.2":{t:"Init - Select list",p:` - - -Property -Type -Describe - - - - -html -String, Element -Element DOM ...`,l:"en/component/setting.html#init-select-list",a:"init-select-list"},"19.3":{t:"Init - list nesting",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/setting.html#init-list-nesting",a:"init-list-nesting"},"19.4":{t:"Init - Switch button",p:` - - -Property -Type -Describe - - - - -html -String, Element -Element DOM ...`,l:"en/component/setting.html#init-switch-button",a:"init-switch-button"},"19.5":{t:"Init - Range slider",p:` - - -Property -Type -Describe - - - - -html -String, Element -Element DOM ...`,l:"en/component/setting.html#init-range-slider",a:"init-range-slider"},"19.6":{t:"Add",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/setting.html#add",a:"add"},"19.7":{t:"Remove",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/setting.html#remove",a:"remove"},"19.8":{t:"Update",p:"<div className="run-code">▶ Run Code</div&g ...",l:"en/component/setting.html#update",a:"update"},"20.0":{t:"::: danger Important Note",p:"The English document has not yet been completed, everything is ...",l:"en/index.html",a:"danger-important-note"},"20.1":{t:"Install",p:`::: code-group -npm install artplayer - -yarn add artplayer - -pnpm ...`,l:"en/index.html#install",a:"install"},"20.2":{t:"`CDN`",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer/dist/art ...`,l:"en/index.html#cdn",a:"cdn"},"20.3":{t:"Use",p:`::: code-group -import Artplayer from 'artplayer'; - -const art = ...`,l:"en/index.html#use",a:"use"},"20.4":{t:"`Vue.js`",p:`::: code-group -<template> - <div ref="artRef&quo ...`,l:"en/index.html#vue-js",a:"vue-js"},"20.5":{t:"`React.js`",p:`::: code-group -import { useEffect, useRef } from 'react'; -impo ...`,l:"en/index.html#react-js",a:"react-js"},"20.6":{t:"TypeScript",p:"The artplayer.d.ts that is automatically imported when importi ...",l:"en/index.html#typescript",a:"typescript"},"20.7":{t:"JavaScript",p:"Sometimes your js file will lose the type prompt of TypeScript ...",l:"en/index.html#javascript",a:"javascript"},"20.8":{t:"Old browsers",p:"Production builds of artplayer.js are only compatible with the ...",l:"en/index.html#old-browsers",a:"old-browsers"},"21.0":{t:"# dash.js",p:`👉 https://github.com/Dash-Industry-Forum/dash.js -<div clas ...`,l:"en/library/dash.html",a:"dash-js"},"22.0":{t:"# flv.js",p:`👉 https://github.com/Bilibili/flv.js -<div className=" ...`,l:"en/library/flv.html",a:"flv-js"},"23.0":{t:"# hls.js",p:`👉 https://github.com/video-dev/hls.js -<div className=" ...`,l:"en/library/hls.html",a:"hls-js"},"24.0":{t:"# 视频广告",p:"",l:"en/plugin/ads.html",a:"视频广告"},"24.1":{t:"演示",p:`👉 查看完整演示 -`,l:"en/plugin/ads.html#演示",a:"演示"},"24.2":{t:"安装",p:`::: code-group -npm install artplayer-plugin-ads - -yarn add artp ...`,l:"en/plugin/ads.html#安装",a:"安装"},"24.3":{t:"CDN",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-a ...`,l:"en/plugin/ads.html#cdn",a:"cdn"},"24.4":{t:"使用",p:"<div className="run-code" data-libs="./uncom ...",l:"en/plugin/ads.html#使用",a:"使用"},"25.0":{t:"# 控制器皮肤",p:"",l:"en/plugin/control-ui.html",a:"控制器皮肤"},"25.1":{t:"演示",p:`👉 查看完整演示 -`,l:"en/plugin/control-ui.html#演示",a:"演示"},"25.2":{t:"安装",p:`::: code-group -npm install artplayer-plugin-control - -yarn add ...`,l:"en/plugin/control-ui.html#安装",a:"安装"},"25.3":{t:"CDN",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-c ...`,l:"en/plugin/control-ui.html#cdn",a:"cdn"},"25.4":{t:"使用",p:"<div className="run-code" data-libs="./uncom ...",l:"en/plugin/control-ui.html#使用",a:"使用"},"25.5":{t:"`enable`",p:` -Type: Getter/Setter -Parameter: Boolean - -是否启用新的控制器皮肤 -<div c ...`,l:"en/plugin/control-ui.html#enable",a:"enable"},"26.0":{t:"# Dash 画质",p:"",l:"en/plugin/dash-quality.html",a:"dash-画质"},"26.1":{t:"演示",p:`👉 查看完整演示 -`,l:"en/plugin/dash-quality.html#演示",a:"演示"},"26.2":{t:"安装",p:`::: code-group -npm install artplayer-plugin-dash-quality - -yarn ...`,l:"en/plugin/dash-quality.html#安装",a:"安装"},"26.3":{t:"CDN",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-d ...`,l:"en/plugin/dash-quality.html#cdn",a:"cdn"},"27.0":{t:"# HLS 画质",p:"",l:"en/plugin/hls-quality.html",a:"hls-画质"},"27.1":{t:"演示",p:`👉 查看完整演示 -`,l:"en/plugin/hls-quality.html#演示",a:"演示"},"27.2":{t:"安装",p:`::: code-group -npm install artplayer-plugin-hls-quality - -yarn ...`,l:"en/plugin/hls-quality.html#安装",a:"安装"},"27.3":{t:"CDN",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-h ...`,l:"en/plugin/hls-quality.html#cdn",a:"cdn"},"28.0":{t:"# Iframe 控制",p:"",l:"en/plugin/iframe.html",a:"iframe-控制"},"28.1":{t:"说明",p:"通过该插件，你可以轻松在 index.html 里控制跨域 iframe.html 页面里的播放器，如在 index.htm ...",l:"en/plugin/iframe.html#说明",a:"说明"},"28.2":{t:"演示",p:`👉 查看完整演示 -`,l:"en/plugin/iframe.html#演示",a:"演示"},"28.3":{t:"安装",p:`::: code-group -npm install artplayer-plugin-iframe - -yarn add a ...`,l:"en/plugin/iframe.html#安装",a:"安装"},"28.4":{t:"`CDN`",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-i ...`,l:"en/plugin/iframe.html#cdn",a:"cdn"},"28.5":{t:"使用",p:`::: code-group -<!DOCTYPE html> -<html> - <head ...`,l:"en/plugin/iframe.html#使用",a:"使用"},"28.6":{t:"`index.html` 接口",p:"",l:"en/plugin/iframe.html#index-html-接口",a:"index-html-接口"},"28.7":{t:"`commit`",p:"从 index.html 将消息推送到 iframe.html，该函数将在 iframe.html 内部运行，同时它也能用于 ...",l:"en/plugin/iframe.html#commit",a:"commit"},"28.8":{t:"`message`",p:`在 index.html 接收来自 iframe.html 的消息 -iframe.message((event) => ...`,l:"en/plugin/iframe.html#message",a:"message"},"28.9":{t:"`destroy`",p:`销毁后 index.html 无法与 iframe.html 通信 -iframe.destroy(); - -`,l:"en/plugin/iframe.html#destroy",a:"destroy"},"28.10":{t:"`iframe.html` 接口",p:`:::warning 提示 -iframe.html 接口 只能运行在 iframe.html 里 -::: -`,l:"en/plugin/iframe.html#iframe-html-接口",a:"iframe-html-接口"},"28.11":{t:"`inject`",p:`注入脚本，接收来自 index.html 的消息 -ArtplayerPluginIframe.inject(); - -`,l:"en/plugin/iframe.html#inject",a:"inject"},"28.12":{t:"`postMessage`",p:`将消息推送到 index.html -iframe.message((event) => { - console.i ...`,l:"en/plugin/iframe.html#postmessage",a:"postmessage"},"28.13":{t:"例子",p:"最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 ...",l:"en/plugin/iframe.html#例子",a:"例子"},"29.0":{t:"# Language",p:`::: danger -In view of the fact that more and more languages ar ...`,l:"en/start/i18n.html",a:"language"},"29.1":{t:"Default language",p:"The default languages are: en, zh-cn, no need to import manual ...",l:"en/start/i18n.html#default-language",a:"default-language"},"29.2":{t:"Import language",p:"The language files before packaging are stored in: artplayer/s ...",l:"en/start/i18n.html#import-language",a:"import-language"},"29.3":{t:"New language",p:`var art = new Artplayer({ - container: '.artplayer-app', - ...`,l:"en/start/i18n.html#new-language",a:"new-language"},"29.4":{t:"Change language",p:`import zhTw from 'artplayer/i18n/zh-tw.js'; - -var art = new Art ...`,l:"en/start/i18n.html#change-language",a:"change-language"},"30.0":{t:"# Option",p:"",l:"en/start/option.html",a:"option"},"30.1":{t:"`container`",p:` -Type: String, Element -Default: #artplayer - -The DOM container ...`,l:"en/start/option.html#container",a:"container"},"30.2":{t:"`url`",p:` -Type: String -Default: '' - -Video source address -<div classN ...`,l:"en/start/option.html#url",a:"url"},"30.3":{t:"`id`",p:` -Type: String -Default: '' - -The unique identifier of the player ...`,l:"en/start/option.html#id",a:"id"},"30.4":{t:"`onReady`",p:` -Type: Function -Default: undefined - -The constructor accepts a ...`,l:"en/start/option.html#onready",a:"onready"},"30.5":{t:"`poster`",p:` -Type: String -Default: '' - -Video posters will only appear when ...`,l:"en/start/option.html#poster",a:"poster"},"30.6":{t:"`theme`",p:` -Type: String -Default: #f00 - -The player theme color is current ...`,l:"en/start/option.html#theme",a:"theme"},"30.7":{t:"`volume`",p:` -Type: Number -Default: 0.7 - -Default volume of player -<div c ...`,l:"en/start/option.html#volume",a:"volume"},"30.8":{t:"`isLive`",p:` -Type: Boolean -Default: false - -When using live mode, the progr ...`,l:"en/start/option.html#islive",a:"islive"},"30.9":{t:"`muted`",p:` -Type: Boolean -Default: false - -Whether to mute by default -< ...`,l:"en/start/option.html#muted",a:"muted"},"30.10":{t:"`autoplay`",p:` -Type: Boolean -Default: false - -Whether to play automatically -& ...`,l:"en/start/option.html#autoplay",a:"autoplay"},"30.11":{t:"`autoSize`",p:` -Type: Boolean -Default: false - -The size of the player will fil ...`,l:"en/start/option.html#autosize",a:"autosize"},"30.12":{t:"`autoMini`",p:` -Type: Boolean -Default: false - -When the player scrolls outside ...`,l:"en/start/option.html#automini",a:"automini"},"30.13":{t:"`loop`",p:` -Type: Boolean -Default: false - -Whether to play in a loop -<d ...`,l:"en/start/option.html#loop",a:"loop"},"30.14":{t:"`flip`",p:` -Type: Boolean -Default: false - -Whether to display the video fl ...`,l:"en/start/option.html#flip",a:"flip"},"30.15":{t:"`playbackRate`",p:` -Type: Boolean -Default: false - -Whether to display the video pl ...`,l:"en/start/option.html#playbackrate",a:"playbackrate"},"30.16":{t:"`aspectRatio`",p:` -Type: Boolean -Default: false - -Whether to display the video as ...`,l:"en/start/option.html#aspectratio",a:"aspectratio"},"30.17":{t:"`screenshot`",p:` -Type: Boolean -Default: false - -Whether to display the video sc ...`,l:"en/start/option.html#screenshot",a:"screenshot"},"30.18":{t:"`setting`",p:` -Type: Boolean -Default: false - -Whether to display the switch b ...`,l:"en/start/option.html#setting",a:"setting"},"30.19":{t:"`hotkey`",p:` -Type: Boolean -Default: true - -Whether to use shortcut keys -< ...`,l:"en/start/option.html#hotkey",a:"hotkey"},"30.20":{t:"`pip`",p:` -Type: Boolean -Default: false - -Whether to display the picture ...`,l:"en/start/option.html#pip",a:"pip"},"30.21":{t:"`mutex`",p:` -Type: Boolean -Default: true - -If there are multiple players in ...`,l:"en/start/option.html#mutex",a:"mutex"},"30.22":{t:"`fullscreen`",p:` -Type: Boolean -Default: false - -Whether to display the player w ...`,l:"en/start/option.html#fullscreen",a:"fullscreen"},"30.23":{t:"`fullscreenWeb`",p:` -Type: Boolean -Default: false - -Whether to display the player f ...`,l:"en/start/option.html#fullscreenweb",a:"fullscreenweb"},"30.24":{t:"`subtitleOffset`",p:` -Type: Boolean -Default: false - -Subtitle time offset, with the ...`,l:"en/start/option.html#subtitleoffset",a:"subtitleoffset"},"30.25":{t:"`miniProgressBar`",p:` -Type: Boolean -Default: false - -Mini progress bar, only appears ...`,l:"en/start/option.html#miniprogressbar",a:"miniprogressbar"},"30.26":{t:"`useSSR`",p:` -Type: Boolean -Default: false - -Whether to use the SSR mount mo ...`,l:"en/start/option.html#usessr",a:"usessr"},"30.27":{t:"`playsInline`",p:` -Type: Boolean -Default: true - -Whether to use the playsInline m ...`,l:"en/start/option.html#playsinline",a:"playsinline"},"30.28":{t:"`layers`",p:` -Type: Array -Default: [] - -Initialize the customized layers -< ...`,l:"en/start/option.html#layers",a:"layers"},"30.29":{t:"`settings`",p:` -Type: Array -Default: [] - -Initialize the customized Setting -&l ...`,l:"en/start/option.html#settings",a:"settings"},"30.30":{t:"`contextmenu`",p:` -Type: Array -Default: [] - -Initialize the customized Contextmen ...`,l:"en/start/option.html#contextmenu",a:"contextmenu"},"30.31":{t:"`controls`",p:` -Type: Array -Default: [] - -Initialize the customized Controls -& ...`,l:"en/start/option.html#controls",a:"controls"},"30.32":{t:"`quality`",p:` -Type: Array -Default: [] - -Whether to display the Quality list ...`,l:"en/start/option.html#quality",a:"quality"},"30.33":{t:"`highlight`",p:` -Type: Array -Default: [] - -Display highlight on the progress ba ...`,l:"en/start/option.html#highlight",a:"highlight"},"30.34":{t:"`plugins`",p:` -Type: Array -Default: [] - -Initialize customized plugins -<di ...`,l:"en/start/option.html#plugins",a:"plugins"},"30.35":{t:"`thumbnails`",p:` -Type: Object -Default: {} - -Set the thumbnails image on the pro ...`,l:"en/start/option.html#thumbnails",a:"thumbnails"},"30.36":{t:"`subtitle`",p:` -Type: Object -Default: {} - -Set the subtitle of the video and s ...`,l:"en/start/option.html#subtitle",a:"subtitle"},"30.37":{t:"`moreVideoAttr`",p:` -Type: Object -Default: {'controls': false,'preload': 'metadata ...`,l:"en/start/option.html#morevideoattr",a:"morevideoattr"},"30.38":{t:"`icons`",p:` -Type: Object -Default: {} - -It is used to replace the default i ...`,l:"en/start/option.html#icons",a:"icons"},"30.39":{t:"`type`",p:` -Type: String -Default: '' - -It is used to indicate the format o ...`,l:"en/start/option.html#type",a:"type"},"30.40":{t:"`customType`",p:` -Type: Object -Default: {} - -By matching the video's type, the v ...`,l:"en/start/option.html#customtype",a:"customtype"},"30.41":{t:"`lang`",p:` -Type: String -Default: navigator.language.toLowerCase() - -The d ...`,l:"en/start/option.html#lang",a:"lang"},"30.42":{t:"`i18n`",p:` -Type: Object -Default: {} - -Customize the i18n configuration, w ...`,l:"en/start/option.html#i18n",a:"i18n"},"30.43":{t:"`lock`",p:` -Type: Boolean -Default: false - -Whether to display a lock butto ...`,l:"en/start/option.html#lock",a:"lock"},"30.44":{t:"`fastForward`",p:` -Type: Boolean -Default: false - -Whether to add long-press video ...`,l:"en/start/option.html#fastforward",a:"fastforward"},"30.45":{t:"`autoPlayback`",p:` -Type: Boolean -Default: false - -Whether to use automatic playba ...`,l:"en/start/option.html#autoplayback",a:"autoplayback"},"30.46":{t:"`autoOrientation`",p:` -Type: Boolean -Default: false - -Whether to rotate the player ac ...`,l:"en/start/option.html#autoorientation",a:"autoorientation"},"30.47":{t:"`airplay`",p:` -Type: Boolean -Default: false - -Whether to display the airplay ...`,l:"en/start/option.html#airplay",a:"airplay"},"30.48":{t:"`cssVar`",p:` -Type: Object -Default: {} - -Used to change built-in CSS variabl ...`,l:"en/start/option.html#cssvar",a:"cssvar"},"31.0":{t:"# 安装使用",p:"",l:"index.html",a:"安装使用"},"31.1":{t:"安装",p:`::: code-group -npm install artplayer - -yarn add artplayer - -pnpm ...`,l:"index.html#安装",a:"安装"},"31.2":{t:"`CDN`",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer/dist/art ...`,l:"index.html#cdn",a:"cdn"},"31.3":{t:"使用",p:`::: code-group -import Artplayer from 'artplayer'; - -const art = ...`,l:"index.html#使用",a:"使用"},"31.4":{t:"`Vue.js`",p:`::: code-group -<template> - <div ref="artRef&quo ...`,l:"index.html#vue-js",a:"vue-js"},"31.5":{t:"`React.js`",p:`::: code-group -import { useEffect, useRef } from 'react'; -impo ...`,l:"index.html#react-js",a:"react-js"},"31.6":{t:"TypeScript",p:`导入 Artplayer 时会自动导入的 artplayer.d.ts，但你也可以单独导入选项的类型 -import Artp ...`,l:"index.html#typescript",a:"typescript"},"31.7":{t:"JavaScript",p:`有时你的 js 文件会丢失 TypeScript 的类型提示，这时候你可以手动导入类型 -变量： -/** - * @type { ...`,l:"index.html#javascript",a:"javascript"},"31.8":{t:"古老的浏览器",p:`生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome：last 1 Chrome version -对于 ...`,l:"index.html#古老的浏览器",a:"古老的浏览器"},"32.0":{t:"# dash.js",p:`👉 https://github.com/Dash-Industry-Forum/dash.js -<div clas ...`,l:"library/dash.html",a:"dash-js"},"33.0":{t:"# flv.js",p:`👉 https://github.com/Bilibili/flv.js -<div className=" ...`,l:"library/flv.html",a:"flv-js"},"34.0":{t:"# hls.js",p:`👉 https://github.com/video-dev/hls.js -<div className=" ...`,l:"library/hls.html",a:"hls-js"},"35.0":{t:"# 视频广告",p:"",l:"plugin/ads.html",a:"视频广告"},"35.1":{t:"演示",p:`👉 查看完整演示 -`,l:"plugin/ads.html#演示",a:"演示"},"35.2":{t:"安装",p:`::: code-group -npm install artplayer-plugin-ads - -yarn add artp ...`,l:"plugin/ads.html#安装",a:"安装"},"35.3":{t:"CDN",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-a ...`,l:"plugin/ads.html#cdn",a:"cdn"},"35.4":{t:"使用",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/ads.html#使用",a:"使用"},"36.0":{t:"# 控制器皮肤",p:"",l:"plugin/control-ui.html",a:"控制器皮肤"},"36.1":{t:"演示",p:`👉 查看完整演示 -`,l:"plugin/control-ui.html#演示",a:"演示"},"36.2":{t:"安装",p:`::: code-group -npm install artplayer-plugin-control - -yarn add ...`,l:"plugin/control-ui.html#安装",a:"安装"},"36.3":{t:"CDN",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-c ...`,l:"plugin/control-ui.html#cdn",a:"cdn"},"36.4":{t:"使用",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/control-ui.html#使用",a:"使用"},"36.5":{t:"`enable`",p:` -Type: Getter/Setter -Parameter: Boolean - -是否启用新的控制器皮肤 -<div c ...`,l:"plugin/control-ui.html#enable",a:"enable"},"37.0":{t:"# 弹幕库",p:"",l:"plugin/danmuku.html",a:"弹幕库"},"37.1":{t:"演示",p:`👉 查看完整演示 -`,l:"plugin/danmuku.html#演示",a:"演示"},"37.2":{t:"安装",p:`::: code-group -npm install artplayer-plugin-danmuku - -yarn add ...`,l:"plugin/danmuku.html#安装",a:"安装"},"37.3":{t:"CDN",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-d ...`,l:"plugin/danmuku.html#cdn",a:"cdn"},"37.4":{t:"选项",p:`{ - danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组 - speed: ...`,l:"plugin/danmuku.html#选项",a:"选项"},"37.5":{t:"使用弹幕数组",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/danmuku.html#使用弹幕数组",a:"使用弹幕数组"},"37.6":{t:"使用弹幕 XML",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/danmuku.html#使用弹幕-xml",a:"使用弹幕-xml"},"37.7":{t:"使用异步调用",p:"<div className="run-code" data-libs="./uncom ...",l:"plugin/danmuku.html#使用异步调用",a:"使用异步调用"},"37.8":{t:"`hide/show`",p:`通过方法 hide 和 show 进行隐藏或者显示弹幕 -<div className="run-code&q ...`,l:"plugin/danmuku.html#hide-show",a:"hide-show"},"37.9":{t:"`isHide`",p:`通过属性 isHide 判断当前弹幕是隐藏或者显示 -<div className="run-code&quo ...`,l:"plugin/danmuku.html#ishide",a:"ishide"},"37.10":{t:"`emit`",p:`通过方法 emit 发送一条实时弹幕 -<div className="run-code" data ...`,l:"plugin/danmuku.html#emit",a:"emit"},"37.11":{t:"`config`",p:`通过方法 config 实时改变弹幕配置，支持属性有： - -danmuku -speed -opacity -fontSize -co ...`,l:"plugin/danmuku.html#config",a:"config"},"37.12":{t:"`load`",p:`通过 load 方法可以重载弹幕源，或者切换新弹幕 -<div className="run-code&quo ...`,l:"plugin/danmuku.html#load",a:"load"},"37.13":{t:"`reset`",p:`用于清空当前显示的弹幕 -<div className="run-code" data-libs=& ...`,l:"plugin/danmuku.html#reset",a:"reset"},"37.14":{t:"`option`",p:`用于获取当前弹幕配置 -<div className="run-code" data-libs=&q ...`,l:"plugin/danmuku.html#option",a:"option"},"37.15":{t:"事件",p:`var art = new Artplayer({ - container: '.artplayer-app', - ...`,l:"plugin/danmuku.html#事件",a:"事件"},"38.0":{t:"# Dash 画质",p:"",l:"plugin/dash-quality.html",a:"dash-画质"},"38.1":{t:"演示",p:`👉 查看完整演示 -`,l:"plugin/dash-quality.html#演示",a:"演示"},"38.2":{t:"安装",p:`::: code-group -npm install artplayer-plugin-dash-quality - -yarn ...`,l:"plugin/dash-quality.html#安装",a:"安装"},"38.3":{t:"CDN",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-d ...`,l:"plugin/dash-quality.html#cdn",a:"cdn"},"39.0":{t:"# HLS 画质",p:"",l:"plugin/hls-quality.html",a:"hls-画质"},"39.1":{t:"演示",p:`👉 查看完整演示 -`,l:"plugin/hls-quality.html#演示",a:"演示"},"39.2":{t:"安装",p:`::: code-group -npm install artplayer-plugin-hls-quality - -yarn ...`,l:"plugin/hls-quality.html#安装",a:"安装"},"39.3":{t:"CDN",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-h ...`,l:"plugin/hls-quality.html#cdn",a:"cdn"},"40.0":{t:"# Iframe 控制",p:"",l:"plugin/iframe.html",a:"iframe-控制"},"40.1":{t:"说明",p:"通过该插件，你可以轻松在 index.html 里控制跨域 iframe.html 页面里的播放器，如在 index.htm ...",l:"plugin/iframe.html#说明",a:"说明"},"40.2":{t:"演示",p:`👉 查看完整演示 -`,l:"plugin/iframe.html#演示",a:"演示"},"40.3":{t:"安装",p:`::: code-group -npm install artplayer-plugin-iframe - -yarn add a ...`,l:"plugin/iframe.html#安装",a:"安装"},"40.4":{t:"`CDN`",p:`::: code-group -https://cdn.jsdelivr.net/npm/artplayer-plugin-i ...`,l:"plugin/iframe.html#cdn",a:"cdn"},"40.5":{t:"使用",p:`::: code-group -<!DOCTYPE html> -<html> - <head ...`,l:"plugin/iframe.html#使用",a:"使用"},"40.6":{t:"`index.html` 接口",p:"",l:"plugin/iframe.html#index-html-接口",a:"index-html-接口"},"40.7":{t:"`commit`",p:"从 index.html 将消息推送到 iframe.html，该函数将在 iframe.html 内部运行，同时它也能用于 ...",l:"plugin/iframe.html#commit",a:"commit"},"40.8":{t:"`message`",p:`在 index.html 接收来自 iframe.html 的消息 -iframe.message((event) => ...`,l:"plugin/iframe.html#message",a:"message"},"40.9":{t:"`destroy`",p:`销毁后 index.html 无法与 iframe.html 通信 -iframe.destroy(); - -`,l:"plugin/iframe.html#destroy",a:"destroy"},"40.10":{t:"`iframe.html` 接口",p:`:::warning 提示 -iframe.html 接口 只能运行在 iframe.html 里 -::: -`,l:"plugin/iframe.html#iframe-html-接口",a:"iframe-html-接口"},"40.11":{t:"`inject`",p:`注入脚本，接收来自 index.html 的消息 -ArtplayerPluginIframe.inject(); - -`,l:"plugin/iframe.html#inject",a:"inject"},"40.12":{t:"`postMessage`",p:`将消息推送到 index.html -iframe.message((event) => { - console.i ...`,l:"plugin/iframe.html#postmessage",a:"postmessage"},"40.13":{t:"例子",p:"最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 ...",l:"plugin/iframe.html#例子",a:"例子"},"41.0":{t:"# 语言设置",p:`::: danger -鉴于捆绑的多国语言越来越多, 从 5.1.0 版本开始, artplayer.js 核心代码除了包含 ...`,l:"start/i18n.html",a:"语言设置"},"41.1":{t:"默认语言",p:`默认语言有: en, zh-cn, 无需手动导入 -var art = new Artplayer({ - contain ...`,l:"start/i18n.html#默认语言",a:"默认语言"},"41.2":{t:"导入语言",p:`打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言 -打包后的语言文件存放于: a ...`,l:"start/i18n.html#导入语言",a:"导入语言"},"41.3":{t:"新增语言",p:`var art = new Artplayer({ - container: '.artplayer-app', - ...`,l:"start/i18n.html#新增语言",a:"新增语言"},"41.4":{t:"修改语言",p:`import zhTw from 'artplayer/i18n/zh-tw.js'; - -var art = new Art ...`,l:"start/i18n.html#修改语言",a:"修改语言"},"42.0":{t:"# 基础选项",p:"",l:"start/option.html",a:"基础选项"},"42.1":{t:"`container`",p:` -Type: String, Element -Default: #artplayer - -播放器挂载的 DOM 容器 -< ...`,l:"start/option.html#container",a:"container"},"42.2":{t:"`url`",p:` -Type: String -Default: '' - -视频源地址 -<div className="run-c ...`,l:"start/option.html#url",a:"url"},"42.3":{t:"`id`",p:` -Type: String -Default: '' - -播放器的唯一标识，目前只用于记忆播放 autoplayback -< ...`,l:"start/option.html#id",a:"id"},"42.4":{t:"`onReady`",p:` -Type: Function -Default: undefined - -构造函数接受一个函数作为第二个参数，播放器初始化成功 ...`,l:"start/option.html#onready",a:"onready"},"42.5":{t:"`poster`",p:` -Type: String -Default: '' - -视频的海报，只会出现在播放器初始化且未播放的状态下 -<div c ...`,l:"start/option.html#poster",a:"poster"},"42.6":{t:"`theme`",p:` -Type: String -Default: #f00 - -播放器主题颜色，目前用于 进度条 和 高亮元素 上 -<div ...`,l:"start/option.html#theme",a:"theme"},"42.7":{t:"`volume`",p:` -Type: Number -Default: 0.7 - -播放器的默认音量 -<div className="r ...`,l:"start/option.html#volume",a:"volume"},"42.8":{t:"`isLive`",p:` -Type: Boolean -Default: false - -使用直播模式，会隐藏进度条和播放时间 -<div clas ...`,l:"start/option.html#islive",a:"islive"},"42.9":{t:"`muted`",p:` -Type: Boolean -Default: false - -是否默认静音 -<div className=" ...`,l:"start/option.html#muted",a:"muted"},"42.10":{t:"`autoplay`",p:` -Type: Boolean -Default: false - -是否自动播放 -<div className=" ...`,l:"start/option.html#autoplay",a:"autoplay"},"42.11":{t:"`autoSize`",p:` -Type: Boolean -Default: false - -播放器的尺寸默认会填充整个 container 容器尺寸，所以 ...`,l:"start/option.html#autosize",a:"autosize"},"42.12":{t:"`autoMini`",p:` -Type: Boolean -Default: false - -当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式 -&l ...`,l:"start/option.html#automini",a:"automini"},"42.13":{t:"`loop`",p:` -Type: Boolean -Default: false - -是否循环播放 -<div className=" ...`,l:"start/option.html#loop",a:"loop"},"42.14":{t:"`flip`",p:` -Type: Boolean -Default: false - -是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里 ...`,l:"start/option.html#flip",a:"flip"},"42.15":{t:"`playbackRate`",p:` -Type: Boolean -Default: false - -是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里 ...`,l:"start/option.html#playbackrate",a:"playbackrate"},"42.16":{t:"`aspectRatio`",p:` -Type: Boolean -Default: false - -是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里 - ...`,l:"start/option.html#aspectratio",a:"aspectratio"},"42.17":{t:"`screenshot`",p:` -Type: Boolean -Default: false - -是否在底部控制栏里显示 视频截图 功能 -<div cla ...`,l:"start/option.html#screenshot",a:"screenshot"},"42.18":{t:"`setting`",p:` -Type: Boolean -Default: false - -是否在底部控制栏里显示 设置面板 的开关按钮 -<div ...`,l:"start/option.html#setting",a:"setting"},"42.19":{t:"`hotkey`",p:` -Type: Boolean -Default: true - -是否使用快捷键 -<div className=" ...`,l:"start/option.html#hotkey",a:"hotkey"},"42.20":{t:"`pip`",p:` -Type: Boolean -Default: false - -是否在底部控制栏里显示 画中画 的开关按钮 -<div c ...`,l:"start/option.html#pip",a:"pip"},"42.21":{t:"`mutex`",p:` -Type: Boolean -Default: true - -假如页面里同时存在多个播放器，是否只能让一个播放器播放 -< ...`,l:"start/option.html#mutex",a:"mutex"},"42.22":{t:"`fullscreen`",p:` -Type: Boolean -Default: false - -是否在底部控制栏里显示播放器 窗口全屏 按钮 -<div ...`,l:"start/option.html#fullscreen",a:"fullscreen"},"42.23":{t:"`fullscreenWeb`",p:` -Type: Boolean -Default: false - -是否在底部控制栏里显示播放器 网页全屏 按钮 -<div ...`,l:"start/option.html#fullscreenweb",a:"fullscreenweb"},"42.24":{t:"`subtitleOffset`",p:` -Type: Boolean -Default: false - -字幕时间偏移，范围在 [-5s, 5s]，出现在 设置面板 里 ...`,l:"start/option.html#subtitleoffset",a:"subtitleoffset"},"42.25":{t:"`miniProgressBar`",p:` -Type: Boolean -Default: false - -迷你进度条，只在播放器失去焦点后且正在播放时出现 -<di ...`,l:"start/option.html#miniprogressbar",a:"miniprogressbar"},"42.26":{t:"`useSSR`",p:` -Type: Boolean -Default: false - -是否使用 SSR 挂载模式，假如你希望在播放器挂载前，就提前渲 ...`,l:"start/option.html#usessr",a:"usessr"},"42.27":{t:"`playsInline`",p:` -Type: Boolean -Default: true - -在移动端是否使用 playsInline 模式 -<div ...`,l:"start/option.html#playsinline",a:"playsinline"},"42.28":{t:"`layers`",p:` -Type: Array -Default: [] - -初始化自定义的 层 -<div className="ru ...`,l:"start/option.html#layers",a:"layers"},"42.29":{t:"`settings`",p:` -Type: Array -Default: [] - -初始化自定义的 设置面板 -<div className=" ...`,l:"start/option.html#settings",a:"settings"},"42.30":{t:"`contextmenu`",p:` -Type: Array -Default: [] - -初始化自定义的 右键菜单 -<div className=" ...`,l:"start/option.html#contextmenu",a:"contextmenu"},"42.31":{t:"`controls`",p:` -Type: Array -Default: [] - -初始化自定义的底部 控制栏 -<div className=&quo ...`,l:"start/option.html#controls",a:"controls"},"42.32":{t:"`quality`",p:` -Type: Array -Default: [] - -是否在底部控制栏里显示 画质选择 列表 - - - -属性 -类型 -描述 - - - - - ...`,l:"start/option.html#quality",a:"quality"},"42.33":{t:"`highlight`",p:` -Type: Array -Default: [] - -在进度条上显示 高亮信息 - - - -属性 -类型 -描述 - - - - -time -Nu ...`,l:"start/option.html#highlight",a:"highlight"},"42.34":{t:"`plugins`",p:` -Type: Array -Default: [] - -初始化自定义的 插件 -<div className="r ...`,l:"start/option.html#plugins",a:"plugins"},"42.35":{t:"`thumbnails`",p:` -Type: Object -Default: {} - -在进度条上设置 预览图 - - - -属性 -类型 -描述 - - - - -url -Str ...`,l:"start/option.html#thumbnails",a:"thumbnails"},"42.36":{t:"`subtitle`",p:` -Type: Object -Default: {} - -设置视频的字幕，支持字幕格式：vtt, srt, ass - - - -属性 - ...`,l:"start/option.html#subtitle",a:"subtitle"},"42.37":{t:"`moreVideoAttr`",p:` -Type: Object -Default: {'controls': false,'preload': 'metadata ...`,l:"start/option.html#morevideoattr",a:"morevideoattr"},"42.38":{t:"`icons`",p:` -Type: Object -Default: {} - -用于替换默认图标，支持 Html 字符串和 HTMLElement -& ...`,l:"start/option.html#icons",a:"icons"},"42.39":{t:"`type`",p:` -Type: String -Default: '' - -用于指明视频的格式，需要配合 customType 一起使用，默认视频 ...`,l:"start/option.html#type",a:"type"},"42.40":{t:"`customType`",p:` -Type: Object -Default: {} - -通过视频的 type 进行匹配，把视频解码权交给第三方程序进行处理，处 ...`,l:"start/option.html#customtype",a:"customtype"},"42.41":{t:"`lang`",p:` -Type: String -Default: navigator.language.toLowerCase() - -默认显示语 ...`,l:"start/option.html#lang",a:"lang"},"42.42":{t:"`i18n`",p:` -Type: Object -Default: {} - -自定义 i18n 配置，该配置会和自带的 i18n 进行深度合并 -新增 ...`,l:"start/option.html#i18n",a:"i18n"},"42.43":{t:"`lock`",p:` -Type: Boolean -Default: false - -是否在移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏 -< ...`,l:"start/option.html#lock",a:"lock"},"42.44":{t:"`fastForward`",p:` -Type: Boolean -Default: false - -是否在移动端添加长按视频快进功能 -<div classN ...`,l:"start/option.html#fastforward",a:"fastforward"},"42.45":{t:"`autoPlayback`",p:` -Type: Boolean -Default: false - -是否使用自动 回放功能 -<div className=& ...`,l:"start/option.html#autoplayback",a:"autoplayback"},"42.46":{t:"`autoOrientation`",p:` -Type: Boolean -Default: false - -是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器 - ...`,l:"start/option.html#autoorientation",a:"autoorientation"},"42.47":{t:"`airplay`",p:` -Type: Boolean -Default: false - -是否显示 airplay 按钮，当前只有部分浏览器支持该功能 - ...`,l:"start/option.html#airplay",a:"airplay"},"42.48":{t:"`cssVar`",p:` -Type: Object -Default: {} - -用于改变内置的css变量 -<div className=&quo ...`,l:"start/option.html#cssvar",a:"cssvar"}},n={previewLength:62,buttonLabel:"Search",placeholder:"Search docs",allow:[],ignore:[]},a={INDEX_DATA:t,PREVIEW_LOOKUP:e,Options:n};export{a as default}; diff --git a/docs/document/assets/component_contextmenu.md.fd4c8f42.js b/docs/document/assets/component_contextmenu.md.fd4c8f42.js deleted file mode 100644 index ba939d352..000000000 --- a/docs/document/assets/component_contextmenu.md.fd4c8f42.js +++ /dev/null @@ -1,83 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const f=JSON.parse('{"title":"右键菜单","description":"","frontmatter":{},"headers":[],"relativePath":"component/contextmenu.md","filePath":"component/contextmenu.md","lastUpdated":1682229030000}'),o={name:"component/contextmenu.md"},e=s('

右键菜单 ​

配置 ​

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本

创建 ​

',4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
-
-art.contextmenu.show = true;
-
-// Get the Element of contextmenu by name
-console.info(art.contextmenu['your-menu']);

添加 ​

`,2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.contextmenu.add({
-    name: 'your-menu',
-    html: 'Your Menu',
-    click: function (...args) {
-        console.info(args);
-        art.contextmenu.show = false;
-    },
-});
-
-art.contextmenu.show = true;
-
-// Get the Element of contextmenu by name
-console.info(art.contextmenu['your-menu']);

删除 ​

`,2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
-
-art.contextmenu.show = true;
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the contextmenu by name
-        art.contextmenu.remove('your-menu')
-    }, 3000);
-});

更新 ​

`,2),A=n("div",{className:"run-code"},"▶ Run Code",-1),i=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
-
-art.contextmenu.show = true;
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the contextmenu by name
-        art.contextmenu.update({
-            name: 'your-menu',
-            html: 'Your New Menu',
-        })
-    }, 3000);
-});
`,1),C=[e,t,r,c,D,F,y,A,i];function d(b,u,m,h,_,g){return l(),p("div",null,C)}const x=a(o,[["render",d]]);export{f as __pageData,x as default}; diff --git a/docs/document/assets/component_contextmenu.md.fd4c8f42.lean.js b/docs/document/assets/component_contextmenu.md.fd4c8f42.lean.js deleted file mode 100644 index b406be449..000000000 --- a/docs/document/assets/component_contextmenu.md.fd4c8f42.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const f=JSON.parse('{"title":"右键菜单","description":"","frontmatter":{},"headers":[],"relativePath":"component/contextmenu.md","filePath":"component/contextmenu.md","lastUpdated":1682229030000}'),o={name:"component/contextmenu.md"},e=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",2),A=n("div",{className:"run-code"},"▶ Run Code",-1),i=s("",1),C=[e,t,r,c,D,F,y,A,i];function d(b,u,m,h,_,g){return l(),p("div",null,C)}const x=a(o,[["render",d]]);export{f as __pageData,x as default}; diff --git a/docs/document/assets/component_contextmenu.md.yUI36N-8.js b/docs/document/assets/component_contextmenu.md.yUI36N-8.js new file mode 100644 index 000000000..444ee6657 --- /dev/null +++ b/docs/document/assets/component_contextmenu.md.yUI36N-8.js @@ -0,0 +1,83 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const B=JSON.parse('{"title":"右键菜单","description":"","frontmatter":{},"headers":[],"relativePath":"component/contextmenu.md","filePath":"component/contextmenu.md","lastUpdated":1682229030000}'),p={name:"component/contextmenu.md"},e=s('

右键菜单 ​

配置 ​

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本

创建 ​

',4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
+
+art.contextmenu.show = true;
+
+// Get the Element of contextmenu by name
+console.info(art.contextmenu['your-menu']);

添加 ​

`,2),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.contextmenu.add({
+    name: 'your-menu',
+    html: 'Your Menu',
+    click: function (...args) {
+        console.info(args);
+        art.contextmenu.show = false;
+    },
+});
+
+art.contextmenu.show = true;
+
+// Get the Element of contextmenu by name
+console.info(art.contextmenu['your-menu']);

删除 ​

`,2),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
+
+art.contextmenu.show = true;
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the contextmenu by name
+        art.contextmenu.remove('your-menu')
+    }, 3000);
+});

更新 ​

`,2),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
+
+art.contextmenu.show = true;
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the contextmenu by name
+        art.contextmenu.update({
+            name: 'your-menu',
+            html: 'Your New Menu',
+        })
+    }, 3000);
+});
`,1),y=[e,h,t,k,r,E,d,c,g];function o(b,u,m,F,_,C){return n(),l("div",null,y)}const D=a(p,[["render",o]]);export{B as __pageData,D as default}; diff --git a/docs/document/assets/component_contextmenu.md.yUI36N-8.lean.js b/docs/document/assets/component_contextmenu.md.yUI36N-8.lean.js new file mode 100644 index 000000000..a28f47627 --- /dev/null +++ b/docs/document/assets/component_contextmenu.md.yUI36N-8.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const B=JSON.parse('{"title":"右键菜单","description":"","frontmatter":{},"headers":[],"relativePath":"component/contextmenu.md","filePath":"component/contextmenu.md","lastUpdated":1682229030000}'),p={name:"component/contextmenu.md"},e=s("",4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",2),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",2),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s("",1),y=[e,h,t,k,r,E,d,c,g];function o(b,u,m,F,_,C){return n(),l("div",null,y)}const D=a(p,[["render",o]]);export{B as __pageData,D as default}; diff --git a/docs/document/assets/component_controls.md.1t7M5ddB.js b/docs/document/assets/component_controls.md.1t7M5ddB.js new file mode 100644 index 000000000..29cce1bcb --- /dev/null +++ b/docs/document/assets/component_controls.md.1t7M5ddB.js @@ -0,0 +1,130 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const A=JSON.parse('{"title":"控制器","description":"","frontmatter":{},"headers":[],"relativePath":"component/controls.md","filePath":"component/controls.md","lastUpdated":1682233868000}'),p={name:"component/controls.md"},h=s('

控制器 ​

配置 ​

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
positionStringleft 和 right 控制控制器出现的左右位置
selectorArray选择列表的对象数组
onSelectFunction选择列表的元素被点击时触发的函数

创建 ​

',4),t=i("div",{className:"run-code"},"▶ Run Code",-1),e=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'your-button',
+            index: 10,
+            position: 'left',
+            html: 'Your Button',
+            tooltip: 'Your Button',
+            style: {
+                color: 'red',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+        {
+            name: 'subtitle',
+            position: 'right',
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">subtitle 01</span>',
+                },
+                {
+                    html: '<span style="color:yellow">subtitle 02</span>',
+                },
+            ],
+            onSelect: function (item, $dom) {
+                console.info(item, $dom);
+                return 'Your ' + item.html;
+            },
+        },
+    ],
+});
+
+// Get the Element of control by name
+console.info(art.controls['your-button']);
+console.info(art.controls['subtitle']);

添加 ​

`,2),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.controls.add({
+    name: 'button1',
+    index: 10,
+    position: 'left',
+    html: 'Your Button',
+    tooltip: 'Your Button',
+    style: {
+        color: 'red',
+    },
+    click: function (...args) {
+        console.info('click', args);
+    },
+    mounted: function (...args) {
+        console.info('mounted', args);
+    },
+});
+
+// Get the Element of control by name
+console.info(art.controls['button1']);

删除 ​

`,2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'Your Button',
+            tooltip: 'Your Button',
+            style: {
+                color: 'red',
+            },
+        }
+    ]
+});
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the control by name
+        art.controls.remove('button1');
+    }, 3000);
+});

更新 ​

`,2),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: 'subtitle 01',
+                },
+                {
+                    html: 'subtitle 02',
+                },
+            ],
+        }
+    ]
+});
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the control by name
+        art.controls.update({
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'New Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: 'new subtitle 01',
+                },
+                {
+                    html: 'new subtitle 02',
+                },
+            ],
+        });
+    }, 3000);
+});
`,1),y=[h,t,e,k,E,r,d,c,g];function b(o,F,u,m,C,B){return n(),l("div",null,y)}const v=a(p,[["render",b]]);export{A as __pageData,v as default}; diff --git a/docs/document/assets/component_controls.md.1t7M5ddB.lean.js b/docs/document/assets/component_controls.md.1t7M5ddB.lean.js new file mode 100644 index 000000000..f5b833306 --- /dev/null +++ b/docs/document/assets/component_controls.md.1t7M5ddB.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const A=JSON.parse('{"title":"控制器","description":"","frontmatter":{},"headers":[],"relativePath":"component/controls.md","filePath":"component/controls.md","lastUpdated":1682233868000}'),p={name:"component/controls.md"},h=s("",4),t=i("div",{className:"run-code"},"▶ Run Code",-1),e=s("",2),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s("",2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",2),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s("",1),y=[h,t,e,k,E,r,d,c,g];function b(o,F,u,m,C,B){return n(),l("div",null,y)}const v=a(p,[["render",b]]);export{A as __pageData,v as default}; diff --git a/docs/document/assets/component_controls.md.5efc46cb.js b/docs/document/assets/component_controls.md.5efc46cb.js deleted file mode 100644 index 82757e916..000000000 --- a/docs/document/assets/component_controls.md.5efc46cb.js +++ /dev/null @@ -1,130 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const f=JSON.parse('{"title":"控制器","description":"","frontmatter":{},"headers":[],"relativePath":"component/controls.md","filePath":"component/controls.md","lastUpdated":1682233868000}'),o={name:"component/controls.md"},e=s('

控制器 ​

配置 ​

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
positionStringleft 和 right 控制控制器出现的左右位置
selectorArray选择列表的对象数组
onSelectFunction选择列表的元素被点击时触发的函数

创建 ​

',4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'your-button',
-            index: 10,
-            position: 'left',
-            html: 'Your Button',
-            tooltip: 'Your Button',
-            style: {
-                color: 'red',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-        {
-            name: 'subtitle',
-            position: 'right',
-            html: 'Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: '<span style="color:red">subtitle 01</span>',
-                },
-                {
-                    html: '<span style="color:yellow">subtitle 02</span>',
-                },
-            ],
-            onSelect: function (item, $dom) {
-                console.info(item, $dom);
-                return 'Your ' + item.html;
-            },
-        },
-    ],
-});
-
-// Get the Element of control by name
-console.info(art.controls['your-button']);
-console.info(art.controls['subtitle']);

添加 ​

`,2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.controls.add({
-    name: 'button1',
-    index: 10,
-    position: 'left',
-    html: 'Your Button',
-    tooltip: 'Your Button',
-    style: {
-        color: 'red',
-    },
-    click: function (...args) {
-        console.info('click', args);
-    },
-    mounted: function (...args) {
-        console.info('mounted', args);
-    },
-});
-
-// Get the Element of control by name
-console.info(art.controls['button1']);

删除 ​

`,2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'Your Button',
-            tooltip: 'Your Button',
-            style: {
-                color: 'red',
-            },
-        }
-    ]
-});
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the control by name
-        art.controls.remove('button1');
-    }, 3000);
-});

更新 ​

`,2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: 'subtitle 01',
-                },
-                {
-                    html: 'subtitle 02',
-                },
-            ],
-        }
-    ]
-});
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the control by name
-        art.controls.update({
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'New Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: 'new subtitle 01',
-                },
-                {
-                    html: 'new subtitle 02',
-                },
-            ],
-        });
-    }, 3000);
-});
`,1),A=[e,t,r,c,D,F,y,i,C];function b(d,u,m,h,g,_){return l(),p("div",null,A)}const T=a(o,[["render",b]]);export{f as __pageData,T as default}; diff --git a/docs/document/assets/component_controls.md.5efc46cb.lean.js b/docs/document/assets/component_controls.md.5efc46cb.lean.js deleted file mode 100644 index 024479ff3..000000000 --- a/docs/document/assets/component_controls.md.5efc46cb.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const f=JSON.parse('{"title":"控制器","description":"","frontmatter":{},"headers":[],"relativePath":"component/controls.md","filePath":"component/controls.md","lastUpdated":1682233868000}'),o={name:"component/controls.md"},e=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s("",1),A=[e,t,r,c,D,F,y,i,C];function b(d,u,m,h,g,_){return l(),p("div",null,A)}const T=a(o,[["render",b]]);export{f as __pageData,T as default}; diff --git a/docs/document/assets/component_layers.md.1b88e508.js b/docs/document/assets/component_layers.md.1b88e508.js deleted file mode 100644 index 266ea53d3..000000000 --- a/docs/document/assets/component_layers.md.1b88e508.js +++ /dev/null @@ -1,102 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const f=JSON.parse('{"title":"业务层","description":"","frontmatter":{},"headers":[],"relativePath":"component/layers.md","filePath":"component/layers.md","lastUpdated":1682229030000}'),o={name:"component/layers.md"},e=s('

业务层 ​

配置 ​

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本

创建 ​

',4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: \`<img style="width: 100px" src="\${img}">\`,
-            tooltip: 'Potser Tip',
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-    ],
-});
-
-// Get the Element of layer by name
-console.info(art.layers['potser']);

添加 ​

`,2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.layers.add({
-    name: 'potser',
-    html: \`<img style="width: 100px" src="\${img}">\`,
-    tooltip: 'Potser Tip',
-    style: {
-        position: 'absolute',
-        top: '50px',
-        right: '50px',
-    },
-    click: function (...args) {
-        console.info('click', args);
-    },
-    mounted: function (...args) {
-        console.info('mounted', args);
-    },
-});
-
-// Get the Element of layer by name
-console.info(art.layers['potser']);

删除 ​

`,2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: \`<img style="width: 100px" src="\${img}">\`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-        },
-    ],
-});
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the layer by name
-        art.layers.remove('potser');
-    }, 3000);
-});

更新 ​

`,2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: \`<img style="width: 100px" src="\${img}">\`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-        },
-    ],
-});
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the layer by name
-        art.layers.update({
-            name: 'potser',
-            html: \`<img style="width: 200px" src="\${img}">\`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                left: '50px',
-            },
-        });
-    }, 3000);
-});
`,1),A=[e,t,r,c,D,F,y,i,C];function b(d,h,m,u,g,_){return l(),p("div",null,A)}const v=a(o,[["render",b]]);export{f as __pageData,v as default}; diff --git a/docs/document/assets/component_layers.md.1b88e508.lean.js b/docs/document/assets/component_layers.md.1b88e508.lean.js deleted file mode 100644 index 2077cd90e..000000000 --- a/docs/document/assets/component_layers.md.1b88e508.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const f=JSON.parse('{"title":"业务层","description":"","frontmatter":{},"headers":[],"relativePath":"component/layers.md","filePath":"component/layers.md","lastUpdated":1682229030000}'),o={name:"component/layers.md"},e=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s("",1),A=[e,t,r,c,D,F,y,i,C];function b(d,h,m,u,g,_){return l(),p("div",null,A)}const v=a(o,[["render",b]]);export{f as __pageData,v as default}; diff --git a/docs/document/assets/component_layers.md.PBLuSN2i.js b/docs/document/assets/component_layers.md.PBLuSN2i.js new file mode 100644 index 000000000..e4a8f36ed --- /dev/null +++ b/docs/document/assets/component_layers.md.PBLuSN2i.js @@ -0,0 +1,102 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const A=JSON.parse('{"title":"业务层","description":"","frontmatter":{},"headers":[],"relativePath":"component/layers.md","filePath":"component/layers.md","lastUpdated":1682229030000}'),p={name:"component/layers.md"},h=s('

业务层 ​

配置 ​

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本

创建 ​

',4),e=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'potser',
+            html: \`<img style="width: 100px" src="\${img}">\`,
+            tooltip: 'Potser Tip',
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+    ],
+});
+
+// Get the Element of layer by name
+console.info(art.layers['potser']);

添加 ​

`,2),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.layers.add({
+    name: 'potser',
+    html: \`<img style="width: 100px" src="\${img}">\`,
+    tooltip: 'Potser Tip',
+    style: {
+        position: 'absolute',
+        top: '50px',
+        right: '50px',
+    },
+    click: function (...args) {
+        console.info('click', args);
+    },
+    mounted: function (...args) {
+        console.info('mounted', args);
+    },
+});
+
+// Get the Element of layer by name
+console.info(art.layers['potser']);

删除 ​

`,2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'potser',
+            html: \`<img style="width: 100px" src="\${img}">\`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+        },
+    ],
+});
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the layer by name
+        art.layers.remove('potser');
+    }, 3000);
+});

更新 ​

`,2),g=i("div",{className:"run-code"},"▶ Run Code",-1),c=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'potser',
+            html: \`<img style="width: 100px" src="\${img}">\`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+        },
+    ],
+});
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the layer by name
+        art.layers.update({
+            name: 'potser',
+            html: \`<img style="width: 200px" src="\${img}">\`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                left: '50px',
+            },
+        });
+    }, 3000);
+});
`,1),y=[h,e,t,k,E,r,d,g,c];function b(o,F,u,m,C,_){return n(),l("div",null,y)}const D=a(p,[["render",b]]);export{A as __pageData,D as default}; diff --git a/docs/document/assets/component_layers.md.PBLuSN2i.lean.js b/docs/document/assets/component_layers.md.PBLuSN2i.lean.js new file mode 100644 index 000000000..30eb89e07 --- /dev/null +++ b/docs/document/assets/component_layers.md.PBLuSN2i.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const A=JSON.parse('{"title":"业务层","description":"","frontmatter":{},"headers":[],"relativePath":"component/layers.md","filePath":"component/layers.md","lastUpdated":1682229030000}'),p={name:"component/layers.md"},h=s("",4),e=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",2),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s("",2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",2),g=i("div",{className:"run-code"},"▶ Run Code",-1),c=s("",1),y=[h,e,t,k,E,r,d,g,c];function b(o,F,u,m,C,_){return n(),l("div",null,y)}const D=a(p,[["render",b]]);export{A as __pageData,D as default}; diff --git a/docs/document/assets/component_setting.md.YkhFuIfX.js b/docs/document/assets/component_setting.md.YkhFuIfX.js new file mode 100644 index 000000000..ecc6f4b32 --- /dev/null +++ b/docs/document/assets/component_setting.md.YkhFuIfX.js @@ -0,0 +1,207 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const P=JSON.parse('{"title":"设置面板","description":"","frontmatter":{},"headers":[],"relativePath":"component/setting.md","filePath":"component/setting.md","lastUpdated":1682779928000}'),p={name:"component/setting.md"},h=s('

设置面板 ​

内置 ​

须先打开设置面板，然后自带四个内置项：flip, playbackRate, aspectRatio, subtitleOffset

',3),t=i("div",{className:"run-code"},"▶ Run Code",-1),e=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+	setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+});

创建 - 选择列表 ​

属性类型描述
htmlString, Element元素的 DOM
iconString, Element元素的图标
selectorArray元素列表
onSelectFunction元素点击事件
widthNumber列表宽度
tooltipString提示文本
`,3),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Subtitle',
+            width: 250,
+            tooltip: 'Subtitle 01',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">Subtitle 01</span>',
+                    url: '/assets/sample/subtitle.srt?id=1',
+                },
+                {
+                    html: '<span style="color:yellow">Subtitle 02</span>',
+                    url: '/assets/sample/subtitle.srt?id=2',
+                },
+            ],
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                art.subtitle.url = item.url;
+                return item.html;
+            },
+        },
+        {
+            html: 'Quality',
+            width: 150,
+            tooltip: '1080P',
+            selector: [
+                {
+                    default: true,
+                    html: '1080P',
+                    url: '/assets/sample/video.mp4?id=1080',
+                },
+                {
+                    html: '720P',
+                    url: '/assets/sample/video.mp4?id=720',
+                },
+                {
+                    html: '360P',
+                    url: '/assets/sample/video.mp4?id=360',
+                },
+            ],
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                art.switchQuality(item.url, item.html);
+                return item.html;
+            },
+        },
+    ],
+});

创建 - 列表嵌套 ​

`,2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Multi-level',
+            selector: [
+                {
+                    html: 'Setting 01',
+                    width: 150,
+                    selector: [
+                        {
+                            html: 'Setting 01 - 01',
+                        },
+                        {
+                            html: 'Setting 01 - 02',
+                        },
+                    ],
+                    onSelect: function (item, $dom, event) {
+                        console.info(item, $dom, event);
+                        return item.html;
+                    },
+                },
+                {
+                    html: 'Setting 02',
+                    width: 150,
+                    selector: [
+                        {
+                            html: 'Setting 02 - 01',
+                        },
+                        {
+                            html: 'Setting 02 - 02',
+                        },
+                    ],
+                    onSelect: function (item, $dom, event) {
+                        console.info(item, $dom, event);
+                        return item.html;
+                    },
+                },
+            ],
+        },
+    ],
+});

创建 - 切换按钮 ​

属性类型描述
htmlString, Element元素的 DOM 元素
iconString, Element元素的图标
switchBoolean按钮默认状态
onSwitchFunction按钮切换事件
tooltipString提示文本
`,3),g=i("div",{className:"run-code"},"▶ Run Code",-1),c=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+            onSwitch: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                const nextState = !item.switch;
+                art.pip = nextState;
+                item.tooltip = nextState ? 'Open' : 'Close';
+                return nextState;
+            },
+        },
+    ],
+});

创建 - 范围滑块 ​

属性类型描述
htmlString, Element元素的 DOM 元素
iconString, Element元素的图标
rangeArray默认状态数组
onRangeFunction完成时触发的事件
onChangeFunction变化时触发的事件
tooltipString提示文本
js
const range = [5, 1, 10, 1];
+const value = range[0];
+const min = range[1];
+const max = range[2];
+const step = range[3];
`,4),y=i("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+            onChange: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                return item.range + 'x';
+            },
+        },
+    ],
+});

添加 ​

`,2),o=i("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
+
+art.setting.show = true;
+
+art.setting.add({
+    html: 'Slider',
+    tooltip: '5x',
+    icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+    range: [5, 1, 10, 1],
+});

删除 ​

`,2),u=i("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    settings: [
+        {
+            name: 'slider',
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+        },
+    ],
+});
+
+art.setting.show = true;
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the setting by name
+        art.setting.remove('slider');
+    }, 3000);
+});

更新 ​

`,2),C=i("div",{className:"run-code"},"▶ Run Code",-1),B=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            name: 'slider',
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+        },
+    ],
+});
+
+art.setting.show = true;
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the setting by name
+        art.setting.update({
+            name: 'slider',
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+        });
+    }, 3000);
+});
`,1),_=[h,t,e,k,E,r,d,g,c,y,b,o,F,u,m,C,B];function A(v,D,S,q,T,f){return n(),l("div",null,_)}const R=a(p,[["render",A]]);export{P as __pageData,R as default}; diff --git a/docs/document/assets/component_setting.md.YkhFuIfX.lean.js b/docs/document/assets/component_setting.md.YkhFuIfX.lean.js new file mode 100644 index 000000000..c4e33a2db --- /dev/null +++ b/docs/document/assets/component_setting.md.YkhFuIfX.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const P=JSON.parse('{"title":"设置面板","description":"","frontmatter":{},"headers":[],"relativePath":"component/setting.md","filePath":"component/setting.md","lastUpdated":1682779928000}'),p={name:"component/setting.md"},h=s("",3),t=i("div",{className:"run-code"},"▶ Run Code",-1),e=s("",3),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s("",2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",3),g=i("div",{className:"run-code"},"▶ Run Code",-1),c=s("",4),y=i("div",{className:"run-code"},"▶ Run Code",-1),b=s("",2),o=i("div",{className:"run-code"},"▶ Run Code",-1),F=s("",2),u=i("div",{className:"run-code"},"▶ Run Code",-1),m=s("",2),C=i("div",{className:"run-code"},"▶ Run Code",-1),B=s("",1),_=[h,t,e,k,E,r,d,g,c,y,b,o,F,u,m,C,B];function A(v,D,S,q,T,f){return n(),l("div",null,_)}const R=a(p,[["render",A]]);export{P as __pageData,R as default}; diff --git a/docs/document/assets/component_setting.md.b02da861.js b/docs/document/assets/component_setting.md.b02da861.js deleted file mode 100644 index 8a0d704bf..000000000 --- a/docs/document/assets/component_setting.md.b02da861.js +++ /dev/null @@ -1,207 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const x=JSON.parse('{"title":"设置面板","description":"","frontmatter":{},"headers":[],"relativePath":"component/setting.md","filePath":"component/setting.md","lastUpdated":1682779928000}'),o={name:"component/setting.md"},e=s('

设置面板 ​

内置 ​

须先打开设置面板，然后自带四个内置项：flip, playbackRate, aspectRatio, subtitleOffset

',3),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-	setting: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    subtitleOffset: true,
-});

创建 - 选择列表 ​

属性类型描述
htmlString, Element元素的 DOM
iconString, Element元素的图标
selectorArray元素列表
onSelectFunction元素点击事件
widthNumber列表宽度
tooltipString提示文本
`,3),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Subtitle',
-            width: 250,
-            tooltip: 'Subtitle 01',
-            selector: [
-                {
-                    default: true,
-                    html: '<span style="color:red">Subtitle 01</span>',
-                    url: '/assets/sample/subtitle.srt?id=1',
-                },
-                {
-                    html: '<span style="color:yellow">Subtitle 02</span>',
-                    url: '/assets/sample/subtitle.srt?id=2',
-                },
-            ],
-            onSelect: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                art.subtitle.url = item.url;
-                return item.html;
-            },
-        },
-        {
-            html: 'Quality',
-            width: 150,
-            tooltip: '1080P',
-            selector: [
-                {
-                    default: true,
-                    html: '1080P',
-                    url: '/assets/sample/video.mp4?id=1080',
-                },
-                {
-                    html: '720P',
-                    url: '/assets/sample/video.mp4?id=720',
-                },
-                {
-                    html: '360P',
-                    url: '/assets/sample/video.mp4?id=360',
-                },
-            ],
-            onSelect: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                art.switchQuality(item.url, item.html);
-                return item.html;
-            },
-        },
-    ],
-});

创建 - 列表嵌套 ​

`,2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Multi-level',
-            selector: [
-                {
-                    html: 'Setting 01',
-                    width: 150,
-                    selector: [
-                        {
-                            html: 'Setting 01 - 01',
-                        },
-                        {
-                            html: 'Setting 01 - 02',
-                        },
-                    ],
-                    onSelect: function (item, $dom, event) {
-                        console.info(item, $dom, event);
-                        return item.html;
-                    },
-                },
-                {
-                    html: 'Setting 02',
-                    width: 150,
-                    selector: [
-                        {
-                            html: 'Setting 02 - 01',
-                        },
-                        {
-                            html: 'Setting 02 - 02',
-                        },
-                    ],
-                    onSelect: function (item, $dom, event) {
-                        console.info(item, $dom, event);
-                        return item.html;
-                    },
-                },
-            ],
-        },
-    ],
-});

创建 - 切换按钮 ​

属性类型描述
htmlString, Element元素的 DOM 元素
iconString, Element元素的图标
switchBoolean按钮默认状态
onSwitchFunction按钮切换事件
tooltipString提示文本
`,3),C=n("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'PIP Mode',
-            tooltip: 'Close',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            switch: false,
-            onSwitch: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                const nextState = !item.switch;
-                art.pip = nextState;
-                item.tooltip = nextState ? 'Open' : 'Close';
-                return nextState;
-            },
-        },
-    ],
-});

创建 - 范围滑块 ​

属性类型描述
htmlString, Element元素的 DOM 元素
iconString, Element元素的图标
rangeArray默认状态数组
onRangeFunction完成时触发的事件
onChangeFunction变化时触发的事件
tooltipString提示文本
js
const range = [5, 1, 10, 1];
-const value = range[0];
-const min = range[1];
-const max = range[2];
-const step = range[3];
`,4),i=n("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-            onChange: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                return item.range + 'x';
-            },
-        },
-    ],
-});

添加 ​

`,2),d=n("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
-
-art.setting.show = true;
-
-art.setting.add({
-    html: 'Slider',
-    tooltip: '5x',
-    icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-    range: [5, 1, 10, 1],
-});

删除 ​

`,2),m=n("div",{className:"run-code"},"▶ Run Code",-1),h=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-    settings: [
-        {
-            name: 'slider',
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-        },
-    ],
-});
-
-art.setting.show = true;
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the setting by name
-        art.setting.remove('slider');
-    }, 3000);
-});

更新 ​

`,2),g=n("div",{className:"run-code"},"▶ Run Code",-1),_=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            name: 'slider',
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-        },
-    ],
-});
-
-art.setting.show = true;
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the setting by name
-        art.setting.update({
-            name: 'slider',
-            html: 'PIP Mode',
-            tooltip: 'Close',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            switch: false,
-        });
-    }, 3000);
-});
`,1),E=[e,t,r,c,D,F,y,C,A,i,b,d,u,m,h,g,_];function v(f,S,q,T,w,P){return l(),p("div",null,E)}const R=a(o,[["render",v]]);export{x as __pageData,R as default}; diff --git a/docs/document/assets/component_setting.md.b02da861.lean.js b/docs/document/assets/component_setting.md.b02da861.lean.js deleted file mode 100644 index 573fb4997..000000000 --- a/docs/document/assets/component_setting.md.b02da861.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const x=JSON.parse('{"title":"设置面板","description":"","frontmatter":{},"headers":[],"relativePath":"component/setting.md","filePath":"component/setting.md","lastUpdated":1682779928000}'),o={name:"component/setting.md"},e=s("",3),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",3),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",3),C=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),i=n("div",{className:"run-code"},"▶ Run Code",-1),b=s("",2),d=n("div",{className:"run-code"},"▶ Run Code",-1),u=s("",2),m=n("div",{className:"run-code"},"▶ Run Code",-1),h=s("",2),g=n("div",{className:"run-code"},"▶ Run Code",-1),_=s("",1),E=[e,t,r,c,D,F,y,C,A,i,b,d,u,m,h,g,_];function v(f,S,q,T,w,P){return l(),p("div",null,E)}const R=a(o,[["render",v]]);export{x as __pageData,R as default}; diff --git a/docs/document/assets/en_advanced_built-in.md.3d9da76b.js b/docs/document/assets/en_advanced_built-in.md.3d9da76b.js deleted file mode 100644 index 101d4ed5b..000000000 --- a/docs/document/assets/en_advanced_built-in.md.3d9da76b.js +++ /dev/null @@ -1,187 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const K=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1683080086000}'),o={name:"en/advanced/built-in.md"},e=s('

高级属性 ​

这里的 高级属性 是指挂载在 实例 的 二级属性，比较少用

option ​

播放器的选项

',4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info(art.option);

提示

假如直接修改这个 option 对象，播放器不会马上做出响应

template ​

管理播放器所有的 DOM 元素

`,4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info(art.template);
-console.info(art.template.$video);

提示

为了方便区别 DOM 元素和普通对象，播放器里的所有 DOM 元素都是以 $ 开头命名的

这是所有 DOM 元素的定义：artplayer/types/template.d.ts

events ​

管理播放器所有的 DOM 事件，实质上是代理了 addEventListener 和 removeEventListener, 当使用以下方法来处理事件，播放器销毁时也会自动销毁该事件

  • proxy 方法用于代理 DOM 事件
  • hover 方法用于代理自定义的 hover 事件
  • loadImg 方法用于监听图片的 load 加载事件
`,5),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var container = document.querySelector('.artplayer-app');
-
-var art = new Artplayer({
-    container: container,
-    url: '/assets/sample/video.mp4',
-});
-
-art.events.proxy(container, 'click', event => {
-	console.info('click', event);
-});
-
-art.events.hover(container, (event) => {
-    console.info('mouseenter', event);
-}, (event) => {
-    console.info('mouseleave', event);
-});
-
-art.events.loadImg('/assets/sample/poster.jpg').then(img => {
-    console.info('loadImg', img);
-});

提示

假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用这些函数，以避免造成内存泄漏

storage ​

管理播放器的本地存储

  • name 属性用于设置缓存的 key
  • set 方法用于设置缓存
  • get 方法用于获取缓存
  • del 方法用于删除缓存
  • clear 方法用于清空缓存
`,5),A=n("div",{className:"run-code"},"▶ Run Code",-1),i=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.storage.set('test', { foo: 'bar' });
-const test = art.storage.get('test');
-console.info(test);
-art.storage.del('test');
-art.storage.clear();

提示

默认所有播放器实例都是共享同一个 localStorage 的，而且默认的 key 是 artplayer_settings

如果你想不同的播放器使用不同的 localStorage，你可以修改 art.storage.name 即可

`,2),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.storage.name = 'your-storage-key';
-art.storage.set('test', { foo: 'bar' });

icons ​

管理播放器所有的 svg 图标

`,3),b=n("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info(art.icons.loading);

这是所有图标的定义：

artplayer/types/icons.d.ts

i18n ​

管理播放器的 i18n

  • get 方法用于获取 i18n 的值
  • update 方法用于更新 i18n 对象
`,5),m=n("div",{className:"run-code"},"▶ Run Code",-1),_=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info(art.i18n.get('Play'));
-
-art.i18n.update({
-    'zh-cn': {
-        Play: 'Your Play'
-    }
-});

WARNING

使用 art.i18n.update 只能更新实例化之后的 i18n，假如想在实例化之前更新 i18n，请使用基础选项的 i18n 来更新

notice ​

管理播放器的提示语，只有一个 show 属性用于显示提示语

`,4),h=n("div",{className:"run-code"},"▶ Run Code",-1),v=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.notice.show = 'Video Ready To Play';
-})

WARNING

如果想马上隐藏 notice 的显示：art.notice.show = '';

layers ​

管理播放器的层

  • add 方法用于动态添加层
  • show 属性用于设置是否显示全部层
  • toggle 属性用于切换是否显示全部层
`,5),g=n("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.layers.add({
-        html: 'Some Text',
-    });
-
-	setTimeout(() => {
-		art.layers.show = false;
-	}, 1000);
-});

组件配置 请参考以下地址：

/component/layers.html

controls ​

管理播放器的控制器

  • add 方法用于动态添加控制器
  • show 属性用于设置是否显示全部控制器
  • toggle 属性用于切换是否显示全部控制器
`,5),T=n("div",{className:"run-code"},"▶ Run Code",-1),k=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.controls.add({
-        html: 'Some Text',
-        position: 'left',
-    });
-
-	setTimeout(() => {
-		art.controls.show = false;
-	}, 1000);
-});

组件配置 请参考以下地址：

/component/controls.html

contextmenu ​

管理播放器的右键菜单

  • add 方法用于动态添加菜单
  • show 属性用于设置是否显示全部菜单
  • toggle 属性用于切换是否显示全部菜单
`,5),f=n("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.contextmenu.add({
-        html: 'Some Text',
-    });
-
-    art.contextmenu.show = true;
-	setTimeout(() => {
-		art.contextmenu.show = false;
-	}, 1000);
-});

组件配置 请参考以下地址：

/component/contextmenu.html

subtitle ​

管理播放器的字幕功能

  • url 属性设置和返回当前字幕地址
  • style 方法设置当前字幕的样式
  • switch 方法设置当前字幕地址和选项
`,5),S=n("div",{className:"run-code"},"▶ Run Code",-1),P=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.subtitle.url = '/assets/sample/subtitle.srt'
-    art.subtitle.style({
-        color: 'red',
-    });
-});

loading ​

管理播放器的加载层

  • show 属性用于设置是否显示加载层
  • toggle 属性用于切换是否显示加载层
`,4),I=n("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.loading.show = true;
-	setTimeout(() => {
-		art.loading.show = false;
-	}, 1000);
-});

hotkey ​

管理播放器的快捷键功能

  • add 方法用于添加快捷键
  • remove 方法用于删除快捷键
`,4),R=n("div",{className:"run-code"},"▶ Run Code",-1),V=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-function hotkeyEvent(event) {
-    console.info('click', event);
-}
-
-art.on('ready', () => {
-    art.hotkey.add(32, hotkeyEvent);
-    setTimeout(() => {
-		art.hotkey.remove(32, hotkeyEvent);
-	}, 5000);
-});

提示

只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效

mask ​

管理播放器的遮罩层

  • show 属性用于设置是否显示遮罩层
  • toggle 属性用于切换是否显示遮罩层
`,5),j=n("div",{className:"run-code"},"▶ Run Code",-1),q=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.mask.show = false;
-	setTimeout(() => {
-		art.mask.show = true;
-	}, 1000);
-});

setting ​

管理播放器的设置面板

  • add 方法用于动态添加设置项
  • show 属性用于设置是否显示全部设置项
  • toggle 属性用于切换是否显示全部设置项
  • update 方法动态更新设置项
`,4),x=n("div",{className:"run-code"},"▶ Run Code",-1),O=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    subtitleOffset: true,
-});
-
-art.on('ready', () => {
-    art.setting.show = true;
-	setTimeout(() => {
-		art.setting.show = false;
-	}, 1000);
-});

设置面板 请参考以下地址

/component/setting.html

plugins ​

管理播放器的插件功能，只有一个方法 add 用于动态添加插件

`,4),M=n("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
-
-art.on('ready', () => {
-    art.plugins.add(myPlugin);
-});
`,1),z=[e,c,r,t,D,F,y,A,i,C,d,b,u,m,_,h,v,g,E,T,k,f,w,S,P,I,N,R,V,j,q,x,O,M,$];function B(G,L,W,J,U,Y){return l(),p("div",null,z)}const Q=a(o,[["render",B]]);export{K as __pageData,Q as default}; diff --git a/docs/document/assets/en_advanced_built-in.md.3d9da76b.lean.js b/docs/document/assets/en_advanced_built-in.md.3d9da76b.lean.js deleted file mode 100644 index cd238e0a3..000000000 --- a/docs/document/assets/en_advanced_built-in.md.3d9da76b.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const K=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1683080086000}'),o={name:"en/advanced/built-in.md"},e=s("",4),c=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",5),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",5),A=n("div",{className:"run-code"},"▶ Run Code",-1),i=s("",2),C=n("div",{className:"run-code"},"▶ Run Code",-1),d=s("",3),b=n("div",{className:"run-code"},"▶ Run Code",-1),u=s("",5),m=n("div",{className:"run-code"},"▶ Run Code",-1),_=s("",4),h=n("div",{className:"run-code"},"▶ Run Code",-1),v=s("",5),g=n("div",{className:"run-code"},"▶ Run Code",-1),E=s("",5),T=n("div",{className:"run-code"},"▶ Run Code",-1),k=s("",5),f=n("div",{className:"run-code"},"▶ Run Code",-1),w=s("",5),S=n("div",{className:"run-code"},"▶ Run Code",-1),P=s("",4),I=n("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),R=n("div",{className:"run-code"},"▶ Run Code",-1),V=s("",5),j=n("div",{className:"run-code"},"▶ Run Code",-1),q=s("",4),x=n("div",{className:"run-code"},"▶ Run Code",-1),O=s("",4),M=n("div",{className:"run-code"},"▶ Run Code",-1),$=s("",1),z=[e,c,r,t,D,F,y,A,i,C,d,b,u,m,_,h,v,g,E,T,k,f,w,S,P,I,N,R,V,j,q,x,O,M,$];function B(G,L,W,J,U,Y){return l(),p("div",null,z)}const Q=a(o,[["render",B]]);export{K as __pageData,Q as default}; diff --git a/docs/document/assets/en_advanced_built-in.md.7TilV0EA.js b/docs/document/assets/en_advanced_built-in.md.7TilV0EA.js new file mode 100644 index 000000000..9f64101ce --- /dev/null +++ b/docs/document/assets/en_advanced_built-in.md.7TilV0EA.js @@ -0,0 +1,187 @@ +import{_ as a,o as n,c as e,R as s,k as i}from"./chunks/framework.E60viAY0.js";const K=JSON.parse('{"title":"Advanced Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1700976201000}'),l={name:"en/advanced/built-in.md"},p=s('

Advanced Properties ​

The advanced properties here refer to the secondary attributes mounted on the instance, which are less commonly used

option ​

Options for the player

',4),t=i("div",{className:"run-code"},"▶ Run Code",-1),h=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.option);

Reminder

If you directly modify this option object, the player will not respond immediately.

template ​

Manages all of the DOM elements of the player

`,4),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.template);
+console.info(art.template.$video);

Warning

To easily distinguish between DOM elements and plain objects, all DOM elements in the player are named starting with a $

Here is the definition of all DOM elements: artplayer/types/template.d.ts

events ​

Manages all DOM events in the player, which is essentially a proxy for addEventListener and removeEventListener. When using the following methods to handle events, the event will also be automatically destroyed when the player is destroyed.

  • The proxy method is used to proxy DOM events
  • The hover method is used to proxy custom hover events
  • The loadImg method is used to listen for the load event of images
`,5),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var container = document.querySelector('.artplayer-app');
+
+var art = new Artplayer({
+    container: container,
+    url: '/assets/sample/video.mp4',
+});
+
+art.events.proxy(container, 'click', event => {
+    console.info('click', event);
+});
+
+art.events.hover(container, (event) => {
+    console.info('mouseenter', event);
+}, (event) => {
+    console.info('mouseleave', event);
+});
+
+art.events.loadImg('/assets/sample/poster.jpg').then(img => {
+    console.info('loadImg', img);
+});

Warning

If you need some DOM events to only exist during the lifecycle of the player, it is strongly recommended to use these functions to avoid causing memory leaks

storage ​

Manages the local storage of the player

  • The name attribute is used to set the cache key
  • The set method is used to set the cache
  • The get method is used to get the cache
  • The del method is used to delete the cache
  • The clear method is used to clear the cache
`,5),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.storage.set('test', { foo: 'bar' });
+const test = art.storage.get('test');
+console.info(test);
+art.storage.del('test');
+art.storage.clear();

Warning

By default, all player instances share the same localStorage, and the default key is artplayer_settings

If you want different players to use different localStorage, you can modify art.storage.name accordingly

`,2),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.storage.name = 'your-storage-key';
+art.storage.set('test', { foo: 'bar' });

icons ​

Manage all the svg icons of the player

`,3),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.icons.loading);

This is the definition of all icons:

artplayer/types/icons.d.ts

i18n ​

Manage the player's i18n

  • The get method is used to retrieve the value of i18n
  • The update method is used to update the i18n object
`,5),m=i("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info(art.i18n.get('Play'));
+
+art.i18n.update({
+    'zh-cn': {
+        Play: 'Your Play'
+    }
+});

WARNING

Using art.i18n.update can only update i18n after instantiation. If you want to update i18n before instantiation, please use the i18n from the basic options for the update.

notice ​

Manage the player's notices, there's only one show property used to display notices.

`,4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.notice.show = 'Video Ready To Play';
+})

WARNING

To immediately hide the display of notice: art.notice.show = '';

layers ​

Manage the layers of the player

  • The add method is used for dynamically adding layers
  • The remove method is used for dynamically removing layers
  • The update method is used for dynamically updating layers
  • The show property is used to set whether to display all layers or not
  • The toggle method is used to toggle the display of all layers
`,5),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.layers.add({
+        html: 'Some Text',
+    });
+
+	setTimeout(() => {
+		art.layers.show = false;
+	}, 1000);
+});

Component configuration Please refer to the following address:

/component/layers.html

controls ​

Manage the player's controllers

  • add method is used to dynamically add controllers
  • remove method is used to dynamically remove controllers
  • update method is used to dynamically update controllers
  • show property is used to set whether to display all controllers
  • toggle method is used to toggle the display of all controllers
`,5),B=i("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.controls.add({
+        html: 'Some Text',
+        position: 'left',
+    });
+
+	setTimeout(() => {
+		art.controls.show = false;
+	}, 1000);
+});

Component Configuration Please refer to the following address:

/component/controls.html

contextmenu ​

Manage the right-click context menu of the player

  • The add method is used to dynamically add menu items
  • The remove method is used to dynamically remove menu items
  • The update method is used to dynamically update menu items
  • The show attribute is used to set whether to show all menu items
  • The toggle method is used to switch the visibility of all menu items
`,5),f=i("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.contextmenu.add({
+        html: 'Some Text',
+    });
+
+    art.contextmenu.show = true;
+    setTimeout(() => {
+        art.contextmenu.show = false;
+    }, 1000);
+});

Component Configuration Please refer to the following address:

/component/contextmenu.html

subtitle ​

Manage the subtitle features of the player

  • url property sets and returns the current subtitle address
  • style method sets the style of the current subtitle
  • switch method sets the current subtitle address and options
`,5),w=i("div",{className:"run-code"},"▶ Run Code",-1),P=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.subtitle.url = '/assets/sample/subtitle.srt'
+    art.subtitle.style({
+        color: 'red',
+    });
+});

loading ​

Manage the loading layer of the player

  • show property is used to set whether to display the loading layer
  • The toggle attribute is used to toggle the display of the loading layer
`,4),S=i("div",{className:"run-code"},"▶ Run Code",-1),I=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.loading.show = true;
+	setTimeout(() => {
+		art.loading.show = false;
+	}, 1000);
+});

hotkey ​

Manage the hotkey functionality of the player

  • The add method is used to add a hotkey
  • The remove method is used to remove a hotkey
`,4),N=i("div",{className:"run-code"},"▶ Run Code",-1),R=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+function hotkeyEvent(event) {
+    console.info('click', event);
+}
+
+art.on('ready', () => {
+    art.hotkey.add(32, hotkeyEvent);
+    setTimeout(() => {
+		art.hotkey.remove(32, hotkeyEvent);
+	}, 5000);
+});

Warning

Shortcut keys will only work after the player has gained focus (e.g., after clicking on the player).

mask ​

Manage the player's mask layer

  • show property is used to set whether to display the mask layer
  • toggle property is used to toggle the display of the mask layer
`,5),x=i("div",{className:"run-code"},"▶ Run Code",-1),V=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.mask.show = false;
+    setTimeout(() => {
+        art.mask.show = true;
+    }, 1000);
+});

setting ​

Manage the player's settings panel

  • add method is used to dynamically add a setting item
  • remove method is used to dynamically remove a setting item
  • update method is used to dynamically update a setting item
  • show property is used to set whether to display all the setting items
  • toggle method is used to toggle whether to display all the setting items
`,4),j=i("div",{className:"run-code"},"▶ Run Code",-1),q=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+});
+
+art.on('ready', () => {
+    art.setting.show = true;
+	setTimeout(() => {
+		art.setting.show = false;
+	}, 1000);
+});

Settings Panel Please refer to the following link

/component/setting.html

plugins ​

Manage the player's plugin features, with only one method add to dynamically add plugins

`,4),M=i("div",{className:"run-code"},"▶ Run Code",-1),O=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+art.on('ready', () => {
+    art.plugins.add(myPlugin);
+});
`,1),W=[p,t,h,k,r,E,d,c,o,g,y,u,b,m,F,_,C,v,A,B,T,f,D,w,P,S,I,N,R,x,V,j,q,M,O];function $(z,G,L,U,H,J){return n(),e("div",null,W)}const Q=a(l,[["render",$]]);export{K as __pageData,Q as default}; diff --git a/docs/document/assets/en_advanced_built-in.md.7TilV0EA.lean.js b/docs/document/assets/en_advanced_built-in.md.7TilV0EA.lean.js new file mode 100644 index 000000000..e30febabe --- /dev/null +++ b/docs/document/assets/en_advanced_built-in.md.7TilV0EA.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as e,R as s,k as i}from"./chunks/framework.E60viAY0.js";const K=JSON.parse('{"title":"Advanced Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1700976201000}'),l={name:"en/advanced/built-in.md"},p=s("",4),t=i("div",{className:"run-code"},"▶ Run Code",-1),h=s("",4),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s("",5),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",5),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s("",2),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s("",3),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s("",5),m=i("div",{className:"run-code"},"▶ Run Code",-1),F=s("",4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s("",5),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s("",5),B=i("div",{className:"run-code"},"▶ Run Code",-1),T=s("",5),f=i("div",{className:"run-code"},"▶ Run Code",-1),D=s("",5),w=i("div",{className:"run-code"},"▶ Run Code",-1),P=s("",4),S=i("div",{className:"run-code"},"▶ Run Code",-1),I=s("",4),N=i("div",{className:"run-code"},"▶ Run Code",-1),R=s("",5),x=i("div",{className:"run-code"},"▶ Run Code",-1),V=s("",4),j=i("div",{className:"run-code"},"▶ Run Code",-1),q=s("",4),M=i("div",{className:"run-code"},"▶ Run Code",-1),O=s("",1),W=[p,t,h,k,r,E,d,c,o,g,y,u,b,m,F,_,C,v,A,B,T,f,D,w,P,S,I,N,R,x,V,j,q,M,O];function $(z,G,L,U,H,J){return n(),e("div",null,W)}const Q=a(l,[["render",$]]);export{K as __pageData,Q as default}; diff --git a/docs/document/assets/en_advanced_class.md.Xc4zvIqK.js b/docs/document/assets/en_advanced_class.md.Xc4zvIqK.js new file mode 100644 index 000000000..3cd635411 --- /dev/null +++ b/docs/document/assets/en_advanced_class.md.Xc4zvIqK.js @@ -0,0 +1,8 @@ +import{_ as e,o as i,c as n,R as s,k as a}from"./chunks/framework.E60viAY0.js";const $=JSON.parse('{"title":"Static Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1700976201000}'),t={name:"en/advanced/class.md"},l=s('

Static Properties ​

Here, Static Properties refer to the first-level properties mounted on the constructor, which are very rarely used.

instances ​

Returns an array of all player instances. You can use this property when you want to manage multiple players at the same time.

',4),r=a("div",{className:"run-code"},"▶ Run Code",-1),o=s(`
js
console.info([...Artplayer.instances]);
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+console.info([...Artplayer.instances]);

version ​

Returns the version information of the player.

`,3),p=a("div",{className:"run-code"},"▶ Run Code",-1),h=s('
js
console.info(Artplayer.version);

env ​

Returns the environment variables of the player.

',3),d=a("div",{className:"run-code"},"▶ Run Code",-1),c=s('
js
console.info(Artplayer.env);

build ​

Returns the build time of the player

',3),k=a("div",{className:"run-code"},"▶ Run Code",-1),_=s('
js
console.info(Artplayer.build);

config ​

Returns the default configuration of the video

',3),u=a("div",{className:"run-code"},"▶ Run Code",-1),E=s('
js
console.info(Artplayer.config);

utils ​

Returns a collection of utility functions for the player

',3),b=a("div",{className:"run-code"},"▶ Run Code",-1),m=s('
js
console.info(Artplayer.utils);

For the full list of utility functions, please refer to the following address:

artplayer/types/utils.d.ts

scheme ​

Returns the validation scheme for the player options

',4),g=a("div",{className:"run-code"},"▶ Run Code",-1),v=s('
js
console.info(Artplayer.scheme);

Emitter ​

Returns the constructor for the event dispatcher

',3),y=a("div",{className:"run-code"},"▶ Run Code",-1),C=s('
js
console.info(Artplayer.Emitter);

validator ​

Returns the validation function for options

',3),T=a("div",{className:"run-code"},"▶ Run Code",-1),f=s('
js
console.info(Artplayer.validator);

kindOf ​

Returns the function tool for type checking

',3),A=a("div",{className:"run-code"},"▶ Run Code",-1),P=s('
js
console.info(Artplayer.kindOf);

html ​

Returns the html string required for the player

',3),S=a("div",{className:"run-code"},"▶ Run Code",-1),F=s('
js
console.info(Artplayer.html);

option ​

Returns the player's default options

',3),R=a("div",{className:"run-code"},"▶ Run Code",-1),N=s('
js
console.info(Artplayer.option);
',1),V=[l,r,o,p,h,d,c,k,_,u,E,b,m,g,v,y,C,T,f,A,P,S,F,R,N];function q(I,j,w,B,D,x){return i(),n("div",null,V)}const z=e(t,[["render",q]]);export{$ as __pageData,z as default}; diff --git a/docs/document/assets/en_advanced_class.md.Xc4zvIqK.lean.js b/docs/document/assets/en_advanced_class.md.Xc4zvIqK.lean.js new file mode 100644 index 000000000..9761fe71f --- /dev/null +++ b/docs/document/assets/en_advanced_class.md.Xc4zvIqK.lean.js @@ -0,0 +1 @@ +import{_ as e,o as i,c as n,R as s,k as a}from"./chunks/framework.E60viAY0.js";const $=JSON.parse('{"title":"Static Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1700976201000}'),t={name:"en/advanced/class.md"},l=s("",4),r=a("div",{className:"run-code"},"▶ Run Code",-1),o=s("",3),p=a("div",{className:"run-code"},"▶ Run Code",-1),h=s("",3),d=a("div",{className:"run-code"},"▶ Run Code",-1),c=s("",3),k=a("div",{className:"run-code"},"▶ Run Code",-1),_=s("",3),u=a("div",{className:"run-code"},"▶ Run Code",-1),E=s("",3),b=a("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),g=a("div",{className:"run-code"},"▶ Run Code",-1),v=s("",3),y=a("div",{className:"run-code"},"▶ Run Code",-1),C=s("",3),T=a("div",{className:"run-code"},"▶ Run Code",-1),f=s("",3),A=a("div",{className:"run-code"},"▶ Run Code",-1),P=s("",3),S=a("div",{className:"run-code"},"▶ Run Code",-1),F=s("",3),R=a("div",{className:"run-code"},"▶ Run Code",-1),N=s("",1),V=[l,r,o,p,h,d,c,k,_,u,E,b,m,g,v,y,C,T,f,A,P,S,F,R,N];function q(I,j,w,B,D,x){return i(),n("div",null,V)}const z=e(t,[["render",q]]);export{$ as __pageData,z as default}; diff --git a/docs/document/assets/en_advanced_class.md.a47f0b69.js b/docs/document/assets/en_advanced_class.md.a47f0b69.js deleted file mode 100644 index 13a1325b0..000000000 --- a/docs/document/assets/en_advanced_class.md.a47f0b69.js +++ /dev/null @@ -1,8 +0,0 @@ -import{_ as n,o as e,c as l,S as s,k as a}from"./chunks/framework.532b6b18.js";const B=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1682779928000}'),o={name:"en/advanced/class.md"},p=s('

静态属性 ​

这里的 静态属性 是指挂载在 构造函数 的 一级属性，非常少使用

提示

有些属性是全大写的，说明这些属性是不稳定的，可能会在将来被更改

instances ​

返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性

',5),t=a("div",{className:"run-code"},"▶ Run Code",-1),c=s(`
js
console.info([...Artplayer.instances]);
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-console.info([...Artplayer.instances]);

version ​

返回播放器的版本信息

`,3),r=a("div",{className:"run-code"},"▶ Run Code",-1),i=s('
js
console.info(Artplayer.version);

env ​

返回播放器的环境变量

',3),d=a("div",{className:"run-code"},"▶ Run Code",-1),_=s('
js
console.info(Artplayer.env);

build ​

返回播放器的打包时间

',3),A=a("div",{className:"run-code"},"▶ Run Code",-1),D=s('
js
console.info(Artplayer.build);

config ​

返回视频的默认配置

',3),y=a("div",{className:"run-code"},"▶ Run Code",-1),C=s('
js
console.info(Artplayer.config);

utils ​

返回播放器的工具函数集合

',3),u=a("div",{className:"run-code"},"▶ Run Code",-1),h=s('
js
console.info(Artplayer.utils);

全部工具函数请参考以下地址：

artplayer/types/utils.d.ts

scheme ​

返回播放器选项的校验方案

',4),F=a("div",{className:"run-code"},"▶ Run Code",-1),m=s('
js
console.info(Artplayer.scheme);

Emitter ​

返回事件分发器的构造函数

',3),b=a("div",{className:"run-code"},"▶ Run Code",-1),v=s('
js
console.info(Artplayer.Emitter);

validator ​

返回选项的校验函数

',3),T=a("div",{className:"run-code"},"▶ Run Code",-1),g=s('
js
console.info(Artplayer.validator);

kindOf ​

返回类型检测的函数工具

',3),f=a("div",{className:"run-code"},"▶ Run Code",-1),P=s('
js
console.info(Artplayer.kindOf);

html ​

返回播放器所需的 html 字符串

',3),S=a("div",{className:"run-code"},"▶ Run Code",-1),k=s('
js
console.info(Artplayer.html);

option ​

返回播放器的默认选项

',3),N=a("div",{className:"run-code"},"▶ Run Code",-1),V=s('
js
console.info(Artplayer.option);
',1),q=[p,t,c,r,i,d,_,A,D,y,C,u,h,F,m,b,v,T,g,f,P,S,k,N,V];function I(R,j,E,w,x,O){return e(),l("div",null,q)}const z=n(o,[["render",I]]);export{B as __pageData,z as default}; diff --git a/docs/document/assets/en_advanced_class.md.a47f0b69.lean.js b/docs/document/assets/en_advanced_class.md.a47f0b69.lean.js deleted file mode 100644 index de7de8056..000000000 --- a/docs/document/assets/en_advanced_class.md.a47f0b69.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as n,o as e,c as l,S as s,k as a}from"./chunks/framework.532b6b18.js";const B=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1682779928000}'),o={name:"en/advanced/class.md"},p=s("",5),t=a("div",{className:"run-code"},"▶ Run Code",-1),c=s("",3),r=a("div",{className:"run-code"},"▶ Run Code",-1),i=s("",3),d=a("div",{className:"run-code"},"▶ Run Code",-1),_=s("",3),A=a("div",{className:"run-code"},"▶ Run Code",-1),D=s("",3),y=a("div",{className:"run-code"},"▶ Run Code",-1),C=s("",3),u=a("div",{className:"run-code"},"▶ Run Code",-1),h=s("",4),F=a("div",{className:"run-code"},"▶ Run Code",-1),m=s("",3),b=a("div",{className:"run-code"},"▶ Run Code",-1),v=s("",3),T=a("div",{className:"run-code"},"▶ Run Code",-1),g=s("",3),f=a("div",{className:"run-code"},"▶ Run Code",-1),P=s("",3),S=a("div",{className:"run-code"},"▶ Run Code",-1),k=s("",3),N=a("div",{className:"run-code"},"▶ Run Code",-1),V=s("",1),q=[p,t,c,r,i,d,_,A,D,y,C,u,h,F,m,b,v,T,g,f,P,S,k,N,V];function I(R,j,E,w,x,O){return e(),l("div",null,q)}const z=n(o,[["render",I]]);export{B as __pageData,z as default}; diff --git a/docs/document/assets/en_advanced_event.md.6-qAbCVg.js b/docs/document/assets/en_advanced_event.md.6-qAbCVg.js new file mode 100644 index 000000000..4da0eaf24 --- /dev/null +++ b/docs/document/assets/en_advanced_event.md.6-qAbCVg.js @@ -0,0 +1,409 @@ +import{_ as n,o as l,c as p,k as s,a,R as i}from"./chunks/framework.E60viAY0.js";const Xs=JSON.parse('{"title":"Example Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1700976201000}'),e={name:"en/advanced/event.md"},h=s("h1",{id:"example-events",tabindex:"-1"},[a("Example Events "),s("a",{class:"header-anchor",href:"#example-events","aria-label":'Permalink to "Example Events"'},"​")],-1),t=s("p",null,[a("Player events are divided into two types, one is the video's "),s("code",null,"native events"),a(" (prefix "),s("code",null,"video:"),a("), the other is "),s("code",null,"custom events")],-1),k=s("p",null,"Listening to events:",-1),r=s("div",{className:"run-code"},"▶ Run Code",-1),E=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('video:canplay', () => {
+    console.info('video:canplay');
+});

Listen to an event only once:

`,2),d=s("div",{className:"run-code"},"▶ Run Code",-1),c=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.once('video:canplay', () => {
+    console.info('video:canplay');
+});

Manually trigger an event:

`,2),g=s("div",{className:"run-code"},"▶ Run Code",-1),y=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.emit('focus');

Remove an event:

`,2),o=s("div",{className:"run-code"},"▶ Run Code",-1),b=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+const onReady = () => {
+    console.info('ready');
+    art.off('ready', onReady);
+}
+
+art.on('ready', onReady);

For a full list of events, please refer to the following address:

artplayer/types/events.d.ts

ready ​

Triggered when the player is able to play for the first time

`,4),u=s("div",{className:"run-code"},"▶ Run Code",-1),F=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info('ready');
+});

restart ​

Triggered when the player switches the address and is able to play

`,3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4'
+});
+
+art.on('restart', (url) => {
+    console.info('restart', url);
+});

pause ​

Triggered when the player is paused

`,3),C=s("div",{className:"run-code"},"▶ Run Code",-1),v=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('pause', () => {
+    console.info('pause');
+});

play ​

Triggered when the player starts playing

`,3),A=s("div",{className:"run-code"},"▶ Run Code",-1),B=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('play', () => {
+    console.info('play');
+});

hotkey ​

Triggered when a hotkey on the player is pressed

`,3),T=s("div",{className:"run-code"},"▶ Run Code",-1),D=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('hotkey', (event) => {
+    console.info('hotkey', event);
+});

destroy ​

Triggered when the player is destroyed

`,3),f=s("div",{className:"run-code"},"▶ Run Code",-1),w=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.destroy();
+});
+
+art.on('destroy', () => {
+    console.info('destroy');
+});

focus ​

Triggered when the player gains focus

`,3),P=s("div",{className:"run-code"},"▶ Run Code",-1),S=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('focus', (event) => {
+    console.info('focus', event);
+});

blur ​

Triggered when the player loses focus

`,3),R=s("div",{className:"run-code"},"▶ Run Code",-1),N=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('blur', (event) => {
+    console.info('blur', event);
+});

dblclick ​

Triggered when the player is double-clicked

`,3),V=s("div",{className:"run-code"},"▶ Run Code",-1),q=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('dblclick', (event) => {
+    console.info('dblclick', event);
+});

click ​

Triggered when the player is clicked

`,3),j=s("div",{className:"run-code"},"▶ Run Code",-1),I=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('click', (event) => {
+    console.info('click', event);
+});

error ​

Triggered when an error occurs while the player is loading the video

`,3),x=s("div",{className:"run-code"},"▶ Run Code",-1),z=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});
+
+art.on('error', (error, reconnectTime) => {
+    console.info(error, reconnectTime);
+});

hover ​

Triggered when the player is hovered or unhovered by the mouse

`,3),O=s("div",{className:"run-code"},"▶ Run Code",-1),U=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('hover', (state, event) => {
+    console.info('hover', state, event);
+});

mousemove ​

Triggered when the mouse moves over the player

`,3),L=s("div",{className:"run-code"},"▶ Run Code",-1),H=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('mousemove', (event) => {
+    console.info('mousemove', event);
+});

resize ​

Triggered when the player size changes

`,3),W=s("div",{className:"run-code"},"▶ Run Code",-1),$=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('resize', () => {
+    console.info('resize');
+});

view ​

Triggered when the player appears in the viewport

`,3),M=s("div",{className:"run-code"},"▶ Run Code",-1),J=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('view', (state) => {
+    console.info('view', state);
+});

lock ​

On mobile, triggered when the locked state changes

`,3),G=s("div",{className:"run-code"},"▶ Run Code",-1),K=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lock: true,
+});
+
+art.on('lock', (state) => {
+    console.info('lock', state);
+});

aspectRatio ​

Triggered when the aspect ratio of the player changes

`,3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    aspectRatio: true,
+    setting: true,
+});
+
+art.on('aspectRatio', (aspectRatio) => {
+    console.info('aspectRatio', aspectRatio);
+});

autoHeight ​

Triggered when the player automatically sets the height

`,3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.autoHeight();
+});
+
+art.on('autoHeight', (height) => {
+    console.info('autoHeight', height);
+});

autoSize ​

Triggered when the player automatically sets the size

`,3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),is=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+});
+
+art.on('autoSize', () => {
+    console.info('autoSize');
+});

flip ​

Triggered when the player flips

`,3),as=s("div",{className:"run-code"},"▶ Run Code",-1),ns=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    flip: true,
+    setting: true,
+});
+
+art.on('flip', (flip) => {
+    console.info('flip', flip);
+});

fullscreen ​

Triggered when the player goes into full screen

`,3),ls=s("div",{className:"run-code"},"▶ Run Code",-1),ps=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+});
+
+art.on('fullscreen', (state) => {
+    console.info('fullscreen', state);
+});

fullscreenWeb ​

Triggered when the player enters web fullscreen

`,3),es=s("div",{className:"run-code"},"▶ Run Code",-1),hs=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
+
+art.on('fullscreenWeb', (state) => {
+    console.info('fullscreenWeb', state);
+});

mini ​

Triggered when the player enters mini mode

`,3),ts=s("div",{className:"run-code"},"▶ Run Code",-1),ks=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.mini = true;
+});
+
+art.on('mini', (state) => {
+    console.info('mini', state);
+});

pip ​

Triggered when the player enters Picture-in-Picture mode

`,3),rs=s("div",{className:"run-code"},"▶ Run Code",-1),Es=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    pip: true,
+});
+
+art.on('pip', (state) => {
+    console.info('pip', state);
+});

screenshot ​

Triggered when the player takes a screenshot

`,3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),cs=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
+});
+
+art.on('screenshot', (dataUri) => {
+    console.info('screenshot', dataUri);
+});

seek ​

Triggered when the player jumps in time

`,3),gs=s("div",{className:"run-code"},"▶ Run Code",-1),ys=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('seek', (currentTime) => {
+    console.info('seek', currentTime);
+});

subtitleOffset ​

Triggered when the subtitle offset occurs in the player

`,3),os=s("div",{className:"run-code"},"▶ Run Code",-1),bs=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitleOffset: true,
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+    setting: true,
+});
+
+art.on('subtitleOffset', (offset) => {
+    console.info('subtitleOffset', offset);
+});

subtitleUpdate ​

Triggered when the subtitle updates

`,3),us=s("div",{className:"run-code"},"▶ Run Code",-1),Fs=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
+
+art.on('subtitleUpdate', (text) => {
+    console.info('subtitleUpdate', text);
+});

subtitleLoad ​

Triggered when the subtitle loads

`,3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
+
+art.on('subtitleLoad', (url) => {
+    console.info('subtitleLoad', url);
+});

subtitleSwitch ​

Triggered when subtitles switch

`,3),Cs=s("div",{className:"run-code"},"▶ Run Code",-1),vs=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
+
+art.on('ready', () => {
+    art.subtitle.url = '/assets/sample/subtitle.ass';
+});
+
+art.on('subtitleSwitch', (url) => {
+    console.info('subtitleSwitch', url);
+});

info ​

Triggered when the information panel is shown or hidden

`,3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Bs=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('info', (state) => {
+    console.log(state);
+});

layer ​

Triggered when a custom layer is shown or hidden

`,3),Ts=s("div",{className:"run-code"},"▶ Run Code",-1),Ds=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('layer', (state) => {
+    console.log(state);
+});

loading ​

Triggered when a loader is shown or hidden

`,3),fs=s("div",{className:"run-code"},"▶ Run Code",-1),ws=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('loading', (state) => {
+    console.log(state);
+});

mask ​

Triggered when a mask layer is shown or hidden

`,3),Ps=s("div",{className:"run-code"},"▶ Run Code",-1),Ss=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('mask', (state) => {
+    console.log(state);
+});

subtitle ​

Triggered when the subtitle layer is shown or hidden

`,3),Rs=s("div",{className:"run-code"},"▶ Run Code",-1),Ns=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('subtitle', (state) => {
+    console.log(state);
+});

contextmenu ​

Triggered when the right-click menu is shown or hidden

`,3),Vs=s("div",{className:"run-code"},"▶ Run Code",-1),qs=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('contextmenu', (state) => {
+    console.log(state);
+});

control ​

Triggered when the controller is shown or hidden

`,3),js=s("div",{className:"run-code"},"▶ Run Code",-1),Is=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('control', (state) => {
+    console.log(state);
+});

setting ​

Triggered when the settings panel is shown or hidden

`,3),xs=s("div",{className:"run-code"},"▶ Run Code",-1),zs=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
+
+art.on('setting', (state) => {
+    console.log(state);
+});

muted ​

Triggered when the muted state changes

`,3),Os=s("div",{className:"run-code"},"▶ Run Code",-1),Us=i(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('muted', (state) => {
+    console.log(state);
+});

video:canplay ​

The browser can play the media file, but estimates there is not enough data to play through to the end without having to stop for further buffering

video:canplaythrough ​

The browser estimates it can play the media through to the end without stopping for content buffering

video:complete ​

OfflineAudioContext rendering is complete

video:durationchange ​

Triggered when the value of the duration property changes

video:emptied ​

The media content becomes empty; for example, when this media has been completely loaded (or partially loaded), this event is sent and the load() method is called to reload it

## \`video:ended\`
+
+The video has stopped because the media reached the end point
+
+## \`video:error\`
+
+An error occurred while fetching media data, or the resource type is not a supported media format
+
+## \`video:loadeddata\`
+
+The first frame of the media has finished loading
+
+## \`video:loadedmetadata\`
+
+Metadata has been loaded
+
+## \`video:pause\`
+
+Playback has been paused
+
+## \`video:play\`
+
+Playback has started
+
+## \`video:playing\`
+
+Playback is ready to start following a pause or delay due to lack of data
+
+## \`video:progress\`
+
+Periodically triggered while the browser is loading resources
+
+## \`video:ratechange\`
+
+The playback rate has changed
+
+## \`video:seeked\`
+
+A seek (frame skipping) operation has completed
+
+## \`video:seeking\`
+
+A seek (frame skipping) operation has started
+
+## \`video:stalled\`
+
+The user agent is trying to fetch media data, but the data unexpectedly has not appeared
+
+## \`video:suspend\`
+
+Media data loading has been suspended
+
+## \`video:timeupdate\`
+
+The time specified by the currentTime attribute has changed
+## \`video:volumechange\`
+
+Volume changed
+
+## \`video:waiting\`
+
+Playback has stopped due to temporarily missing data
`,12),Ls=[h,t,k,r,E,d,c,g,y,o,b,u,F,m,_,C,v,A,B,T,D,f,w,P,S,R,N,V,q,j,I,x,z,O,U,L,H,W,$,M,J,G,K,Q,X,Y,Z,ss,is,as,ns,ls,ps,es,hs,ts,ks,rs,Es,ds,cs,gs,ys,os,bs,us,Fs,ms,_s,Cs,vs,As,Bs,Ts,Ds,fs,ws,Ps,Ss,Rs,Ns,Vs,qs,js,Is,xs,zs,Os,Us];function Hs(Ws,$s,Ms,Js,Gs,Ks){return l(),p("div",null,Ls)}const Ys=n(e,[["render",Hs]]);export{Xs as __pageData,Ys as default}; diff --git a/docs/document/assets/en_advanced_event.md.6-qAbCVg.lean.js b/docs/document/assets/en_advanced_event.md.6-qAbCVg.lean.js new file mode 100644 index 000000000..8022afe51 --- /dev/null +++ b/docs/document/assets/en_advanced_event.md.6-qAbCVg.lean.js @@ -0,0 +1 @@ +import{_ as n,o as l,c as p,k as s,a,R as i}from"./chunks/framework.E60viAY0.js";const Xs=JSON.parse('{"title":"Example Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1700976201000}'),e={name:"en/advanced/event.md"},h=s("h1",{id:"example-events",tabindex:"-1"},[a("Example Events "),s("a",{class:"header-anchor",href:"#example-events","aria-label":'Permalink to "Example Events"'},"​")],-1),t=s("p",null,[a("Player events are divided into two types, one is the video's "),s("code",null,"native events"),a(" (prefix "),s("code",null,"video:"),a("), the other is "),s("code",null,"custom events")],-1),k=s("p",null,"Listening to events:",-1),r=s("div",{className:"run-code"},"▶ Run Code",-1),E=i("",2),d=s("div",{className:"run-code"},"▶ Run Code",-1),c=i("",2),g=s("div",{className:"run-code"},"▶ Run Code",-1),y=i("",2),o=s("div",{className:"run-code"},"▶ Run Code",-1),b=i("",4),u=s("div",{className:"run-code"},"▶ Run Code",-1),F=i("",3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=i("",3),C=s("div",{className:"run-code"},"▶ Run Code",-1),v=i("",3),A=s("div",{className:"run-code"},"▶ Run Code",-1),B=i("",3),T=s("div",{className:"run-code"},"▶ Run Code",-1),D=i("",3),f=s("div",{className:"run-code"},"▶ Run Code",-1),w=i("",3),P=s("div",{className:"run-code"},"▶ Run Code",-1),S=i("",3),R=s("div",{className:"run-code"},"▶ Run Code",-1),N=i("",3),V=s("div",{className:"run-code"},"▶ Run Code",-1),q=i("",3),j=s("div",{className:"run-code"},"▶ Run Code",-1),I=i("",3),x=s("div",{className:"run-code"},"▶ Run Code",-1),z=i("",3),O=s("div",{className:"run-code"},"▶ Run Code",-1),U=i("",3),L=s("div",{className:"run-code"},"▶ Run Code",-1),H=i("",3),W=s("div",{className:"run-code"},"▶ Run Code",-1),$=i("",3),M=s("div",{className:"run-code"},"▶ Run Code",-1),J=i("",3),G=s("div",{className:"run-code"},"▶ Run Code",-1),K=i("",3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=i("",3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=i("",3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),is=i("",3),as=s("div",{className:"run-code"},"▶ Run Code",-1),ns=i("",3),ls=s("div",{className:"run-code"},"▶ Run Code",-1),ps=i("",3),es=s("div",{className:"run-code"},"▶ Run Code",-1),hs=i("",3),ts=s("div",{className:"run-code"},"▶ Run Code",-1),ks=i("",3),rs=s("div",{className:"run-code"},"▶ Run Code",-1),Es=i("",3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),cs=i("",3),gs=s("div",{className:"run-code"},"▶ Run Code",-1),ys=i("",3),os=s("div",{className:"run-code"},"▶ Run Code",-1),bs=i("",3),us=s("div",{className:"run-code"},"▶ Run Code",-1),Fs=i("",3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=i("",3),Cs=s("div",{className:"run-code"},"▶ Run Code",-1),vs=i("",3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Bs=i("",3),Ts=s("div",{className:"run-code"},"▶ Run Code",-1),Ds=i("",3),fs=s("div",{className:"run-code"},"▶ Run Code",-1),ws=i("",3),Ps=s("div",{className:"run-code"},"▶ Run Code",-1),Ss=i("",3),Rs=s("div",{className:"run-code"},"▶ Run Code",-1),Ns=i("",3),Vs=s("div",{className:"run-code"},"▶ Run Code",-1),qs=i("",3),js=s("div",{className:"run-code"},"▶ Run Code",-1),Is=i("",3),xs=s("div",{className:"run-code"},"▶ Run Code",-1),zs=i("",3),Os=s("div",{className:"run-code"},"▶ Run Code",-1),Us=i("",12),Ls=[h,t,k,r,E,d,c,g,y,o,b,u,F,m,_,C,v,A,B,T,D,f,w,P,S,R,N,V,q,j,I,x,z,O,U,L,H,W,$,M,J,G,K,Q,X,Y,Z,ss,is,as,ns,ls,ps,es,hs,ts,ks,rs,Es,ds,cs,gs,ys,os,bs,us,Fs,ms,_s,Cs,vs,As,Bs,Ts,Ds,fs,ws,Ps,Ss,Rs,Ns,Vs,qs,js,Is,xs,zs,Os,Us];function Hs(Ws,$s,Ms,Js,Gs,Ks){return l(),p("div",null,Ls)}const Ys=n(e,[["render",Hs]]);export{Xs as __pageData,Ys as default}; diff --git a/docs/document/assets/en_advanced_event.md.6b9d4f68.js b/docs/document/assets/en_advanced_event.md.6b9d4f68.js deleted file mode 100644 index 5a6fb0345..000000000 --- a/docs/document/assets/en_advanced_event.md.6b9d4f68.js +++ /dev/null @@ -1,348 +0,0 @@ -import{_ as l,o as p,c as o,k as s,a as n,S as a}from"./chunks/framework.532b6b18.js";const Zs=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1688046273000}'),e={name:"en/advanced/event.md"},r=s("h1",{id:"实例事件",tabindex:"-1"},[n("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),c=s("p",null,[n("播放器的事件分为两种，一种视频的 "),s("code",null,"原生事件"),n(" (前缀 "),s("code",null,"video:"),n(")，另外一种是 "),s("code",null,"自定义事件")],-1),t=s("p",null,"监听事件：",-1),D=s("div",{className:"run-code"},"▶ Run Code",-1),y=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('video:canplay', () => {
-    console.info('video:canplay');
-});

只监听一次事件：

`,2),F=s("div",{className:"run-code"},"▶ Run Code",-1),i=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.once('video:canplay', () => {
-    console.info('video:canplay');
-});

手动触发事件：

`,2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.emit('focus');

移除事件：

`,2),d=s("div",{className:"run-code"},"▶ Run Code",-1),b=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-const onReady = () => {
-    console.info('ready');
-    art.off('ready', onReady);
-}
-
-art.on('ready', onReady);

全部事件请参考以下地址：

artplayer/types/events.d.ts

ready ​

当播放器首次可以播放器时触发

`,4),u=s("div",{className:"run-code"},"▶ Run Code",-1),h=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info('ready');
-});

restart ​

当播放器切换地址后并可以播放时触发

`,3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.url = '/assets/sample/video.mp4'
-});
-
-art.on('restart', (url) => {
-    console.info('restart', url);
-});

loop ​

当出现区间循环时触发

`,3),g=s("div",{className:"run-code"},"▶ Run Code",-1),v=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('loop', (start, end) => {
-    console.info('loop', start, end);
-});

pause ​

当播放器暂停时触发

`,3),E=s("div",{className:"run-code"},"▶ Run Code",-1),T=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('pause', () => {
-    console.info('pause');
-});

play ​

当播放器播放时触发

`,3),f=s("div",{className:"run-code"},"▶ Run Code",-1),k=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('play', () => {
-    console.info('play');
-});

hotkey ​

当播放器热键被按下时触发

`,3),P=s("div",{className:"run-code"},"▶ Run Code",-1),S=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('hotkey', (event) => {
-    console.info('hotkey', event);
-});

destroy ​

当播放器销毁时触发

`,3),q=s("div",{className:"run-code"},"▶ Run Code",-1),w=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.destroy();
-});
-
-art.on('destroy', () => {
-    console.info('destroy');
-});

focus ​

当播放器获得焦点时触发

`,3),R=s("div",{className:"run-code"},"▶ Run Code",-1),N=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('focus', (event) => {
-    console.info('focus', event);
-});

blur ​

当播放器失去焦点时触发

`,3),V=s("div",{className:"run-code"},"▶ Run Code",-1),j=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('blur', (event) => {
-    console.info('blur', event);
-});

dblclick ​

当播放器被双击时触发

`,3),I=s("div",{className:"run-code"},"▶ Run Code",-1),x=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('dblclick', (event) => {
-    console.info('dblclick', event);
-});

click ​

当播放器被单击时触发

`,3),z=s("div",{className:"run-code"},"▶ Run Code",-1),O=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('click', (event) => {
-    console.info('click', event);
-});

error ​

当播放器加载视频发生错误时触发

`,3),U=s("div",{className:"run-code"},"▶ Run Code",-1),H=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});
-
-art.on('error', (error, reconnectTime) => {
-    console.info(error, reconnectTime);
-});

hover ​

当播放器被鼠标移出或者移入时触发

`,3),W=s("div",{className:"run-code"},"▶ Run Code",-1),L=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('hover', (state, event) => {
-    console.info('hover', state, event);
-});

mousemove ​

当播放器被鼠标经过时触发

`,3),$=s("div",{className:"run-code"},"▶ Run Code",-1),B=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('mousemove', (event) => {
-    console.info('mousemove', event);
-});

resize ​

当播放器尺寸变化时触发

`,3),J=s("div",{className:"run-code"},"▶ Run Code",-1),G=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('resize', () => {
-    console.info('resize');
-});

view ​

当播放器出现在视口时触发

`,3),K=s("div",{className:"run-code"},"▶ Run Code",-1),M=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('view', (state) => {
-    console.info('view', state);
-});

lock ​

在移动端，当锁定的状态发生变化时触发

`,3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lock: true,
-});
-
-art.on('lock', (state) => {
-    console.info('lock', state);
-});

aspectRatio ​

当播放器长宽比变化时触发

`,3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    aspectRatio: true,
-    setting: true,
-});
-
-art.on('aspectRatio', (aspectRatio) => {
-    console.info('aspectRatio', aspectRatio);
-});

autoHeight ​

当播放器自动设置高度时触发

`,3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),as=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.autoHeight();
-});
-
-art.on('autoHeight', (height) => {
-    console.info('autoHeight', height);
-});

autoSize ​

当播放器自动设置尺寸时触发

`,3),ns=s("div",{className:"run-code"},"▶ Run Code",-1),ls=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-});
-
-art.on('autoSize', () => {
-    console.info('autoSize');
-});

flip ​

当播放器发生翻转时触发

`,3),ps=s("div",{className:"run-code"},"▶ Run Code",-1),os=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    flip: true,
-    setting: true,
-});
-
-art.on('flip', (flip) => {
-    console.info('flip', flip);
-});

fullscreen ​

当播放器发生窗口全屏时触发

`,3),es=s("div",{className:"run-code"},"▶ Run Code",-1),rs=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-});
-
-art.on('fullscreen', (state) => {
-    console.info('fullscreen', state);
-});

fullscreenWeb ​

当播放器发生网页全屏时触发

`,3),cs=s("div",{className:"run-code"},"▶ Run Code",-1),ts=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
-
-art.on('fullscreenWeb', (state) => {
-    console.info('fullscreenWeb', state);
-});

mini ​

当播放器进入迷你模式时触发

`,3),Ds=s("div",{className:"run-code"},"▶ Run Code",-1),ys=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.mini = true;
-});
-
-art.on('mini', (state) => {
-    console.info('mini', state);
-});

pip ​

当播放器进入画中画时触发

`,3),Fs=s("div",{className:"run-code"},"▶ Run Code",-1),is=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    pip: true,
-});
-
-art.on('pip', (state) => {
-    console.info('pip', state);
-});

screenshot ​

当播放器被截图时触发

`,3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Cs=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    screenshot: true,
-});
-
-art.on('screenshot', (dataUri) => {
-    console.info('screenshot', dataUri);
-});

seek ​

当播放器发生时间跳转时触发

`,3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),bs=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('seek', (currentTime) => {
-    console.info('seek', currentTime);
-});

subtitleOffset ​

当播放器发生字幕偏移时触发

`,3),us=s("div",{className:"run-code"},"▶ Run Code",-1),hs=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitleOffset: true,
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-    setting: true,
-});
-
-art.on('subtitleOffset', (offset) => {
-    console.info('subtitleOffset', offset);
-});

subtitleUpdate ​

当字幕更新时触发

`,3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
-
-art.on('subtitleUpdate', (text) => {
-    console.info('subtitleUpdate', text);
-});

subtitleLoad ​

当字幕加载时触发

`,3),gs=s("div",{className:"run-code"},"▶ Run Code",-1),vs=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
-
-art.on('subtitleLoad', (url) => {
-    console.info('subtitleLoad', url);
-});

subtitleSwitch ​

当字幕切换时触发

`,3),Es=s("div",{className:"run-code"},"▶ Run Code",-1),Ts=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
-
-art.on('ready', () => {
-    art.subtitle.url = '/assets/sample/subtitle.ass';
-});
-
-art.on('subtitleSwitch', (url) => {
-    console.info('subtitleSwitch', url);
-});

info ​

当信息面板显示或隐藏时触发

`,3),fs=s("div",{className:"run-code"},"▶ Run Code",-1),ks=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('info', (state) => {
-    console.log(state);
-});

layer ​

当自定义层显示或隐藏时触发

`,3),Ps=s("div",{className:"run-code"},"▶ Run Code",-1),Ss=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('layer', (state) => {
-    console.log(state);
-});

loading ​

当加载器显示或隐藏时触发

`,3),qs=s("div",{className:"run-code"},"▶ Run Code",-1),ws=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('loading', (state) => {
-    console.log(state);
-});

mask ​

当遮罩层显示或隐藏时触发

`,3),Rs=s("div",{className:"run-code"},"▶ Run Code",-1),Ns=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('mask', (state) => {
-    console.log(state);
-});

subtitle ​

当字幕层显示或隐藏时触发

`,3),Vs=s("div",{className:"run-code"},"▶ Run Code",-1),js=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('subtitle', (state) => {
-    console.log(state);
-});

contextmenu ​

当右键菜单显示或隐藏时触发

`,3),Is=s("div",{className:"run-code"},"▶ Run Code",-1),xs=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('contextmenu', (state) => {
-    console.log(state);
-});

control ​

当控制器显示或隐藏时触发

`,3),zs=s("div",{className:"run-code"},"▶ Run Code",-1),Os=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('control', (state) => {
-    console.log(state);
-});

setting ​

当设置面板显示或隐藏时触发

`,3),Us=s("div",{className:"run-code"},"▶ Run Code",-1),Hs=a(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
-
-art.on('setting', (state) => {
-    console.log(state);
-});

muted ​

当静音的状态变化时触发

`,3),Ws=s("div",{className:"run-code"},"▶ Run Code",-1),Ls=a('
js
var art = new Artplayer({\n    container: '.artplayer-app',\n    url: '/assets/sample/video.mp4',\n});\n\nart.on('muted', (state) => {\n    console.log(state);\n});

video:canplay ​

浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容

video:canplaythrough ​

浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束

video:complete ​

OfflineAudioContext 渲染完成

video:durationchange ​

duration 属性的值改变时触发

video:emptied ​

媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它

video:ended ​

视频停止播放，因为 media 已经到达结束点

video:error ​

获取媒体数据时出错，或者资源类型不是受支持的媒体格式

video:loadeddata ​

media 中的首帧已经完成加载

video:loadedmetadata ​

已加载元数据

video:pause ​

播放已暂停

video:play ​

播放已开始

video:playing ​

由于缺乏数据而暂停或延迟后，播放准备开始

video:progress ​

在浏览器加载资源时周期性触发

video:ratechange ​

播放速率发生变化

video:seeked ​

跳帧（seek）操作完成

video:seeking ​

跳帧（seek）操作开始

video:stalled ​

用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现

video:suspend ​

媒体数据加载已暂停

video:timeupdate ​

currentTime 属性指定的时间发生变化

video:volumechange ​

音量发生变化

video:waiting ​

由于暂时缺少数据，播放已停止

',43),$s=[r,c,t,D,y,F,i,A,C,d,b,u,h,m,_,g,v,E,T,f,k,P,S,q,w,R,N,V,j,I,x,z,O,U,H,W,L,$,B,J,G,K,M,Q,X,Y,Z,ss,as,ns,ls,ps,os,es,rs,cs,ts,Ds,ys,Fs,is,As,Cs,ds,bs,us,hs,ms,_s,gs,vs,Es,Ts,fs,ks,Ps,Ss,qs,ws,Rs,Ns,Vs,js,Is,xs,zs,Os,Us,Hs,Ws,Ls];function Bs(Js,Gs,Ks,Ms,Qs,Xs){return p(),o("div",null,$s)}const sa=l(e,[["render",Bs]]);export{Zs as __pageData,sa as default}; diff --git a/docs/document/assets/en_advanced_event.md.6b9d4f68.lean.js b/docs/document/assets/en_advanced_event.md.6b9d4f68.lean.js deleted file mode 100644 index 4ba58a941..000000000 --- a/docs/document/assets/en_advanced_event.md.6b9d4f68.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as l,o as p,c as o,k as s,a as n,S as a}from"./chunks/framework.532b6b18.js";const Zs=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1688046273000}'),e={name:"en/advanced/event.md"},r=s("h1",{id:"实例事件",tabindex:"-1"},[n("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),c=s("p",null,[n("播放器的事件分为两种，一种视频的 "),s("code",null,"原生事件"),n(" (前缀 "),s("code",null,"video:"),n(")，另外一种是 "),s("code",null,"自定义事件")],-1),t=s("p",null,"监听事件：",-1),D=s("div",{className:"run-code"},"▶ Run Code",-1),y=a("",2),F=s("div",{className:"run-code"},"▶ Run Code",-1),i=a("",2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a("",2),d=s("div",{className:"run-code"},"▶ Run Code",-1),b=a("",4),u=s("div",{className:"run-code"},"▶ Run Code",-1),h=a("",3),m=s("div",{className:"run-code"},"▶ Run Code",-1),_=a("",3),g=s("div",{className:"run-code"},"▶ Run Code",-1),v=a("",3),E=s("div",{className:"run-code"},"▶ Run Code",-1),T=a("",3),f=s("div",{className:"run-code"},"▶ Run Code",-1),k=a("",3),P=s("div",{className:"run-code"},"▶ Run Code",-1),S=a("",3),q=s("div",{className:"run-code"},"▶ Run Code",-1),w=a("",3),R=s("div",{className:"run-code"},"▶ Run Code",-1),N=a("",3),V=s("div",{className:"run-code"},"▶ Run Code",-1),j=a("",3),I=s("div",{className:"run-code"},"▶ Run Code",-1),x=a("",3),z=s("div",{className:"run-code"},"▶ Run Code",-1),O=a("",3),U=s("div",{className:"run-code"},"▶ Run Code",-1),H=a("",3),W=s("div",{className:"run-code"},"▶ Run Code",-1),L=a("",3),$=s("div",{className:"run-code"},"▶ Run Code",-1),B=a("",3),J=s("div",{className:"run-code"},"▶ Run Code",-1),G=a("",3),K=s("div",{className:"run-code"},"▶ Run Code",-1),M=a("",3),Q=s("div",{className:"run-code"},"▶ Run Code",-1),X=a("",3),Y=s("div",{className:"run-code"},"▶ Run Code",-1),Z=a("",3),ss=s("div",{className:"run-code"},"▶ Run Code",-1),as=a("",3),ns=s("div",{className:"run-code"},"▶ Run Code",-1),ls=a("",3),ps=s("div",{className:"run-code"},"▶ Run Code",-1),os=a("",3),es=s("div",{className:"run-code"},"▶ Run Code",-1),rs=a("",3),cs=s("div",{className:"run-code"},"▶ Run Code",-1),ts=a("",3),Ds=s("div",{className:"run-code"},"▶ Run Code",-1),ys=a("",3),Fs=s("div",{className:"run-code"},"▶ Run Code",-1),is=a("",3),As=s("div",{className:"run-code"},"▶ Run Code",-1),Cs=a("",3),ds=s("div",{className:"run-code"},"▶ Run Code",-1),bs=a("",3),us=s("div",{className:"run-code"},"▶ Run Code",-1),hs=a("",3),ms=s("div",{className:"run-code"},"▶ Run Code",-1),_s=a("",3),gs=s("div",{className:"run-code"},"▶ Run Code",-1),vs=a("",3),Es=s("div",{className:"run-code"},"▶ Run Code",-1),Ts=a("",3),fs=s("div",{className:"run-code"},"▶ Run Code",-1),ks=a("",3),Ps=s("div",{className:"run-code"},"▶ Run Code",-1),Ss=a("",3),qs=s("div",{className:"run-code"},"▶ Run Code",-1),ws=a("",3),Rs=s("div",{className:"run-code"},"▶ Run Code",-1),Ns=a("",3),Vs=s("div",{className:"run-code"},"▶ Run Code",-1),js=a("",3),Is=s("div",{className:"run-code"},"▶ Run Code",-1),xs=a("",3),zs=s("div",{className:"run-code"},"▶ Run Code",-1),Os=a("",3),Us=s("div",{className:"run-code"},"▶ Run Code",-1),Hs=a("",3),Ws=s("div",{className:"run-code"},"▶ Run Code",-1),Ls=a("",43),$s=[r,c,t,D,y,F,i,A,C,d,b,u,h,m,_,g,v,E,T,f,k,P,S,q,w,R,N,V,j,I,x,z,O,U,H,W,L,$,B,J,G,K,M,Q,X,Y,Z,ss,as,ns,ls,ps,os,es,rs,cs,ts,Ds,ys,Fs,is,As,Cs,ds,bs,us,hs,ms,_s,gs,vs,Es,Ts,fs,ks,Ps,Ss,qs,ws,Rs,Ns,Vs,js,Is,xs,zs,Os,Us,Hs,Ws,Ls];function Bs(Js,Gs,Ks,Ms,Qs,Xs){return p(),o("div",null,$s)}const sa=l(e,[["render",Bs]]);export{Zs as __pageData,sa as default}; diff --git a/docs/document/assets/en_advanced_global.md.15418f1d.js b/docs/document/assets/en_advanced_global.md.15418f1d.js deleted file mode 100644 index e753bf39e..000000000 --- a/docs/document/assets/en_advanced_global.md.15418f1d.js +++ /dev/null @@ -1,217 +0,0 @@ -import{_ as n,o as l,c as p,S as s,k as a}from"./chunks/framework.532b6b18.js";const gs=JSON.parse('{"title":"全局属性","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1692979406000}'),o={name:"en/advanced/global.md"},e=s('

全局属性 ​

这里的 全局属性 也是指挂载在 构造函数 的 一级属性，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到

DEBUG ​

是否开始 debug 模式，可以打印出视频全部的内置事件，默认关闭

',4),r=a("div",{className:"run-code"},"▶ Run Code",-1),c=s(`
js
Artplayer.DEBUG = true;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

CONTEXTMENU ​

是否开启右键菜单，默认开启

`,3),t=a("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
Artplayer.CONTEXTMENU = false;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

NOTICE_TIME ​

提示信息的显示时长，单位为毫秒，默认为 2000

`,3),y=a("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
Artplayer.NOTICE_TIME = 5000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

SETTING_WIDTH ​

设置面板的默认宽度，单位为像素，默认为 250

`,3),C=a("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
Artplayer.SETTING_WIDTH = 300;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});

SETTING_ITEM_WIDTH ​

设置面板的设置项的默认宽度，单位为像素，默认为 200

`,3),i=a("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
Artplayer.SETTING_ITEM_WIDTH = 300;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});

SETTING_ITEM_HEIGHT ​

设置面板的设置项的默认高度，单位为像素，默认为 35

`,3),b=a("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
Artplayer.SETTING_ITEM_HEIGHT = 40;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});

RESIZE_TIME ​

resize 事件的节流时间，单位为毫秒，默认为 200

`,3),_=a("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
Artplayer.RESIZE_TIME = 500;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('resize', () => {
-    console.log('resize');
-});

SCROLL_TIME ​

scroll 事件的节流时间，单位为毫秒，默认为 200

`,3),h=a("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
Artplayer.SCROLL_TIME = 500;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('scroll', () => {
-    console.log('scroll');
-});

SCROLL_GAP ​

view 事件的边界容差距离，单位为像素，默认为 50

`,3),E=a("div",{className:"run-code"},"▶ Run Code",-1),v=s(`
js
Artplayer.SCROLL_GAP = 100;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('scroll', () => {
-    console.log('scroll');
-});

AUTO_PLAYBACK_MAX ​

自动回放功能的最大记录数，默认为 10

`,3),I=a("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
Artplayer.AUTO_PLAYBACK_MAX = 20;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});

AUTO_PLAYBACK_MIN ​

自动回放功能的最小记录时长，单位为秒，默认为 5

`,3),S=a("div",{className:"run-code"},"▶ Run Code",-1),P=s(`
js
Artplayer.AUTO_PLAYBACK_MIN = 10;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});

AUTO_PLAYBACK_TIMEOUT ​

自动回放功能的隐藏延迟时长，单位为毫秒，默认为 3000

`,3),R=a("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});

RECONNECT_TIME_MAX ​

发生连接错误时，自动连接的最大次数，默认为 5

`,3),k=a("div",{className:"run-code"},"▶ Run Code",-1),O=s(`
js
Artplayer.RECONNECT_TIME_MAX = 10;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});

RECONNECT_SLEEP_TIME ​

发生连接错误时，自动连接的延迟时间，单位为毫秒，默认为 1000

`,3),w=a("div",{className:"run-code"},"▶ Run Code",-1),L=s(`
js
Artplayer.RECONNECT_SLEEP_TIME = 3000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});

CONTROL_HIDE_TIME ​

底部控制栏的自动隐藏的延迟时间，单位为毫秒，默认为 3000

`,3),V=a("div",{className:"run-code"},"▶ Run Code",-1),f=s(`
js
Artplayer.CONTROL_HIDE_TIME = 5000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

DBCLICK_TIME ​

双击事件的延迟事件，单位为毫秒，默认为 300

`,3),q=a("div",{className:"run-code"},"▶ Run Code",-1),j=s(`
js
Artplayer.DBCLICK_TIME = 500;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('dblclick', () => {
-    console.log('dblclick');
-});

DBCLICK_FULLSCREEN ​

在桌面端，是否双击切换全屏，默认为 true

`,3),M=a("div",{className:"run-code"},"▶ Run Code",-1),x=s(`
js
Artplayer.DBCLICK_FULLSCREEN = false;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

MOBILE_DBCLICK_PLAY ​

在移动端，是否双击切换播放暂停，默认为 true

`,3),B=a("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
Artplayer.MOBILE_DBCLICK_PLAY = false;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

MOBILE_CLICK_PLAY ​

在移动端，是否单击切换播放暂停，默认为 false

`,3),K=a("div",{className:"run-code"},"▶ Run Code",-1),G=s(`
js
Artplayer.MOBILE_CLICK_PLAY = true;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

AUTO_ORIENTATION_TIME ​

在移动端，自动旋屏的延迟时间，单位为毫秒，默认为 200

`,3),Y=a("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
Artplayer.AUTO_ORIENTATION_TIME = 500;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoOrientation: true,
-});

INFO_LOOP_TIME ​

信息面板的刷新时间，单位为毫秒，默认为 1000

`,3),W=a("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
Artplayer.INFO_LOOP_TIME = 2000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.info.show = true;

FAST_FORWARD_VALUE ​

在移动端，长按加速的速率倍数，默认为 3

`,3),z=a("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
Artplayer.FAST_FORWARD_VALUE = 5;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});

FAST_FORWARD_TIME ​

在移动端，长按加速的延迟时间，单位为毫秒，默认为 1000

`,3),Z=a("div",{className:"run-code"},"▶ Run Code",-1),J=s(`
js
Artplayer.FAST_FORWARD_TIME = 2000;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});

TOUCH_MOVE_RATIO ​

在移动端，左右滑动进度的速率倍数，默认为 0.5

`,3),Q=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
Artplayer.TOUCH_MOVE_RATIO = 1;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

VOLUME_STEP ​

快捷键调节音量的幅度比例，默认为 0.1

`,3),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s(`
js
Artplayer.VOLUME_STEP = 0.2;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

SEEK_STEP ​

快捷键调节播放进度的幅度，单位为秒，默认为 5

`,3),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
Artplayer.SEEK_STEP = 10;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

PLAYBACK_RATE ​

内置播放速率的列表，默认为 [0.5, 0.75, 1, 1.25, 1.5, 2]

`,3),os=a("div",{className:"run-code"},"▶ Run Code",-1),es=s(`
js
Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    playbackRate: true,
-});
-
-art.contextmenu.show = true;
-art.setting.show = true;

ASPECT_RATIO ​

内置视频长宽比的列表，默认为 ['default', '4:3', '16:9']

`,3),rs=a("div",{className:"run-code"},"▶ Run Code",-1),cs=s(`
js
Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    aspectRatio: true,
-});
-
-art.contextmenu.show = true;
-art.setting.show = true;

FLIP ​

内置视频翻转的列表，默认为 ['normal', 'horizontal', 'vertical']

`,3),ts=a("div",{className:"run-code"},"▶ Run Code",-1),Ds=s(`
js
Artplayer.FLIP = ['normal', 'horizontal'];
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-});
-
-art.contextmenu.show = true;
-art.setting.show = true;

FULLSCREEN_WEB_IN_BODY ​

网页全屏时，是否把播放器挂在在 body 元素下，默认为 false

`,3),ys=a("div",{className:"run-code"},"▶ Run Code",-1),Fs=s(`
js
Artplayer.FULLSCREEN_WEB_IN_BODY = true;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});

LOG_VERSION ​

设置是否打印播放器版本，默认为 true

`,3),Cs=a("div",{className:"run-code"},"▶ Run Code",-1),As=s(`
js
Artplayer.LOG_VERSION = false;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

USE_RAF ​

设置是否使用 requestAnimationFrame ，默认为 false，目前主要用于进度条的平滑效果

`,3),is=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
Artplayer.USE_RAF = true;
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    miniProgressBar: true,
-});
`,1),bs=[e,r,c,t,D,y,F,C,A,i,d,b,u,_,m,h,T,E,v,I,g,S,P,R,N,k,O,w,L,V,f,q,j,M,x,B,U,K,G,Y,H,W,X,z,$,Z,J,Q,ss,as,ns,ls,ps,os,es,rs,cs,ts,Ds,ys,Fs,Cs,As,is,ds];function us(_s,ms,hs,Ts,Es,vs){return l(),p("div",null,bs)}const Ss=n(o,[["render",us]]);export{gs as __pageData,Ss as default}; diff --git a/docs/document/assets/en_advanced_global.md.15418f1d.lean.js b/docs/document/assets/en_advanced_global.md.15418f1d.lean.js deleted file mode 100644 index 5bc67da9c..000000000 --- a/docs/document/assets/en_advanced_global.md.15418f1d.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as n,o as l,c as p,S as s,k as a}from"./chunks/framework.532b6b18.js";const gs=JSON.parse('{"title":"全局属性","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1692979406000}'),o={name:"en/advanced/global.md"},e=s("",4),r=a("div",{className:"run-code"},"▶ Run Code",-1),c=s("",3),t=a("div",{className:"run-code"},"▶ Run Code",-1),D=s("",3),y=a("div",{className:"run-code"},"▶ Run Code",-1),F=s("",3),C=a("div",{className:"run-code"},"▶ Run Code",-1),A=s("",3),i=a("div",{className:"run-code"},"▶ Run Code",-1),d=s("",3),b=a("div",{className:"run-code"},"▶ Run Code",-1),u=s("",3),_=a("div",{className:"run-code"},"▶ Run Code",-1),m=s("",3),h=a("div",{className:"run-code"},"▶ Run Code",-1),T=s("",3),E=a("div",{className:"run-code"},"▶ Run Code",-1),v=s("",3),I=a("div",{className:"run-code"},"▶ Run Code",-1),g=s("",3),S=a("div",{className:"run-code"},"▶ Run Code",-1),P=s("",3),R=a("div",{className:"run-code"},"▶ Run Code",-1),N=s("",3),k=a("div",{className:"run-code"},"▶ Run Code",-1),O=s("",3),w=a("div",{className:"run-code"},"▶ Run Code",-1),L=s("",3),V=a("div",{className:"run-code"},"▶ Run Code",-1),f=s("",3),q=a("div",{className:"run-code"},"▶ Run Code",-1),j=s("",3),M=a("div",{className:"run-code"},"▶ Run Code",-1),x=s("",3),B=a("div",{className:"run-code"},"▶ Run Code",-1),U=s("",3),K=a("div",{className:"run-code"},"▶ Run Code",-1),G=s("",3),Y=a("div",{className:"run-code"},"▶ Run Code",-1),H=s("",3),W=a("div",{className:"run-code"},"▶ Run Code",-1),X=s("",3),z=a("div",{className:"run-code"},"▶ Run Code",-1),$=s("",3),Z=a("div",{className:"run-code"},"▶ Run Code",-1),J=s("",3),Q=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",3),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s("",3),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",3),os=a("div",{className:"run-code"},"▶ Run Code",-1),es=s("",3),rs=a("div",{className:"run-code"},"▶ Run Code",-1),cs=s("",3),ts=a("div",{className:"run-code"},"▶ Run Code",-1),Ds=s("",3),ys=a("div",{className:"run-code"},"▶ Run Code",-1),Fs=s("",3),Cs=a("div",{className:"run-code"},"▶ Run Code",-1),As=s("",3),is=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",1),bs=[e,r,c,t,D,y,F,C,A,i,d,b,u,_,m,h,T,E,v,I,g,S,P,R,N,k,O,w,L,V,f,q,j,M,x,B,U,K,G,Y,H,W,X,z,$,Z,J,Q,ss,as,ns,ls,ps,os,es,rs,cs,ts,Ds,ys,Fs,Cs,As,is,ds];function us(_s,ms,hs,Ts,Es,vs){return l(),p("div",null,bs)}const Ss=n(o,[["render",us]]);export{gs as __pageData,Ss as default}; diff --git a/docs/document/assets/en_advanced_global.md.4oaAng9Z.js b/docs/document/assets/en_advanced_global.md.4oaAng9Z.js new file mode 100644 index 000000000..b0604cfe6 --- /dev/null +++ b/docs/document/assets/en_advanced_global.md.4oaAng9Z.js @@ -0,0 +1,222 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const Is=JSON.parse('{"title":"Global Attributes","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1700976201000}'),e={name:"en/advanced/global.md"},p=s('

Global Attributes ​

Here, Global Attributes refer to the first-level properties mounted on the constructor. Property names are all in uppercase, subject to change in the future and basically not needed.

DEBUG ​

Whether to start debug mode, which can print out all built-in events of the video by default is turned off.

',4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
Artplayer.DEBUG = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

CONTEXTMENU ​

Whether to enable the right-click context menu, enabled by default.

`,3),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
Artplayer.CONTEXTMENU = false;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

NOTICE_TIME ​

The display duration of the notification message, in milliseconds, defaults to 2000

`,3),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
Artplayer.NOTICE_TIME = 5000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

SETTING_WIDTH ​

The default width of the settings panel, in pixels, defaults to 250

`,3),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s(`
js
Artplayer.SETTING_WIDTH = 300;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});

SETTING_ITEM_WIDTH ​

Set the default width of the settings items in the panel, in pixels, the default is 200.

`,3),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
Artplayer.SETTING_ITEM_WIDTH = 300;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});

SETTING_ITEM_HEIGHT ​

Set the default height of the settings items in the panel, in pixels, the default is 35.

`,3),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
Artplayer.SETTING_ITEM_HEIGHT = 40;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});

RESIZE_TIME ​

Throttle time for the resize event, in milliseconds, defaults to 200

`,3),F=i("div",{className:"run-code"},"▶ Run Code",-1),_=s(`
js
Artplayer.RESIZE_TIME = 500;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('resize', () => {
+    console.log('resize');
+});

SCROLL_TIME ​

Throttle time for the scroll event, in milliseconds, defaults to 200

`,3),m=i("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
Artplayer.SCROLL_TIME = 500;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('scroll', () => {
+    console.log('scroll');
+});

SCROLL_GAP ​

The boundary tolerance distance for the view event, in pixels, default is 50

`,3),A=i("div",{className:"run-code"},"▶ Run Code",-1),v=s(`
js
Artplayer.SCROLL_GAP = 100;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('scroll', () => {
+    console.log('scroll');
+});

AUTO_PLAYBACK_MAX ​

The maximum number of records for the automatic playback feature, default is 10

`,3),T=i("div",{className:"run-code"},"▶ Run Code",-1),B=s(`
js
Artplayer.AUTO_PLAYBACK_MAX = 20;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});

AUTO_PLAYBACK_MIN ​

The minimum duration for the auto playback feature, in seconds, with a default of 5.

`,3),D=i("div",{className:"run-code"},"▶ Run Code",-1),I=s(`
js
Artplayer.AUTO_PLAYBACK_MIN = 10;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});

AUTO_PLAYBACK_TIMEOUT ​

The delay duration for hiding the auto playback feature, in milliseconds, with a default of 3000.

`,3),f=i("div",{className:"run-code"},"▶ Run Code",-1),S=s(`
js
Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});

RECONNECT_TIME_MAX ​

The maximum number of automatic reconnection attempts when a connection error occurs, default is 5

`,3),P=i("div",{className:"run-code"},"▶ Run Code",-1),R=s(`
js
Artplayer.RECONNECT_TIME_MAX = 10;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});

RECONNECT_SLEEP_TIME ​

The delay time for the automatic reconnection attempt when a connection error occurs, in milliseconds, default is 1000

`,3),N=i("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
Artplayer.RECONNECT_SLEEP_TIME = 3000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});

CONTROL_HIDE_TIME ​

...

Auto-hide delay time for the bottom control bar, measured in milliseconds, default is 3000

`,4),O=i("div",{className:"run-code"},"▶ Run Code",-1),L=s(`
js
Artplayer.CONTROL_HIDE_TIME = 5000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

DBCLICK_TIME ​

Double-click event delay time, measured in milliseconds, default is 300

`,3),V=i("div",{className:"run-code"},"▶ Run Code",-1),j=s(`
js
Artplayer.DBCLICK_TIME = 500;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('dblclick', () => {
+    console.log('dblclick');
+});

DBCLICK_FULLSCREEN ​

On desktop, whether to switch to fullscreen on double click, default is true

`,3),q=i("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
Artplayer.DBCLICK_FULLSCREEN = false;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

MOBILE_DBCLICK_PLAY ​

On mobile, whether to toggle play/pause on double click, default is true

`,3),x=i("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
Artplayer.MOBILE_DBCLICK_PLAY = false;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

MOBILE_CLICK_PLAY ​

On mobile, whether to play/pause on single click, default is false

`,3),K=i("div",{className:"run-code"},"▶ Run Code",-1),G=s(`
js
Artplayer.MOBILE_CLICK_PLAY = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

On mobile devices, whether a tap toggles play/pause, defaults to false

`,2),Y=i("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
Artplayer.MOBILE_CLICK_PLAY = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

AUTO_ORIENTATION_TIME ​

On mobile devices, the delay time for auto-rotation, in milliseconds, defaults to 200

`,3),W=i("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
Artplayer.AUTO_ORIENTATION_TIME = 500;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoOrientation: true,
+});

INFO_LOOP_TIME ​

Info panel refresh time, unit in milliseconds, default is 1000

`,3),z=i("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
Artplayer.INFO_LOOP_TIME = 2000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.info.show = true;

FAST_FORWARD_VALUE ​

On mobile, the multiplier rate of the speed when long-pressing for fast-forward, default is 3

`,3),Z=i("div",{className:"run-code"},"▶ Run Code",-1),J=s(`
js
Artplayer.FAST_FORWARD_VALUE = 5;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});

FAST_FORWARD_TIME ​

The time, in milliseconds, to fast-forward when double-tapped, default is 10 On mobile, the delay time of the long-press acceleration, in milliseconds, default is 1000

`,3),Q=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
Artplayer.FAST_FORWARD_TIME = 2000;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});

TOUCH_MOVE_RATIO ​

On mobile, the ratio of the speed of sliding left and right to seek, default is 0.5

`,3),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s(`
js
Artplayer.TOUCH_MOVE_RATIO = 1;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

VOLUME_STEP ​

The step ratio of adjusting volume with shortcuts, default is 0.1

`,3),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s(`
js
Artplayer.VOLUME_STEP = 0.2;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

SEEK_STEP ​

The increment by which the playback progress is adjusted via keyboard shortcuts, in seconds, the default is 5

`,3),es=i("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
Artplayer.SEEK_STEP = 10;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

PLAYBACK_RATE ​

The list of built-in playback speeds, by default [0.5, 0.75, 1, 1.25, 1.5, 2]

`,3),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s(`
js
Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    playbackRate: true,
+});
+
+art.contextmenu.show = true;
+art.setting.show = true;

ASPECT_RATIO ​

Built-in list of video aspect ratios, default is ['default', '4:3', '16:9']

`,3),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s(`
js
Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    aspectRatio: true,
+});
+
+art.contextmenu.show = true;
+art.setting.show = true;

FLIP ​

Built-in list of video flips, defaults to ['normal', 'horizontal', 'vertical']

`,3),Es=i("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
Artplayer.FLIP = ['normal', 'horizontal'];
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+});
+
+art.contextmenu.show = true;
+art.setting.show = true;

FULLSCREEN_WEB_IN_BODY ​

When in web fullscreen, whether to mount the player under the body element, defaults to false

`,3),cs=i("div",{className:"run-code"},"▶ Run Code",-1),os=s(`
js
Artplayer.FULLSCREEN_WEB_IN_BODY = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});

LOG_VERSION ​

Setting whether to print the player version, the default is true

`,3),gs=i("div",{className:"run-code"},"▶ Run Code",-1),ys=s(`
js
Artplayer.LOG_VERSION = false;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

USE_RAF ​

Setting whether to use requestAnimationFrame, the default is false, currently mainly used for smooth progress bar effects

`,3),us=i("div",{className:"run-code"},"▶ Run Code",-1),bs=s(`
js
Artplayer.USE_RAF = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});
`,1),Fs=[p,h,t,k,r,E,d,c,o,g,y,u,b,F,_,m,C,A,v,T,B,D,I,f,S,P,R,N,w,O,L,V,j,q,M,x,U,K,G,Y,H,W,X,z,$,Z,J,Q,ss,is,as,ns,ls,es,ps,hs,ts,ks,rs,Es,ds,cs,os,gs,ys,us,bs];function _s(ms,Cs,As,vs,Ts,Bs){return n(),l("div",null,Fs)}const fs=a(e,[["render",_s]]);export{Is as __pageData,fs as default}; diff --git a/docs/document/assets/en_advanced_global.md.4oaAng9Z.lean.js b/docs/document/assets/en_advanced_global.md.4oaAng9Z.lean.js new file mode 100644 index 000000000..d98d80af3 --- /dev/null +++ b/docs/document/assets/en_advanced_global.md.4oaAng9Z.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const Is=JSON.parse('{"title":"Global Attributes","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1700976201000}'),e={name:"en/advanced/global.md"},p=s("",4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",3),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s("",3),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",3),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s("",3),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s("",3),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s("",3),F=i("div",{className:"run-code"},"▶ Run Code",-1),_=s("",3),m=i("div",{className:"run-code"},"▶ Run Code",-1),C=s("",3),A=i("div",{className:"run-code"},"▶ Run Code",-1),v=s("",3),T=i("div",{className:"run-code"},"▶ Run Code",-1),B=s("",3),D=i("div",{className:"run-code"},"▶ Run Code",-1),I=s("",3),f=i("div",{className:"run-code"},"▶ Run Code",-1),S=s("",3),P=i("div",{className:"run-code"},"▶ Run Code",-1),R=s("",3),N=i("div",{className:"run-code"},"▶ Run Code",-1),w=s("",4),O=i("div",{className:"run-code"},"▶ Run Code",-1),L=s("",3),V=i("div",{className:"run-code"},"▶ Run Code",-1),j=s("",3),q=i("div",{className:"run-code"},"▶ Run Code",-1),M=s("",3),x=i("div",{className:"run-code"},"▶ Run Code",-1),U=s("",3),K=i("div",{className:"run-code"},"▶ Run Code",-1),G=s("",2),Y=i("div",{className:"run-code"},"▶ Run Code",-1),H=s("",3),W=i("div",{className:"run-code"},"▶ Run Code",-1),X=s("",3),z=i("div",{className:"run-code"},"▶ Run Code",-1),$=s("",3),Z=i("div",{className:"run-code"},"▶ Run Code",-1),J=s("",3),Q=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",3),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s("",3),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s("",3),es=i("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",3),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s("",3),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s("",3),Es=i("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",3),cs=i("div",{className:"run-code"},"▶ Run Code",-1),os=s("",3),gs=i("div",{className:"run-code"},"▶ Run Code",-1),ys=s("",3),us=i("div",{className:"run-code"},"▶ Run Code",-1),bs=s("",1),Fs=[p,h,t,k,r,E,d,c,o,g,y,u,b,F,_,m,C,A,v,T,B,D,I,f,S,P,R,N,w,O,L,V,j,q,M,x,U,K,G,Y,H,W,X,z,$,Z,J,Q,ss,is,as,ns,ls,es,ps,hs,ts,ks,rs,Es,ds,cs,os,gs,ys,us,bs];function _s(ms,Cs,As,vs,Ts,Bs){return n(),l("div",null,Fs)}const fs=a(e,[["render",_s]]);export{Is as __pageData,fs as default}; diff --git a/docs/document/assets/en_advanced_plugin.md.V5kifudd.js b/docs/document/assets/en_advanced_plugin.md.V5kifudd.js new file mode 100644 index 000000000..b5f182474 --- /dev/null +++ b/docs/document/assets/en_advanced_plugin.md.V5kifudd.js @@ -0,0 +1,99 @@ +import{_ as n,o as l,c as p,k as s,a as i,R as a}from"./chunks/framework.E60viAY0.js";const _=JSON.parse('{"title":"Writing Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","filePath":"en/advanced/plugin.md","lastUpdated":1700976201000}'),h={name:"en/advanced/plugin.md"},e=s("h1",{id:"writing-plugins",tabindex:"-1"},[i("Writing Plugins "),s("a",{class:"header-anchor",href:"#writing-plugins","aria-label":'Permalink to "Writing Plugins"'},"​")],-1),k=s("p",null,[i("Once you know the player's "),s("code",null,"properties"),i(", "),s("code",null,"methods"),i(", and "),s("code",null,"events"),i(", writing plugins is very simple.")],-1),t=s("p",null,"You can load the plugin functions when instantiated.",-1),E=s("div",{className:"run-code"},"▶ Run Code",-1),r=a(`
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [myPlugin],
+});
+
+art.on('ready', () => {
+    console.info(art.plugins.myPlugin);
+});

Here's the translation of the provided text into English while preserving the Markdown formatting:

A function that allows loading plugins after instantiation

`,3),d=s("div",{className:"run-code"},"▶ Run Code",-1),g=a(`
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.plugins.add(myPlugin);
+
+art.on('ready', () => {
+    console.info(art.plugins.myPlugin);
+});

For example, I want to write a plugin that displays an image advertisement after the video is paused.

js
function adsPlugin(option) {
+    return (art) => {
+        art.layers.add({
+            name: 'ads',
+            html: \`<img style="width: 100px" src="\${option.url}">\`,
+            style: {
+                display: 'none',
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+            },
+        });
+
+        function show() {
+            art.layers.ads.style.display = 'block';
+        }
+
+        function hide() {
+            art.layers.ads.style.display = 'none';
+        }
+
+        art.controls.add({
+            name: 'hide-ads',
+            position: 'right',
+            html: 'Hide Ads',
+            tooltip: 'Hide Ads',
+            click: hide,
+            style: {
+                marginRight: '20px'
+            }
+        });
+
+        art.controls.add({
+            name: 'show-ads',
+            position: 'right',
+            html: 'Show Ads',
+            tooltip: 'Show Ads',
+            click: show,
+        });
+
+        art.on('play', hide);
+        art.on('pause', show);
+
+        return {
+            name: 'adsPlugin',
+            show,
+            hide
+        };
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        adsPlugin({
+            url: '/assets/sample/layer.png'
+        })
+    ],
+});
`,3),c=[e,k,t,E,r,d,g];function y(b,u,F,o,m,C){return l(),p("div",null,c)}const A=n(h,[["render",y]]);export{_ as __pageData,A as default}; diff --git a/docs/document/assets/en_advanced_plugin.md.V5kifudd.lean.js b/docs/document/assets/en_advanced_plugin.md.V5kifudd.lean.js new file mode 100644 index 000000000..7a94725d8 --- /dev/null +++ b/docs/document/assets/en_advanced_plugin.md.V5kifudd.lean.js @@ -0,0 +1 @@ +import{_ as n,o as l,c as p,k as s,a as i,R as a}from"./chunks/framework.E60viAY0.js";const _=JSON.parse('{"title":"Writing Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","filePath":"en/advanced/plugin.md","lastUpdated":1700976201000}'),h={name:"en/advanced/plugin.md"},e=s("h1",{id:"writing-plugins",tabindex:"-1"},[i("Writing Plugins "),s("a",{class:"header-anchor",href:"#writing-plugins","aria-label":'Permalink to "Writing Plugins"'},"​")],-1),k=s("p",null,[i("Once you know the player's "),s("code",null,"properties"),i(", "),s("code",null,"methods"),i(", and "),s("code",null,"events"),i(", writing plugins is very simple.")],-1),t=s("p",null,"You can load the plugin functions when instantiated.",-1),E=s("div",{className:"run-code"},"▶ Run Code",-1),r=a("",3),d=s("div",{className:"run-code"},"▶ Run Code",-1),g=a("",3),c=[e,k,t,E,r,d,g];function y(b,u,F,o,m,C){return l(),p("div",null,c)}const A=n(h,[["render",y]]);export{_ as __pageData,A as default}; diff --git a/docs/document/assets/en_advanced_plugin.md.db33d004.js b/docs/document/assets/en_advanced_plugin.md.db33d004.js deleted file mode 100644 index b76420747..000000000 --- a/docs/document/assets/en_advanced_plugin.md.db33d004.js +++ /dev/null @@ -1,99 +0,0 @@ -import{_ as l,o as p,c as o,k as s,a as n,S as a}from"./chunks/framework.532b6b18.js";const v=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","filePath":"en/advanced/plugin.md","lastUpdated":1673692792000}'),e={name:"en/advanced/plugin.md"},r=s("h1",{id:"编写插件",tabindex:"-1"},[n("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-label":'Permalink to "编写插件"'},"​")],-1),c=s("p",null,[n("但你已经知道播放器的"),s("code",null,"属性"),n(", "),s("code",null,"方法"),n("和"),s("code",null,"事件"),n("后，再编写插件是非常简单的事")],-1),t=s("p",null,"可以在实例化的时候加载插件的函数",-1),F=s("div",{className:"run-code"},"▶ Run Code",-1),D=a(`
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [myPlugin],
-});
-
-art.on('ready', () => {
-    console.info(art.plugins.myPlugin);
-});

可以在实例化之后再加载插件的函数

`,2),y=s("div",{className:"run-code"},"▶ Run Code",-1),i=a(`
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.plugins.add(myPlugin);
-
-art.on('ready', () => {
-    console.info(art.plugins.myPlugin);
-});

例如我想写一个在视频暂停后，显示一个图片广告的插件

`,2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a(`
js
function adsPlugin(option) {
-    return (art) => {
-        art.layers.add({
-            name: 'ads',
-            html: \`<img style="width: 100px" src="\${option.url}">\`,
-            style: {
-                display: 'none',
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-            },
-        });
-
-        function show() {
-            art.layers.ads.style.display = 'block';
-        }
-
-        function hide() {
-            art.layers.ads.style.display = 'none';
-        }
-
-        art.controls.add({
-            name: 'hide-ads',
-            position: 'right',
-            html: 'Hide Ads',
-            tooltip: 'Hide Ads',
-            click: hide,
-            style: {
-                marginRight: '20px'
-            }
-        });
-
-        art.controls.add({
-            name: 'show-ads',
-            position: 'right',
-            html: 'Show Ads',
-            tooltip: 'Show Ads',
-            click: show,
-        });
-
-        art.on('play', hide);
-        art.on('pause', show);
-
-        return {
-            name: 'adsPlugin',
-            show,
-            hide
-        };
-    }
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        adsPlugin({
-            url: '/assets/sample/layer.png'
-        })
-    ],
-});
`,1),b=[r,c,t,F,D,y,i,A,C];function u(m,d,h,_,g,E){return p(),o("div",null,b)}const P=l(e,[["render",u]]);export{v as __pageData,P as default}; diff --git a/docs/document/assets/en_advanced_plugin.md.db33d004.lean.js b/docs/document/assets/en_advanced_plugin.md.db33d004.lean.js deleted file mode 100644 index 4558fc144..000000000 --- a/docs/document/assets/en_advanced_plugin.md.db33d004.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as l,o as p,c as o,k as s,a as n,S as a}from"./chunks/framework.532b6b18.js";const v=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","filePath":"en/advanced/plugin.md","lastUpdated":1673692792000}'),e={name:"en/advanced/plugin.md"},r=s("h1",{id:"编写插件",tabindex:"-1"},[n("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-label":'Permalink to "编写插件"'},"​")],-1),c=s("p",null,[n("但你已经知道播放器的"),s("code",null,"属性"),n(", "),s("code",null,"方法"),n("和"),s("code",null,"事件"),n("后，再编写插件是非常简单的事")],-1),t=s("p",null,"可以在实例化的时候加载插件的函数",-1),F=s("div",{className:"run-code"},"▶ Run Code",-1),D=a("",2),y=s("div",{className:"run-code"},"▶ Run Code",-1),i=a("",2),A=s("div",{className:"run-code"},"▶ Run Code",-1),C=a("",1),b=[r,c,t,F,D,y,i,A,C];function u(m,d,h,_,g,E){return p(),o("div",null,b)}const P=l(e,[["render",u]]);export{v as __pageData,P as default}; diff --git a/docs/document/assets/en_advanced_property.md.15b8758c.js b/docs/document/assets/en_advanced_property.md.15b8758c.js deleted file mode 100644 index 7698276ca..000000000 --- a/docs/document/assets/en_advanced_property.md.15b8758c.js +++ /dev/null @@ -1,383 +0,0 @@ -import{_ as n,o as l,c as p,S as s,k as a}from"./chunks/framework.532b6b18.js";const Ls=JSON.parse('{"title":"Instance Property","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1684500196000}'),o={name:"en/advanced/property.md"},e=s('

Instance Property ​

The Instance Property here refers to the Primary Property attached to the Instance, which is more commonly used

play ​

  • Type: Function

Play video

',5),r=a("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    art.play();
-});

pause ​

  • Type: Function

Pause video

`,4),c=a("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    art.play();
-
-    setTimeout(() => {
-        art.pause();
-    }, 3000);
-});

toggle ​

  • Type: Function

Toggle video playback and pause

`,4),y=a("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    art.toggle();
-
-    setTimeout(() => {
-        art.toggle();
-    }, 3000);
-});

destroy ​

  • Type: Function
  • Parameter: Boolean

To destroy the player, accept a parameter indicating whether to remove the player's html after destruction. The default value is true

`,4),i=a("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.destroy();
-});

seek ​

  • Type: Setter
  • Parameter: Number

Video time jump in seconds

`,4),C=a("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 5;
-});

forward ​

  • Type: Setter
  • Parameter: Number

Video time fast forward in seconds

`,4),u=a("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.forward = 5;
-});

backward ​

  • Type: Setter
  • Parameter: Number

Video time rewind in seconds

`,4),m=a("div",{className:"run-code"},"▶ Run Code",-1),h=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 5;
-
-    setTimeout(() => {
-        art.backward = 2;
-    }, 3000);
-});

volume ​

  • Type: Setter/Getter
  • Parameter: Number

Set and get video volume, range: [0, 1]

`,4),_=a("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.volume);
-    art.volume = 0.5;
-    console.info(art.volume);
-});

url ​

  • Type: Setter/Getter
  • Parameter: String

Set and get video url

`,4),v=a("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.url = '/assets/sample/video.mp4?t=0';
-});

switch ​

  • Type: Setter
  • Parameter: String

Setting the video url is similar to that of art.url, but some optimization operations will be performed

`,4),E=a("div",{className:"run-code"},"▶ Run Code",-1),S=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switch = '/assets/sample/video.mp4?t=0';
-    }, 3000);
-});

switchUrl ​

  • Type: Function
  • Parameter: String

Setting the video url is similar to that of art.url, but some optimization operations will be performed

`,4),f=a("div",{className:"run-code"},"▶ Run Code",-1),P=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switchUrl('/assets/sample/video.mp4?t=0');
-    }, 3000);
-});

Tip

The functions of art.switch and art.switchUrl are the same, except that the art.switchUrl method will return Promise, when resolve means that the new address can be played, and reject means that the new address is loaded error

switchQuality ​

  • Type: Function
  • Parameter: String

Set the video quality address, similar to art.switchUrl, but with the previous playback progress

`,5),w=a("div",{className:"run-code"},"▶ Run Code",-1),k=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switchQuality('/assets/sample/video.mp4?t=0');
-    }, 3000);
-});

muted ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get whether the video is muted

`,4),q=a("div",{className:"run-code"},"▶ Run Code",-1),R=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.muted);
-    art.muted = true;
-    console.info(art.muted);
-});

currentTime ​

  • Type: Setter/Getter
  • Parameter: Number

Set and get the current time of the video. Setting the time is similar to seek, but it will not trigger additional events

`,4),I=a("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.currentTime);
-    art.currentTime = 5;
-    console.info(art.currentTime);
-});

duration ​

  • Type: Getter

Get video duration

`,4),j=a("div",{className:"run-code"},"▶ Run Code",-1),V=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.duration);
-});

Tip

Some videos have no duration, such as live videos or videos that have not been decoded. The duration obtained at this time will be 0

screenshot ​

  • Type: Function

Download a screenshot of the current video frame

`,5),x=a("div",{className:"run-code"},"▶ Run Code",-1),G=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.screenshot();
-});

getDataURL ​

  • Type: Function

Get the base64 address of the screenshot of the current video frame, and return a Promise

`,4),B=a("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', async () => {
-    const url = await art.getDataURL();
-	console.info(url)
-});

getBlobUrl ​

  • Type: Function

Get the blob address of the screenshot of the current video frame, and return a Promise

`,4),z=a("div",{className:"run-code"},"▶ Run Code",-1),W=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', async () => {
-    const url = await art.getBlobUrl();
-    console.info(url);
-});

fullscreen ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get full screen of player window

`,4),H=a("div",{className:"run-code"},"▶ Run Code",-1),L=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'Fullscreen Switch',
-            click: function () {
-                art.fullscreen = !art.fullscreen;
-            },
-        },
-    ],
-});

Tip

Due to the browser security mechanism, the page must have interaction before triggering the full screen of the window (for example, the user has clicked on the page)

fullscreenWeb ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get full screen of player web page

`,5),O=a("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
-
-art.on('ready', () => {
-    art.fullscreenWeb = true;
-
-    setTimeout(() => {
-        art.fullscreenWeb = false;
-    }, 3000);
-});

pip ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get the picture-in-picture mode of the player

`,4),M=a("div",{className:"run-code"},"▶ Run Code",-1),Q=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'PIP',
-            click: function () {
-                art.pip = !art.pip;
-            },
-        },
-    ],
-});

Tip

Due to the browser security mechanism, before triggering picture-in-picture, the page must have interaction (for example, the user has clicked on the page)

poster ​

  • Type: Setter/Getter
  • Parameter: String

Set and obtain video posters. You can only see the poster effect before the video is played

`,5),J=a("div",{className:"run-code"},"▶ Run Code",-1),K=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    poster: '/assets/sample/poster.jpg',
-});
-
-art.on('ready', () => {
-    console.info(art.poster);
-    art.poster = '/assets/sample/poster.jpg?t=0';
-    console.info(art.poster);
-});

mini ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get player mini mode

`,4),Y=a("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.mini = true;
-});

playing ​

  • Type: Getter
  • Parameter: Boolean

Get whether the video is playing

`,4),Z=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    console.info(art.playing);
-});

autoSize ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set whether the video is adaptive size. After setting it to true, it will only be executed once

`,4),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.autoSize();
-});

rect ​

  • Type: Getter

Get the size and coordinate information of the player

`,4),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(JSON.stringify(art.rect));
-});

Tip

Dimension and coordinate information are obtained through getBoundingClientRect

flip ​

  • Type: Setter/Getter
  • Parameter: String

Set and get player rollover, support normal, horizontal, vertical

`,5),os=a("div",{className:"run-code"},"▶ Run Code",-1),es=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.flip);
-    art.flip = 'horizontal';
-    console.info(art.flip);
-});

playbackRate ​

  • Type: Setter/Getter
  • Parameter: Number

Set and get player playback speed

`,4),rs=a("div",{className:"run-code"},"▶ Run Code",-1),ts=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.playbackRate);
-    art.playbackRate = 2;
-    console.info(art.playbackRate);
-});

aspectRatio ​

  • Type: Setter/Getter
  • Parameter: String

Set and obtain the player aspect ratio

`,4),cs=a("div",{className:"run-code"},"▶ Run Code",-1),Ds=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.aspectRatio);
-    art.aspectRatio = '16:9';
-    console.info(art.aspectRatio);
-});

loop ​

  • Type: Setter/Getter
  • Parameter: Array

Set and obtain interval sequential playback in seconds

`,4),ys=a("div",{className:"run-code"},"▶ Run Code",-1),Fs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.loop);
-    art.loop = [5, 10];
-    console.info(art.loop);
-});

Tip

To delete interval looping, just set loop to []

art.loop and art.option.loop aer two different things, please don't mix them up

autoHeight ​

  • Type: Setter/Getter
  • Parameter: Boolean

When the container has only width, this attribute can automatically calculate and set the height of the video. After it is set to true, it will only be executed once

`,5),is=a("div",{className:"run-code"},"▶ Run Code",-1),As=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    art.autoHeight();
-});
-
-art.on('resize', () => {
-    art.autoHeight();
-});

提示

This attribute is useful when your container has only width but does not know the specific height. It can automatically calculate the height of the video, but you need to determine the time to set this attribute

attr ​

  • Type: Function
  • Parameter: String

Get and set the attributes of the video element dynamically

`,5),Cs=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.attr('playsInline'));
-    art.attr('playsInline', true);
-    console.info(art.attr('playsInline'));
-});

type ​

  • Type: Setter/Getter
  • Parameter: String

Get and set video types dynamically

`,4),us=a("div",{className:"run-code"},"▶ Run Code",-1),bs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.type);
-    art.type = 'm3u8';
-    console.info(art.type);
-});

theme ​

  • Type: Setter/Getter
  • Parameter: String

Get and set player theme color dynamically

`,4),ms=a("div",{className:"run-code"},"▶ Run Code",-1),hs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('ready', () => {
-    console.info(art.theme);
-    art.theme = '#000';
-    console.info(art.theme);
-});

airplay ​

  • Type: Function

Enable airplay

`,4),_s=a("div",{className:"run-code"},"▶ Run Code",-1),gs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'AirPlay',
-            click: function () {
-                art.airplay();
-            },
-        },
-    ],
-});

loaded ​

  • Type: Getter

The proportion of video cache, with the range of [0, 1], is often used in conjunction with the video:timeupdate event

`,4),vs=a("div",{className:"run-code"},"▶ Run Code",-1),Ts=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('video:timeupdate', () => {
-    console.info(art.loaded);
-});

played ​

  • Type: Getter

The proportion of video playback, with the range of [0, 1], is often used in conjunction with the video:timeupdate event

`,4),Es=a("div",{className:"run-code"},"▶ Run Code",-1),Ss=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('video:timeupdate', () => {
-    console.info(art.played);
-});

proxy ​

  • Type: Function

The proxy function of DOM event essentially proxies addEventListener and removeEventListener. When proxy is used to process the event, the player will also automatically destroy the event when it is destroyed

`,4),fs=a("div",{className:"run-code"},"▶ Run Code",-1),Ps=s(`
js
var container = document.querySelector('.artplayer-app');
-
-var art = new Artplayer({
-	container: container,
-	url: '/assets/sample/video.mp4',
-});
-
-art.proxy(container, 'click', event => {
-	console.info(event);
-});

Tip

If you need some DOM events only exist in the life cycle of the player, we strongly recommend using this function to avoid memory leakage

query ​

  • Type: Function

The query function of DOM is similar to document.querySelector, but the queried object is limited to the current player, which can avoid errors of the same class name

`,5),ws=a("div",{className:"run-code"},"▶ Run Code",-1),ks=s(`
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
-
-console.info(art.query('.art-video'));

video ​

  • Type: Element

Return the video element of the player

`,4),qs=a("div",{className:"run-code"},"▶ Run Code",-1),Rs=s(`
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
-
-console.info(art.video);

quality ​

  • Type: Setter

Dynamically set the quality list

`,4),Is=a("div",{className:"run-code"},"▶ Run Code",-1),Ns=s(`
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-	quality: [
-		{
-			default: true,
-			html: 'SD 480P',
-			url: '/assets/sample/video.mp4',
-		},
-		{
-			html: 'HD 720P',
-			url: '/assets/sample/video.mp4',
-		},
-	],
-});
-
-art.on('ready', () => {
-	setTimeout(() => {
-		art.quality = [
-			{
-				default: true,
-				html: '1080P',
-				url: '/assets/sample/video.mp4',
-			},
-			{
-				html: '4K',
-				url: '/assets/sample/video.mp4',
-			},
-		];
-	}, 3000);
-})
`,1),js=[e,r,t,c,D,y,F,i,A,C,d,u,b,m,h,_,g,v,T,E,S,f,P,w,k,q,R,I,N,j,V,x,G,B,U,z,W,H,L,O,$,M,Q,J,K,Y,X,Z,ss,as,ns,ls,ps,os,es,rs,ts,cs,Ds,ys,Fs,is,As,Cs,ds,us,bs,ms,hs,_s,gs,vs,Ts,Es,Ss,fs,Ps,ws,ks,qs,Rs,Is,Ns];function Vs(xs,Gs,Bs,Us,zs,Ws){return l(),p("div",null,js)}const Os=n(o,[["render",Vs]]);export{Ls as __pageData,Os as default}; diff --git a/docs/document/assets/en_advanced_property.md.15b8758c.lean.js b/docs/document/assets/en_advanced_property.md.15b8758c.lean.js deleted file mode 100644 index 356d30d7c..000000000 --- a/docs/document/assets/en_advanced_property.md.15b8758c.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as n,o as l,c as p,S as s,k as a}from"./chunks/framework.532b6b18.js";const Ls=JSON.parse('{"title":"Instance Property","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1684500196000}'),o={name:"en/advanced/property.md"},e=s("",5),r=a("div",{className:"run-code"},"▶ Run Code",-1),t=s("",4),c=a("div",{className:"run-code"},"▶ Run Code",-1),D=s("",4),y=a("div",{className:"run-code"},"▶ Run Code",-1),F=s("",4),i=a("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),C=a("div",{className:"run-code"},"▶ Run Code",-1),d=s("",4),u=a("div",{className:"run-code"},"▶ Run Code",-1),b=s("",4),m=a("div",{className:"run-code"},"▶ Run Code",-1),h=s("",4),_=a("div",{className:"run-code"},"▶ Run Code",-1),g=s("",4),v=a("div",{className:"run-code"},"▶ Run Code",-1),T=s("",4),E=a("div",{className:"run-code"},"▶ Run Code",-1),S=s("",4),f=a("div",{className:"run-code"},"▶ Run Code",-1),P=s("",5),w=a("div",{className:"run-code"},"▶ Run Code",-1),k=s("",4),q=a("div",{className:"run-code"},"▶ Run Code",-1),R=s("",4),I=a("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),j=a("div",{className:"run-code"},"▶ Run Code",-1),V=s("",5),x=a("div",{className:"run-code"},"▶ Run Code",-1),G=s("",4),B=a("div",{className:"run-code"},"▶ Run Code",-1),U=s("",4),z=a("div",{className:"run-code"},"▶ Run Code",-1),W=s("",4),H=a("div",{className:"run-code"},"▶ Run Code",-1),L=s("",5),O=a("div",{className:"run-code"},"▶ Run Code",-1),$=s("",4),M=a("div",{className:"run-code"},"▶ Run Code",-1),Q=s("",5),J=a("div",{className:"run-code"},"▶ Run Code",-1),K=s("",4),Y=a("div",{className:"run-code"},"▶ Run Code",-1),X=s("",4),Z=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s("",4),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",5),os=a("div",{className:"run-code"},"▶ Run Code",-1),es=s("",4),rs=a("div",{className:"run-code"},"▶ Run Code",-1),ts=s("",4),cs=a("div",{className:"run-code"},"▶ Run Code",-1),Ds=s("",4),ys=a("div",{className:"run-code"},"▶ Run Code",-1),Fs=s("",5),is=a("div",{className:"run-code"},"▶ Run Code",-1),As=s("",5),Cs=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",4),us=a("div",{className:"run-code"},"▶ Run Code",-1),bs=s("",4),ms=a("div",{className:"run-code"},"▶ Run Code",-1),hs=s("",4),_s=a("div",{className:"run-code"},"▶ Run Code",-1),gs=s("",4),vs=a("div",{className:"run-code"},"▶ Run Code",-1),Ts=s("",4),Es=a("div",{className:"run-code"},"▶ Run Code",-1),Ss=s("",4),fs=a("div",{className:"run-code"},"▶ Run Code",-1),Ps=s("",5),ws=a("div",{className:"run-code"},"▶ Run Code",-1),ks=s("",4),qs=a("div",{className:"run-code"},"▶ Run Code",-1),Rs=s("",4),Is=a("div",{className:"run-code"},"▶ Run Code",-1),Ns=s("",1),js=[e,r,t,c,D,y,F,i,A,C,d,u,b,m,h,_,g,v,T,E,S,f,P,w,k,q,R,I,N,j,V,x,G,B,U,z,W,H,L,O,$,M,Q,J,K,Y,X,Z,ss,as,ns,ls,ps,os,es,rs,ts,cs,Ds,ys,Fs,is,As,Cs,ds,us,bs,ms,hs,_s,gs,vs,Ts,Es,Ss,fs,Ps,ws,ks,qs,Rs,Is,Ns];function Vs(xs,Gs,Bs,Us,zs,Ws){return l(),p("div",null,js)}const Os=n(o,[["render",Vs]]);export{Ls as __pageData,Os as default}; diff --git a/docs/document/assets/en_advanced_property.md.q2kjLcep.js b/docs/document/assets/en_advanced_property.md.q2kjLcep.js new file mode 100644 index 000000000..befc7ab38 --- /dev/null +++ b/docs/document/assets/en_advanced_property.md.q2kjLcep.js @@ -0,0 +1,384 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const Ls=JSON.parse('{"title":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1700976201000}'),e={name:"en/advanced/property.md"},p=s('

Instance Properties ​

Here, instance properties refer to the primary properties mounted on the instance, which are quite commonly used.

play ​

  • Type: Function

Play video

',5),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js

+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.play();
+});

pause ​

  • Type: Function

Pause video

`,4),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.play();
+
+    setTimeout(() => {
+        art.pause();
+    }, 3000);
+});

toggle ​

  • Type: Function

Toggle the play and pause state of the video

`,4),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.toggle();
+
+    setTimeout(() => {
+        art.toggle();
+    }, 3000);
+});

destroy ​

  • Type: Function
  • Parameter: Boolean

Destroy the player. Accepts a parameter indicating whether to remove the player's html after destruction, which defaults to true

`,4),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.destroy();
+});

seek ​

  • Type: Setter
  • Parameter: Number

Jump to a specific time in the video, in seconds.

`,4),o=i("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 5;
+});

forward ​

  • Type: Setter
  • Parameter: Number

Fast forward the video time, in seconds.

`,4),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.forward = 5;
+});

backward ​

  • Type: Setter
  • Parameter: Number

Video rewind time in seconds

`,4),F=i("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 5;
+
+    setTimeout(() => {
+        art.backward = 2;
+    }, 3000);
+});

volume ​

  • Type: Setter/Getter
  • Parameter: Number

Sets and gets the video volume, which ranges from [0, 1]

`,4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.volume);
+    art.volume = 0.5;
+    console.info(art.volume);
+});

url ​

  • Type: Setter/Getter
  • Parameter: String

Set and retrieve the video address

`,4),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4?t=0';
+});

switch ​

  • Type: Setter
  • Parameter: String

Set the video address, which is similar to art.url, but performs some optimization operations

`,4),B=i("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switch = '/assets/sample/video.mp4?t=0';
+    }, 3000);
+});

switchUrl ​

  • Type: Function
  • Parameter: String

Set the video address, similar to setting art.url, but some optimization operations will be executed.

`,4),D=i("div",{className:"run-code"},"▶ Run Code",-1),S=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchUrl('/assets/sample/video.mp4?t=0');
+    }, 3000);
+});

Warning

art.switch and art.switchUrl have the same functionality. However, the art.switchUrl method will return a Promise. When it resolves, it indicates that the new address can be played; when it rejects, it indicates there was an error loading the new address.

switchQuality ​

  • Type: Function
  • Parameter: String

Set video quality address, similar to art.switchUrl, but it will carry over the previous playback progress.

`,5),P=i("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchQuality('/assets/sample/video.mp4?t=0');
+    }, 3000);
+});

muted ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get whether the video is muted.

`,4),f=i("div",{className:"run-code"},"▶ Run Code",-1),q=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.muted);
+    art.muted = true;
+    console.info(art.muted);
+});

currentTime ​

  • Type: Setter/Getter
  • Parameter: Number

Set and get the current time of the video. Setting the time is similar to seek, but it does not trigger additional events.

`,4),R=i("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.currentTime);
+    art.currentTime = 5;
+    console.info(art.currentTime);
+});

duration ​

  • Type: Getter

Get the video duration

`,4),I=i("div",{className:"run-code"},"▶ Run Code",-1),V=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.duration);
+});

Note

Some videos do not have a duration, such as videos that are being live streamed or videos that have not been fully decoded, in which case the obtained duration will be 0

screenshot ​

  • Type: Function

Download a screenshot of the current video frame

`,5),j=i("div",{className:"run-code"},"▶ Run Code",-1),x=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.screenshot();
+});

getDataURL ​

  • Type: Function

Gets the base64 address of the screenshot of the current video frame, which returns a Promise.

`,4),G=i("div",{className:"run-code"},"▶ Run Code",-1),z=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', async () => {
+    const url = await art.getDataURL();
+    console.info(url)
+});

getBlobUrl ​

  • Type: Function

Gets the blob address of the screenshot of the current video frame, which returns a Promise.

`,4),U=i("div",{className:"run-code"},"▶ Run Code",-1),W=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', async () => {
+    const url = await art.getBlobUrl();
+    console.info(url);
+});

fullscreen ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get the player window fullscreen

`,4),H=i("div",{className:"run-code"},"▶ Run Code",-1),L=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'Fullscreen Switch',
+            click: function () {
+                art.fullscreen = !art.fullscreen;
+            },
+        },
+    ],
+});

Note

Due to browser security mechanisms, before triggering the window to fullscreen, the page must have had an interaction (e.g. user clicked on the page).

fullscreenWeb ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get the player web page full screen

`,5),O=i("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
+
+art.on('ready', () => {
+    art.fullscreenWeb = true;
+
+    setTimeout(() => {
+        art.fullscreenWeb = false;
+    }, 3000);
+});

pip ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get the player picture-in-picture mode

`,4),J=i("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'PIP',
+            click: function () {
+                art.pip = !art.pip;
+            },
+        },
+    ],
+});

Warning

Due to browser security mechanisms, user interaction (e.g., a user click on the page) must occur before triggering picture-in-picture.

poster ​

  • Type: Setter/Getter
  • Parameter: String

Set and get the video poster, the poster effect is visible only before the video starts playing.

`,5),Q=i("div",{className:"run-code"},"▶ Run Code",-1),K=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    poster: '/assets/sample/poster.jpg',
+});
+
+art.on('ready', () => {
+    console.info(art.poster);
+    art.poster = '/assets/sample/poster.jpg?t=0';
+    console.info(art.poster);
+});

mini ​

  • Type: Setter/Getter
  • Parameter: Boolean

Set and get the player's mini mode

`,4),X=i("div",{className:"run-code"},"▶ Run Code",-1),Y=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.mini = true;
+});

playing ​

  • Type: Getter
  • Parameter: Boolean

Get whether the video is currently playing

`,4),Z=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    console.info(art.playing);
+});

autoSize ​

  • Type: Function

Sets whether the video should auto adjust its size

`,4),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.autoSize();
+});

rect ​

  • Type: Getter

Gets the size and position information of the player

`,4),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(JSON.stringify(art.rect));
+});

Warning

The size and coordinates are obtained via getBoundingClientRect

flip ​

  • Type: Setter/Getter
  • Parameter: String

Set and get the player flip, supports normal, horizontal, vertical

`,5),es=i("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.flip);
+    art.flip = 'horizontal';
+    console.info(art.flip);
+});

playbackRate ​

  • Type: Setter/Getter
  • Parameter: Number Set and get the playback speed of the player
`,3),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.playbackRate);
+    art.playbackRate = 2;
+    console.info(art.playbackRate);
+});

aspectRatio ​

  • Type: Setter/Getter
  • Parameter: String

Set and get the aspect ratio of the player

`,4),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.aspectRatio);
+    art.aspectRatio = '16:9';
+    console.info(art.aspectRatio);
+});

autoHeight ​

  • Type: Function

When the container has only width, this attribute can automatically calculate and set the height of the video

`,4),Es=i("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    art.autoHeight();
+});
+
+art.on('resize', () => {
+    art.autoHeight();
+});

Warning

When your container has only width but you do not know the exact height, this property is very useful as it can automatically calculate the video's height, but you need to make sure when to set this property.

attr ​

  • Type: Function
  • Parameter: String

Dynamically get and set the attributes of the video element

`,5),cs=i("div",{className:"run-code"},"▶ Run Code",-1),gs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.attr('playsInline'));
+    art.attr('playsInline', true);
+    console.info(art.attr('playsInline'));
+});

type ​

  • Type: Setter/Getter
  • Parameter: String

Dynamically get and set the video type

`,4),os=i("div",{className:"run-code"},"▶ Run Code",-1),ys=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.type);
+    art.type = 'm3u8';
+    console.info(art.type);
+});

theme ​

  • Type: Setter/Getter
  • Parameter: String

Dynamically get and set the player's theme color

`,4),us=i("div",{className:"run-code"},"▶ Run Code",-1),bs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.info(art.theme);
+    art.theme = '#000';
+    console.info(art.theme);
+});

airplay ​

  • Type: Function

Activate airplay

`,4),Fs=i("div",{className:"run-code"},"▶ Run Code",-1),ms=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'AirPlay',
+            click: function () {
+                art.airplay();
+            },
+        },
+    ],
+});

loaded ​

  • Type: Getter

The proportion of the video that is cached, ranging from [0, 1], commonly used with the video:timeupdate event.

`,4),_s=i("div",{className:"run-code"},"▶ Run Code",-1),Cs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('video:timeupdate', () => {
+    console.info(art.loaded);
+});

played ​

  • Type: Getter

The proportion of the video that has been played, ranging from [0, 1], commonly used with the video:timeupdate event.

`,4),vs=i("div",{className:"run-code"},"▶ Run Code",-1),As=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.on('video:timeupdate', () => {
+    console.info(art.played);
+});

proxy ​

  • Type: Function

A proxy function for DOM events, which essentially proxies addEventListener and removeEventListener. When using proxy to handle events, the event will automatically be destroyed when the player is destroyed.

`,4),Bs=i("div",{className:"run-code"},"▶ Run Code",-1),Ts=s(`
js
var container = document.querySelector('.artplayer-app');
+
+var art = new Artplayer({
+	container: container,
+	url: '/assets/sample/video.mp4',
+});
+
+art.proxy(container, 'click', event => {
+	console.info(event);
+});

Tip

If you need some DOM events to exist only during the lifespan of the player, it is highly recommended to use this function to avoid causing memory leaks.

query ​

  • Type: Function

DOM query function, similar to document.querySelector, but the object being queried is limited within the current player, which can prevent errors due to having the same class name.

`,5),Ds=i("div",{className:"run-code"},"▶ Run Code",-1),Ss=s(`
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
+
+console.info(art.query('.art-video'));

video ​

  • Type: Element

A shortcut to return the video element of the player.

`,4),Ps=i("div",{className:"run-code"},"▶ Run Code",-1),ws=s(`
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
+
+console.info(art.video);

cssVar ​

  • Type: Function

Dynamically getting or setting css variables

`,4),fs=i("div",{className:"run-code"},"▶ Run Code",-1),qs=s(`
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
+
+art.on('ready', () => {
+    console.log(art.cssVar('--art-theme'));
+    art.cssVar('--art-theme', 'green');
+    console.log(art.cssVar('--art-theme'));
+});

quality ​

  • Type: Setter
  • Parameter: Array

Dynamically setting the list of qualities

`,4),Rs=i("div",{className:"run-code"},"▶ Run Code",-1),Ns=s(`
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+	quality: [
+		{
+			default: true,
+			html: 'SD 480P',
+			url: '/assets/sample/video.mp4',
+		},
+		{
+			html: 'HD 720P',
+			url: '/assets/sample/video.mp4',
+		},
+	],
+});
+
+art.on('ready', () => {
+	setTimeout(() => {
+		art.quality = [
+			{
+				default: true,
+				html: '1080P',
+				url: '/assets/sample/video.mp4',
+			},
+			{
+				html: '4K',
+				url: '/assets/sample/video.mp4',
+			},
+		];
+	}, 3000);
+})
`,1),Is=[p,h,t,k,r,E,d,c,g,o,y,u,b,F,m,_,C,v,A,B,T,D,S,P,w,f,q,R,N,I,V,j,x,G,z,U,W,H,L,O,$,J,M,Q,K,X,Y,Z,ss,is,as,ns,ls,es,ps,hs,ts,ks,rs,Es,ds,cs,gs,os,ys,us,bs,Fs,ms,_s,Cs,vs,As,Bs,Ts,Ds,Ss,Ps,ws,fs,qs,Rs,Ns];function Vs(js,xs,Gs,zs,Us,Ws){return n(),l("div",null,Is)}const Os=a(e,[["render",Vs]]);export{Ls as __pageData,Os as default}; diff --git a/docs/document/assets/en_advanced_property.md.q2kjLcep.lean.js b/docs/document/assets/en_advanced_property.md.q2kjLcep.lean.js new file mode 100644 index 000000000..ed42d8685 --- /dev/null +++ b/docs/document/assets/en_advanced_property.md.q2kjLcep.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const Ls=JSON.parse('{"title":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1700976201000}'),e={name:"en/advanced/property.md"},p=s("",5),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",4),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s("",4),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",4),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s("",4),o=i("div",{className:"run-code"},"▶ Run Code",-1),y=s("",4),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s("",4),F=i("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s("",4),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),B=i("div",{className:"run-code"},"▶ Run Code",-1),T=s("",4),D=i("div",{className:"run-code"},"▶ Run Code",-1),S=s("",5),P=i("div",{className:"run-code"},"▶ Run Code",-1),w=s("",4),f=i("div",{className:"run-code"},"▶ Run Code",-1),q=s("",4),R=i("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),I=i("div",{className:"run-code"},"▶ Run Code",-1),V=s("",5),j=i("div",{className:"run-code"},"▶ Run Code",-1),x=s("",4),G=i("div",{className:"run-code"},"▶ Run Code",-1),z=s("",4),U=i("div",{className:"run-code"},"▶ Run Code",-1),W=s("",4),H=i("div",{className:"run-code"},"▶ Run Code",-1),L=s("",5),O=i("div",{className:"run-code"},"▶ Run Code",-1),$=s("",4),J=i("div",{className:"run-code"},"▶ Run Code",-1),M=s("",5),Q=i("div",{className:"run-code"},"▶ Run Code",-1),K=s("",4),X=i("div",{className:"run-code"},"▶ Run Code",-1),Y=s("",4),Z=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s("",4),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s("",5),es=i("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",3),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s("",4),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s("",4),Es=i("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",5),cs=i("div",{className:"run-code"},"▶ Run Code",-1),gs=s("",4),os=i("div",{className:"run-code"},"▶ Run Code",-1),ys=s("",4),us=i("div",{className:"run-code"},"▶ Run Code",-1),bs=s("",4),Fs=i("div",{className:"run-code"},"▶ Run Code",-1),ms=s("",4),_s=i("div",{className:"run-code"},"▶ Run Code",-1),Cs=s("",4),vs=i("div",{className:"run-code"},"▶ Run Code",-1),As=s("",4),Bs=i("div",{className:"run-code"},"▶ Run Code",-1),Ts=s("",5),Ds=i("div",{className:"run-code"},"▶ Run Code",-1),Ss=s("",4),Ps=i("div",{className:"run-code"},"▶ Run Code",-1),ws=s("",4),fs=i("div",{className:"run-code"},"▶ Run Code",-1),qs=s("",4),Rs=i("div",{className:"run-code"},"▶ Run Code",-1),Ns=s("",1),Is=[p,h,t,k,r,E,d,c,g,o,y,u,b,F,m,_,C,v,A,B,T,D,S,P,w,f,q,R,N,I,V,j,x,G,z,U,W,H,L,O,$,J,M,Q,K,X,Y,Z,ss,is,as,ns,ls,es,ps,hs,ts,ks,rs,Es,ds,cs,gs,os,ys,us,bs,Fs,ms,_s,Cs,vs,As,Bs,Ts,Ds,Ss,Ps,ws,fs,qs,Rs,Ns];function Vs(js,xs,Gs,zs,Us,Ws){return n(),l("div",null,Is)}const Os=a(e,[["render",Vs]]);export{Ls as __pageData,Os as default}; diff --git a/docs/document/assets/en_component_contextmenu.md.R4YKVJzf.js b/docs/document/assets/en_component_contextmenu.md.R4YKVJzf.js new file mode 100644 index 000000000..d903636de --- /dev/null +++ b/docs/document/assets/en_component_contextmenu.md.R4YKVJzf.js @@ -0,0 +1,83 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const B=JSON.parse('{"title":"Context Menu","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/contextmenu.md","filePath":"en/component/contextmenu.md","lastUpdated":1700976201000}'),e={name:"en/component/contextmenu.md"},p=s('

Context Menu ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique name of the component, used for marking the class name
indexNumberComponent index, used for display priority
htmlString, ElementThe DOM element of the component
styleObjectStyle object for the component
clickFunctionClick event for the component
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component

Creation ​

',4),t=i("div",{className:"run-code"},"▶ Run Code",-1),h=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
+
+art.contextmenu.show = true;
+
+// Get the Element of contextmenu by name
+console.info(art.contextmenu['your-menu']);

Add ​

`,2),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.contextmenu.add({
+    name: 'your-menu',
+    html: 'Your Menu',
+    click: function (...args) {
+        console.info(args);
+        art.contextmenu.show = false;
+    },
+});
+
+art.contextmenu.show = true;
+
+// Get the Element of contextmenu by name
+console.info(art.contextmenu['your-menu']);

Delete ​

`,2),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
+
+art.contextmenu.show = true;
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the context menu by name
+        art.contextmenu.remove('your-menu')
+    }, 3000);
+});

Updates ​

`,2),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
+
+art.contextmenu.show = true;
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the contextmenu by name
+        art.contextmenu.update({
+            name: 'your-menu',
+            html: 'Your New Menu',
+        })
+    }, 3000);
+});
`,1),o=[p,t,h,k,r,E,d,c,g];function y(u,b,m,F,C,_){return n(),l("div",null,o)}const D=a(e,[["render",y]]);export{B as __pageData,D as default}; diff --git a/docs/document/assets/en_component_contextmenu.md.R4YKVJzf.lean.js b/docs/document/assets/en_component_contextmenu.md.R4YKVJzf.lean.js new file mode 100644 index 000000000..38085da17 --- /dev/null +++ b/docs/document/assets/en_component_contextmenu.md.R4YKVJzf.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const B=JSON.parse('{"title":"Context Menu","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/contextmenu.md","filePath":"en/component/contextmenu.md","lastUpdated":1700976201000}'),e={name:"en/component/contextmenu.md"},p=s("",4),t=i("div",{className:"run-code"},"▶ Run Code",-1),h=s("",2),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),E=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",2),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s("",1),o=[p,t,h,k,r,E,d,c,g];function y(u,b,m,F,C,_){return n(),l("div",null,o)}const D=a(e,[["render",y]]);export{B as __pageData,D as default}; diff --git a/docs/document/assets/en_component_contextmenu.md.dac57cfb.js b/docs/document/assets/en_component_contextmenu.md.dac57cfb.js deleted file mode 100644 index 5d9a48575..000000000 --- a/docs/document/assets/en_component_contextmenu.md.dac57cfb.js +++ /dev/null @@ -1,83 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const f=JSON.parse('{"title":"Contextmenu","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/contextmenu.md","filePath":"en/component/contextmenu.md","lastUpdated":1682779928000}'),o={name:"en/component/contextmenu.md"},e=s('

Contextmenu ​

Config ​

PropertyTypeDescribe
disableBooleanWhether to disable the component
nameStringComponent unique name, used to mark class name
indexNumberComponent index, used for display priority
htmlString, ElementDOM element of the component
styleObjectcomponent style object
clickFunctionComponent click event
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component

Init ​

',4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
-
-art.contextmenu.show = true;
-
-// Get the Element of contextmenu by name
-console.info(art.contextmenu['your-menu']);

Add ​

`,2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.contextmenu.add({
-    name: 'your-menu',
-    html: 'Your Menu',
-    click: function (...args) {
-        console.info(args);
-        art.contextmenu.show = false;
-    },
-});
-
-art.contextmenu.show = true;
-
-// Get the Element of contextmenu by name
-console.info(art.contextmenu['your-menu']);

Remove ​

`,2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
-
-art.contextmenu.show = true;
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the contextmenu by name
-        art.contextmenu.remove('your-menu')
-    }, 3000);
-});

Update ​

`,2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
-
-art.contextmenu.show = true;
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the contextmenu by name
-        art.contextmenu.update({
-            name: 'your-menu',
-            html: 'Your New Menu',
-        })
-    }, 3000);
-});
`,1),A=[e,t,r,c,D,F,y,i,C];function d(u,b,m,h,g,_){return l(),p("div",null,A)}const x=a(o,[["render",d]]);export{f as __pageData,x as default}; diff --git a/docs/document/assets/en_component_contextmenu.md.dac57cfb.lean.js b/docs/document/assets/en_component_contextmenu.md.dac57cfb.lean.js deleted file mode 100644 index 2e95da700..000000000 --- a/docs/document/assets/en_component_contextmenu.md.dac57cfb.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const f=JSON.parse('{"title":"Contextmenu","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/contextmenu.md","filePath":"en/component/contextmenu.md","lastUpdated":1682779928000}'),o={name:"en/component/contextmenu.md"},e=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s("",1),A=[e,t,r,c,D,F,y,i,C];function d(u,b,m,h,g,_){return l(),p("div",null,A)}const x=a(o,[["render",d]]);export{f as __pageData,x as default}; diff --git a/docs/document/assets/en_component_controls.md.SXHbRPbx.js b/docs/document/assets/en_component_controls.md.SXHbRPbx.js new file mode 100644 index 000000000..7686c2ccb --- /dev/null +++ b/docs/document/assets/en_component_controls.md.SXHbRPbx.js @@ -0,0 +1,130 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const A=JSON.parse('{"title":"Controller","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/controls.md","filePath":"en/component/controls.md","lastUpdated":1700976201000}'),p={name:"en/component/controls.md"},h=s('

Controller ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringThe unique name of the component for class identification
indexNumberThe index of the component, used for display priority
htmlString, ElementThe component's DOM element
styleObjectThe style object for the component
clickFunctionComponent click event
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component
positionStringleft and right control the position of the controller
selectorArrayAn array of objects for the selection list
onSelectFunctionFunction triggered when an item from the selection list is clicked

Creation ​

',4),e=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'your-button',
+            index: 10,
+            position: 'left',
+            html: 'Your Button',
+            tooltip: 'Your Button',
+            style: {
+                color: 'red',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+        {
+            name: 'subtitle',
+            position: 'right',
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">subtitle 01</span>',
+                },
+                {
+                    html: '<span style="color:yellow">subtitle 02</span>',
+                },
+            ],
+            onSelect: function (item, $dom) {
+                console.info(item, $dom);
+                return 'Your ' + item.html;
+            },
+        },
+    ],
+});
+
+// Get the Element of control by name
+console.info(art.controls['your-button']);
+console.info(art.controls['subtitle']);

Adding ​

`,2),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.controls.add({
+    name: 'button1',
+    index: 10,
+    position: 'left',
+    html: 'Your Button',
+    tooltip: 'Your Button',
+    style: {
+        color: 'red',
+    },
+    click: function (...args) {
+        console.info('click', args);
+    },
+    mounted: function (...args) {
+        console.info('mounted', args);
+    },
+});
+
+// Get the Element of control by name
+console.info(art.controls['button1']);

Delete ​

`,2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'Your Button',
+            tooltip: 'Your Button',
+            style: {
+                color: 'red',
+            },
+        }
+    ]
+});
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the control by name
+        art.controls.remove('button1');
+    }, 3000);
+});

Update ​

`,2),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: 'subtitle 01',
+                },
+                {
+                    html: 'subtitle 02',
+                },
+            ],
+        }
+    ]
+});
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the control by name
+        art.controls.update({
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'New Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: 'new subtitle 01',
+                },
+                {
+                    html: 'new subtitle 02',
+                },
+            ],
+        });
+    }, 3000);
+});
`,1),o=[h,e,t,k,E,r,d,c,g];function y(b,u,F,m,C,B){return n(),l("div",null,o)}const f=a(p,[["render",y]]);export{A as __pageData,f as default}; diff --git a/docs/document/assets/en_component_controls.md.SXHbRPbx.lean.js b/docs/document/assets/en_component_controls.md.SXHbRPbx.lean.js new file mode 100644 index 000000000..e39af5f75 --- /dev/null +++ b/docs/document/assets/en_component_controls.md.SXHbRPbx.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const A=JSON.parse('{"title":"Controller","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/controls.md","filePath":"en/component/controls.md","lastUpdated":1700976201000}'),p={name:"en/component/controls.md"},h=s("",4),e=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",2),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s("",2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",2),c=i("div",{className:"run-code"},"▶ Run Code",-1),g=s("",1),o=[h,e,t,k,E,r,d,c,g];function y(b,u,F,m,C,B){return n(),l("div",null,o)}const f=a(p,[["render",y]]);export{A as __pageData,f as default}; diff --git a/docs/document/assets/en_component_controls.md.c066e6b8.js b/docs/document/assets/en_component_controls.md.c066e6b8.js deleted file mode 100644 index a2a2c5952..000000000 --- a/docs/document/assets/en_component_controls.md.c066e6b8.js +++ /dev/null @@ -1,130 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const f=JSON.parse('{"title":"Controls","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/controls.md","filePath":"en/component/controls.md","lastUpdated":1682779928000}'),o={name:"en/component/controls.md"},e=s('

Controls ​

Config ​

PropertyTypeDescribe
disableBooleanWhether to disable the component
nameStringComponent unique name, used to mark class name
indexNumberComponent index, used for display priority
htmlString, ElementDOM element of the component
styleObjectcomponent style object
clickFunctionComponent click event
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component
positionStringleft and right control the left and right positions where the controller appears
selectorArrayArray of objects for the select list
onSelectFunctionA function that is triggered when an element of the select list is clicked

Init ​

',4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'your-button',
-            index: 10,
-            position: 'left',
-            html: 'Your Button',
-            tooltip: 'Your Button',
-            style: {
-                color: 'red',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-        {
-            name: 'subtitle',
-            position: 'right',
-            html: 'Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: '<span style="color:red">subtitle 01</span>',
-                },
-                {
-                    html: '<span style="color:yellow">subtitle 02</span>',
-                },
-            ],
-            onSelect: function (item, $dom) {
-                console.info(item, $dom);
-                return 'Your ' + item.html;
-            },
-        },
-    ],
-});
-
-// Get the Element of control by name
-console.info(art.controls['your-button']);
-console.info(art.controls.subtitle);

Add ​

`,2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.controls.add({
-    name: 'button1',
-    index: 10,
-    position: 'left',
-    html: 'Your Button',
-    tooltip: 'Your Button',
-    style: {
-        color: 'red',
-    },
-    click: function (...args) {
-        console.info('click', args);
-    },
-    mounted: function (...args) {
-        console.info('mounted', args);
-    },
-});
-
-// Get the Element of control by name
-console.info(art.controls.button1);

Remove ​

`,2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'Your Button',
-            tooltip: 'Your Button',
-            style: {
-                color: 'red',
-            },
-        }
-    ]
-});
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the control by name
-        art.controls.remove('button1');
-    }, 3000);
-});

Update ​

`,2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: 'subtitle 01',
-                },
-                {
-                    html: 'subtitle 02',
-                },
-            ],
-        }
-    ]
-});
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the control by name
-        art.controls.update({
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'New Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: 'new subtitle 01',
-                },
-                {
-                    html: 'new subtitle 02',
-                },
-            ],
-        });
-    }, 3000);
-});
`,1),A=[e,t,r,c,D,F,y,i,C];function b(d,u,m,h,g,_){return l(),p("div",null,A)}const v=a(o,[["render",b]]);export{f as __pageData,v as default}; diff --git a/docs/document/assets/en_component_controls.md.c066e6b8.lean.js b/docs/document/assets/en_component_controls.md.c066e6b8.lean.js deleted file mode 100644 index 63773638a..000000000 --- a/docs/document/assets/en_component_controls.md.c066e6b8.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const f=JSON.parse('{"title":"Controls","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/controls.md","filePath":"en/component/controls.md","lastUpdated":1682779928000}'),o={name:"en/component/controls.md"},e=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s("",1),A=[e,t,r,c,D,F,y,i,C];function b(d,u,m,h,g,_){return l(),p("div",null,A)}const v=a(o,[["render",b]]);export{f as __pageData,v as default}; diff --git a/docs/document/assets/en_component_layers.md.446fcd07.js b/docs/document/assets/en_component_layers.md.446fcd07.js deleted file mode 100644 index 74a1161c1..000000000 --- a/docs/document/assets/en_component_layers.md.446fcd07.js +++ /dev/null @@ -1,102 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const f=JSON.parse('{"title":"Layers","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/layers.md","filePath":"en/component/layers.md","lastUpdated":1682779928000}'),o={name:"en/component/layers.md"},e=s('

Layers ​

Config ​

PropertyTypeDescribe
disableBooleanWhether to disable the component
nameStringComponent unique name, used to mark class name
indexNumberComponent index, used for display priority
htmlString, ElementDOM element of the component
styleObjectcomponent style object
clickFunctionComponent click event
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component

Init ​

',4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: \`<img style="width: 100px" src="\${img}">\`,
-            tooltip: 'Potser Tip',
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-    ],
-});
-
-// Get the Element of layer by name
-console.info(art.layers['potser']);

Add ​

`,2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.layers.add({
-    name: 'potser',
-    html: \`<img style="width: 100px" src="\${img}">\`,
-    tooltip: 'Potser Tip',
-    style: {
-        position: 'absolute',
-        top: '50px',
-        right: '50px',
-    },
-    click: function (...args) {
-        console.info('click', args);
-    },
-    mounted: function (...args) {
-        console.info('mounted', args);
-    },
-});
-
-// Get the Element of layer by name
-console.info(art.layers['potser']);

Remove ​

`,2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: \`<img style="width: 100px" src="\${img}">\`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-        },
-    ],
-});
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the layer by name
-        art.layers.remove('potser');
-    }, 3000);
-});

Update ​

`,2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: \`<img style="width: 100px" src="\${img}">\`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-        },
-    ],
-});
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the layer by name
-        art.layers.update({
-            name: 'potser',
-            html: \`<img style="width: 200px" src="\${img}">\`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                left: '50px',
-            },
-        });
-    }, 3000);
-});
`,1),A=[e,t,r,c,D,F,y,i,C];function d(b,h,m,u,g,_){return l(),p("div",null,A)}const v=a(o,[["render",d]]);export{f as __pageData,v as default}; diff --git a/docs/document/assets/en_component_layers.md.446fcd07.lean.js b/docs/document/assets/en_component_layers.md.446fcd07.lean.js deleted file mode 100644 index fccba15d3..000000000 --- a/docs/document/assets/en_component_layers.md.446fcd07.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const f=JSON.parse('{"title":"Layers","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/layers.md","filePath":"en/component/layers.md","lastUpdated":1682779928000}'),o={name:"en/component/layers.md"},e=s("",4),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",2),i=n("div",{className:"run-code"},"▶ Run Code",-1),C=s("",1),A=[e,t,r,c,D,F,y,i,C];function d(b,h,m,u,g,_){return l(),p("div",null,A)}const v=a(o,[["render",d]]);export{f as __pageData,v as default}; diff --git a/docs/document/assets/en_component_layers.md.J3naSppX.js b/docs/document/assets/en_component_layers.md.J3naSppX.js new file mode 100644 index 000000000..033fe1474 --- /dev/null +++ b/docs/document/assets/en_component_layers.md.J3naSppX.js @@ -0,0 +1,102 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const A=JSON.parse('{"title":"Layer","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/layers.md","filePath":"en/component/layers.md","lastUpdated":1700976201000}'),p={name:"en/component/layers.md"},h=s('

Layer ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique name of the component, used for marking class name
indexNumberComponent index, used for display priority
htmlString, ElementThe DOM element of the component
styleObjectStyle object for the component
clickFunctionClick event for the component
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component

Creation ​

',4),e=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'poster',
+            html: \`<img style="width: 100px" src="\${img}">\`,
+            tooltip: 'Poster Tip',
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+    ],
+});
+
+// Get the Element of layer by name
+console.info(art.layers['poster']);

Add ​

`,2),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
+
+art.layers.add({
+    name: 'poster',
+    html: \`<img style="width: 100px" src="\${img}">\`,
+    tooltip: 'Poster Tip',
+    style: {
+        position: 'absolute',
+        top: '50px',
+        right: '50px',
+    },
+    click: function (...args) {
+        console.info('click', args);
+    },
+    mounted: function (...args) {
+        console.info('mounted', args);
+    },
+});
+
+// Get the Element of layer by name
+console.info(art.layers['poster']);

Delete ​

`,2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'poster',
+            html: \`<img style="width: 100px" src="\${img}">\`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+        },
+    ],
+});
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the layer by name
+        art.layers.remove('poster');
+    }, 3000);
+});

Update ​

`,2),g=i("div",{className:"run-code"},"▶ Run Code",-1),c=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'poster',
+            html: \`<img style="width: 100px" src="\${img}">\`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+        },
+    ],
+});
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the layer by name
+        art.layers.update({
+            name: 'poster',
+            html: \`<img style="width: 200px" src="\${img}">\`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                left: '50px',
+            },
+        });
+    }, 3000);
+});
`,1),y=[h,e,t,k,E,r,d,g,c];function o(b,F,u,m,C,_){return n(),l("div",null,y)}const D=a(p,[["render",o]]);export{A as __pageData,D as default}; diff --git a/docs/document/assets/en_component_layers.md.J3naSppX.lean.js b/docs/document/assets/en_component_layers.md.J3naSppX.lean.js new file mode 100644 index 000000000..2f8cc5828 --- /dev/null +++ b/docs/document/assets/en_component_layers.md.J3naSppX.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const A=JSON.parse('{"title":"Layer","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/layers.md","filePath":"en/component/layers.md","lastUpdated":1700976201000}'),p={name:"en/component/layers.md"},h=s("",4),e=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",2),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s("",2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",2),g=i("div",{className:"run-code"},"▶ Run Code",-1),c=s("",1),y=[h,e,t,k,E,r,d,g,c];function o(b,F,u,m,C,_){return n(),l("div",null,y)}const D=a(p,[["render",o]]);export{A as __pageData,D as default}; diff --git a/docs/document/assets/en_component_setting.md.f8787f3a.js b/docs/document/assets/en_component_setting.md.f8787f3a.js deleted file mode 100644 index 0800007ad..000000000 --- a/docs/document/assets/en_component_setting.md.f8787f3a.js +++ /dev/null @@ -1,207 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const R=JSON.parse('{"title":"Setting","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/setting.md","filePath":"en/component/setting.md","lastUpdated":1682779928000}'),o={name:"en/component/setting.md"},e=s('

Setting ​

Build-in ​

You must open the settings panel first, and then come with four built-in items：flip, playbackRate, aspectRatio, subtitleOffset

',3),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-	setting: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    subtitleOffset: true,
-});

Init - Select list ​

PropertyTypeDescribe
htmlString, ElementElement DOM
iconString, ElementElement icon
selectorArrayElement list
onSelectFunctionElement click event
widthNumberList width
tooltipStringPrompt text
`,3),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Subtitle',
-            width: 250,
-            tooltip: 'Subtitle 01',
-            selector: [
-                {
-                    default: true,
-                    html: '<span style="color:red">Subtitle 01</span>',
-                    url: '/assets/sample/subtitle.srt?id=1',
-                },
-                {
-                    html: '<span style="color:yellow">Subtitle 02</span>',
-                    url: '/assets/sample/subtitle.srt?id=2',
-                },
-            ],
-            onSelect: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                art.subtitle.url = item.url;
-                return item.html;
-            },
-        },
-        {
-            html: 'Quality',
-            width: 150,
-            tooltip: '1080P',
-            selector: [
-                {
-                    default: true,
-                    html: '1080P',
-                    url: '/assets/sample/video.mp4?id=1080',
-                },
-                {
-                    html: '720P',
-                    url: '/assets/sample/video.mp4?id=720',
-                },
-                {
-                    html: '360P',
-                    url: '/assets/sample/video.mp4?id=360',
-                },
-            ],
-            onSelect: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                art.switchQuality(item.url, item.html);
-                return item.html;
-            },
-        },
-    ],
-});

Init - list nesting ​

`,2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Multi-level',
-            selector: [
-                {
-                    html: 'Setting 01',
-                    width: 150,
-                    selector: [
-                        {
-                            html: 'Setting 01 - 01',
-                        },
-                        {
-                            html: 'Setting 01 - 02',
-                        },
-                    ],
-                    onSelect: function (item, $dom, event) {
-                        console.info(item, $dom, event);
-                        return item.html;
-                    },
-                },
-                {
-                    html: 'Setting 02',
-                    width: 150,
-                    selector: [
-                        {
-                            html: 'Setting 02 - 01',
-                        },
-                        {
-                            html: 'Setting 02 - 02',
-                        },
-                    ],
-                    onSelect: function (item, $dom, event) {
-                        console.info(item, $dom, event);
-                        return item.html;
-                    },
-                },
-            ],
-        },
-    ],
-});

Init - Switch button ​

PropertyTypeDescribe
htmlString, ElementElement DOM
iconString, ElementElement icon
switchBooleanButton default state
onSwitchFunctionButton toggle event
tooltipStringPrompt text
`,3),C=n("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'PIP Mode',
-            tooltip: 'Close',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            switch: false,
-            onSwitch: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                const nextState = !item.switch;
-                art.pip = nextState;
-                item.tooltip = nextState ? 'Open' : 'Close';
-                return nextState;
-            },
-        },
-    ],
-});

Init - Range slider ​

PropertyTypeDescribe
htmlString, ElementElement DOM
iconString, ElementElement icon
rangeArrayDefault state array
onRangeFunctionEvent fired on completion
onChangeFunctionEvent fired on change
tooltipStringPrompt text
js
const range = [5, 1, 10, 1];
-const value = range[0];
-const min = range[1];
-const max = range[2];
-const step = range[3];
`,4),i=n("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-            onChange: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                return item.range + 'x';
-            },
-        },
-    ],
-});

Add ​

`,2),d=n("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
-
-art.setting.show = true;
-
-art.setting.add({
-    html: 'Slider',
-    tooltip: '5x',
-    icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-    range: [5, 1, 10, 1],
-});

Remove ​

`,2),m=n("div",{className:"run-code"},"▶ Run Code",-1),h=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-    settings: [
-        {
-            name: 'slider',
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-        },
-    ],
-});
-
-art.setting.show = true;
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the setting by name
-        art.setting.remove('slider');
-    }, 3000);
-});

Update ​

`,2),g=n("div",{className:"run-code"},"▶ Run Code",-1),_=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            name: 'slider',
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-        },
-    ],
-});
-
-art.setting.show = true;
-
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the setting by name
-        art.setting.update({
-            name: 'slider',
-            html: 'PIP Mode',
-            tooltip: 'Close',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            switch: false,
-        });
-    }, 3000);
-});
`,1),E=[e,t,r,c,D,F,y,C,A,i,b,d,u,m,h,g,_];function v(f,S,T,q,w,P){return l(),p("div",null,E)}const x=a(o,[["render",v]]);export{R as __pageData,x as default}; diff --git a/docs/document/assets/en_component_setting.md.f8787f3a.lean.js b/docs/document/assets/en_component_setting.md.f8787f3a.lean.js deleted file mode 100644 index 20dfeefea..000000000 --- a/docs/document/assets/en_component_setting.md.f8787f3a.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const R=JSON.parse('{"title":"Setting","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/setting.md","filePath":"en/component/setting.md","lastUpdated":1682779928000}'),o={name:"en/component/setting.md"},e=s("",3),t=n("div",{className:"run-code"},"▶ Run Code",-1),r=s("",3),c=n("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),F=n("div",{className:"run-code"},"▶ Run Code",-1),y=s("",3),C=n("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),i=n("div",{className:"run-code"},"▶ Run Code",-1),b=s("",2),d=n("div",{className:"run-code"},"▶ Run Code",-1),u=s("",2),m=n("div",{className:"run-code"},"▶ Run Code",-1),h=s("",2),g=n("div",{className:"run-code"},"▶ Run Code",-1),_=s("",1),E=[e,t,r,c,D,F,y,C,A,i,b,d,u,m,h,g,_];function v(f,S,T,q,w,P){return l(),p("div",null,E)}const x=a(o,[["render",v]]);export{R as __pageData,x as default}; diff --git a/docs/document/assets/en_component_setting.md.pCDzgQoQ.js b/docs/document/assets/en_component_setting.md.pCDzgQoQ.js new file mode 100644 index 000000000..e487cc57e --- /dev/null +++ b/docs/document/assets/en_component_setting.md.pCDzgQoQ.js @@ -0,0 +1,207 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const w=JSON.parse('{"title":"Settings Panel","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/setting.md","filePath":"en/component/setting.md","lastUpdated":1700976201000}'),p={name:"en/component/setting.md"},e=s('

Settings Panel ​

Built-in ​

First, open the settings panel, and then it comes with four built-in items: flip, playbackRate, aspectRatio, subtitleOffset

',3),t=i("div",{className:"run-code"},"▶ Run Code",-1),h=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+});

Create - Selection List ​

PropertyTypeDescription
htmlString, ElementElement's DOM

| icon | String, Element | 元素的图标 | | selector | Array | 元素列表 | | onSelect | Function | 元素点击事件 | | width | Number | 列表宽度 | | tooltip | String | 提示文本 |

`,4),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Subtitle',
+            width: 250,
+            tooltip: 'Subtitle 01',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">Subtitle 01</span>',
+                    url: '/assets/sample/subtitle.srt?id=1',
+                },
+                {
+                    html: '<span style="color:yellow">Subtitle 02</span>',
+                    url: '/assets/sample/subtitle.srt?id=2',
+                },
+            ],
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                art.subtitle.url = item.url;
+                return item.html;
+            },
+        },
+        {
+            html: 'Quality',
+            width: 150,
+            tooltip: '1080P',
+            selector: [
+                {
+                    default: true,
+                    html: '1080P',
+                    url: '/assets/sample/video.mp4?id=1080',
+                },
+                {
+                    html: '720P',
+                    url: '/assets/sample/video.mp4?id=720',
+                },
+                {
+                    html: '360P',
+                    url: '/assets/sample/video.mp4?id=360',
+                },
+            ],
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                art.switchQuality(item.url, item.html);
+                return item.html;
+            },
+        },
+    ],
+});

Creating - Nested Lists ​

`,2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Multi-level',
+            selector: [
+                {
+                    html: 'Setting 01',
+                    width: 150,
+                    selector: [
+                        {
+                            html: 'Setting 01 - 01',
+                        },
+                        {
+                            html: 'Setting 01 - 02',
+                        },
+                    ],
+                    onSelect: function (item, $dom, event) {
+                        console.info(item, $dom, event);
+                        return item.html;
+                    },
+                },
+                {
+                    html: 'Setting 02',
+                    width: 150,
+                    selector: [
+                        {
+                            html: 'Setting 02 - 01',
+                        },
+                        {
+                            html: 'Setting 02 - 02',
+                        },
+                    ],
+                    onSelect: function (item, $dom, event) {
+                        console.info(item, $dom, event);
+                        return item.html;
+                    },
+                },
+            ],
+        },
+    ],
+});

Create - Toggle Button ​

PropertyTypeDescription
htmlString, ElementElement's DOM element
iconString, ElementElement's icon
switchBooleanButton's default state
onSwitchFunctionButton toggle event
tooltipStringTooltip text
`,3),g=i("div",{className:"run-code"},"▶ Run Code",-1),c=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+            onSwitch: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                const nextState = !item.switch;
+                art.pip = nextState;
+                item.tooltip = nextState ? 'Open' : 'Close';
+                return nextState;
+            },
+        },
+    ],
+});

Create - Range Slider ​

AttributeTypeDescription
htmlString, ElementThe element's DOM element
iconString, ElementThe element's icon
rangeArrayDefault state array
onRangeFunctionEvent triggered upon completion
onChangeFunctionEvent triggered on change
tooltipStringTooltip text
js
const range = [5, 1, 10, 1];
+const value = range[0];
+const min = range[1];
+const max = range[2];
+const step = range[3];
`,4),y=i("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" height="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+            onChange: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                return item.range + 'x';
+            },
+        },
+    ],
+});

Add ​

`,2),o=i("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
+
+art.setting.show = true;
+
+art.setting.add({
+    html: 'Slider',
+    tooltip: '5x',
+    icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+    range: [5, 1, 10, 1],
+});

Delete ​

`,2),u=i("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    settings: [
+        {
+            name: 'slider',
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+        },
+    ],
+});
+
+art.setting.show = true;
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the setting by name
+        art.setting.remove('slider');
+    }, 3000);
+});

Updates ​

`,2),C=i("div",{className:"run-code"},"▶ Run Code",-1),B=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            name: 'slider',
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+        },
+    ],
+});
+
+art.setting.show = true;
+
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the setting by name
+        art.setting.update({
+            name: 'slider',
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+        });
+    }, 3000);
+});
`,1),_=[e,t,h,k,E,r,d,g,c,y,b,o,F,u,m,C,B];function A(v,D,S,T,q,f){return n(),l("div",null,_)}const R=a(p,[["render",A]]);export{w as __pageData,R as default}; diff --git a/docs/document/assets/en_component_setting.md.pCDzgQoQ.lean.js b/docs/document/assets/en_component_setting.md.pCDzgQoQ.lean.js new file mode 100644 index 000000000..071643241 --- /dev/null +++ b/docs/document/assets/en_component_setting.md.pCDzgQoQ.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const w=JSON.parse('{"title":"Settings Panel","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/setting.md","filePath":"en/component/setting.md","lastUpdated":1700976201000}'),p={name:"en/component/setting.md"},e=s("",3),t=i("div",{className:"run-code"},"▶ Run Code",-1),h=s("",4),k=i("div",{className:"run-code"},"▶ Run Code",-1),E=s("",2),r=i("div",{className:"run-code"},"▶ Run Code",-1),d=s("",3),g=i("div",{className:"run-code"},"▶ Run Code",-1),c=s("",4),y=i("div",{className:"run-code"},"▶ Run Code",-1),b=s("",2),o=i("div",{className:"run-code"},"▶ Run Code",-1),F=s("",2),u=i("div",{className:"run-code"},"▶ Run Code",-1),m=s("",2),C=i("div",{className:"run-code"},"▶ Run Code",-1),B=s("",1),_=[e,t,h,k,E,r,d,g,c,y,b,o,F,u,m,C,B];function A(v,D,S,T,q,f){return n(),l("div",null,_)}const R=a(p,[["render",A]]);export{w as __pageData,R as default}; diff --git a/docs/document/assets/en_index.md.8bbfdcd3.js b/docs/document/assets/en_index.md.8bbfdcd3.js deleted file mode 100644 index 4392daf88..000000000 --- a/docs/document/assets/en_index.md.8bbfdcd3.js +++ /dev/null @@ -1,167 +0,0 @@ -import{_ as s,o as a,c as n,S as l}from"./chunks/framework.532b6b18.js";const C=JSON.parse('{"title":"Install","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","filePath":"en/index.md","lastUpdated":1683042244000}'),p={name:"en/index.md"},e=l(`

Important Note

The English document has not yet been completed, everything is subject to the Chinese document.

Install ​

Install ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

Use ​

js
import Artplayer from 'artplayer';
-
-const art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'path/to/video.mp4',
-});
html
<html>
-    <head>
-        <title>ArtPlayer Demo</title>
-        <meta charset="UTF-8" />
-        <style>
-            .artplayer-app {
-                width: 400px;
-                height: 300px;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app"></div>
-    </body>
-</html>

Tip

The size of the player depends on the size of the container, so your container must have a size

The following links can see more use examples

/packages/artplayer-template

Vue.js ​

vue
<template>
-  <div ref="artRef"></div>
-</template>
-
-<script>
-import Artplayer from "artplayer";
-
-export default {
-  data() {
-    return {
-      instance: null,
-    };
-  },
-  props: {
-    option: {
-      type: Object,
-      required: true,
-    },
-  },
-  mounted() {
-    this.instance = new Artplayer({
-      ...this.option,
-      container: this.$refs.artRef,
-    });
-
-    this.$nextTick(() => {
-      this.$emit("get-instance", this.instance);
-    });
-  },
-  beforeDestroy() {
-    if (this.instance && this.instance.destroy) {
-      this.instance.destroy(false);
-    }
-  },
-};
-</script>
vue
<template>
-  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
-</template>
-
-<script>
-import Artplayer from "./Artplayer.vue";
-
-export default {
-  data() {
-    return {
-      option: {
-        url: "path/to/video.mp4",
-      },
-      style: {
-        width: "600px",
-        height: "400px",
-        margin: "60px auto 0",
-      },
-    };
-  },
-  components: {
-    Artplayer,
-  },
-  methods: {
-    getInstance(art) {
-      console.info(art);
-    },
-  },
-};
-</script>

Tip

Modifying option directly in Vue.js will not change the player

React.js ​

jsx
import { useEffect, useRef } from 'react';
-import Artplayer from 'artplayer';
-
-export default function Player({ option, getInstance, ...rest }) {
-    const artRef = useRef();
-
-    useEffect(() => {
-        const art = new Artplayer({
-            ...option,
-            container: artRef.current,
-        });
-
-        if (getInstance && typeof getInstance === 'function') {
-            getInstance(art);
-        }
-
-        return () => {
-            if (art && art.destroy) {
-                art.destroy(false);
-            }
-        };
-    }, []);
-
-    return <div ref={artRef} {...rest}></div>;
-}
jsx
import React from 'react';
-import Artplayer from './ArtPlayer.jsx';
-
-function App() {
-    return (
-        <div>
-            <Artplayer
-                option={{
-                    url: 'https://artplayer.org/assets/sample/video.mp4',
-                }}
-                style={{
-                    width: '600px',
-                    height: '400px',
-                    margin: '60px auto 0',
-                }}
-                getInstance={(art) => console.info(art)}
-            />
-        </div>
-    );
-}
-
-export default App;

Tip

Modifying option directly in React.js will not change the player

TypeScript ​

The artplayer.d.ts that is automatically imported when importing Artplayer, but you can also import the type of options individually

ts
import Artplayer from 'artplayer';
-import { type Option } from 'artplayer/types/option';
-
-const option: Option = {
-    container: '.artplayer-app',
-    url: './assets/sample/video.mp4',
-};
-
-option.volume = 0.5;
-
-const art = new Artplayer(option);

All TypeScript definitions

packages/artplayer/types

JavaScript ​

Sometimes your js file will lose the type prompt of TypeScript. At this time, you can manually import the type

Variable:

js
/**
- * @type {import("artplayer")}
- */
-let art = null;

Parameters:

js
/**
- * @param {import("artplayer")} art
- */
-function getInstance(art) {
-  //
-}

Properties:

js
export default {
-  data() {
-    return {
-      /**
-       * @type {import("artplayer")}
-       */
-      art: null,
-    }
-  }
-}

Option:

js
/**
- * @type {import("artplayer/types/option").Option}
- */
-
-const option = {
-    container: '.artplayer-app',
-    url: './assets/sample/video.mp4',
-};
-
-option.volume = 0.5;
-
-const art8 = new Artplayer(option);

Old browsers ​

Production builds of artplayer.js are only compatible with the last major version of Chrome: last 1 Chrome version

For older browsers, use the artplayer.legacy.js file, compatible up to: IE 11

js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

If you want to be compatible with older browsers, please modify the following configuration and build it yourself:

Build configuration: /scripts/build.js

Reference documents: browserslist

`,36),o=[e];function t(r,c,i,y,F,D){return a(),n("div",null,o)}const u=s(p,[["render",t]]);export{C as __pageData,u as default}; diff --git a/docs/document/assets/en_index.md.8bbfdcd3.lean.js b/docs/document/assets/en_index.md.8bbfdcd3.lean.js deleted file mode 100644 index 624e3eb14..000000000 --- a/docs/document/assets/en_index.md.8bbfdcd3.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,o as a,c as n,S as l}from"./chunks/framework.532b6b18.js";const C=JSON.parse('{"title":"Install","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","filePath":"en/index.md","lastUpdated":1683042244000}'),p={name:"en/index.md"},e=l("",36),o=[e];function t(r,c,i,y,F,D){return a(),n("div",null,o)}const u=s(p,[["render",t]]);export{C as __pageData,u as default}; diff --git a/docs/document/assets/en_index.md.lXlh_hOW.js b/docs/document/assets/en_index.md.lXlh_hOW.js new file mode 100644 index 000000000..8e20c5e92 --- /dev/null +++ b/docs/document/assets/en_index.md.lXlh_hOW.js @@ -0,0 +1,167 @@ +import{_ as s,o as i,c as a,R as n}from"./chunks/framework.E60viAY0.js";const y=JSON.parse('{"title":"Installation and Usage","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","filePath":"en/index.md","lastUpdated":1700976201000}'),l={name:"en/index.md"},p=n(`

Installation and Usage ​

Installation ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

Usage ​

js
import Artplayer from 'artplayer';
+
+const art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'path/to/video.mp4',
+});
html
<html>
+    <head>
+        <title>ArtPlayer Demo</title>
+        <meta charset="UTF-8" />
+        <style>
+            .artplayer-app {
+                width: 400px;
+                height: 300px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app"></div>
+    </body>
+</html>

Warning

The player's size depends on the size of the container container, so your container container must have a size.

You can see more examples of use at the following link

/packages/artplayer-template

Vue.js ​

vue
<template>
+  <div ref="artRef"></div>
+</template>
+
+<script>
+import Artplayer from "artplayer";
+
+export default {
+  data() {
+    return {
+      instance: null,
+    };
+  },
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    this.instance = new Artplayer({
+      ...this.option,
+      container: this.$refs.artRef,
+    });
+
+    this.$nextTick(() => {
+      this.$emit("get-instance", this.instance);
+    });
+  },
+  beforeDestroy() {
+    if (this.instance && this.instance.destroy) {
+      this.instance.destroy(false);
+    }
+  },
+};
+</script>
vue
<template>
+  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
+</template>
+
+<script>
+import Artplayer from "./Artplayer.vue";
+
+export default {
+  data() {
+    return {
+      option: {
+        url: "path/to/video.mp4",
+      },
+      style: {
+        width: "600px",
+        height: "400px",
+        margin: "60px auto 0",
+      },
+    };
+  },
+  components: {
+    Artplayer,
+  },
+  methods: {
+    getInstance(art) {
+      console.info(art);
+    },
+  },
+};
+</script>

Artplayer Not Responsive：

Modifying option directly in Vue.js will not change the player

React.js ​

jsx
import { useEffect, useRef } from 'react';
+import Artplayer from 'artplayer';
+
+export default function Player({ option, getInstance, ...rest }) {
+    const artRef = useRef();
+
+    useEffect(() => {
+        const art = new Artplayer({
+            ...option,
+            container: artRef.current,
+        });
+
+        if (getInstance && typeof getInstance === 'function') {
+            getInstance(art);
+        }
+
+        return () => {
+            if (art && art.destroy) {
+                art.destroy(false);
+            }
+        };
+    }, []);
+
+    return <div ref={artRef} {...rest}></div>;
+}
jsx
import React from 'react';
+import Artplayer from './ArtPlayer.jsx';
+
+function App() {
+    return (
+        <div>
+            <Artplayer
+                option={{
+                    url: 'https://artplayer.org/assets/sample/video.mp4',
+                }}
+                style={{
+                    width: '600px',
+                    height: '400px',
+                    margin: '60px auto 0',
+                }}
+                getInstance={(art) => console.info(art)}
+            />
+        </div>
+    );
+}
+
+export default App;

Non-responsive Artplayer:

In React.js, directly modifying the option will not change the player

TypeScript ​

Importing Artplayer will automatically import artplayer.d.ts, but you can also separately import the type for options

ts
import Artplayer from 'artplayer';
+import { type Option } from 'artplayer/types/option';
+
+const option: Option = {
+    container: '.artplayer-app',
+    url: './assets/sample/video.mp4',
+};
+
+option.volume = 0.5;
+
+const art = new Artplayer(option);

Complete TypeScript Definitions

packages/artplayer/types

JavaScript ​

Sometimes your js file may lose the TypeScript type hints, in this case, you can manually import the types

Variables:

js
/**
+ * @type {import("artplayer")}
+ */
+let art = null;

Parameters:

js
/**
+ * @param {import("artplayer")} art
+ */
+function getInstance(art) {
+  //
+}

Properties:

js
export default {
+  data() {
+    return {
+      /**
+       * @type {import("artplayer")}
+       */
+      art: null,
+    }
+  }
+}

Options:

js
/**
+ * @type {import("artplayer/types/option").Option}
+ */
+
+const option = {
+    container: '.artplayer-app',
+    url: './assets/sample/video.mp4',
+};
+
+option.volume = 0.5;
+
+const art8 = new Artplayer(option);

Ancient Browsers ​

The production build of artplayer.js is only compatible with the latest major version of Chrome: last 1 Chrome version

For ancient browsers, you can use the artplayer.legacy.js file, which is compatible up to: IE 11

js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

If you need to support even older browsers, please modify the following configuration and then build it yourself:

Build configuration: scripts/build.js

Refer to documentation: browserslist

`,35),e=[p];function t(h,k,r,E,d,c){return i(),a("div",null,e)}const b=s(l,[["render",t]]);export{y as __pageData,b as default}; diff --git a/docs/document/assets/en_index.md.lXlh_hOW.lean.js b/docs/document/assets/en_index.md.lXlh_hOW.lean.js new file mode 100644 index 000000000..20027e838 --- /dev/null +++ b/docs/document/assets/en_index.md.lXlh_hOW.lean.js @@ -0,0 +1 @@ +import{_ as s,o as i,c as a,R as n}from"./chunks/framework.E60viAY0.js";const y=JSON.parse('{"title":"Installation and Usage","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","filePath":"en/index.md","lastUpdated":1700976201000}'),l={name:"en/index.md"},p=n("",35),e=[p];function t(h,k,r,E,d,c){return i(),a("div",null,e)}const b=s(l,[["render",t]]);export{y as __pageData,b as default}; diff --git a/docs/document/assets/en_library_dash.md.3RbZeCcT.js b/docs/document/assets/en_library_dash.md.3RbZeCcT.js new file mode 100644 index 000000000..1392e43b6 --- /dev/null +++ b/docs/document/assets/en_library_dash.md.3RbZeCcT.js @@ -0,0 +1,24 @@ +import{_ as i,o as n,c as l,k as s,a,R as p}from"./chunks/framework.E60viAY0.js";const m=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/dash.md","filePath":"en/library/dash.md","lastUpdated":1700965824000}'),h={name:"en/library/dash.md"},t=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-label":'Permalink to "dash.js"'},"​")],-1),e=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),r=p(`
js
function playMpd(video, url, art) {
+    if (dashjs.supportsMediaSource()) {
+        if (art.dash) art.dash.destroy();
+        const dash = dashjs.MediaPlayer().create();
+        dash.initialize(video, url, art.option.autoplay);
+        art.dash = dash; 
+        art.on('destroy', () => dash.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: mpd';
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
+    type: 'mpd',
+    customType: {
+        mpd: playMpd
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.dash);
+});
`,1),E=[t,e,k,r];function d(c,y,g,o,b,F){return n(),l("div",null,E)}const _=i(h,[["render",d]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/en_library_dash.md.3RbZeCcT.lean.js b/docs/document/assets/en_library_dash.md.3RbZeCcT.lean.js new file mode 100644 index 000000000..abd1e316d --- /dev/null +++ b/docs/document/assets/en_library_dash.md.3RbZeCcT.lean.js @@ -0,0 +1 @@ +import{_ as i,o as n,c as l,k as s,a,R as p}from"./chunks/framework.E60viAY0.js";const m=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/dash.md","filePath":"en/library/dash.md","lastUpdated":1700965824000}'),h={name:"en/library/dash.md"},t=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-label":'Permalink to "dash.js"'},"​")],-1),e=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),r=p("",1),E=[t,e,k,r];function d(c,y,g,o,b,F){return n(),l("div",null,E)}const _=i(h,[["render",d]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/en_library_dash.md.d2caad85.js b/docs/document/assets/en_library_dash.md.d2caad85.js deleted file mode 100644 index 67ecbf732..000000000 --- a/docs/document/assets/en_library_dash.md.d2caad85.js +++ /dev/null @@ -1,24 +0,0 @@ -import{_ as n,o as l,c as p,k as s,a,S as o}from"./chunks/framework.532b6b18.js";const u=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/dash.md","filePath":"en/library/dash.md","lastUpdated":1682180498000}'),e={name:"en/library/dash.md"},r=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-label":'Permalink to "dash.js"'},"​")],-1),t=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),y=o(`
js
function playMpd(video, url, art) {
-    if (dashjs.supportsMediaSource()) {
-        if (art.dash) art.dash.destroy();
-        const dash = dashjs.MediaPlayer().create();
-        dash.initialize(video, url, art.option.autoplay);
-        art.dash = dash; 
-        art.on('destroy', () => dash.destroy());
-    } else {
-        art.notice.show = 'Unsupported playback format: mpd';
-    }
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
-    type: 'mpd',
-    customType: {
-        mpd: playMpd
-    },
-});
-
-art.on('ready', () => {
-    console.info(art.dash);
-});
`,1),F=[r,t,c,y];function D(A,i,C,d,b,h){return l(),p("div",null,F)}const _=n(e,[["render",D]]);export{u as __pageData,_ as default}; diff --git a/docs/document/assets/en_library_dash.md.d2caad85.lean.js b/docs/document/assets/en_library_dash.md.d2caad85.lean.js deleted file mode 100644 index 791fdbe5d..000000000 --- a/docs/document/assets/en_library_dash.md.d2caad85.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as n,o as l,c as p,k as s,a,S as o}from"./chunks/framework.532b6b18.js";const u=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/dash.md","filePath":"en/library/dash.md","lastUpdated":1682180498000}'),e={name:"en/library/dash.md"},r=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-label":'Permalink to "dash.js"'},"​")],-1),t=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),y=o("",1),F=[r,t,c,y];function D(A,i,C,d,b,h){return l(),p("div",null,F)}const _=n(e,[["render",D]]);export{u as __pageData,_ as default}; diff --git a/docs/document/assets/en_library_flv.md.7a295dcf.js b/docs/document/assets/en_library_flv.md.7a295dcf.js deleted file mode 100644 index 16c067b6e..000000000 --- a/docs/document/assets/en_library_flv.md.7a295dcf.js +++ /dev/null @@ -1,25 +0,0 @@ -import{_ as a,o as l,c as p,k as s,a as n,S as o}from"./chunks/framework.532b6b18.js";const u=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/flv.md","filePath":"en/library/flv.md","lastUpdated":1682180498000}'),e={name:"en/library/flv.md"},r=s("h1",{id:"flv-js",tabindex:"-1"},[n("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-label":'Permalink to "flv.js"'},"​")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),F=o(`
js
function playFlv(video, url, art) {
-    if (flvjs.isSupported()) {
-        if (art.flv) art.flv.destroy();
-        const flv = flvjs.createPlayer({ type: 'flv', url });
-        flv.attachMediaElement(video);
-        flv.load();
-        art.flv = flv; 
-        art.on('destroy', () => flv.destroy());
-    } else {
-        art.notice.show = 'Unsupported playback format: flv';
-    }
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.flv',
-    type: 'flv',
-    customType: {
-        flv: playFlv,
-    },
-});
-
-art.on('ready', () => {
-    console.info(art.flv);
-});
`,1),y=[r,t,c,F];function D(i,A,C,b,d,f){return l(),p("div",null,y)}const v=a(e,[["render",D]]);export{u as __pageData,v as default}; diff --git a/docs/document/assets/en_library_flv.md.7a295dcf.lean.js b/docs/document/assets/en_library_flv.md.7a295dcf.lean.js deleted file mode 100644 index f736c3f4f..000000000 --- a/docs/document/assets/en_library_flv.md.7a295dcf.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as l,c as p,k as s,a as n,S as o}from"./chunks/framework.532b6b18.js";const u=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/flv.md","filePath":"en/library/flv.md","lastUpdated":1682180498000}'),e={name:"en/library/flv.md"},r=s("h1",{id:"flv-js",tabindex:"-1"},[n("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-label":'Permalink to "flv.js"'},"​")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(i,A,C,b,d,f){return l(),p("div",null,y)}const v=a(e,[["render",D]]);export{u as __pageData,v as default}; diff --git a/docs/document/assets/en_library_flv.md.B8QlSimM.js b/docs/document/assets/en_library_flv.md.B8QlSimM.js new file mode 100644 index 000000000..55272eadc --- /dev/null +++ b/docs/document/assets/en_library_flv.md.B8QlSimM.js @@ -0,0 +1,25 @@ +import{_ as a,o as n,c as l,k as s,a as i,R as p}from"./chunks/framework.E60viAY0.js";const m=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/flv.md","filePath":"en/library/flv.md","lastUpdated":1700965824000}'),h={name:"en/library/flv.md"},e=s("h1",{id:"flv-js",tabindex:"-1"},[i("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-label":'Permalink to "flv.js"'},"​")],-1),t=s("p",null,[i("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),r=p(`
js
function playFlv(video, url, art) {
+    if (flvjs.isSupported()) {
+        if (art.flv) art.flv.destroy();
+        const flv = flvjs.createPlayer({ type: 'flv', url });
+        flv.attachMediaElement(video);
+        flv.load();
+        art.flv = flv; 
+        art.on('destroy', () => flv.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: flv';
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.flv',
+    type: 'flv',
+    customType: {
+        flv: playFlv,
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.flv);
+});
`,1),E=[e,t,k,r];function d(c,y,g,b,o,F){return n(),l("div",null,E)}const f=a(h,[["render",d]]);export{m as __pageData,f as default}; diff --git a/docs/document/assets/en_library_flv.md.B8QlSimM.lean.js b/docs/document/assets/en_library_flv.md.B8QlSimM.lean.js new file mode 100644 index 000000000..ccaa21b98 --- /dev/null +++ b/docs/document/assets/en_library_flv.md.B8QlSimM.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,k as s,a as i,R as p}from"./chunks/framework.E60viAY0.js";const m=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/flv.md","filePath":"en/library/flv.md","lastUpdated":1700965824000}'),h={name:"en/library/flv.md"},e=s("h1",{id:"flv-js",tabindex:"-1"},[i("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-label":'Permalink to "flv.js"'},"​")],-1),t=s("p",null,[i("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),r=p("",1),E=[e,t,k,r];function d(c,y,g,b,o,F){return n(),l("div",null,E)}const f=a(h,[["render",d]]);export{m as __pageData,f as default}; diff --git a/docs/document/assets/en_library_hls.md.YUdBjyH8.js b/docs/document/assets/en_library_hls.md.YUdBjyH8.js new file mode 100644 index 000000000..aa50f0007 --- /dev/null +++ b/docs/document/assets/en_library_hls.md.YUdBjyH8.js @@ -0,0 +1,27 @@ +import{_ as a,o as n,c as l,k as s,a as i,R as p}from"./chunks/framework.E60viAY0.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/hls.md","filePath":"en/library/hls.md","lastUpdated":1700965824000}'),h={name:"en/library/hls.md"},e=s("h1",{id:"hls-js",tabindex:"-1"},[i("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-label":'Permalink to "hls.js"'},"​")],-1),t=s("p",null,[i("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),r=p(`
js
function playM3u8(video, url, art) {
+    if (Hls.isSupported()) {
+        if (art.hls) art.hls.destroy();
+        const hls = new Hls();
+        hls.loadSource(url);
+        hls.attachMedia(video);
+        art.hls = hls;
+        art.on('destroy', () => hls.destroy());
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = url;
+    } else {
+        art.notice.show = 'Unsupported playback format: m3u8';
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+    type: 'm3u8',
+    customType: {
+        m3u8: playM3u8,
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.hls);
+});
`,1),E=[e,t,k,r];function d(y,c,g,o,b,F){return n(),l("div",null,E)}const _=a(h,[["render",d]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/en_library_hls.md.YUdBjyH8.lean.js b/docs/document/assets/en_library_hls.md.YUdBjyH8.lean.js new file mode 100644 index 000000000..6ecae19de --- /dev/null +++ b/docs/document/assets/en_library_hls.md.YUdBjyH8.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,k as s,a as i,R as p}from"./chunks/framework.E60viAY0.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/hls.md","filePath":"en/library/hls.md","lastUpdated":1700965824000}'),h={name:"en/library/hls.md"},e=s("h1",{id:"hls-js",tabindex:"-1"},[i("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-label":'Permalink to "hls.js"'},"​")],-1),t=s("p",null,[i("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),r=p("",1),E=[e,t,k,r];function d(y,c,g,o,b,F){return n(),l("div",null,E)}const _=a(h,[["render",d]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/en_library_hls.md.adcf9c67.js b/docs/document/assets/en_library_hls.md.adcf9c67.js deleted file mode 100644 index d6b3606c4..000000000 --- a/docs/document/assets/en_library_hls.md.adcf9c67.js +++ /dev/null @@ -1,27 +0,0 @@ -import{_ as a,o as l,c as p,k as s,a as n,S as o}from"./chunks/framework.532b6b18.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/hls.md","filePath":"en/library/hls.md","lastUpdated":1682180498000}'),e={name:"en/library/hls.md"},r=s("h1",{id:"hls-js",tabindex:"-1"},[n("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-label":'Permalink to "hls.js"'},"​")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),F=o(`
js
function playM3u8(video, url, art) {
-    if (Hls.isSupported()) {
-        if (art.hls) art.hls.destroy();
-        const hls = new Hls();
-        hls.loadSource(url);
-        hls.attachMedia(video);
-        art.hls = hls;
-        art.on('destroy', () => hls.destroy());
-    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-        video.src = url;
-    } else {
-        art.notice.show = 'Unsupported playback format: m3u8';
-    }
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
-    type: 'm3u8',
-    customType: {
-        m3u8: playM3u8,
-    },
-});
-
-art.on('ready', () => {
-    console.info(art.hls);
-});
`,1),y=[r,t,c,F];function D(A,i,C,b,h,d){return l(),p("div",null,y)}const _=a(e,[["render",D]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/en_library_hls.md.adcf9c67.lean.js b/docs/document/assets/en_library_hls.md.adcf9c67.lean.js deleted file mode 100644 index 045aaf956..000000000 --- a/docs/document/assets/en_library_hls.md.adcf9c67.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as l,c as p,k as s,a as n,S as o}from"./chunks/framework.532b6b18.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"en/library/hls.md","filePath":"en/library/hls.md","lastUpdated":1682180498000}'),e={name:"en/library/hls.md"},r=s("h1",{id:"hls-js",tabindex:"-1"},[n("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-label":'Permalink to "hls.js"'},"​")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(A,i,C,b,h,d){return l(),p("div",null,y)}const _=a(e,[["render",D]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/en_plugin_ads.md.4b93a290.js b/docs/document/assets/en_plugin_ads.md.4b93a290.js deleted file mode 100644 index 0767edf29..000000000 --- a/docs/document/assets/en_plugin_ads.md.4b93a290.js +++ /dev/null @@ -1,48 +0,0 @@ -import{_ as a,o as n,c as l,S as s,k as p}from"./chunks/framework.532b6b18.js";const u=JSON.parse('{"title":"视频广告","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/ads.md","filePath":"en/plugin/ads.md","lastUpdated":1673692792000}'),e={name:"en/plugin/ads.md"},o=s('

视频广告 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-ads
bash
yarn add artplayer-plugin-ads
bash
pnpm add artplayer-plugin-ads
html
<script src="path/to/artplayer-plugin-ads.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
bash
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js

使用 ​

',8),r=p("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),t=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-    fullscreen: true,
-    fullscreenWeb: true,
-    plugins: [
-        artplayerPluginAds({
-            // html广告，假如是视频广告则忽略该值
-            html: '<img src="/assets/sample/poster.jpg">',
-
-            // 视频广告的地址
-            video: '/assets/sample/test1.mp4',
-
-            // 广告跳转网址，为空则不跳转
-            url: 'http://artplayer.org',
-
-            // 必须观看的时长，期间不能被跳过，单位为秒
-            // 当该值大于或等于totalDuration时，不能提前关闭广告
-            // 当该值等于或小于0时，则随时都可以关闭广告
-            playDuration: 5,
-
-            // 广告总时长，单位为秒
-            totalDuration: 10,
-
-            // 视频广告是否默认静音
-            muted: false,
-
-            // 多语言支持
-            i18n: {
-                close: '关闭广告',
-                countdown: '%s秒',
-                detail: '查看详情',
-                canBeClosed: '%s秒后可关闭广告',
-            },
-        }),
-    ],
-});
-
-// ad is clicked
-art.on('artplayerPluginAds:click', (ads) => {
-    console.info(ads);
-});
-
-// Ad skipped
-art.on('artplayerPluginAds:skip', (ads) => {
-    console.info(ads);
-});
`,1),c=[o,r,t];function i(y,D,F,C,b,d){return n(),l("div",null,c)}const m=a(e,[["render",i]]);export{u as __pageData,m as default}; diff --git a/docs/document/assets/en_plugin_ads.md.4b93a290.lean.js b/docs/document/assets/en_plugin_ads.md.4b93a290.lean.js deleted file mode 100644 index 1b76a9330..000000000 --- a/docs/document/assets/en_plugin_ads.md.4b93a290.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as n,c as l,S as s,k as p}from"./chunks/framework.532b6b18.js";const u=JSON.parse('{"title":"视频广告","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/ads.md","filePath":"en/plugin/ads.md","lastUpdated":1673692792000}'),e={name:"en/plugin/ads.md"},o=s("",8),r=p("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),t=s("",1),c=[o,r,t];function i(y,D,F,C,b,d){return n(),l("div",null,c)}const m=a(e,[["render",i]]);export{u as __pageData,m as default}; diff --git a/docs/document/assets/en_plugin_ads.md.qIahpi8y.js b/docs/document/assets/en_plugin_ads.md.qIahpi8y.js new file mode 100644 index 000000000..755398324 --- /dev/null +++ b/docs/document/assets/en_plugin_ads.md.qIahpi8y.js @@ -0,0 +1,48 @@ +import{_ as a,o as i,c as n,R as s,k as l}from"./chunks/framework.E60viAY0.js";const y=JSON.parse('{"title":"Video Ads","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/ads.md","filePath":"en/plugin/ads.md","lastUpdated":1700976201000}'),e={name:"en/plugin/ads.md"},p=s('

Video Ads ​

Demo ​

👉 View Full Demo

Installation ​

bash
npm install artplayer-plugin-ads
bash
yarn add artplayer-plugin-ads
bash
pnpm add artplayer-plugin-ads
html
<script src="path/to/artplayer-plugin-ads.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
bash
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js

Usage ​

',8),t=l("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),h=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    plugins: [
+        artplayerPluginAds({
+            // HTML ad, ignored if it's a video ad
+            html: '<img src="/assets/sample/poster.jpg">',
+
+            // URL of the video ad
+            video: '/assets/sample/test1.mp4',
+
+            // Ad redirect URL, no redirection if empty
+            url: 'http://artplayer.org',
+
+            // The duration that must be watched, which can't be skipped, in seconds
+            // If this value is greater than or equal to totalDuration, the ad can't be closed early
+            // If this value is less than or equal to 0, then the ad can be closed at any time
+            playDuration: 5,
+
+            // Total duration of the ad, in seconds
+            totalDuration: 10,
+
+            // Whether the video ad is muted by default
+            muted: false,
+
+            // Multilingual support
+            i18n: {
+                close: 'Close ad',
+                countdown: '%s seconds',
+                detail: 'See details',
+                canBeClosed: '%s seconds until the ad can be closed',
+            },
+        }),
+    ],
+});
+
+// ad is clicked
+art.on('artplayerPluginAds:click', (ads) => {
+    console.info(ads);
+});
+
+// Ad skipped
+art.on('artplayerPluginAds:skip', (ads) => {
+    console.info(ads);
+});
`,1),r=[p,t,h];function k(d,c,E,o,b,g){return i(),n("div",null,r)}const m=a(e,[["render",k]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/en_plugin_ads.md.qIahpi8y.lean.js b/docs/document/assets/en_plugin_ads.md.qIahpi8y.lean.js new file mode 100644 index 000000000..6b7840f48 --- /dev/null +++ b/docs/document/assets/en_plugin_ads.md.qIahpi8y.lean.js @@ -0,0 +1 @@ +import{_ as a,o as i,c as n,R as s,k as l}from"./chunks/framework.E60viAY0.js";const y=JSON.parse('{"title":"Video Ads","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/ads.md","filePath":"en/plugin/ads.md","lastUpdated":1700976201000}'),e={name:"en/plugin/ads.md"},p=s("",8),t=l("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),h=s("",1),r=[p,t,h];function k(d,c,E,o,b,g){return i(),n("div",null,r)}const m=a(e,[["render",k]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/en_plugin_control-ui.md.182a9399.js b/docs/document/assets/en_plugin_control-ui.md.182a9399.js deleted file mode 100644 index cab7cd007..000000000 --- a/docs/document/assets/en_plugin_control-ui.md.182a9399.js +++ /dev/null @@ -1,27 +0,0 @@ -import{_ as n,o as l,c as p,S as s,k as a}from"./chunks/framework.532b6b18.js";const h=JSON.parse('{"title":"控制器皮肤","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/control-ui.md","filePath":"en/plugin/control-ui.md","lastUpdated":1673692792000}'),e={name:"en/plugin/control-ui.md"},o=s('

控制器皮肤 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-control
bash
yarn add artplayer-plugin-control
bash
pnpm add artplayer-plugin-control
html
<script src="path/to/artplayer-plugin-control.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-control/dist/artplayer-plugin-control.js
bash
https://unpkg.com/artplayer-plugin-control/dist/artplayer-plugin-control.js

使用 ​

',8),r=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),t=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-    fullscreenWeb: true,
-    plugins: [
-        artplayerPluginControl(),
-    ],
-});

enable ​

  • Type: Getter/Setter
  • Parameter: Boolean

是否启用新的控制器皮肤

`,4),c=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),i=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-    fullscreenWeb: true,
-    controls: [
-        {
-            position: 'right',
-            html: '<button type="button">Switch UI</button>',
-            click: function () {
-                const { enable } = art.plugins.artplayerPluginControl;
-                art.plugins.artplayerPluginControl.enable = !enable;
-            },
-        },
-    ],
-    plugins: [
-        artplayerPluginControl(),
-    ],
-});
`,1),y=[o,r,t,c,i];function D(F,C,d,u,b,A){return l(),p("div",null,y)}const g=n(e,[["render",D]]);export{h as __pageData,g as default}; diff --git a/docs/document/assets/en_plugin_control-ui.md.182a9399.lean.js b/docs/document/assets/en_plugin_control-ui.md.182a9399.lean.js deleted file mode 100644 index 6df3cce55..000000000 --- a/docs/document/assets/en_plugin_control-ui.md.182a9399.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as n,o as l,c as p,S as s,k as a}from"./chunks/framework.532b6b18.js";const h=JSON.parse('{"title":"控制器皮肤","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/control-ui.md","filePath":"en/plugin/control-ui.md","lastUpdated":1673692792000}'),e={name:"en/plugin/control-ui.md"},o=s("",8),r=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),t=s("",4),c=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),i=s("",1),y=[o,r,t,c,i];function D(F,C,d,u,b,A){return l(),p("div",null,y)}const g=n(e,[["render",D]]);export{h as __pageData,g as default}; diff --git a/docs/document/assets/en_plugin_danmuku.md.pycJIXGa.js b/docs/document/assets/en_plugin_danmuku.md.pycJIXGa.js new file mode 100644 index 000000000..b36fae7d6 --- /dev/null +++ b/docs/document/assets/en_plugin_danmuku.md.pycJIXGa.js @@ -0,0 +1,284 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const I=JSON.parse('{"title":"Danmuku","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/danmuku.md","filePath":"en/plugin/danmuku.md","lastUpdated":1700976934000}'),p={name:"en/plugin/danmuku.md"},h=s(`

Danmuku ​

Demo ​

👉 View Full Demo

Installation ​

bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js

Option ​

js
{
+    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
+    speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
+    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
+    fontSize: 25, // 字体大小，支持数字和百分比
+    color: '#FFFFFF', // 默认字体颜色
+    mode: 0, // 默认模式，0-滚动，1-静止
+    margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
+    antiOverlap: true, // 是否防重叠
+    useWorker: true, // 是否使用 web worker
+    synchronousPlayback: false, // 是否同步到播放速度
+    filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
+    lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
+    maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
+    minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
+    maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
+    theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
+    heatmap: true, // 是否开启弹幕热度图, 默认为 false
+    beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
+    // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
+    mount: document.querySelector('.artplayer-danmuku'),
+}

Using Danmuku Array ​

`,10),e=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),k=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            // Danmuku array
+            danmuku: [
+                {
+                    text: '111', // Danmuku text
+                    time: 1, // Send time, in seconds
+                    color: '#fff', // Danmuku local color
+                    border: false, // Whether to display outline
+                    mode: 0, // Danmuku mode: 0 for scrolling, 1 for stationary
+                },
+                {
+                    text: '222',
+                    time: 2,
+                    color: 'red',
+                    border: true,
+                    mode: 0,
+                },
+                {
+                    text: '333',
+                    time: 3,
+                    color: 'green',
+                    border: false,
+                    mode: 1,
+                },
+            ],
+        }),
+    ],
+});

Using Danmuku XML ​

`,2),t=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),r=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            // Danmuku XML file, consistent with the danmuku format of the Bilibili website
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});

Using Asynchronous Call ​

`,2),E=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),d=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            // Use Promise to return asynchronously
+            danmuku: function () {
+                return new Promise((resolve) => {
+                    return resolve([
+                        {
+                            text: '111',
+                            time: 1,
+                        },
+                        {
+                            text: '222',
+                            time: 2,
+                        },
+                        {
+                            text: '333',
+                            time: 3,
+                        },
+                    ]);
+                });
+            },
+        }),
+    ],
+});

hide/show ​

Hide or show the bullet comments with the methods hide and show.

`,3),g=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),c=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Hide Danmuku',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.hide();
+            },
+        },
+        {
+            position: 'right',
+            html: 'Show Danmuku',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.show();
+            },
+        },
+    ],
+});

isHide ​

Judge whether the current barrage is hidden or displayed with the isHide property.

`,3),y=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),u=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Hide Barrage',
+            click: function (_, event) {
+                if (art.plugins.artplayerPluginDanmuku.isHide) {
+                    art.plugins.artplayerPluginDanmuku.show();
+                    event.target.innerText = 'Hide Barrage';
+                } else {
+                    art.plugins.artplayerPluginDanmuku.hide();
+                    event.target.innerText = 'Show Barrage';
+                }
+            },
+        },
+    ],
+});

emit ​

Send a real-time danmaku message through the emit method

`,3),b=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),m=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Send Danmaku',
+            click: function () {
+                var text = prompt('Please enter the danmaku text', 'Danmaku test text');
+                if (!text || !text.trim()) return;
+                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
+                art.plugins.artplayerPluginDanmuku.emit({
+                    text: text,
+                    color: color,
+                    border: true,
+                });
+            },
+        },
+    ],
+});

config ​

Change the barrage configuration in real-time with the config method, supported attributes include:

  • danmuku
  • speed
  • opacity
  • fontSize
  • color
  • mode
  • margin
  • antiOverlap
  • synchronousPlayback
  • filter
  • lockTime
  • beforeEmit
`,4),o=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),F=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Danmaku size：<input type="range" min="12" max="50" step="1" value="25">',
+            style: {
+                display: 'flex',
+                alignItems: 'center',
+            },
+            mounted: function ($setting) {
+                const $range = $setting.querySelector('input[type=range]');
+                $range.addEventListener('change', () => {
+                    art.plugins.artplayerPluginDanmuku.config({
+                        fontSize: Number($range.value),
+                    });
+                });
+            },
+        },
+    ],
+});

load ​

The load method can be used to reload the danmu data source or switch to new danmu.

`,3),C=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),B=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Reload Danmu',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+        {
+            position: 'right',
+            html: 'Switch Danmu',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.config({
+                    danmuku: '/assets/sample/danmuku-v2.xml',
+                });
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+    ],
+});

reset ​

Used to clear the current displayed barrages

`,3),D=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),v=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('resize', () => {
+    art.plugins.artplayerPluginDanmuku.reset();
+});

option ​

Used to get the current barrage configuration

`,3),A=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),_=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('ready', () => {
+    console.info(art.plugins.artplayerPluginDanmuku.option);
+});

Event ​

js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('artplayerPluginDanmuku:emit', (danmu) => {
+    console.info('新增弹幕', danmu);
+});
+
+art.on('artplayerPluginDanmuku:loaded', (danmus) => {
+    console.info('加载弹幕', danmus.length);
+});
+
+art.on('artplayerPluginDanmuku:error', (error) => {
+    console.info('加载错误', error);
+});
+
+art.on('artplayerPluginDanmuku:config', (option) => {
+    console.info('配置变化', option);
+});
+
+art.on('artplayerPluginDanmuku:stop', () => {
+    console.info('弹幕停止');
+});
+
+art.on('artplayerPluginDanmuku:start', () => {
+    console.info('弹幕开始');
+});
+
+art.on('artplayerPluginDanmuku:hide', () => {
+    console.info('弹幕隐藏');
+});
+
+art.on('artplayerPluginDanmuku:show', () => {
+    console.info('弹幕显示');
+});
+
+art.on('artplayerPluginDanmuku:destroy', () => {
+    console.info('弹幕销毁');
+});
`,3),f=[h,e,k,t,r,E,d,g,c,y,u,b,m,o,F,C,B,D,v,A,_];function P(T,x,w,S,q,j){return n(),l("div",null,f)}const R=a(p,[["render",P]]);export{I as __pageData,R as default}; diff --git a/docs/document/assets/en_plugin_danmuku.md.pycJIXGa.lean.js b/docs/document/assets/en_plugin_danmuku.md.pycJIXGa.lean.js new file mode 100644 index 000000000..b3d13babb --- /dev/null +++ b/docs/document/assets/en_plugin_danmuku.md.pycJIXGa.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const I=JSON.parse('{"title":"Danmuku","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/danmuku.md","filePath":"en/plugin/danmuku.md","lastUpdated":1700976934000}'),p={name:"en/plugin/danmuku.md"},h=s("",10),e=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),k=s("",2),t=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),r=s("",2),E=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),d=s("",3),g=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),c=s("",3),y=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),u=s("",3),b=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),m=s("",4),o=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),F=s("",3),C=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),B=s("",3),D=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),v=s("",3),A=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),_=s("",3),f=[h,e,k,t,r,E,d,g,c,y,u,b,m,o,F,C,B,D,v,A,_];function P(T,x,w,S,q,j){return n(),l("div",null,f)}const R=a(p,[["render",P]]);export{I as __pageData,R as default}; diff --git a/docs/document/assets/en_plugin_dash-quality.md.ed691a8e.js b/docs/document/assets/en_plugin_dash-quality.md.ed691a8e.js deleted file mode 100644 index c51d157a2..000000000 --- a/docs/document/assets/en_plugin_dash-quality.md.ed691a8e.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as s,c as e,S as l}from"./chunks/framework.532b6b18.js";const y=JSON.parse('{"title":"Dash 画质","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/dash-quality.md","filePath":"en/plugin/dash-quality.md","lastUpdated":1676696783000}'),n={name:"en/plugin/dash-quality.md"},t=l('

Dash 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-dash-quality
bash
yarn add artplayer-plugin-dash-quality
bash
pnpm add artplayer-plugin-dash-quality
html
<script src="path/to/artplayer-plugin-dash-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
bash
https://unpkg.com/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
',7),p=[t];function i(r,o,d,c,u,h){return s(),e("div",null,p)}const m=a(n,[["render",i]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/en_plugin_dash-quality.md.ed691a8e.lean.js b/docs/document/assets/en_plugin_dash-quality.md.ed691a8e.lean.js deleted file mode 100644 index f842bb025..000000000 --- a/docs/document/assets/en_plugin_dash-quality.md.ed691a8e.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as s,c as e,S as l}from"./chunks/framework.532b6b18.js";const y=JSON.parse('{"title":"Dash 画质","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/dash-quality.md","filePath":"en/plugin/dash-quality.md","lastUpdated":1676696783000}'),n={name:"en/plugin/dash-quality.md"},t=l("",7),p=[t];function i(r,o,d,c,u,h){return s(),e("div",null,p)}const m=a(n,[["render",i]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/en_plugin_dash-quality.md.jzW8-qLV.js b/docs/document/assets/en_plugin_dash-quality.md.jzW8-qLV.js new file mode 100644 index 000000000..f6880e88e --- /dev/null +++ b/docs/document/assets/en_plugin_dash-quality.md.jzW8-qLV.js @@ -0,0 +1 @@ +import{_ as a,o as s,c as i,R as e}from"./chunks/framework.E60viAY0.js";const k=JSON.parse('{"title":"Dash Video Quality","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/dash-quality.md","filePath":"en/plugin/dash-quality.md","lastUpdated":1700976201000}'),t={name:"en/plugin/dash-quality.md"},l=e('

Dash Video Quality ​

Demo ​

👉 View the full demo

Installation ​

bash
npm install artplayer-plugin-dash-quality
bash
yarn add artplayer-plugin-dash-quality
bash
pnpm add artplayer-plugin-dash-quality
html
<script src="path/to/artplayer-plugin-dash-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
bash
https://unpkg.com/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
',7),n=[l];function p(d,r,h,o,c,u){return s(),i("div",null,n)}const g=a(t,[["render",p]]);export{k as __pageData,g as default}; diff --git a/docs/document/assets/en_plugin_dash-quality.md.jzW8-qLV.lean.js b/docs/document/assets/en_plugin_dash-quality.md.jzW8-qLV.lean.js new file mode 100644 index 000000000..d84030cb7 --- /dev/null +++ b/docs/document/assets/en_plugin_dash-quality.md.jzW8-qLV.lean.js @@ -0,0 +1 @@ +import{_ as a,o as s,c as i,R as e}from"./chunks/framework.E60viAY0.js";const k=JSON.parse('{"title":"Dash Video Quality","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/dash-quality.md","filePath":"en/plugin/dash-quality.md","lastUpdated":1700976201000}'),t={name:"en/plugin/dash-quality.md"},l=e("",7),n=[l];function p(d,r,h,o,c,u){return s(),i("div",null,n)}const g=a(t,[["render",p]]);export{k as __pageData,g as default}; diff --git a/docs/document/assets/en_plugin_hls-quality.md.8a5de55a.js b/docs/document/assets/en_plugin_hls-quality.md.8a5de55a.js deleted file mode 100644 index f19de9d5e..000000000 --- a/docs/document/assets/en_plugin_hls-quality.md.8a5de55a.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as s,c as l,S as e}from"./chunks/framework.532b6b18.js";const y=JSON.parse('{"title":"HLS 画质","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/hls-quality.md","filePath":"en/plugin/hls-quality.md","lastUpdated":1673692792000}'),n={name:"en/plugin/hls-quality.md"},p=e('

HLS 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-hls-quality
bash
yarn add artplayer-plugin-hls-quality
bash
pnpm add artplayer-plugin-hls-quality
html
<script src="path/to/artplayer-plugin-hls-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
bash
https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
',7),t=[p];function i(r,o,c,d,u,h){return s(),l("div",null,t)}const m=a(n,[["render",i]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/en_plugin_hls-quality.md.8a5de55a.lean.js b/docs/document/assets/en_plugin_hls-quality.md.8a5de55a.lean.js deleted file mode 100644 index 147b011d0..000000000 --- a/docs/document/assets/en_plugin_hls-quality.md.8a5de55a.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as s,c as l,S as e}from"./chunks/framework.532b6b18.js";const y=JSON.parse('{"title":"HLS 画质","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/hls-quality.md","filePath":"en/plugin/hls-quality.md","lastUpdated":1673692792000}'),n={name:"en/plugin/hls-quality.md"},p=e("",7),t=[p];function i(r,o,c,d,u,h){return s(),l("div",null,t)}const m=a(n,[["render",i]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/en_plugin_hls-quality.md.TidRTREF.js b/docs/document/assets/en_plugin_hls-quality.md.TidRTREF.js new file mode 100644 index 000000000..854caea96 --- /dev/null +++ b/docs/document/assets/en_plugin_hls-quality.md.TidRTREF.js @@ -0,0 +1 @@ +import{_ as a,o as s,c as i,R as e}from"./chunks/framework.E60viAY0.js";const k=JSON.parse('{"title":"HLS Quality","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/hls-quality.md","filePath":"en/plugin/hls-quality.md","lastUpdated":1700976201000}'),t={name:"en/plugin/hls-quality.md"},l=e('

HLS Quality ​

Demonstration ​

👉 View the full demo

Installation ​

bash
npm install artplayer-plugin-hls-quality
bash
yarn add artplayer-plugin-hls-quality
bash
pnpm add artplayer-plugin-hls-quality
html
<script src="path/to/artplayer-plugin-hls-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
bash
https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
',7),n=[l];function p(r,h,d,o,c,u){return s(),i("div",null,n)}const g=a(t,[["render",p]]);export{k as __pageData,g as default}; diff --git a/docs/document/assets/en_plugin_hls-quality.md.TidRTREF.lean.js b/docs/document/assets/en_plugin_hls-quality.md.TidRTREF.lean.js new file mode 100644 index 000000000..c6d4c0afa --- /dev/null +++ b/docs/document/assets/en_plugin_hls-quality.md.TidRTREF.lean.js @@ -0,0 +1 @@ +import{_ as a,o as s,c as i,R as e}from"./chunks/framework.E60viAY0.js";const k=JSON.parse('{"title":"HLS Quality","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/hls-quality.md","filePath":"en/plugin/hls-quality.md","lastUpdated":1700976201000}'),t={name:"en/plugin/hls-quality.md"},l=e("",7),n=[l];function p(r,h,d,o,c,u){return s(),i("div",null,n)}const g=a(t,[["render",p]]);export{k as __pageData,g as default}; diff --git a/docs/document/assets/en_plugin_iframe.md.ae3ab65b.js b/docs/document/assets/en_plugin_iframe.md.ae3ab65b.js deleted file mode 100644 index 146987a9a..000000000 --- a/docs/document/assets/en_plugin_iframe.md.ae3ab65b.js +++ /dev/null @@ -1,166 +0,0 @@ -import{_ as s,o as a,c as n,S as l}from"./chunks/framework.532b6b18.js";const A=JSON.parse('{"title":"Iframe 控制","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/iframe.md","filePath":"en/plugin/iframe.md","lastUpdated":1680272727000}'),p={name:"en/plugin/iframe.md"},o=l(`

Iframe 控制 ​

说明 ​

通过该插件，你可以轻松在 index.html 里控制跨域 iframe.html 页面里的播放器，如在 index.html 里通过代码控制 iframe.html 播放器的功能，或者获取 iframe.html 播放器的值

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-iframe
bash
yarn add artplayer-plugin-iframe
bash
pnpm add artplayer-plugin-iframe
html
<script src="path/to/artplayer-plugin-iframe.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
bash
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js

使用 ​

html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-    </head>
-    <body>
-        <iframe id="iframe"></iframe>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            const iframe = new ArtplayerPluginIframe({
-                // Iframe element
-                iframe: document.querySelector('#iframe'),
-                // Iframe url
-                url: 'path/to/iframe.html',
-            });
-
-            // Send message to iframe
-            iframe.commit(() => {
-                var art = new Artplayer({
-                    container: '.artplayer-app',
-                    url: 'path/to/video.mp4',
-                });
-            });
-        </script>
-    </body>
-</html>
html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-        <style>
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                padding: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
-        <script src="path/to/artplayer.js"></script>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            // Inject scripts to receive messages from instances
-            ArtplayerPluginIframe.inject();
-        </script>
-    </body>
-</html>

index.html 接口 ​

commit ​

从 index.html 将消息推送到 iframe.html，该函数将在 iframe.html 内部运行，同时它也能用于异步获取 iframe.html 里的值

js
iframe.commit(() => {
-    var art = new Artplayer({
-        container: '.artplayer-app',
-        url: 'path/to/video.mp4',
-    });
-});
-
-iframe.commit(() => {
-    art.seek = 5;
-});
-
-// Get the value from the iframe.html
-(async function () {
-    // Use the return keyword
-    var currentTime = await iframe.commit(() => {
-        return art.currentTime;
-    });
-
-    // or use the resolve method
-    var currentTime2 = await iframe.commit((resolve) => {
-        setTimeout(() => {
-            resolve(art.currentTime);
-        }, 1000);
-    });
-})();

message ​

在 index.html 接收来自 iframe.html 的消息

js
iframe.message((event) => {
-    console.info(event);
-});

destroy ​

销毁后 index.html 无法与 iframe.html 通信

js
iframe.destroy();

iframe.html 接口 ​

提示

iframe.html 接口 只能运行在 iframe.html 里

inject ​

注入脚本，接收来自 index.html 的消息

js
ArtplayerPluginIframe.inject();

postMessage ​

将消息推送到 index.html

js
iframe.message((event) => {
-    console.info(event);
-});
-
-iframe.commit(() => {
-    ArtplayerPluginIframe.postMessage({
-        type: 'currentTime',
-        data: art.currentTime,
-    });
-});

例子 ​

最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 iframe.html 里的 fullscreenWeb 事件并通知到 index.html 即可

html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-    </head>
-    <body>
-        <iframe id="iframe"></iframe>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <style>
-            .fullscreenWeb {
-                position: fixed;
-                z-index: 9999;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                right: 0;
-                bottom: 0;
-            }
-        </style>
-        <script>
-            const $iframe = document.querySelector('#iframe');
-            const iframe = new ArtplayerPluginIframe({
-                iframe: $iframe,
-                url: 'path/to/iframe.html',
-            });
-
-            iframe.message(({ type, data }) => {
-                switch (type) {
-                    case 'fullscreenWeb':
-                        if (data) {
-                            $iframe.classList.add('fullscreenWeb');
-                        } else {
-                            $iframe.classList.remove('fullscreenWeb');
-                        }
-                        break;
-                    default:
-                        break;
-                }
-            });
-
-            iframe.commit(() => {
-                var art = new Artplayer({
-                    container: '.artplayer-app',
-                    url: 'path/to/video.mp4',
-                });
-
-                art.on('fullscreenWeb', (state) => {
-                    ArtplayerPluginIframe.postMessage({
-                        type: 'fullscreenWeb',
-                        data: state,
-                    });
-                });
-            });
-        </script>
-    </body>
-</html>
html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-        <style>
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                padding: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
-        <script src="path/to/artplayer.js"></script>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            ArtplayerPluginIframe.inject();
-        </script>
-    </body>
-</html>
`,32),e=[o];function r(t,c,F,D,y,i){return a(),n("div",null,e)}const b=s(p,[["render",r]]);export{A as __pageData,b as default}; diff --git a/docs/document/assets/en_plugin_iframe.md.ae3ab65b.lean.js b/docs/document/assets/en_plugin_iframe.md.ae3ab65b.lean.js deleted file mode 100644 index f0753bff6..000000000 --- a/docs/document/assets/en_plugin_iframe.md.ae3ab65b.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,o as a,c as n,S as l}from"./chunks/framework.532b6b18.js";const A=JSON.parse('{"title":"Iframe 控制","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/iframe.md","filePath":"en/plugin/iframe.md","lastUpdated":1680272727000}'),p={name:"en/plugin/iframe.md"},o=l("",32),e=[o];function r(t,c,F,D,y,i){return a(),n("div",null,e)}const b=s(p,[["render",r]]);export{A as __pageData,b as default}; diff --git a/docs/document/assets/en_plugin_iframe.md.ufbDiAl_.js b/docs/document/assets/en_plugin_iframe.md.ufbDiAl_.js new file mode 100644 index 000000000..b683990ab --- /dev/null +++ b/docs/document/assets/en_plugin_iframe.md.ufbDiAl_.js @@ -0,0 +1,168 @@ +import{_ as s,o as i,c as a,R as n}from"./chunks/framework.E60viAY0.js";const y=JSON.parse('{"title":"Iframe Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/iframe.md","filePath":"en/plugin/iframe.md","lastUpdated":1700976201000}'),l={name:"en/plugin/iframe.md"},p=n(`

Iframe Control ​

Description ​

With this plugin, you can easily control the player inside the cross-domain iframe.html page from within index.html. For example, you can control the functionalities of the iframe.html player from index.html or retrieve the values of the iframe.html player.

Demonstration ​

👉 View full demonstration

Installation ​

bash
npm install artplayer-plugin-iframe
bash
yarn add artplayer-plugin-iframe
bash
pnpm add artplayer-plugin-iframe
html
<script src="path/to/artplayer-plugin-iframe.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
bash
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js

Usage ​

html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            const iframe = new ArtplayerPluginIframe({
+                // Iframe element
+                iframe: document.querySelector('#iframe'),
+                // Iframe url
+                url: 'path/to/iframe.html',
+            });
+
+            // Send message to iframe
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
+            });
+        </script>
+    </body>
+</html>
html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            // Inject scripts to receive messages from instances
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>

index.html Interface ​

commit ​

Push messages from index.html to iframe.html. This function will run inside iframe.html and can also be used to asynchronously retrieve values from within iframe.html.

js
iframe.commit(() => {
+    var art = new Artplayer({
+        container: '.artplayer-app',
+        url: 'path/to/video.mp4',
+    });
+});
+
+iframe.commit(() => {
+    art.seek = 5;
+});
+
+// Get the value from the iframe.html
+(async function () {
+    // Use the return keyword
+    var currentTime = await iframe.commit(() => {
+        return art.currentTime;
+    });
+
+    // or use the resolve method
+    var currentTime2 = await iframe.commit((resolve) => {
+        setTimeout(() => {
+            resolve(art.currentTime);
+        }, 1000);
+    });
+})();

message ​

Receive messages from iframe.html in index.html

js
iframe.message((event) => {
+    console.info(event);
+});

destroy ​

After destruction, index.html can no longer communicate with iframe.html

js
iframe.destroy();

iframe.html Interface ​

Warning

The iframe.html interface can only run inside iframe.html

inject ​

Inject a script, receive messages from index.html

js
ArtplayerPluginIframe.inject();

postMessage ​

Push messages to index.html

js
iframe.message((event) => {
+    console.info(event);
+});
+
+iframe.commit(() => {
+    ArtplayerPluginIframe.postMessage({
+        type: 'currentTime',
+        data: art.currentTime,
+    });
+});

例子 ​

最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 iframe.html 里的 fullscreenWeb 事件并通知到 index.html 即可

html

+<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <style>
+            .fullscreenWeb {
+                position: fixed;
+                z-index: 9999;
+                width: 100%;
+                height: 100%;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+            }
+        </style>
+        <script>
+            const $iframe = document.querySelector('#iframe');
+            const iframe = new ArtplayerPluginIframe({
+                iframe: $iframe,
+                url: 'path/to/iframe.html',
+            });
+
+            iframe.message(({ type, data }) => {
+                switch (type) {
+                    case 'fullscreenWeb':
+                        if (data) {
+                            $iframe.classList.add('fullscreenWeb');
+                        } else {
+                            $iframe.classList.remove('fullscreenWeb');
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            });
+
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
+
+                art.on('fullscreenWeb', (state) => {
+                    ArtplayerPluginIframe.postMessage({
+                        type: 'fullscreenWeb',
+                        data: state,
+                    });
+                });
+            });
+        </script>
+    </body>
+</html>
html

+<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>
`,32),h=[p];function e(t,k,r,E,d,g){return i(),a("div",null,h)}const b=s(l,[["render",e]]);export{y as __pageData,b as default}; diff --git a/docs/document/assets/en_plugin_iframe.md.ufbDiAl_.lean.js b/docs/document/assets/en_plugin_iframe.md.ufbDiAl_.lean.js new file mode 100644 index 000000000..6fd78bab6 --- /dev/null +++ b/docs/document/assets/en_plugin_iframe.md.ufbDiAl_.lean.js @@ -0,0 +1 @@ +import{_ as s,o as i,c as a,R as n}from"./chunks/framework.E60viAY0.js";const y=JSON.parse('{"title":"Iframe Control","description":"","frontmatter":{},"headers":[],"relativePath":"en/plugin/iframe.md","filePath":"en/plugin/iframe.md","lastUpdated":1700976201000}'),l={name:"en/plugin/iframe.md"},p=n("",32),h=[p];function e(t,k,r,E,d,g){return i(),a("div",null,h)}const b=s(l,[["render",e]]);export{y as __pageData,b as default}; diff --git a/docs/document/assets/en_start_i18n.md.63002da5.js b/docs/document/assets/en_start_i18n.md.63002da5.js deleted file mode 100644 index 9fd62ad4f..000000000 --- a/docs/document/assets/en_start_i18n.md.63002da5.js +++ /dev/null @@ -1,52 +0,0 @@ -import{_ as s,o as a,c as n,S as l}from"./chunks/framework.532b6b18.js";const A=JSON.parse('{"title":"Language","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/i18n.md","filePath":"en/start/i18n.md","lastUpdated":1693027339000}'),p={name:"en/start/i18n.md"},e=l(`

Language ​

DANGER

In view of the fact that more and more languages are bundled, starting from version 5.1.0, the core code of artplayer.js will no longer bundle other languages except Simplified Chinese and English, and you need to import the required language.

WARNING

When the language cannot be matched, English will be displayed by default, i18n writing reference: artplayer/types/i18n.d.ts

Default language ​

The default languages are: en, zh-cn, no need to import manually

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'zh-cn', // or 'en'
-});

Import language ​

The language files before packaging are stored in: artplayer/src/i18n/*.js, welcome to add your language

The packaged language files are stored in: artplayer/dist/i18n/*.js

Manually imported languages are: cs, es, fa, fr, id, pl, ru, zh-tw

js
import id from 'artplayer/dist/i18n/id.js';
-import zhTw from 'artplayer/dist/i18n/zh-tw.js';
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: { 
-        id: id,
-        'zh-tw': zhTw,
-    },
-    lang: 'zh-tw',
-});
js
<script src="artplayer/dist/i18n/id.js"></script>
-<script src="artplayer/dist/i18n/zh-tw.js"></script>
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: { 
-        id: window['artplayer-i18n-id'],
-        'zh-tw': window['artplayer-i18n-zh-tw'],
-    },
-    lang: 'zh-tw',
-});

New language ​

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'your-lang',
-    i18n: {
-        'your-lang': {
-            Play: 'Your Play'
-        },
-    },
-});

Change language ​

js
import zhTw from 'artplayer/i18n/zh-tw.js';
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: {
-        // Change the default language
-        'zh-cn': {
-            Play: 'Your Play'
-        },
-        // Change the imported language
-        'zh-tw': {
-            ...zhTw,
-            Play: 'Your Play'
-        },
-    },
-});
`,15),o=[e];function r(t,c,D,y,F,i){return a(),n("div",null,o)}const d=s(p,[["render",r]]);export{A as __pageData,d as default}; diff --git a/docs/document/assets/en_start_i18n.md.63002da5.lean.js b/docs/document/assets/en_start_i18n.md.63002da5.lean.js deleted file mode 100644 index f6adf87ff..000000000 --- a/docs/document/assets/en_start_i18n.md.63002da5.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,o as a,c as n,S as l}from"./chunks/framework.532b6b18.js";const A=JSON.parse('{"title":"Language","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/i18n.md","filePath":"en/start/i18n.md","lastUpdated":1693027339000}'),p={name:"en/start/i18n.md"},e=l("",15),o=[e];function r(t,c,D,y,F,i){return a(),n("div",null,o)}const d=s(p,[["render",r]]);export{A as __pageData,d as default}; diff --git a/docs/document/assets/en_start_i18n.md.eJXPNaQ_.js b/docs/document/assets/en_start_i18n.md.eJXPNaQ_.js new file mode 100644 index 000000000..29910e79a --- /dev/null +++ b/docs/document/assets/en_start_i18n.md.eJXPNaQ_.js @@ -0,0 +1,52 @@ +import{_ as s,o as a,c as i,R as n}from"./chunks/framework.E60viAY0.js";const o=JSON.parse('{"title":"Language Settings","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/i18n.md","filePath":"en/start/i18n.md","lastUpdated":1700976201000}'),l={name:"en/start/i18n.md"},e=n(`

Language Settings ​

DANGER

Given the increasing number of bundled multilingual packs, starting from version 5.1.0, the core code of artplayer.js will no longer include other languages besides Simplified Chinese and English. You need to import the required languages on your own.

WARNING

When a language cannot be matched, English will be displayed by default. For i18n usage, refer to: artplayer/types/i18n.d.ts

Default Languages ​

The default languages are: en, zh-cn, which do not require manual import.

js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'zh-cn', // or 'en'
+});

Importing Languages ​

Language files before packaging are located in: artplayer/src/i18n/*.js. You are welcome to add your language. Packaged language files are located at: artplayer/dist/i18n/*.js

Manually imported languages include: cs, es, fa, fr, id, pl, ru, zh-tw

js
import id from 'artplayer/dist/i18n/id.js';
+import zhTw from 'artplayer/dist/i18n/zh-tw.js';
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: { 
+        id: id,
+        'zh-tw': zhTw,
+    },
+    lang: 'zh-tw',
+});
js
<script src="artplayer/dist/i18n/id.js"></script>
+<script src="artplayer/dist/i18n/zh-tw.js"></script>
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: { 
+        id: window['artplayer-i18n-id'],
+        'zh-tw': window['artplayer-i18n-zh-tw'],
+    },
+    lang: 'zh-tw',
+});

Add Language ​

js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'your-lang',
+    i18n: {
+        'your-lang': {
+            Play: 'Your Play'
+        },
+    },
+});

Modify Language ​

js
import zhTw from 'artplayer/i18n/zh-tw.js';
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: {
+        // Change the default language
+        'zh-cn': {
+            Play: 'Your Play'
+        },
+        // Change the imported language
+        'zh-tw': {
+            ...zhTw,
+            Play: 'Your Play'
+        },
+    },
+});
`,14),p=[e];function t(h,r,k,d,E,g){return a(),i("div",null,p)}const y=s(l,[["render",t]]);export{o as __pageData,y as default}; diff --git a/docs/document/assets/en_start_i18n.md.eJXPNaQ_.lean.js b/docs/document/assets/en_start_i18n.md.eJXPNaQ_.lean.js new file mode 100644 index 000000000..e2d97b69c --- /dev/null +++ b/docs/document/assets/en_start_i18n.md.eJXPNaQ_.lean.js @@ -0,0 +1 @@ +import{_ as s,o as a,c as i,R as n}from"./chunks/framework.E60viAY0.js";const o=JSON.parse('{"title":"Language Settings","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/i18n.md","filePath":"en/start/i18n.md","lastUpdated":1700976201000}'),l={name:"en/start/i18n.md"},e=n("",14),p=[e];function t(h,r,k,d,E,g){return a(),i("div",null,p)}const y=s(l,[["render",t]]);export{o as __pageData,y as default}; diff --git a/docs/document/assets/en_start_option.md.096c4d13.js b/docs/document/assets/en_start_option.md.096c4d13.js deleted file mode 100644 index 9b9adf6b4..000000000 --- a/docs/document/assets/en_start_option.md.096c4d13.js +++ /dev/null @@ -1,380 +0,0 @@ -import{_ as n,o as l,c as p,S as s,k as a}from"./chunks/framework.532b6b18.js";const ra=JSON.parse('{"title":"Option","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1693027339000}'),e={name:"en/start/option.md"},o=s('

Option ​

container ​

  • Type: String, Element
  • Default: #artplayer

The DOM container attached to the player

',4),t=a("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app', 
-    // container: document.querySelector('.artplayer-app'),
-    url: '/assets/sample/video.mp4',
-});

You may need to initialize the size of container elements, such as:

css
.artplayer-app {
-    width: 400px;
-    height: 300px;
-}

Or use aspect-ratio：

css
.artplayer-app {
-    aspect-ratio: 16/9;
-}

Tip

Of all options, only container is required

url ​

  • Type: String
  • Default: ''

Video source address

`,9),c=a("div",{className:"run-code"},"▶ Run Code",-1),i=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

Sometimes the url address is not known so quickly. At this time, you can set the url asynchronously

`,2),D=a("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-});
-
-setTimeout(() => {
-    art.url = '/assets/sample/video.mp4';
-}, 1000);

Tip

Three video file formats are supported by default: .mp4, .ogg, and .webm

If you need to play .m3u8 or .flv or other formats, please refer to the Libraries on the left

id ​

  • Type: String
  • Default: ''

The unique identifier of the player, currently only used for autoplayback

`,5),F=a("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
-    id: 'your-url-id',
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

onReady ​

  • Type: Function
  • Default: undefined

The constructor accepts a function as the second parameter, which is triggered when the player is initialized successfully and the video can be played, just like the ready event

`,4),d=a("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer(
-    {
-        container: '.artplayer-app',
-        url: '/assets/sample/video.mp4',
-        muted: true,
-    },
-    function onReady(art) {
-        this.play()
-    },
-);

Equivalent to:

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    art.play();
-});

Tip

The this in the callback function is the player instance, but if the callback function uses the arrow function, the this will not point to the player instance

poster ​

  • Type: String
  • Default: ''

Video posters will only appear when the player is initialized and not played

`,7),h=a("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    poster: '/assets/sample/poster.jpg',
-});

theme ​

  • Type: String
  • Default: #f00

The player theme color is currently used on the progress bar and highlighted element

`,4),b=a("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    theme: '#ffad00',
-});

volume ​

  • Type: Number
  • Default: 0.7

Default volume of player

`,4),g=a("div",{className:"run-code"},"▶ Run Code",-1),_=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    volume: 0.5,
-});

Tip

The player will cache the size of the last volume, and the player will read the cache value at the next initialization (such as refreshing the page)

isLive ​

  • Type: Boolean
  • Default: false

When using live mode, the progress bar and playback time will be hidden

`,5),v=a("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    isLive: true,
-});

muted ​

  • Type: Boolean
  • Default: false

Whether to mute by default

`,4),f=a("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});

autoplay ​

  • Type: Boolean
  • Default: false

Whether to play automatically

`,4),S=a("div",{className:"run-code"},"▶ Run Code",-1),k=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoplay: true,
-    muted: true,
-});

Tip

If you want to enter the page by default to automatically play the video, muted must be true. For more information, please read Autoplay Policy Changes

autoSize ​

  • Type: Boolean
  • Default: false

The size of the player will fill the entire container size by default, so black edges often appear. This value can automatically adjust the size of the player to hide the black edges, similar to the object-fit: contain of css

`,5),w=a("div",{className:"run-code"},"▶ Run Code",-1),P=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-});

autoMini ​

  • Type: Boolean
  • Default: false

When the player scrolls outside the viewport, it automatically enters the mini mode

`,4),q=a("div",{className:"run-code"},"▶ Run Code",-1),V=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoMini: true,
-});

loop ​

  • Type: Boolean
  • Default: false

Whether to play in a loop

`,4),I=a("div",{className:"run-code"},"▶ Run Code",-1),j=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    loop: true,
-});

flip ​

  • Type: Boolean
  • Default: false

Whether to display the video flip function currently only appears in the Setting and Contextmenu

`,4),R=a("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    flip: true,
-    setting: true,
-});

playbackRate ​

  • Type: Boolean
  • Default: false

Whether to display the video playback speed function will appear in the Setting and Contextmenu

`,4),x=a("div",{className:"run-code"},"▶ Run Code",-1),B=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    playbackRate: true,
-    setting: true,
-});

aspectRatio ​

  • Type: Boolean
  • Default: false

Whether to display the video aspect ratio function will appear in the Setting and Contextmenu

`,4),z=a("div",{className:"run-code"},"▶ Run Code",-1),W=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    aspectRatio: true,
-    setting: true,
-});

screenshot ​

  • Type: Boolean
  • Default: false

Whether to display the video screenshot function in the bottom control bar

`,4),O=a("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    screenshot: true,
-});

Tip

Due to the browser security policy, if the video source address and website are cross-domain, the screenshot may fail

setting ​

  • Type: Boolean
  • Default: false

Whether to display the switch button of Setting in the bottom control bar

`,5),H=a("div",{className:"run-code"},"▶ Run Code",-1),L=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});

hotkey ​

  • Type: Boolean
  • Default: true

Whether to use shortcut keys

`,4),$=a("div",{className:"run-code"},"▶ Run Code",-1),Y=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    hotkey: true,
-});
HotkeysSescribe
↑Volume Up
↓Volume Down
←Fast forward
→Fast rewind
spaceToggle play/pause

Tip

These shortcut keys will only take effect after the player gets the focus (such as clicking the player)

pip ​

  • Type: Boolean
  • Default: false

Whether to display the picture in picture switch button in the bottom control bar

`,6),Q=a("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    pip: true,
-});

mutex ​

  • Type: Boolean
  • Default: true

If there are multiple players in the page at the same time, can only one player play

`,4),G=a("div",{className:"run-code"},"▶ Run Code",-1),J=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    mutex: true,
-});

fullscreen ​

  • Type: Boolean
  • Default: false

Whether to display the player window full screen button in the bottom control bar

`,4),K=a("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-});

fullscreenWeb ​

  • Type: Boolean
  • Default: false

Whether to display the player full screen web page button in the bottom control bar

`,4),Z=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});

subtitleOffset ​

  • Type: Boolean
  • Default: false

Subtitle time offset, with the range of [-5s, 5s], appears in the Settings

`,4),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitleOffset: true,
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-    setting: true,
-});

miniProgressBar ​

  • Type: Boolean
  • Default: false

Mini progress bar, only appears when the player loses focus and is playing

`,4),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    miniProgressBar: true,
-});

useSSR ​

  • Type: Boolean
  • Default: false

Whether to use the SSR mount mode is useful if you want to render the HTML required by the player in advance before the player is mounted

You can access the HTML required by the player through Artplayer.html

`,5),es=a("div",{className:"run-code"},"▶ Run Code",-1),os=s(`
js
var $container = document.querySelector('.artplayer-app');
-$container.innerHTML = Artplayer.html;
-
-var art = new Artplayer({
-    container: $container,
-    url: '/assets/sample/video.mp4',
-    useSSR: true,
-});

playsInline ​

  • Type: Boolean
  • Default: true

Whether to use the playsInline mode on the mobile end

`,4),ts=a("div",{className:"run-code"},"▶ Run Code",-1),rs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    playsInline: true,
-});

layers ​

  • Type: Array
  • Default: []

Initialize the customized layers

`,4),cs=a("div",{className:"run-code"},"▶ Run Code",-1),is=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: \`<img style="width: 100px" src="\${img}">\`,
-            style: {
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-                opacity: '.9',
-            },
-            click: function (...args) {
-                console.info('click', args);
-                art.layers.show = false;
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-    ],
-});

Please refer to the following address for Component:

/component/layers.html

settings ​

  • Type: Array
  • Default: []

Initialize the customized Setting

`,5),Ds=a("div",{className:"run-code"},"▶ Run Code",-1),ys=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'setting01',
-            selector: [
-                {
-                    html: 'setting01-01',
-                },
-                {
-                    html: 'setting01-02',
-                },
-            ],
-            onSelect: function (...args) {
-                console.info(args);
-            },
-        },
-        {
-            html: 'setting02',
-            selector: [
-                {
-                    html: 'setting02-01',
-                },
-                {
-                    html: 'setting02-02',
-                },
-            ],
-            onSelect: function (...args) {
-                console.info(args);
-            },
-        },
-    ],
-});

Please refer to the following address for Setting

/component/setting.html

contextmenu ​

  • Type: Array
  • Default: []

Initialize the customized Contextmenu

`,5),Fs=a("div",{className:"run-code"},"▶ Run Code",-1),Cs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            html: 'your-menu',
-            click: function (...args) {
-                console.info('click', args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});

Please refer to the following address for Component:

/component/contextmenu.html

controls ​

  • Type: Array
  • Default: []

Initialize the customized Controls

`,5),ds=a("div",{className:"run-code"},"▶ Run Code",-1),As=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'left',
-            html: 'your-control',
-            tooltip: 'Your Control',
-            style: {
-                color: 'green',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-        },
-    ],
-});

Please refer to the following address for Setting

/component/controls.html

quality ​

  • Type: Array
  • Default: []

Whether to display the Quality list in the bottom control bar

PropertyTypeDescribe
defaultBooleanDefault quality
htmlStringQuality name
urlStringQuality name
`,6),hs=a("div",{className:"run-code"},"▶ Run Code",-1),us=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    quality: [
-        {
-            default: true,
-            html: 'SD 480P',
-            url: '/assets/sample/video.mp4',
-        },
-        {
-            html: 'HD 720P',
-            url: '/assets/sample/video.mp4',
-        },
-    ],
-});

highlight ​

  • Type: Array
  • Default: []

Display highlight on the progress bar

PropertyTypeDescribe
timeNumberHighlight time
textStringHighlight text
`,5),bs=a("div",{className:"run-code"},"▶ Run Code",-1),ms=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    highlight: [
-        {
-            time: 60,
-            text: 'One more chance',
-        },
-        {
-            time: 120,
-            text: '谁でもいいはずなのに',
-        },
-        {
-            time: 180,
-            text: '夏の想い出がまわる',
-        },
-        {
-            time: 240,
-            text: 'こんなとこにあるはずもないのに',
-        },
-        {
-            time: 300,
-            text: '－－终わり－－',
-        },
-    ],
-});

plugins ​

  • Type: Array
  • Default: []

Initialize customized plugins

`,4),gs=a("div",{className:"run-code"},"▶ Run Code",-1),_s=s(`
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [myPlugin],
-});

thumbnails ​

  • Type: Object
  • Default: {}

Set the thumbnails image on the progress bar

PropertyTypeDescribe
urlStringThumbnail url
numberNumberThumbnail number
columnNumberThumbnail column
widthNumberThumbnail width
heightNumberThumbnail height
`,5),vs=a("div",{className:"run-code"},"▶ Run Code",-1),Ts=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    thumbnails: {
-        url: '/assets/sample/thumbnails.png',
-        number: 60,
-        column: 10,
-    },
-});

Generate preview thumbnails online

artplayer-tool-thumbnail

subtitle ​

  • Type: Object
  • Default: {}

Set the subtitle of the video and support the subtitle format: vtt, srt, ass

PropertyTypeDescribe
urlStringSubtitle url
typeStringSubtitle type: vtt, srt, ass
styleObjectSubtitle style
encodingStringSubtitle code, Default: utf-8
escapeBooleanWhether to escape the html tag,Default: true
onVttLoadFunctionFunctions for modifying vtt text
`,6),fs=a("div",{className:"run-code"},"▶ Run Code",-1),Es=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-        type: 'srt',
-        encoding: 'utf-8',
-        escape: true,
-        style: {
-            color: '#03A9F4',
-            'font-size': '30px',
-        },
-    },
-});

moreVideoAttr ​

  • Type: Object
  • Default: {'controls': false,'preload': 'metadata'}

More video attributes, which will be directly written into the video element

`,4),Ss=a("div",{className:"run-code"},"▶ Run Code",-1),ks=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    moreVideoAttr: {
-        'webkit-playsinline': true,
-        playsInline: true,
-    },
-});

icons ​

  • Type: Object
  • Default: {}

It is used to replace the default icon and supports Html String and HTMLElement

`,4),ws=a("div",{className:"run-code"},"▶ Run Code",-1),Ps=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    icons: {
-        loading: '<img src="/assets/img/ploading.gif">',
-        state: '<img src="/assets/img/state.png">',
-    },
-});

Definition of all icons

artplayer/types/icons.d.ts

type ​

  • Type: String
  • Default: ''

It is used to indicate the format of the video. It needs to be used together with the customType. The default format of the video is the suffix of the video address (such as .m3u8, .mkv, .ts). But sometimes the video address does not have the correct suffix, so it needs to be specially specified

`,5),qs=a("div",{className:"run-code"},"▶ Run Code",-1),Vs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.m3u8',
-    type: 'm3u8',
-});

Identification of suffix

The player can only resolve this suffix: /assets/sample/video.m3u8

However, this suffix cannot be resolved: /assets/sample/video?type=m3u8

So if you use customType, it is better to specify type at the same time

customType ​

  • Type: Object
  • Default: {}

By matching the video's type, the video decoding right is handed over to a third-party program for processing. The processing function can receive three parameters

  • video : Video DOM element
  • url : Video url
  • art : Player instance
`,6),Is=a("div",{className:"run-code"},"▶ Run Code",-1),js=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.m3u8',
-    customType: {
-        m3u8: function (video, url, art) {
-            //
-        },
-    },
-});

lang ​

  • Type: String
  • Default: navigator.language.toLowerCase()

The default display language currently supports: en, zh-cn

`,4),Rs=a("div",{className:"run-code"},"▶ Run Code",-1),Ns=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'en',
-});

More language setting

/en/start/i18n.html

i18n ​

  • Type: Object
  • Default: {}

Customize the i18n configuration, which will be deeply merged with the built-in i18n

Add your language:

`,6),xs=a("div",{className:"run-code"},"▶ Run Code",-1),Bs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'your-lang',
-    i18n: {
-        'your-lang': {
-            Play: 'Your Play'
-        },
-    },
-});

Modify existing language:

`,2),zs=a("div",{className:"run-code"},"▶ Run Code",-1),Ws=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: {
-        'zh-cn': {
-            Play: 'Your Play'
-        },
-        'zh-tw': {
-            Play: 'Your Play'
-        },
-    },
-});

More language setting

/en/start/i18n.html

lock ​

  • Type: Boolean
  • Default: false

Whether to display a lock button on the mobile end to hide the bottom control bar

`,5),Os=a("div",{className:"run-code"},"▶ Run Code",-1),Ms=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lock: true,
-});

fastForward ​

  • Type: Boolean
  • Default: false

Whether to add long-press video fast-forward function on the mobile terminal

`,4),Hs=a("div",{className:"run-code"},"▶ Run Code",-1),Ls=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});

autoPlayback ​

  • Type: Boolean
  • Default: false

Whether to use automatic playback function

`,4),$s=a("div",{className:"run-code"},"▶ Run Code",-1),Ys=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    id: 'your-url-id',
-    autoPlayback: true,
-});

Tip

Because the player uses url as key by default to cache the playback progress

But if your url of the same video is different, you need to use id to identify the unique key of the video

autoOrientation ​

  • Type: Boolean
  • Default: false

Whether to rotate the player according to the video size and viewport size when the mobile page is full screen

`,5),Qs=a("div",{className:"run-code"},"▶ Run Code",-1),Us=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoOrientation: true,
-});

airplay ​

  • Type: Boolean
  • Default: false

Whether to display the airplay button. Currently, only some browsers support this function

`,4),Gs=a("div",{className:"run-code"},"▶ Run Code",-1),Js=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    airplay: true,
-});

cssVar ​

  • Type: Object
  • Default: {}

Used to change built-in CSS variables

`,4),Ks=a("div",{className:"run-code"},"▶ Run Code",-1),Xs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    cssVar: {
-        //
-    },
-});

cssVar definitions

artplayer/types/cssVar.d.d.ts

`,2),Zs=[o,t,r,c,i,D,y,F,C,d,A,h,u,b,m,g,_,v,T,f,E,S,k,w,P,q,V,I,j,R,N,x,B,z,W,O,M,H,L,$,Y,Q,U,G,J,K,X,Z,ss,as,ns,ls,ps,es,os,ts,rs,cs,is,Ds,ys,Fs,Cs,ds,As,hs,us,bs,ms,gs,_s,vs,Ts,fs,Es,Ss,ks,ws,Ps,qs,Vs,Is,js,Rs,Ns,xs,Bs,zs,Ws,Os,Ms,Hs,Ls,$s,Ys,Qs,Us,Gs,Js,Ks,Xs];function sa(aa,na,la,pa,ea,oa){return l(),p("div",null,Zs)}const ca=n(e,[["render",sa]]);export{ra as __pageData,ca as default}; diff --git a/docs/document/assets/en_start_option.md.096c4d13.lean.js b/docs/document/assets/en_start_option.md.096c4d13.lean.js deleted file mode 100644 index d212be0dd..000000000 --- a/docs/document/assets/en_start_option.md.096c4d13.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as n,o as l,c as p,S as s,k as a}from"./chunks/framework.532b6b18.js";const ra=JSON.parse('{"title":"Option","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1693027339000}'),e={name:"en/start/option.md"},o=s("",4),t=a("div",{className:"run-code"},"▶ Run Code",-1),r=s("",9),c=a("div",{className:"run-code"},"▶ Run Code",-1),i=s("",2),D=a("div",{className:"run-code"},"▶ Run Code",-1),y=s("",5),F=a("div",{className:"run-code"},"▶ Run Code",-1),C=s("",4),d=a("div",{className:"run-code"},"▶ Run Code",-1),A=s("",7),h=a("div",{className:"run-code"},"▶ Run Code",-1),u=s("",4),b=a("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),g=a("div",{className:"run-code"},"▶ Run Code",-1),_=s("",5),v=a("div",{className:"run-code"},"▶ Run Code",-1),T=s("",4),f=a("div",{className:"run-code"},"▶ Run Code",-1),E=s("",4),S=a("div",{className:"run-code"},"▶ Run Code",-1),k=s("",5),w=a("div",{className:"run-code"},"▶ Run Code",-1),P=s("",4),q=a("div",{className:"run-code"},"▶ Run Code",-1),V=s("",4),I=a("div",{className:"run-code"},"▶ Run Code",-1),j=s("",4),R=a("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),x=a("div",{className:"run-code"},"▶ Run Code",-1),B=s("",4),z=a("div",{className:"run-code"},"▶ Run Code",-1),W=s("",4),O=a("div",{className:"run-code"},"▶ Run Code",-1),M=s("",5),H=a("div",{className:"run-code"},"▶ Run Code",-1),L=s("",4),$=a("div",{className:"run-code"},"▶ Run Code",-1),Y=s("",6),Q=a("div",{className:"run-code"},"▶ Run Code",-1),U=s("",4),G=a("div",{className:"run-code"},"▶ Run Code",-1),J=s("",4),K=a("div",{className:"run-code"},"▶ Run Code",-1),X=s("",4),Z=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s("",4),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",5),es=a("div",{className:"run-code"},"▶ Run Code",-1),os=s("",4),ts=a("div",{className:"run-code"},"▶ Run Code",-1),rs=s("",4),cs=a("div",{className:"run-code"},"▶ Run Code",-1),is=s("",5),Ds=a("div",{className:"run-code"},"▶ Run Code",-1),ys=s("",5),Fs=a("div",{className:"run-code"},"▶ Run Code",-1),Cs=s("",5),ds=a("div",{className:"run-code"},"▶ Run Code",-1),As=s("",6),hs=a("div",{className:"run-code"},"▶ Run Code",-1),us=s("",5),bs=a("div",{className:"run-code"},"▶ Run Code",-1),ms=s("",4),gs=a("div",{className:"run-code"},"▶ Run Code",-1),_s=s("",5),vs=a("div",{className:"run-code"},"▶ Run Code",-1),Ts=s("",6),fs=a("div",{className:"run-code"},"▶ Run Code",-1),Es=s("",4),Ss=a("div",{className:"run-code"},"▶ Run Code",-1),ks=s("",4),ws=a("div",{className:"run-code"},"▶ Run Code",-1),Ps=s("",5),qs=a("div",{className:"run-code"},"▶ Run Code",-1),Vs=s("",6),Is=a("div",{className:"run-code"},"▶ Run Code",-1),js=s("",4),Rs=a("div",{className:"run-code"},"▶ Run Code",-1),Ns=s("",6),xs=a("div",{className:"run-code"},"▶ Run Code",-1),Bs=s("",2),zs=a("div",{className:"run-code"},"▶ Run Code",-1),Ws=s("",5),Os=a("div",{className:"run-code"},"▶ Run Code",-1),Ms=s("",4),Hs=a("div",{className:"run-code"},"▶ Run Code",-1),Ls=s("",4),$s=a("div",{className:"run-code"},"▶ Run Code",-1),Ys=s("",5),Qs=a("div",{className:"run-code"},"▶ Run Code",-1),Us=s("",4),Gs=a("div",{className:"run-code"},"▶ Run Code",-1),Js=s("",4),Ks=a("div",{className:"run-code"},"▶ Run Code",-1),Xs=s("",2),Zs=[o,t,r,c,i,D,y,F,C,d,A,h,u,b,m,g,_,v,T,f,E,S,k,w,P,q,V,I,j,R,N,x,B,z,W,O,M,H,L,$,Y,Q,U,G,J,K,X,Z,ss,as,ns,ls,ps,es,os,ts,rs,cs,is,Ds,ys,Fs,Cs,ds,As,hs,us,bs,ms,gs,_s,vs,Ts,fs,Es,Ss,ks,ws,Ps,qs,Vs,Is,js,Rs,Ns,xs,Bs,zs,Ws,Os,Ms,Hs,Ls,$s,Ys,Qs,Us,Gs,Js,Ks,Xs];function sa(aa,na,la,pa,ea,oa){return l(),p("div",null,Zs)}const ca=n(e,[["render",sa]]);export{ra as __pageData,ca as default}; diff --git a/docs/document/assets/en_start_option.md.BxS2mkxH.js b/docs/document/assets/en_start_option.md.BxS2mkxH.js new file mode 100644 index 000000000..078f100d6 --- /dev/null +++ b/docs/document/assets/en_start_option.md.BxS2mkxH.js @@ -0,0 +1,380 @@ +import{_ as a,o as n,c as e,R as s,k as i}from"./chunks/framework.E60viAY0.js";const hi=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1700976201000}'),l={name:"en/start/option.md"},p=s('

Basic Options ​

container ​

  • Type: String, Element
  • Default: #artplayer

The DOM container where the player mounts

',4),t=i("div",{className:"run-code"},"▶ Run Code",-1),h=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app', 
+    // container: document.querySelector('.artplayer-app'),
+    url: '/assets/sample/video.mp4',
+});

You may need to initialize the size of the container element, like:

css
.artplayer-app {
+    width: 400px;
+    height: 300px;
+}

Or use aspect-ratio:

css
.artplayer-app {
+    aspect-ratio: 16/9;
+}

Tip

Among all options, only container is mandatory.

url ​

  • Type: String
  • Default: ''

The video source address

`,9),r=i("div",{className:"run-code"},"▶ Run Code",-1),k=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

Sometimes the url is not known so quickly, in which case you can set the url asynchronously.

`,2),d=i("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+});
+
+setTimeout(() => {
+    art.url = '/assets/sample/video.mp4';
+}, 1000);

Note

The default support is for three video file formats: .mp4, .ogg, .webm.

If you need to play other formats such as .m3u8 or .flv, please refer to the Third-party Libraries on the left side.

id ​

  • Type: String
  • Default: ''

The unique identifier of the player, currently used only for remembering playback with autoplayback

`,5),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s(`
js
var art = new Artplayer({
+    id: 'your-url-id',
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

onReady ​

  • Type: Function
  • Default: undefined

The constructor accepts a function as the second argument, which is triggered when the player is successfully initialized and the video is ready to play, similar to the ready event

`,4),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer(
+    {
+        container: '.artplayer-app',
+        url: '/assets/sample/video.mp4',
+        muted: true,
+    },
+    function onReady(art) {
+        this.play()
+    },
+);

Equivalent to:

js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.play();
+});

Warning

The this inside the callback function refers to the player instance, but if an arrow function is used for the callback, this will not point to the player instance.

poster ​

  • Type: String
  • Default: ''

The poster of the video, which only appears when the player is initialized and before it starts playing.

`,7),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    poster: '/assets/sample/poster.jpg',
+});

theme ​

  • Type: String
  • Default: #f00

Player theme color, currently used for progress bar and highlight elements

`,4),m=i("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    theme: '#ffad00',
+});

volume ​

  • Type: Number
  • Default: 0.7

The default volume of the player

`,4),_=i("div",{className:"run-code"},"▶ Run Code",-1),v=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    volume: 0.5,
+});

Warning

The player will cache the size of the last volume. When the player is initialized next time (such as refreshing the page), it will read this cached value.

isLive ​

  • Type: Boolean
  • Default: false

Use live mode, which will hide the progress bar and playback time

`,5),C=i("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    isLive: true,
+});

muted ​

  • Type: Boolean
  • Default: false

Whether to mute by default

`,4),T=i("div",{className:"run-code"},"▶ Run Code",-1),B=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});

autoplay ​

  • Type: Boolean
  • Default: false

Whether to play automatically

  • Default: false

Autoplay

`,6),f=i("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoplay: true,
+    muted: true,
+});

Warning

If you want the video to autoplay by default upon entering the page, muted must be set to true. For more information, please read Autoplay Policy Changes

autoSize ​

  • Type: Boolean
  • Default: false

The size of the player will by default fill the entire container, which often results in black bars. This value can automatically adjust the player size to hide the black bars, similar to css's object-fit: cover;

`,5),S=i("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+});

autoMini ​

  • Type: Boolean
  • Default: false

Automatically enter mini mode when the player scrolls out of the browser viewport

`,4),P=i("div",{className:"run-code"},"▶ Run Code",-1),R=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoMini: true,
+});

loop ​

  • Type: Boolean
  • Default: false

Whether to loop the video

`,4),q=i("div",{className:"run-code"},"▶ Run Code",-1),I=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    loop: true,
+});

flip ​

  • Type: Boolean
  • Default: false

Whether to show the video flip feature, currently only available in Settings Panel and Context Menu

`,4),V=i("div",{className:"run-code"},"▶ Run Code",-1),j=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    flip: true,
+    setting: true,
+});

playbackRate ​

  • Type: Boolean
  • Default: false

Whether to show the playback speed feature of the video, it will appear in Settings Panel and Context Menu

`,4),N=i("div",{className:"run-code"},"▶ Run Code",-1),x=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    playbackRate: true,
+    setting: true,
+});

aspectRatio ​

  • Type: Boolean
  • Default: false

Displays the video aspect ratio feature, it will appear in the Settings Panel and Context Menu

`,4),W=i("div",{className:"run-code"},"▶ Run Code",-1),z=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    aspectRatio: true,
+    setting: true,
+});

screenshot ​

  • Type: Boolean
  • Default: false

Whether to show the screenshot button, it will appear in the toolbar and context menu Display Screenshot function in the bottom control bar

`,4),O=i("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
+});

Warning

Due to browser security mechanisms, if the video source address and the website are cross-origin, screenshot failure may occur

setting ​

  • Type: Boolean
  • Default: false

Display the toggle button for the Settings Panel in the bottom control bar

`,5),L=i("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});

hotkey ​

  • Type: Boolean
  • Default: true

Whether to use hotkeys

`,4),U=i("div",{className:"run-code"},"▶ Run Code",-1),$=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    hotkey: true,
+});
HotkeyDescription
↑Increase volume
↓Decrease volume
←Fast forward video
→Rewind video
spaceToggle play/pause

Tip

These hotkeys will only work after the player gains focus (such as after clicking on the player).

pip ​

  • Type: Boolean
  • Default: false Show the Picture in Picture switch button on the bottom control bar
`,5),Y=i("div",{className:"run-code"},"▶ Run Code",-1),Q=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    pip: true,
+});

mutex ​

  • Type: Boolean
  • Default: true

If there are multiple players on the page, should only one player be allowed to play at a time

`,4),J=i("div",{className:"run-code"},"▶ Run Code",-1),G=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    mutex: true,
+});

fullscreen ​

  • Type: Boolean
  • Default: false Display the Window Fullscreen button on the control bar at the bottom
`,3),K=i("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+});

fullscreenWeb ​

  • Type: Boolean
  • Default: false

Display the Web Fullscreen button on the control bar at the bottom

`,4),Z=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});

subtitleOffset ​

  • Type: Boolean

  • Default: false

Subtitle time offset, the range is [-5s, 5s], appearing in the Settings panel

`,4),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitleOffset: true,
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+    setting: true,
+});

miniProgressBar ​

  • Type: Boolean
  • Default: false

Mini progress bar, only appears when the player loses focus and is playing

`,4),ns=i("div",{className:"run-code"},"▶ Run Code",-1),es=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});

useSSR ​

  • Type: Boolean
  • Default: false

Whether to use SSR (Server-Side Rendering) mount mode, useful if you want to pre-render the player's required HTML before the player mounts

You can access the player's required HTML through Artplayer.html

`,5),ls=i("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
var $container = document.querySelector('.artplayer-app');
+$container.innerHTML = Artplayer.html;
+
+var art = new Artplayer({
+    container: $container,
+    url: '/assets/sample/video.mp4',
+    useSSR: true,
+});

playsInline ​

  • Type: Boolean
  • Default: true

Whether to use playsInline mode on mobile devices

`,4),ts=i("div",{className:"run-code"},"▶ Run Code",-1),hs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    playsInline: true,
+});

layers ​

  • Type: Array
  • Default: []

Initializes custom layers

`,4),rs=i("div",{className:"run-code"},"▶ Run Code",-1),ks=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'poster',
+            html: \`<img style="width: 100px" src="\${img}">\`,
+            style: {
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+                opacity: '.9',
+            },
+            click: function (...args) {
+                console.info('click', args);
+                art.layers.show = false;
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+    ],
+});

Component Configuration Please refer to the following address:

/component/layers.html

settings ​

  • Type: Array
  • Default: []

Initializes custom settings panel

`,5),ds=i("div",{className:"run-code"},"▶ Run Code",-1),Es=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'setting01',
+            selector: [
+                {
+                    html: 'setting01-01',
+                },
+                {
+                    html: 'setting01-02',
+                },
+            ],
+            onSelect: function (...args) {
+                console.info(args);
+            },
+        },
+        {
+            html: 'setting02',
+            selector: [
+                {
+                    html: 'setting02-01',
+                },
+                {
+                    html: 'setting02-02',
+                },
+            ],
+            onSelect: function (...args) {
+                console.info(args);
+            },
+        },
+    ],
+});

Settings Panel Please refer to the following address

/component/setting.html

contextmenu ​

  • Type: Array
  • Default: []

Initialize custom context menu

`,5),cs=i("div",{className:"run-code"},"▶ Run Code",-1),os=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            html: 'your-menu',
+            click: function (...args) {
+                console.info('click', args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});

Component Configuration Please refer to the following address:

/component/contextmenu.html- Type:

controls ​

  • Type: Array
  • Default: []

Initializes custom bottom control bar

`,5),gs=i("div",{className:"run-code"},"▶ Run Code",-1),ys=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'left',
+            html: 'your-control',
+            tooltip: 'Your Control',
+            style: {
+                color: 'green',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+        },
+    ],
+});

Component Configuration Refer to the following address:

/component/controls.html

quality ​

  • Type: Array
  • Default: []

Whether to show the quality selection list in the bottom control bar

PropertyTypeDescription
defaultBooleanDefault quality
htmlStringQuality name
urlStringQuality URL
`,6),us=i("div",{className:"run-code"},"▶ Run Code",-1),bs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    quality: [
+        {
+            default: true,
+            html: 'SD 480P',
+            url: '/assets/sample/video.mp4',
+        },
+        {
+            html: 'HD 720P',
+            url: '/assets/sample/video.mp4',
+        },
+    ],
+});

highlight ​

  • Type: Array
  • Default: []

Show highlight information on the progress bar

PropertyTypeDescription
timeNumberHighlight time (in seconds)
textStringHighlight text
`,5),ms=i("div",{className:"run-code"},"▶ Run Code",-1),Fs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    highlight: [
+        {
+            time: 60,
+            text: 'One more chance',
+        },
+        {
+            time: 120,
+            text: '谁でもいいはずなのに',
+        },
+        {
+            time: 180,
+            text: '夏の想い出がまわる',
+        },
+        {
+            time: 240,
+            text: 'こんなとこにあるはずもないのに',
+        },
+        {
+            time: 300,
+            text: '－－终わり－－',
+        },
+    ],
+});

plugins ​

  • Type: Array
  • Default: []

Initialize custom plugins

`,4),_s=i("div",{className:"run-code"},"▶ Run Code",-1),vs=s(`
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [myPlugin],
+});

thumbnails ​

  • Type: Object
  • Default: {}

Set thumbnails on the progress bar

PropertyTypeDescription
urlStringThumbnail URL
numberNumberNumber of thumbnails
columnNumberColumns of thumbnails
widthNumberThumbnail width
heightNumberThumbnail height
`,5),Cs=i("div",{className:"run-code"},"▶ Run Code",-1),As=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    thumbnails: {
+        url: '/assets/sample/thumbnails.png',
+        number: 60,
+        column: 10,
+    },
+});

Online thumbnail generation

artplayer-tool-thumbnail

subtitle ​

  • Type: Object
  • Default: {}

Set the video subtitles, supporting subtitle formats: vtt, srt, ass

PropertyTypeDescription
nameStringSubtitle name
urlStringSubtitle URL
typeStringSubtitle type, options: vtt, srt, ass

| style | Object | Subtitle style | | encoding | String | Subtitle encoding, default utf-8 | | escape | Boolean | Whether to escape html tags, default true | | onVttLoad | Function | Function to modify vtt text |

`,7),Ts=i("div",{className:"run-code"},"▶ Run Code",-1),Bs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+        type: 'srt',
+        encoding: 'utf-8',
+        escape: true,
+        style: {
+            color: '#03A9F4',
+            'font-size': '30px',
+        },
+    },
+});

moreVideoAttr ​

  • Type: Object
  • Default: {'controls': false, 'preload': 'metadata'}

Additional video attributes, these attributes will be directly written into the video element

`,4),fs=i("div",{className:"run-code"},"▶ Run Code",-1),Ds=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    moreVideoAttr: {
+        'webkit-playsinline': true,
+        playsInline: true,
+    },
+});

icons ​

  • Type: Object
  • Default: {}

Used to replace default icons, supports Html strings and HTMLElement

`,4),Ss=i("div",{className:"run-code"},"▶ Run Code",-1),ws=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    icons: {
+        loading: '<img src="/assets/img/loading.gif">',
+        state: '<img src="/assets/img/state.png">',
+    },
+});

Definition of all icons

artplayer/types/icons.d.ts

type ​

  • Type: String
  • Default: ''

Used to specify the format of the video, which is used in conjunction with customType. By default, the video format is the same as the file extension of the video URL (such as .m3u8, .mkv, .ts). However, sometimes the video URL does not have the correct file extension, so it needs to be specifically stated.

`,5),Ps=i("div",{className:"run-code"},"▶ Run Code",-1),Rs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.m3u8',
+    type: 'm3u8',
+});

Recognition of file extensions

The player can only parse this type of file extension: /assets/sample/video.m3u8

But it cannot parse this type of file extension: /assets/sample/video?type=m3u8

Therefore, if you use customType, it is best to specify type as well

customType ​

  • Type: Object
  • Default: {}

Matches the video's type to delegate the video decoding to a third-party program for processing. The processing function can receive three parameters:

  • video: Video DOM element
  • url: Video address
  • art: Current instance
`,6),qs=i("div",{className:"run-code"},"▶ Run Code",-1),Is=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.m3u8',
+    customType: {
+        m3u8: function (video, url, art) {
+            //
+        },
+    },
+});

lang ​

  • Type: String
  • Default: navigator.language.toLowerCase()

Default display language, currently supports: en, zh-cn

`,4),Vs=i("div",{className:"run-code"},"▶ Run Code",-1),js=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'en',
+});

More language settings

/start/i18n.html

i18n ​

  • Type: Object
  • Default: {}

Custom i18n configuration, which will be deeply merged with the built-in i18n

Add your language:

`,6),Ns=i("div",{className:"run-code"},"▶ Run Code",-1),xs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'your-lang',
+    i18n: {
+        'your-lang': {
+            Play: 'Your Play'
+        },
+    },
+});

Modifying the existing language

`,2),Ws=i("div",{className:"run-code"},"▶ Run Code",-1),zs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: {
+        'zh-cn': {
+            Play: 'Your Play'
+        },
+        'zh-tw': {
+            Play: 'Your Play'
+        },
+    },
+});

More language settings

/start/i18n.html

lock ​

  • Type: Boolean
  • Default: false

Whether to display a lock button on mobile to hide the bottom control bar

`,5),Os=i("div",{className:"run-code"},"▶ Run Code",-1),Ms=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lock: true,
+});

fastForward ​

  • Type: Boolean
  • Default: false

Whether to add fast forward function by long pressing on the video on mobile devices

`,4),Ls=i("div",{className:"run-code"},"▶ Run Code",-1),Hs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});

autoPlayback ​

  • Type: Boolean
  • Default: false

Whether to use the automatic playback feature

`,4),Us=i("div",{className:"run-code"},"▶ Run Code",-1),$s=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    id: 'your-url-id',
+    autoPlayback: true,
+});

Warning

Because the player by default uses url as the key to cache the playback progress

But if the url of the same video is different, then you need to use id to identify the unique key of the video

autoOrientation ​

  • Type: Boolean
  • Default: false

Whether to rotate the player on mobile web pages in full screen according to the video size and the viewport dimensions

`,5),Ys=i("div",{className:"run-code"},"▶ Run Code",-1),Qs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoOrientation: true,
+});

airplay ​

  • Type: Boolean
  • Default: false

Whether to display the airplay button, currently only some browsers support this feature

`,4),Js=i("div",{className:"run-code"},"▶ Run Code",-1),Gs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    airplay: true,
+});

cssVar ​

  • Type: Object
  • Default: {}

Used to change built-in CSS variables

`,4),Ks=i("div",{className:"run-code"},"▶ Run Code",-1),Xs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    cssVar: {
+        //
+    },
+});

Reference for cssVar syntax

artplayer/types/cssVar.d.ts

`,2),Zs=[p,t,h,r,k,d,E,c,o,g,y,u,b,m,F,_,v,C,A,T,B,f,D,S,w,P,R,q,I,V,j,N,x,W,z,O,M,L,H,U,$,Y,Q,J,G,K,X,Z,ss,is,as,ns,es,ls,ps,ts,hs,rs,ks,ds,Es,cs,os,gs,ys,us,bs,ms,Fs,_s,vs,Cs,As,Ts,Bs,fs,Ds,Ss,ws,Ps,Rs,qs,Is,Vs,js,Ns,xs,Ws,zs,Os,Ms,Ls,Hs,Us,$s,Ys,Qs,Js,Gs,Ks,Xs];function si(ii,ai,ni,ei,li,pi){return n(),e("div",null,Zs)}const ri=a(l,[["render",si]]);export{hi as __pageData,ri as default}; diff --git a/docs/document/assets/en_start_option.md.BxS2mkxH.lean.js b/docs/document/assets/en_start_option.md.BxS2mkxH.lean.js new file mode 100644 index 000000000..c6687b481 --- /dev/null +++ b/docs/document/assets/en_start_option.md.BxS2mkxH.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as e,R as s,k as i}from"./chunks/framework.E60viAY0.js";const hi=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1700976201000}'),l={name:"en/start/option.md"},p=s("",4),t=i("div",{className:"run-code"},"▶ Run Code",-1),h=s("",9),r=i("div",{className:"run-code"},"▶ Run Code",-1),k=s("",2),d=i("div",{className:"run-code"},"▶ Run Code",-1),E=s("",5),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s("",4),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s("",7),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s("",4),m=i("div",{className:"run-code"},"▶ Run Code",-1),F=s("",4),_=i("div",{className:"run-code"},"▶ Run Code",-1),v=s("",5),C=i("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),T=i("div",{className:"run-code"},"▶ Run Code",-1),B=s("",6),f=i("div",{className:"run-code"},"▶ Run Code",-1),D=s("",5),S=i("div",{className:"run-code"},"▶ Run Code",-1),w=s("",4),P=i("div",{className:"run-code"},"▶ Run Code",-1),R=s("",4),q=i("div",{className:"run-code"},"▶ Run Code",-1),I=s("",4),V=i("div",{className:"run-code"},"▶ Run Code",-1),j=s("",4),N=i("div",{className:"run-code"},"▶ Run Code",-1),x=s("",4),W=i("div",{className:"run-code"},"▶ Run Code",-1),z=s("",4),O=i("div",{className:"run-code"},"▶ Run Code",-1),M=s("",5),L=i("div",{className:"run-code"},"▶ Run Code",-1),H=s("",4),U=i("div",{className:"run-code"},"▶ Run Code",-1),$=s("",5),Y=i("div",{className:"run-code"},"▶ Run Code",-1),Q=s("",4),J=i("div",{className:"run-code"},"▶ Run Code",-1),G=s("",3),K=i("div",{className:"run-code"},"▶ Run Code",-1),X=s("",4),Z=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s("",4),ns=i("div",{className:"run-code"},"▶ Run Code",-1),es=s("",5),ls=i("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",4),ts=i("div",{className:"run-code"},"▶ Run Code",-1),hs=s("",4),rs=i("div",{className:"run-code"},"▶ Run Code",-1),ks=s("",5),ds=i("div",{className:"run-code"},"▶ Run Code",-1),Es=s("",5),cs=i("div",{className:"run-code"},"▶ Run Code",-1),os=s("",5),gs=i("div",{className:"run-code"},"▶ Run Code",-1),ys=s("",6),us=i("div",{className:"run-code"},"▶ Run Code",-1),bs=s("",5),ms=i("div",{className:"run-code"},"▶ Run Code",-1),Fs=s("",4),_s=i("div",{className:"run-code"},"▶ Run Code",-1),vs=s("",5),Cs=i("div",{className:"run-code"},"▶ Run Code",-1),As=s("",7),Ts=i("div",{className:"run-code"},"▶ Run Code",-1),Bs=s("",4),fs=i("div",{className:"run-code"},"▶ Run Code",-1),Ds=s("",4),Ss=i("div",{className:"run-code"},"▶ Run Code",-1),ws=s("",5),Ps=i("div",{className:"run-code"},"▶ Run Code",-1),Rs=s("",6),qs=i("div",{className:"run-code"},"▶ Run Code",-1),Is=s("",4),Vs=i("div",{className:"run-code"},"▶ Run Code",-1),js=s("",6),Ns=i("div",{className:"run-code"},"▶ Run Code",-1),xs=s("",2),Ws=i("div",{className:"run-code"},"▶ Run Code",-1),zs=s("",5),Os=i("div",{className:"run-code"},"▶ Run Code",-1),Ms=s("",4),Ls=i("div",{className:"run-code"},"▶ Run Code",-1),Hs=s("",4),Us=i("div",{className:"run-code"},"▶ Run Code",-1),$s=s("",5),Ys=i("div",{className:"run-code"},"▶ Run Code",-1),Qs=s("",4),Js=i("div",{className:"run-code"},"▶ Run Code",-1),Gs=s("",4),Ks=i("div",{className:"run-code"},"▶ Run Code",-1),Xs=s("",2),Zs=[p,t,h,r,k,d,E,c,o,g,y,u,b,m,F,_,v,C,A,T,B,f,D,S,w,P,R,q,I,V,j,N,x,W,z,O,M,L,H,U,$,Y,Q,J,G,K,X,Z,ss,is,as,ns,es,ls,ps,ts,hs,rs,ks,ds,Es,cs,os,gs,ys,us,bs,ms,Fs,_s,vs,Cs,As,Ts,Bs,fs,Ds,Ss,ws,Ps,Rs,qs,Is,Vs,js,Ns,xs,Ws,zs,Os,Ms,Ls,Hs,Us,$s,Ys,Qs,Js,Gs,Ks,Xs];function si(ii,ai,ni,ei,li,pi){return n(),e("div",null,Zs)}const ri=a(l,[["render",si]]);export{hi as __pageData,ri as default}; diff --git a/docs/document/assets/flex-logo.2489261b.svg b/docs/document/assets/flex-logo.SQNie4Vp.svg similarity index 100% rename from docs/document/assets/flex-logo.2489261b.svg rename to docs/document/assets/flex-logo.SQNie4Vp.svg diff --git a/docs/document/assets/index.md.48e77311.js b/docs/document/assets/index.md.48e77311.js deleted file mode 100644 index 6538edbca..000000000 --- a/docs/document/assets/index.md.48e77311.js +++ /dev/null @@ -1,167 +0,0 @@ -import{_ as s,o as a,c as n,S as l}from"./chunks/framework.532b6b18.js";const C=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1683042244000}'),p={name:"index.md"},e=l(`

安装使用 ​

安装 ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

使用 ​

js
import Artplayer from 'artplayer';
-
-const art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'path/to/video.mp4',
-});
html
<html>
-    <head>
-        <title>ArtPlayer Demo</title>
-        <meta charset="UTF-8" />
-        <style>
-            .artplayer-app {
-                width: 400px;
-                height: 300px;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app"></div>
-    </body>
-</html>

提示

播放器的尺寸依赖于容器 container 的尺寸，所以你的容器 container 必须是有尺寸的

以下链接可以看到更多的使用例子

/packages/artplayer-template

Vue.js ​

vue
<template>
-  <div ref="artRef"></div>
-</template>
-
-<script>
-import Artplayer from "artplayer";
-
-export default {
-  data() {
-    return {
-      instance: null,
-    };
-  },
-  props: {
-    option: {
-      type: Object,
-      required: true,
-    },
-  },
-  mounted() {
-    this.instance = new Artplayer({
-      ...this.option,
-      container: this.$refs.artRef,
-    });
-
-    this.$nextTick(() => {
-      this.$emit("get-instance", this.instance);
-    });
-  },
-  beforeDestroy() {
-    if (this.instance && this.instance.destroy) {
-      this.instance.destroy(false);
-    }
-  },
-};
-</script>
vue
<template>
-  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
-</template>
-
-<script>
-import Artplayer from "./Artplayer.vue";
-
-export default {
-  data() {
-    return {
-      option: {
-        url: "path/to/video.mp4",
-      },
-      style: {
-        width: "600px",
-        height: "400px",
-        margin: "60px auto 0",
-      },
-    };
-  },
-  components: {
-    Artplayer,
-  },
-  methods: {
-    getInstance(art) {
-      console.info(art);
-    },
-  },
-};
-</script>

Artplayer 非响应式：

在 Vue.js 里直接修改 option 是不会改变播放器的

React.js ​

jsx
import { useEffect, useRef } from 'react';
-import Artplayer from 'artplayer';
-
-export default function Player({ option, getInstance, ...rest }) {
-    const artRef = useRef();
-
-    useEffect(() => {
-        const art = new Artplayer({
-            ...option,
-            container: artRef.current,
-        });
-
-        if (getInstance && typeof getInstance === 'function') {
-            getInstance(art);
-        }
-
-        return () => {
-            if (art && art.destroy) {
-                art.destroy(false);
-            }
-        };
-    }, []);
-
-    return <div ref={artRef} {...rest}></div>;
-}
jsx
import React from 'react';
-import Artplayer from './ArtPlayer.jsx';
-
-function App() {
-    return (
-        <div>
-            <Artplayer
-                option={{
-                    url: 'https://artplayer.org/assets/sample/video.mp4',
-                }}
-                style={{
-                    width: '600px',
-                    height: '400px',
-                    margin: '60px auto 0',
-                }}
-                getInstance={(art) => console.info(art)}
-            />
-        </div>
-    );
-}
-
-export default App;

Artplayer 非响应式：

在 React.js 里直接修改 option 是不会改变播放器的

TypeScript ​

导入 Artplayer 时会自动导入的 artplayer.d.ts，但你也可以单独导入选项的类型

ts
import Artplayer from 'artplayer';
-import { type Option } from 'artplayer/types/option';
-
-const option: Option = {
-    container: '.artplayer-app',
-    url: './assets/sample/video.mp4',
-};
-
-option.volume = 0.5;
-
-const art = new Artplayer(option);

全部 TypeScript 定义

packages/artplayer/types

JavaScript ​

有时你的 js 文件会丢失 TypeScript 的类型提示，这时候你可以手动导入类型

变量：

js
/**
- * @type {import("artplayer")}
- */
-let art = null;

参数：

js
/**
- * @param {import("artplayer")} art
- */
-function getInstance(art) {
-  //
-}

属性：

js
export default {
-  data() {
-    return {
-      /**
-       * @type {import("artplayer")}
-       */
-      art: null,
-    }
-  }
-}

选项：

js
/**
- * @type {import("artplayer/types/option").Option}
- */
-
-const option = {
-    container: '.artplayer-app',
-    url: './assets/sample/video.mp4',
-};
-
-option.volume = 0.5;
-
-const art8 = new Artplayer(option);

古老的浏览器 ​

生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome：last 1 Chrome version

对于古老的浏览器，可以使用 artplayer.legacy.js 文件，可以兼容到：IE 11

js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

假如你要兼容更古老的浏览器时，请修改以下配置然后自行构建：

构建配置：scripts/build.js

参考文档：browserslist

`,35),o=[e];function t(r,c,y,i,F,D){return a(),n("div",null,o)}const A=s(p,[["render",t]]);export{C as __pageData,A as default}; diff --git a/docs/document/assets/index.md.48e77311.lean.js b/docs/document/assets/index.md.48e77311.lean.js deleted file mode 100644 index 888f53199..000000000 --- a/docs/document/assets/index.md.48e77311.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,o as a,c as n,S as l}from"./chunks/framework.532b6b18.js";const C=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1683042244000}'),p={name:"index.md"},e=l("",35),o=[e];function t(r,c,y,i,F,D){return a(),n("div",null,o)}const A=s(p,[["render",t]]);export{C as __pageData,A as default}; diff --git a/docs/document/assets/index.md._kFQgWbo.js b/docs/document/assets/index.md._kFQgWbo.js new file mode 100644 index 000000000..c476666d3 --- /dev/null +++ b/docs/document/assets/index.md._kFQgWbo.js @@ -0,0 +1,167 @@ +import{_ as s,o as i,c as a,R as n}from"./chunks/framework.E60viAY0.js";const y=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1683042244000}'),l={name:"index.md"},p=n(`

安装使用 ​

安装 ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

使用 ​

js
import Artplayer from 'artplayer';
+
+const art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'path/to/video.mp4',
+});
html
<html>
+    <head>
+        <title>ArtPlayer Demo</title>
+        <meta charset="UTF-8" />
+        <style>
+            .artplayer-app {
+                width: 400px;
+                height: 300px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app"></div>
+    </body>
+</html>

提示

播放器的尺寸依赖于容器 container 的尺寸，所以你的容器 container 必须是有尺寸的

以下链接可以看到更多的使用例子

/packages/artplayer-template

Vue.js ​

vue
<template>
+  <div ref="artRef"></div>
+</template>
+
+<script>
+import Artplayer from "artplayer";
+
+export default {
+  data() {
+    return {
+      instance: null,
+    };
+  },
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    this.instance = new Artplayer({
+      ...this.option,
+      container: this.$refs.artRef,
+    });
+
+    this.$nextTick(() => {
+      this.$emit("get-instance", this.instance);
+    });
+  },
+  beforeDestroy() {
+    if (this.instance && this.instance.destroy) {
+      this.instance.destroy(false);
+    }
+  },
+};
+</script>
vue
<template>
+  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
+</template>
+
+<script>
+import Artplayer from "./Artplayer.vue";
+
+export default {
+  data() {
+    return {
+      option: {
+        url: "path/to/video.mp4",
+      },
+      style: {
+        width: "600px",
+        height: "400px",
+        margin: "60px auto 0",
+      },
+    };
+  },
+  components: {
+    Artplayer,
+  },
+  methods: {
+    getInstance(art) {
+      console.info(art);
+    },
+  },
+};
+</script>

Artplayer 非响应式：

在 Vue.js 里直接修改 option 是不会改变播放器的

React.js ​

jsx
import { useEffect, useRef } from 'react';
+import Artplayer from 'artplayer';
+
+export default function Player({ option, getInstance, ...rest }) {
+    const artRef = useRef();
+
+    useEffect(() => {
+        const art = new Artplayer({
+            ...option,
+            container: artRef.current,
+        });
+
+        if (getInstance && typeof getInstance === 'function') {
+            getInstance(art);
+        }
+
+        return () => {
+            if (art && art.destroy) {
+                art.destroy(false);
+            }
+        };
+    }, []);
+
+    return <div ref={artRef} {...rest}></div>;
+}
jsx
import React from 'react';
+import Artplayer from './ArtPlayer.jsx';
+
+function App() {
+    return (
+        <div>
+            <Artplayer
+                option={{
+                    url: 'https://artplayer.org/assets/sample/video.mp4',
+                }}
+                style={{
+                    width: '600px',
+                    height: '400px',
+                    margin: '60px auto 0',
+                }}
+                getInstance={(art) => console.info(art)}
+            />
+        </div>
+    );
+}
+
+export default App;

Artplayer 非响应式：

在 React.js 里直接修改 option 是不会改变播放器的

TypeScript ​

导入 Artplayer 时会自动导入的 artplayer.d.ts，但你也可以单独导入选项的类型

ts
import Artplayer from 'artplayer';
+import { type Option } from 'artplayer/types/option';
+
+const option: Option = {
+    container: '.artplayer-app',
+    url: './assets/sample/video.mp4',
+};
+
+option.volume = 0.5;
+
+const art = new Artplayer(option);

全部 TypeScript 定义

packages/artplayer/types

JavaScript ​

有时你的 js 文件会丢失 TypeScript 的类型提示，这时候你可以手动导入类型

变量：

js
/**
+ * @type {import("artplayer")}
+ */
+let art = null;

参数：

js
/**
+ * @param {import("artplayer")} art
+ */
+function getInstance(art) {
+  //
+}

属性：

js
export default {
+  data() {
+    return {
+      /**
+       * @type {import("artplayer")}
+       */
+      art: null,
+    }
+  }
+}

选项：

js
/**
+ * @type {import("artplayer/types/option").Option}
+ */
+
+const option = {
+    container: '.artplayer-app',
+    url: './assets/sample/video.mp4',
+};
+
+option.volume = 0.5;
+
+const art8 = new Artplayer(option);

古老的浏览器 ​

生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome：last 1 Chrome version

对于古老的浏览器，可以使用 artplayer.legacy.js 文件，可以兼容到：IE 11

js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

假如你要兼容更古老的浏览器时，请修改以下配置然后自行构建：

构建配置：scripts/build.js

参考文档：browserslist

`,35),e=[p];function t(h,k,r,E,d,c){return i(),a("div",null,e)}const b=s(l,[["render",t]]);export{y as __pageData,b as default}; diff --git a/docs/document/assets/index.md._kFQgWbo.lean.js b/docs/document/assets/index.md._kFQgWbo.lean.js new file mode 100644 index 000000000..ed75eb37a --- /dev/null +++ b/docs/document/assets/index.md._kFQgWbo.lean.js @@ -0,0 +1 @@ +import{_ as s,o as i,c as a,R as n}from"./chunks/framework.E60viAY0.js";const y=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1683042244000}'),l={name:"index.md"},p=n("",35),e=[p];function t(h,k,r,E,d,c){return i(),a("div",null,e)}const b=s(l,[["render",t]]);export{y as __pageData,b as default}; diff --git a/docs/document/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2 b/docs/document/assets/inter-italic-cyrillic-ext.OVycGSDq.woff2 similarity index 100% rename from docs/document/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2 rename to docs/document/assets/inter-italic-cyrillic-ext.OVycGSDq.woff2 diff --git a/docs/document/assets/inter-italic-cyrillic.ea42a392.woff2 b/docs/document/assets/inter-italic-cyrillic.-nLMcIwj.woff2 similarity index 100% rename from docs/document/assets/inter-italic-cyrillic.ea42a392.woff2 rename to docs/document/assets/inter-italic-cyrillic.-nLMcIwj.woff2 diff --git a/docs/document/assets/inter-italic-greek-ext.4fbe9427.woff2 b/docs/document/assets/inter-italic-greek-ext.hznxWNZO.woff2 similarity index 100% rename from docs/document/assets/inter-italic-greek-ext.4fbe9427.woff2 rename to docs/document/assets/inter-italic-greek-ext.hznxWNZO.woff2 diff --git a/docs/document/assets/inter-italic-greek.8f4463c4.woff2 b/docs/document/assets/inter-italic-greek.PSfer2Kc.woff2 similarity index 100% rename from docs/document/assets/inter-italic-greek.8f4463c4.woff2 rename to docs/document/assets/inter-italic-greek.PSfer2Kc.woff2 diff --git a/docs/document/assets/inter-italic-latin-ext.bd8920cc.woff2 b/docs/document/assets/inter-italic-latin-ext.RnFly65-.woff2 similarity index 100% rename from docs/document/assets/inter-italic-latin-ext.bd8920cc.woff2 rename to docs/document/assets/inter-italic-latin-ext.RnFly65-.woff2 diff --git a/docs/document/assets/inter-italic-latin.bd3b6f56.woff2 b/docs/document/assets/inter-italic-latin.27E69YJn.woff2 similarity index 100% rename from docs/document/assets/inter-italic-latin.bd3b6f56.woff2 rename to docs/document/assets/inter-italic-latin.27E69YJn.woff2 diff --git a/docs/document/assets/inter-italic-vietnamese.6ce511fb.woff2 b/docs/document/assets/inter-italic-vietnamese.xzQHe1q1.woff2 similarity index 100% rename from docs/document/assets/inter-italic-vietnamese.6ce511fb.woff2 rename to docs/document/assets/inter-italic-vietnamese.xzQHe1q1.woff2 diff --git a/docs/document/assets/inter-roman-cyrillic-ext.e75737ce.woff2 b/docs/document/assets/inter-roman-cyrillic-ext.8T9wMG5w.woff2 similarity index 100% rename from docs/document/assets/inter-roman-cyrillic-ext.e75737ce.woff2 rename to docs/document/assets/inter-roman-cyrillic-ext.8T9wMG5w.woff2 diff --git a/docs/document/assets/inter-roman-cyrillic.5f2c6c8c.woff2 b/docs/document/assets/inter-roman-cyrillic.jIZ9REo5.woff2 similarity index 100% rename from docs/document/assets/inter-roman-cyrillic.5f2c6c8c.woff2 rename to docs/document/assets/inter-roman-cyrillic.jIZ9REo5.woff2 diff --git a/docs/document/assets/inter-roman-greek-ext.ab0619bc.woff2 b/docs/document/assets/inter-roman-greek-ext.9JiNzaSO.woff2 similarity index 100% rename from docs/document/assets/inter-roman-greek-ext.ab0619bc.woff2 rename to docs/document/assets/inter-roman-greek-ext.9JiNzaSO.woff2 diff --git a/docs/document/assets/inter-roman-greek.d5a6d92a.woff2 b/docs/document/assets/inter-roman-greek.Cb5wWeGA.woff2 similarity index 100% rename from docs/document/assets/inter-roman-greek.d5a6d92a.woff2 rename to docs/document/assets/inter-roman-greek.Cb5wWeGA.woff2 diff --git a/docs/document/assets/inter-roman-latin-ext.0030eebd.woff2 b/docs/document/assets/inter-roman-latin-ext.GZWE-KO4.woff2 similarity index 100% rename from docs/document/assets/inter-roman-latin-ext.0030eebd.woff2 rename to docs/document/assets/inter-roman-latin-ext.GZWE-KO4.woff2 diff --git a/docs/document/assets/inter-roman-latin.2ed14f66.woff2 b/docs/document/assets/inter-roman-latin.bvIUbFQP.woff2 similarity index 100% rename from docs/document/assets/inter-roman-latin.2ed14f66.woff2 rename to docs/document/assets/inter-roman-latin.bvIUbFQP.woff2 diff --git a/docs/document/assets/inter-roman-vietnamese.14ce25a6.woff2 b/docs/document/assets/inter-roman-vietnamese.paY3CzEB.woff2 similarity index 100% rename from docs/document/assets/inter-roman-vietnamese.14ce25a6.woff2 rename to docs/document/assets/inter-roman-vietnamese.paY3CzEB.woff2 diff --git a/docs/document/assets/library_dash.md.6145d438.js b/docs/document/assets/library_dash.md.6145d438.js deleted file mode 100644 index 5449a69d1..000000000 --- a/docs/document/assets/library_dash.md.6145d438.js +++ /dev/null @@ -1,24 +0,0 @@ -import{_ as n,o as l,c as p,k as s,a,S as o}from"./chunks/framework.532b6b18.js";const u=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/dash.md","filePath":"library/dash.md","lastUpdated":1682237343000}'),e={name:"library/dash.md"},r=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-label":'Permalink to "dash.js"'},"​")],-1),t=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),y=o(`
js
function playMpd(video, url, art) {
-    if (dashjs.supportsMediaSource()) {
-        if (art.dash) art.dash.destroy();
-        const dash = dashjs.MediaPlayer().create();
-        dash.initialize(video, url, art.option.autoplay);
-        art.dash = dash; 
-        art.on('destroy', () => dash.destroy());
-    } else {
-        art.notice.show = 'Unsupported playback format: mpd';
-    }
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
-    type: 'mpd',
-    customType: {
-        mpd: playMpd
-    },
-});
-
-art.on('ready', () => {
-    console.info(art.dash);
-});
`,1),F=[r,t,c,y];function D(A,i,C,d,b,h){return l(),p("div",null,F)}const _=n(e,[["render",D]]);export{u as __pageData,_ as default}; diff --git a/docs/document/assets/library_dash.md.6145d438.lean.js b/docs/document/assets/library_dash.md.6145d438.lean.js deleted file mode 100644 index 3e8596e29..000000000 --- a/docs/document/assets/library_dash.md.6145d438.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as n,o as l,c as p,k as s,a,S as o}from"./chunks/framework.532b6b18.js";const u=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/dash.md","filePath":"library/dash.md","lastUpdated":1682237343000}'),e={name:"library/dash.md"},r=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-label":'Permalink to "dash.js"'},"​")],-1),t=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),y=o("",1),F=[r,t,c,y];function D(A,i,C,d,b,h){return l(),p("div",null,F)}const _=n(e,[["render",D]]);export{u as __pageData,_ as default}; diff --git a/docs/document/assets/library_dash.md.rQV5WaP2.js b/docs/document/assets/library_dash.md.rQV5WaP2.js new file mode 100644 index 000000000..0d9650092 --- /dev/null +++ b/docs/document/assets/library_dash.md.rQV5WaP2.js @@ -0,0 +1,24 @@ +import{_ as i,o as n,c as l,k as s,a,R as p}from"./chunks/framework.E60viAY0.js";const m=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/dash.md","filePath":"library/dash.md","lastUpdated":1682237343000}'),h={name:"library/dash.md"},t=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-label":'Permalink to "dash.js"'},"​")],-1),e=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),r=p(`
js
function playMpd(video, url, art) {
+    if (dashjs.supportsMediaSource()) {
+        if (art.dash) art.dash.destroy();
+        const dash = dashjs.MediaPlayer().create();
+        dash.initialize(video, url, art.option.autoplay);
+        art.dash = dash; 
+        art.on('destroy', () => dash.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: mpd';
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
+    type: 'mpd',
+    customType: {
+        mpd: playMpd
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.dash);
+});
`,1),E=[t,e,k,r];function d(c,y,g,o,b,F){return n(),l("div",null,E)}const _=i(h,[["render",d]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/library_dash.md.rQV5WaP2.lean.js b/docs/document/assets/library_dash.md.rQV5WaP2.lean.js new file mode 100644 index 000000000..9135350cd --- /dev/null +++ b/docs/document/assets/library_dash.md.rQV5WaP2.lean.js @@ -0,0 +1 @@ +import{_ as i,o as n,c as l,k as s,a,R as p}from"./chunks/framework.E60viAY0.js";const m=JSON.parse('{"title":"dash.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/dash.md","filePath":"library/dash.md","lastUpdated":1682237343000}'),h={name:"library/dash.md"},t=s("h1",{id:"dash-js",tabindex:"-1"},[a("dash.js "),s("a",{class:"header-anchor",href:"#dash-js","aria-label":'Permalink to "dash.js"'},"​")],-1),e=s("p",null,[a("👉 "),s("a",{href:"https://github.com/Dash-Industry-Forum/dash.js",target:"_blank",rel:"noreferrer"},"https://github.com/Dash-Industry-Forum/dash.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js"}," ▶ Run Code ",-1),r=p("",1),E=[t,e,k,r];function d(c,y,g,o,b,F){return n(),l("div",null,E)}const _=i(h,[["render",d]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/library_flv.md.a74cc017.js b/docs/document/assets/library_flv.md.a74cc017.js deleted file mode 100644 index 452ca8397..000000000 --- a/docs/document/assets/library_flv.md.a74cc017.js +++ /dev/null @@ -1,25 +0,0 @@ -import{_ as a,o as l,c as p,k as s,a as n,S as o}from"./chunks/framework.532b6b18.js";const u=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/flv.md","filePath":"library/flv.md","lastUpdated":1682237343000}'),e={name:"library/flv.md"},r=s("h1",{id:"flv-js",tabindex:"-1"},[n("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-label":'Permalink to "flv.js"'},"​")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),F=o(`
js
function playFlv(video, url, art) {
-    if (flvjs.isSupported()) {
-        if (art.flv) art.flv.destroy();
-        const flv = flvjs.createPlayer({ type: 'flv', url });
-        flv.attachMediaElement(video);
-        flv.load();
-        art.flv = flv; 
-        art.on('destroy', () => flv.destroy());
-    } else {
-        art.notice.show = 'Unsupported playback format: flv';
-    }
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.flv',
-    type: 'flv',
-    customType: {
-        flv: playFlv,
-    },
-});
-
-art.on('ready', () => {
-    console.info(art.flv);
-});
`,1),y=[r,t,c,F];function D(A,i,C,b,d,f){return l(),p("div",null,y)}const v=a(e,[["render",D]]);export{u as __pageData,v as default}; diff --git a/docs/document/assets/library_flv.md.a74cc017.lean.js b/docs/document/assets/library_flv.md.a74cc017.lean.js deleted file mode 100644 index 0c0ae2395..000000000 --- a/docs/document/assets/library_flv.md.a74cc017.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as l,c as p,k as s,a as n,S as o}from"./chunks/framework.532b6b18.js";const u=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/flv.md","filePath":"library/flv.md","lastUpdated":1682237343000}'),e={name:"library/flv.md"},r=s("h1",{id:"flv-js",tabindex:"-1"},[n("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-label":'Permalink to "flv.js"'},"​")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(A,i,C,b,d,f){return l(),p("div",null,y)}const v=a(e,[["render",D]]);export{u as __pageData,v as default}; diff --git a/docs/document/assets/library_flv.md.yXnwvlZv.js b/docs/document/assets/library_flv.md.yXnwvlZv.js new file mode 100644 index 000000000..4f21742e1 --- /dev/null +++ b/docs/document/assets/library_flv.md.yXnwvlZv.js @@ -0,0 +1,25 @@ +import{_ as a,o as n,c as l,k as s,a as i,R as p}from"./chunks/framework.E60viAY0.js";const m=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/flv.md","filePath":"library/flv.md","lastUpdated":1682237343000}'),h={name:"library/flv.md"},e=s("h1",{id:"flv-js",tabindex:"-1"},[i("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-label":'Permalink to "flv.js"'},"​")],-1),t=s("p",null,[i("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),r=p(`
js
function playFlv(video, url, art) {
+    if (flvjs.isSupported()) {
+        if (art.flv) art.flv.destroy();
+        const flv = flvjs.createPlayer({ type: 'flv', url });
+        flv.attachMediaElement(video);
+        flv.load();
+        art.flv = flv; 
+        art.on('destroy', () => flv.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: flv';
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.flv',
+    type: 'flv',
+    customType: {
+        flv: playFlv,
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.flv);
+});
`,1),E=[e,t,k,r];function d(c,y,g,b,o,F){return n(),l("div",null,E)}const f=a(h,[["render",d]]);export{m as __pageData,f as default}; diff --git a/docs/document/assets/library_flv.md.yXnwvlZv.lean.js b/docs/document/assets/library_flv.md.yXnwvlZv.lean.js new file mode 100644 index 000000000..b792f6a53 --- /dev/null +++ b/docs/document/assets/library_flv.md.yXnwvlZv.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,k as s,a as i,R as p}from"./chunks/framework.E60viAY0.js";const m=JSON.parse('{"title":"flv.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/flv.md","filePath":"library/flv.md","lastUpdated":1682237343000}'),h={name:"library/flv.md"},e=s("h1",{id:"flv-js",tabindex:"-1"},[i("flv.js "),s("a",{class:"header-anchor",href:"#flv-js","aria-label":'Permalink to "flv.js"'},"​")],-1),t=s("p",null,[i("👉 "),s("a",{href:"https://github.com/Bilibili/flv.js",target:"_blank",rel:"noreferrer"},"https://github.com/Bilibili/flv.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"}," ▶ Run Code ",-1),r=p("",1),E=[e,t,k,r];function d(c,y,g,b,o,F){return n(),l("div",null,E)}const f=a(h,[["render",d]]);export{m as __pageData,f as default}; diff --git a/docs/document/assets/library_hls.md.29fb7b0e.js b/docs/document/assets/library_hls.md.29fb7b0e.js deleted file mode 100644 index 45aac7964..000000000 --- a/docs/document/assets/library_hls.md.29fb7b0e.js +++ /dev/null @@ -1,27 +0,0 @@ -import{_ as a,o as l,c as p,k as s,a as n,S as o}from"./chunks/framework.532b6b18.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/hls.md","filePath":"library/hls.md","lastUpdated":1682237343000}'),e={name:"library/hls.md"},r=s("h1",{id:"hls-js",tabindex:"-1"},[n("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-label":'Permalink to "hls.js"'},"​")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),F=o(`
js
function playM3u8(video, url, art) {
-    if (Hls.isSupported()) {
-        if (art.hls) art.hls.destroy();
-        const hls = new Hls();
-        hls.loadSource(url);
-        hls.attachMedia(video);
-        art.hls = hls;
-        art.on('destroy', () => hls.destroy());
-    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-        video.src = url;
-    } else {
-        art.notice.show = 'Unsupported playback format: m3u8';
-    }
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
-    type: 'm3u8',
-    customType: {
-        m3u8: playM3u8,
-    },
-});
-
-art.on('ready', () => {
-    console.info(art.hls);
-});
`,1),y=[r,t,c,F];function D(A,i,C,b,u,d){return l(),p("div",null,y)}const _=a(e,[["render",D]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/library_hls.md.29fb7b0e.lean.js b/docs/document/assets/library_hls.md.29fb7b0e.lean.js deleted file mode 100644 index a13c188f3..000000000 --- a/docs/document/assets/library_hls.md.29fb7b0e.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as l,c as p,k as s,a as n,S as o}from"./chunks/framework.532b6b18.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/hls.md","filePath":"library/hls.md","lastUpdated":1682237343000}'),e={name:"library/hls.md"},r=s("h1",{id:"hls-js",tabindex:"-1"},[n("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-label":'Permalink to "hls.js"'},"​")],-1),t=s("p",null,[n("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),c=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),F=o("",1),y=[r,t,c,F];function D(A,i,C,b,u,d){return l(),p("div",null,y)}const _=a(e,[["render",D]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/library_hls.md.67A5_0ro.js b/docs/document/assets/library_hls.md.67A5_0ro.js new file mode 100644 index 000000000..24beeb507 --- /dev/null +++ b/docs/document/assets/library_hls.md.67A5_0ro.js @@ -0,0 +1,27 @@ +import{_ as a,o as n,c as l,k as s,a as i,R as p}from"./chunks/framework.E60viAY0.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/hls.md","filePath":"library/hls.md","lastUpdated":1682237343000}'),h={name:"library/hls.md"},e=s("h1",{id:"hls-js",tabindex:"-1"},[i("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-label":'Permalink to "hls.js"'},"​")],-1),t=s("p",null,[i("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),r=p(`
js
function playM3u8(video, url, art) {
+    if (Hls.isSupported()) {
+        if (art.hls) art.hls.destroy();
+        const hls = new Hls();
+        hls.loadSource(url);
+        hls.attachMedia(video);
+        art.hls = hls;
+        art.on('destroy', () => hls.destroy());
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = url;
+    } else {
+        art.notice.show = 'Unsupported playback format: m3u8';
+    }
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+    type: 'm3u8',
+    customType: {
+        m3u8: playM3u8,
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.hls);
+});
`,1),E=[e,t,k,r];function d(y,c,g,o,b,F){return n(),l("div",null,E)}const _=a(h,[["render",d]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/library_hls.md.67A5_0ro.lean.js b/docs/document/assets/library_hls.md.67A5_0ro.lean.js new file mode 100644 index 000000000..fb698297f --- /dev/null +++ b/docs/document/assets/library_hls.md.67A5_0ro.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,k as s,a as i,R as p}from"./chunks/framework.E60viAY0.js";const m=JSON.parse('{"title":"hls.js","description":"","frontmatter":{},"headers":[],"relativePath":"library/hls.md","filePath":"library/hls.md","lastUpdated":1682237343000}'),h={name:"library/hls.md"},e=s("h1",{id:"hls-js",tabindex:"-1"},[i("hls.js "),s("a",{class:"header-anchor",href:"#hls-js","aria-label":'Permalink to "hls.js"'},"​")],-1),t=s("p",null,[i("👉 "),s("a",{href:"https://github.com/video-dev/hls.js",target:"_blank",rel:"noreferrer"},"https://github.com/video-dev/hls.js")],-1),k=s("div",{className:"run-code","data-libs":"https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js"}," ▶ Run Code ",-1),r=p("",1),E=[e,t,k,r];function d(y,c,g,o,b,F){return n(),l("div",null,E)}const _=a(h,[["render",d]]);export{m as __pageData,_ as default}; diff --git a/docs/document/assets/plugin_ads.md.12a970af.js b/docs/document/assets/plugin_ads.md.12a970af.js deleted file mode 100644 index d48b25046..000000000 --- a/docs/document/assets/plugin_ads.md.12a970af.js +++ /dev/null @@ -1,48 +0,0 @@ -import{_ as a,o as n,c as l,S as s,k as p}from"./chunks/framework.532b6b18.js";const u=JSON.parse('{"title":"视频广告","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/ads.md","filePath":"plugin/ads.md","lastUpdated":1673441101000}'),e={name:"plugin/ads.md"},o=s('

视频广告 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-ads
bash
yarn add artplayer-plugin-ads
bash
pnpm add artplayer-plugin-ads
html
<script src="path/to/artplayer-plugin-ads.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
bash
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js

使用 ​

',8),r=p("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),t=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-    fullscreen: true,
-    fullscreenWeb: true,
-    plugins: [
-        artplayerPluginAds({
-            // html广告，假如是视频广告则忽略该值
-            html: '<img src="/assets/sample/poster.jpg">',
-
-            // 视频广告的地址
-            video: '/assets/sample/test1.mp4',
-
-            // 广告跳转网址，为空则不跳转
-            url: 'http://artplayer.org',
-
-            // 必须观看的时长，期间不能被跳过，单位为秒
-            // 当该值大于或等于totalDuration时，不能提前关闭广告
-            // 当该值等于或小于0时，则随时都可以关闭广告
-            playDuration: 5,
-
-            // 广告总时长，单位为秒
-            totalDuration: 10,
-
-            // 视频广告是否默认静音
-            muted: false,
-
-            // 多语言支持
-            i18n: {
-                close: '关闭广告',
-                countdown: '%s秒',
-                detail: '查看详情',
-                canBeClosed: '%s秒后可关闭广告',
-            },
-        }),
-    ],
-});
-
-// ad is clicked
-art.on('artplayerPluginAds:click', (ads) => {
-    console.info(ads);
-});
-
-// Ad skipped
-art.on('artplayerPluginAds:skip', (ads) => {
-    console.info(ads);
-});
`,1),c=[o,r,t];function i(D,y,F,C,b,d){return n(),l("div",null,c)}const m=a(e,[["render",i]]);export{u as __pageData,m as default}; diff --git a/docs/document/assets/plugin_ads.md.12a970af.lean.js b/docs/document/assets/plugin_ads.md.12a970af.lean.js deleted file mode 100644 index 46aed9454..000000000 --- a/docs/document/assets/plugin_ads.md.12a970af.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as n,c as l,S as s,k as p}from"./chunks/framework.532b6b18.js";const u=JSON.parse('{"title":"视频广告","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/ads.md","filePath":"plugin/ads.md","lastUpdated":1673441101000}'),e={name:"plugin/ads.md"},o=s("",8),r=p("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),t=s("",1),c=[o,r,t];function i(D,y,F,C,b,d){return n(),l("div",null,c)}const m=a(e,[["render",i]]);export{u as __pageData,m as default}; diff --git a/docs/document/assets/plugin_ads.md.uajsmJ_k.js b/docs/document/assets/plugin_ads.md.uajsmJ_k.js new file mode 100644 index 000000000..d8b964017 --- /dev/null +++ b/docs/document/assets/plugin_ads.md.uajsmJ_k.js @@ -0,0 +1,48 @@ +import{_ as a,o as i,c as n,R as s,k as l}from"./chunks/framework.E60viAY0.js";const y=JSON.parse('{"title":"视频广告","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/ads.md","filePath":"plugin/ads.md","lastUpdated":1673441101000}'),p={name:"plugin/ads.md"},e=s('

视频广告 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-ads
bash
yarn add artplayer-plugin-ads
bash
pnpm add artplayer-plugin-ads
html
<script src="path/to/artplayer-plugin-ads.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
bash
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js

使用 ​

',8),t=l("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),h=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    plugins: [
+        artplayerPluginAds({
+            // html广告，假如是视频广告则忽略该值
+            html: '<img src="/assets/sample/poster.jpg">',
+
+            // 视频广告的地址
+            video: '/assets/sample/test1.mp4',
+
+            // 广告跳转网址，为空则不跳转
+            url: 'http://artplayer.org',
+
+            // 必须观看的时长，期间不能被跳过，单位为秒
+            // 当该值大于或等于totalDuration时，不能提前关闭广告
+            // 当该值等于或小于0时，则随时都可以关闭广告
+            playDuration: 5,
+
+            // 广告总时长，单位为秒
+            totalDuration: 10,
+
+            // 视频广告是否默认静音
+            muted: false,
+
+            // 多语言支持
+            i18n: {
+                close: '关闭广告',
+                countdown: '%s秒',
+                detail: '查看详情',
+                canBeClosed: '%s秒后可关闭广告',
+            },
+        }),
+    ],
+});
+
+// ad is clicked
+art.on('artplayerPluginAds:click', (ads) => {
+    console.info(ads);
+});
+
+// Ad skipped
+art.on('artplayerPluginAds:skip', (ads) => {
+    console.info(ads);
+});
`,1),r=[e,t,h];function k(d,E,c,b,g,u){return i(),n("div",null,r)}const m=a(p,[["render",k]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/plugin_ads.md.uajsmJ_k.lean.js b/docs/document/assets/plugin_ads.md.uajsmJ_k.lean.js new file mode 100644 index 000000000..594f5fcd1 --- /dev/null +++ b/docs/document/assets/plugin_ads.md.uajsmJ_k.lean.js @@ -0,0 +1 @@ +import{_ as a,o as i,c as n,R as s,k as l}from"./chunks/framework.E60viAY0.js";const y=JSON.parse('{"title":"视频广告","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/ads.md","filePath":"plugin/ads.md","lastUpdated":1673441101000}'),p={name:"plugin/ads.md"},e=s("",8),t=l("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-ads/index.js"}," ▶ Run Code ",-1),h=s("",1),r=[e,t,h];function k(d,E,c,b,g,u){return i(),n("div",null,r)}const m=a(p,[["render",k]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/plugin_control-ui.md.cf85aeee.js b/docs/document/assets/plugin_control-ui.md.cf85aeee.js deleted file mode 100644 index 68f2d594f..000000000 --- a/docs/document/assets/plugin_control-ui.md.cf85aeee.js +++ /dev/null @@ -1,27 +0,0 @@ -import{_ as n,o as l,c as p,S as s,k as a}from"./chunks/framework.532b6b18.js";const h=JSON.parse('{"title":"控制器皮肤","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/control-ui.md","filePath":"plugin/control-ui.md","lastUpdated":1673441101000}'),e={name:"plugin/control-ui.md"},o=s('

控制器皮肤 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-control
bash
yarn add artplayer-plugin-control
bash
pnpm add artplayer-plugin-control
html
<script src="path/to/artplayer-plugin-control.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-control/dist/artplayer-plugin-control.js
bash
https://unpkg.com/artplayer-plugin-control/dist/artplayer-plugin-control.js

使用 ​

',8),r=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),t=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-    fullscreenWeb: true,
-    plugins: [
-        artplayerPluginControl(),
-    ],
-});

enable ​

  • Type: Getter/Setter
  • Parameter: Boolean

是否启用新的控制器皮肤

`,4),c=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),i=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-    fullscreenWeb: true,
-    controls: [
-        {
-            position: 'right',
-            html: '<button type="button">Switch UI</button>',
-            click: function () {
-                const { enable } = art.plugins.artplayerPluginControl;
-                art.plugins.artplayerPluginControl.enable = !enable;
-            },
-        },
-    ],
-    plugins: [
-        artplayerPluginControl(),
-    ],
-});
`,1),y=[o,r,t,c,i];function D(F,C,d,b,u,A){return l(),p("div",null,y)}const g=n(e,[["render",D]]);export{h as __pageData,g as default}; diff --git a/docs/document/assets/plugin_control-ui.md.cf85aeee.lean.js b/docs/document/assets/plugin_control-ui.md.cf85aeee.lean.js deleted file mode 100644 index 60eb2b898..000000000 --- a/docs/document/assets/plugin_control-ui.md.cf85aeee.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as n,o as l,c as p,S as s,k as a}from"./chunks/framework.532b6b18.js";const h=JSON.parse('{"title":"控制器皮肤","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/control-ui.md","filePath":"plugin/control-ui.md","lastUpdated":1673441101000}'),e={name:"plugin/control-ui.md"},o=s("",8),r=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),t=s("",4),c=a("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-control/index.js"}," ▶ Run Code ",-1),i=s("",1),y=[o,r,t,c,i];function D(F,C,d,b,u,A){return l(),p("div",null,y)}const g=n(e,[["render",D]]);export{h as __pageData,g as default}; diff --git a/docs/document/assets/plugin_danmuku.md.fa90b3e1.js b/docs/document/assets/plugin_danmuku.md.fa90b3e1.js deleted file mode 100644 index 9f3f81a83..000000000 --- a/docs/document/assets/plugin_danmuku.md.fa90b3e1.js +++ /dev/null @@ -1,284 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const I=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1683036652000}'),o={name:"plugin/danmuku.md"},e=s(`

弹幕库 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js

选项 ​

js
{
-    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
-    speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
-    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
-    fontSize: 25, // 字体大小，支持数字和百分比
-    color: '#FFFFFF', // 默认字体颜色
-    mode: 0, // 默认模式，0-滚动，1-静止
-    margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
-    antiOverlap: true, // 是否防重叠
-    useWorker: true, // 是否使用 web worker
-    synchronousPlayback: false, // 是否同步到播放速度
-    filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
-    lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
-    maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
-    minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
-    maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
-    theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
-    heatmap: true, // 是否开启弹幕热度图, 默认为 false
-    beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
-    // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
-    mount: document.querySelector('.artplayer-danmuku'),
-}

使用弹幕数组 ​

`,10),r=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),c=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            // 弹幕数组
-            danmuku: [
-                {
-                    text: '111', // 弹幕文本
-                    time: 1, // 发送时间，单位秒
-                    color: '#fff', // 弹幕局部颜色
-                    border: false, // 是否显示描边
-                    mode: 0, // 弹幕模式: 0表示滚动, 1静止
-                },
-                {
-                    text: '222',
-                    time: 2,
-                    color: 'red',
-                    border: true,
-                    mode: 0,
-                },
-                {
-                    text: '333',
-                    time: 3,
-                    color: 'green',
-                    border: false,
-                    mode: 1,
-                },
-            ],
-        }),
-    ],
-});

使用弹幕 XML ​

`,2),t=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),D=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            // 弹幕 XML 文件，和 Bilibili 网站的弹幕格式一致
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});

使用异步调用 ​

`,2),F=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),y=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            // 使用 Promise 异步返回
-            danmuku: function () {
-                return new Promise((resovle) => {
-                    return resovle([
-                        {
-                            text: '111',
-                            time: 1,
-                        },
-                        {
-                            text: '222',
-                            time: 2,
-                        },
-                        {
-                            text: '333',
-                            time: 3,
-                        },
-                    ]);
-                });
-            },
-        }),
-    ],
-});

hide/show ​

通过方法 hide 和 show 进行隐藏或者显示弹幕

`,3),i=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),C=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '隐藏弹幕',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.hide();
-            },
-        },
-        {
-            position: 'right',
-            html: '显示弹幕',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.show();
-            },
-        },
-    ],
-});

isHide ​

通过属性 isHide 判断当前弹幕是隐藏或者显示

`,3),A=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),u=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '隐藏弹幕',
-            click: function (_, event) {
-                if (art.plugins.artplayerPluginDanmuku.isHide) {
-                    art.plugins.artplayerPluginDanmuku.show();
-                    event.target.innerText = '隐藏弹幕';
-                } else {
-                    art.plugins.artplayerPluginDanmuku.hide();
-                    event.target.innerText = '显示弹幕';
-                }
-            },
-        },
-    ],
-});

emit ​

通过方法 emit 发送一条实时弹幕

`,3),b=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),m=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '发送弹幕',
-            click: function () {
-                var text = prompt('请输入弹幕文本', '弹幕测试文本');
-                if (!text || !text.trim()) return;
-                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
-                art.plugins.artplayerPluginDanmuku.emit({
-                    text: text,
-                    color: color,
-                    border: true,
-                });
-            },
-        },
-    ],
-});

config ​

通过方法 config 实时改变弹幕配置，支持属性有：

  • danmuku
  • speed
  • opacity
  • fontSize
  • color
  • mode
  • margin
  • antiOverlap
  • synchronousPlayback
  • filter
  • lockTime
  • beforeEmit
`,4),d=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),h=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '弹幕大小：<input type="range" min="12" max="50" step="1" value="25">',
-            style: {
-                display: 'flex',
-                alignItems: 'center',
-            },
-            mounted: function ($setting) {
-                const $range = $setting.querySelector('input[type=range]');
-                $range.addEventListener('change', () => {
-                    art.plugins.artplayerPluginDanmuku.config({
-                        fontSize: Number($range.value),
-                    });
-                });
-            },
-        },
-    ],
-});

load ​

通过 load 方法可以重载弹幕源，或者切换新弹幕

`,3),g=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),_=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '重载弹幕',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.load();
-            },
-        },
-        {
-            position: 'right',
-            html: '切换弹幕',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.config({
-                    danmuku: '/assets/sample/danmuku-v2.xml',
-                });
-                art.plugins.artplayerPluginDanmuku.load();
-            },
-        },
-    ],
-});

reset ​

用于清空当前显示的弹幕

`,3),E=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),k=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
-
-art.on('resize', () => {
-    art.plugins.artplayerPluginDanmuku.reset();
-});

option ​

用于获取当前弹幕配置

`,3),v=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),f=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
-
-art.on('ready', () => {
-    console.info(art.plugins.artplayerPluginDanmuku.option);
-});

事件 ​

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
-
-art.on('artplayerPluginDanmuku:emit', (danmu) => {
-    console.info('新增弹幕', danmu);
-});
-
-art.on('artplayerPluginDanmuku:loaded', (danmus) => {
-    console.info('加载弹幕', danmus.length);
-});
-
-art.on('artplayerPluginDanmuku:error', (error) => {
-    console.info('加载错误', error);
-});
-
-art.on('artplayerPluginDanmuku:config', (option) => {
-    console.info('配置变化', option);
-});
-
-art.on('artplayerPluginDanmuku:stop', () => {
-    console.info('弹幕停止');
-});
-
-art.on('artplayerPluginDanmuku:start', () => {
-    console.info('弹幕开始');
-});
-
-art.on('artplayerPluginDanmuku:hide', () => {
-    console.info('弹幕隐藏');
-});
-
-art.on('artplayerPluginDanmuku:show', () => {
-    console.info('弹幕显示');
-});
-
-art.on('artplayerPluginDanmuku:destroy', () => {
-    console.info('弹幕销毁');
-});
`,3),P=[e,r,c,t,D,F,y,i,C,A,u,b,m,d,h,g,_,E,k,v,f];function T(x,B,q,S,j,w){return l(),p("div",null,P)}const V=a(o,[["render",T]]);export{I as __pageData,V as default}; diff --git a/docs/document/assets/plugin_danmuku.md.fa90b3e1.lean.js b/docs/document/assets/plugin_danmuku.md.fa90b3e1.lean.js deleted file mode 100644 index 3b0ca970e..000000000 --- a/docs/document/assets/plugin_danmuku.md.fa90b3e1.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as l,c as p,S as s,k as n}from"./chunks/framework.532b6b18.js";const I=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1683036652000}'),o={name:"plugin/danmuku.md"},e=s("",10),r=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),c=s("",2),t=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),D=s("",2),F=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),y=s("",3),i=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),C=s("",3),A=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),u=s("",3),b=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),m=s("",4),d=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),h=s("",3),g=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),_=s("",3),E=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),k=s("",3),v=n("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),f=s("",3),P=[e,r,c,t,D,F,y,i,C,A,u,b,m,d,h,g,_,E,k,v,f];function T(x,B,q,S,j,w){return l(),p("div",null,P)}const V=a(o,[["render",T]]);export{I as __pageData,V as default}; diff --git a/docs/document/assets/plugin_danmuku.md.j9nErxGM.js b/docs/document/assets/plugin_danmuku.md.j9nErxGM.js new file mode 100644 index 000000000..53114dd55 --- /dev/null +++ b/docs/document/assets/plugin_danmuku.md.j9nErxGM.js @@ -0,0 +1,284 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const I=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1683036652000}'),p={name:"plugin/danmuku.md"},h=s(`

弹幕库 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js

选项 ​

js
{
+    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
+    speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
+    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
+    fontSize: 25, // 字体大小，支持数字和百分比
+    color: '#FFFFFF', // 默认字体颜色
+    mode: 0, // 默认模式，0-滚动，1-静止
+    margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
+    antiOverlap: true, // 是否防重叠
+    useWorker: true, // 是否使用 web worker
+    synchronousPlayback: false, // 是否同步到播放速度
+    filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
+    lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
+    maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
+    minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
+    maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
+    theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
+    heatmap: true, // 是否开启弹幕热度图, 默认为 false
+    beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
+    // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
+    mount: document.querySelector('.artplayer-danmuku'),
+}

使用弹幕数组 ​

`,10),e=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),k=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            // 弹幕数组
+            danmuku: [
+                {
+                    text: '111', // 弹幕文本
+                    time: 1, // 发送时间，单位秒
+                    color: '#fff', // 弹幕局部颜色
+                    border: false, // 是否显示描边
+                    mode: 0, // 弹幕模式: 0表示滚动, 1静止
+                },
+                {
+                    text: '222',
+                    time: 2,
+                    color: 'red',
+                    border: true,
+                    mode: 0,
+                },
+                {
+                    text: '333',
+                    time: 3,
+                    color: 'green',
+                    border: false,
+                    mode: 1,
+                },
+            ],
+        }),
+    ],
+});

使用弹幕 XML ​

`,2),t=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),E=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            // 弹幕 XML 文件，和 Bilibili 网站的弹幕格式一致
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});

使用异步调用 ​

`,2),r=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),d=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            // 使用 Promise 异步返回
+            danmuku: function () {
+                return new Promise((resovle) => {
+                    return resovle([
+                        {
+                            text: '111',
+                            time: 1,
+                        },
+                        {
+                            text: '222',
+                            time: 2,
+                        },
+                        {
+                            text: '333',
+                            time: 3,
+                        },
+                    ]);
+                });
+            },
+        }),
+    ],
+});

hide/show ​

通过方法 hide 和 show 进行隐藏或者显示弹幕

`,3),g=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),c=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '隐藏弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.hide();
+            },
+        },
+        {
+            position: 'right',
+            html: '显示弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.show();
+            },
+        },
+    ],
+});

isHide ​

通过属性 isHide 判断当前弹幕是隐藏或者显示

`,3),y=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),u=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '隐藏弹幕',
+            click: function (_, event) {
+                if (art.plugins.artplayerPluginDanmuku.isHide) {
+                    art.plugins.artplayerPluginDanmuku.show();
+                    event.target.innerText = '隐藏弹幕';
+                } else {
+                    art.plugins.artplayerPluginDanmuku.hide();
+                    event.target.innerText = '显示弹幕';
+                }
+            },
+        },
+    ],
+});

emit ​

通过方法 emit 发送一条实时弹幕

`,3),b=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),F=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '发送弹幕',
+            click: function () {
+                var text = prompt('请输入弹幕文本', '弹幕测试文本');
+                if (!text || !text.trim()) return;
+                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
+                art.plugins.artplayerPluginDanmuku.emit({
+                    text: text,
+                    color: color,
+                    border: true,
+                });
+            },
+        },
+    ],
+});

config ​

通过方法 config 实时改变弹幕配置，支持属性有：

  • danmuku
  • speed
  • opacity
  • fontSize
  • color
  • mode
  • margin
  • antiOverlap
  • synchronousPlayback
  • filter
  • lockTime
  • beforeEmit
`,4),m=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),o=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '弹幕大小：<input type="range" min="12" max="50" step="1" value="25">',
+            style: {
+                display: 'flex',
+                alignItems: 'center',
+            },
+            mounted: function ($setting) {
+                const $range = $setting.querySelector('input[type=range]');
+                $range.addEventListener('change', () => {
+                    art.plugins.artplayerPluginDanmuku.config({
+                        fontSize: Number($range.value),
+                    });
+                });
+            },
+        },
+    ],
+});

load ​

通过 load 方法可以重载弹幕源，或者切换新弹幕

`,3),C=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),B=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '重载弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+        {
+            position: 'right',
+            html: '切换弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.config({
+                    danmuku: '/assets/sample/danmuku-v2.xml',
+                });
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+    ],
+});

reset ​

用于清空当前显示的弹幕

`,3),v=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),A=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('resize', () => {
+    art.plugins.artplayerPluginDanmuku.reset();
+});

option ​

用于获取当前弹幕配置

`,3),_=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),D=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('ready', () => {
+    console.info(art.plugins.artplayerPluginDanmuku.option);
+});

事件 ​

js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('artplayerPluginDanmuku:emit', (danmu) => {
+    console.info('新增弹幕', danmu);
+});
+
+art.on('artplayerPluginDanmuku:loaded', (danmus) => {
+    console.info('加载弹幕', danmus.length);
+});
+
+art.on('artplayerPluginDanmuku:error', (error) => {
+    console.info('加载错误', error);
+});
+
+art.on('artplayerPluginDanmuku:config', (option) => {
+    console.info('配置变化', option);
+});
+
+art.on('artplayerPluginDanmuku:stop', () => {
+    console.info('弹幕停止');
+});
+
+art.on('artplayerPluginDanmuku:start', () => {
+    console.info('弹幕开始');
+});
+
+art.on('artplayerPluginDanmuku:hide', () => {
+    console.info('弹幕隐藏');
+});
+
+art.on('artplayerPluginDanmuku:show', () => {
+    console.info('弹幕显示');
+});
+
+art.on('artplayerPluginDanmuku:destroy', () => {
+    console.info('弹幕销毁');
+});
`,3),f=[h,e,k,t,E,r,d,g,c,y,u,b,F,m,o,C,B,v,A,_,D];function P(T,x,q,S,j,w){return n(),l("div",null,f)}const R=a(p,[["render",P]]);export{I as __pageData,R as default}; diff --git a/docs/document/assets/plugin_danmuku.md.j9nErxGM.lean.js b/docs/document/assets/plugin_danmuku.md.j9nErxGM.lean.js new file mode 100644 index 000000000..5ecf86635 --- /dev/null +++ b/docs/document/assets/plugin_danmuku.md.j9nErxGM.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const I=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1683036652000}'),p={name:"plugin/danmuku.md"},h=s("",10),e=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),k=s("",2),t=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),E=s("",2),r=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),d=s("",3),g=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),c=s("",3),y=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),u=s("",3),b=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),F=s("",4),m=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),o=s("",3),C=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),B=s("",3),v=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),A=s("",3),_=i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),D=s("",3),f=[h,e,k,t,E,r,d,g,c,y,u,b,F,m,o,C,B,v,A,_,D];function P(T,x,q,S,j,w){return n(),l("div",null,f)}const R=a(p,[["render",P]]);export{I as __pageData,R as default}; diff --git a/docs/document/assets/plugin_dash-quality.md.90dd7335.js b/docs/document/assets/plugin_dash-quality.md.90dd7335.js deleted file mode 100644 index 5b3e2decd..000000000 --- a/docs/document/assets/plugin_dash-quality.md.90dd7335.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as s,c as e,S as l}from"./chunks/framework.532b6b18.js";const y=JSON.parse('{"title":"Dash 画质","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/dash-quality.md","filePath":"plugin/dash-quality.md","lastUpdated":1676696783000}'),n={name:"plugin/dash-quality.md"},t=l('

Dash 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-dash-quality
bash
yarn add artplayer-plugin-dash-quality
bash
pnpm add artplayer-plugin-dash-quality
html
<script src="path/to/artplayer-plugin-dash-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
bash
https://unpkg.com/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
',7),p=[t];function i(r,o,c,d,u,h){return s(),e("div",null,p)}const m=a(n,[["render",i]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/plugin_dash-quality.md.90dd7335.lean.js b/docs/document/assets/plugin_dash-quality.md.90dd7335.lean.js deleted file mode 100644 index 950e01361..000000000 --- a/docs/document/assets/plugin_dash-quality.md.90dd7335.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as s,c as e,S as l}from"./chunks/framework.532b6b18.js";const y=JSON.parse('{"title":"Dash 画质","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/dash-quality.md","filePath":"plugin/dash-quality.md","lastUpdated":1676696783000}'),n={name:"plugin/dash-quality.md"},t=l("",7),p=[t];function i(r,o,c,d,u,h){return s(),e("div",null,p)}const m=a(n,[["render",i]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/plugin_dash-quality.md.MnopqkMN.js b/docs/document/assets/plugin_dash-quality.md.MnopqkMN.js new file mode 100644 index 000000000..82b97b8a8 --- /dev/null +++ b/docs/document/assets/plugin_dash-quality.md.MnopqkMN.js @@ -0,0 +1 @@ +import{_ as a,o as s,c as i,R as e}from"./chunks/framework.E60viAY0.js";const k=JSON.parse('{"title":"Dash 画质","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/dash-quality.md","filePath":"plugin/dash-quality.md","lastUpdated":1676696783000}'),t={name:"plugin/dash-quality.md"},l=e('

Dash 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-dash-quality
bash
yarn add artplayer-plugin-dash-quality
bash
pnpm add artplayer-plugin-dash-quality
html
<script src="path/to/artplayer-plugin-dash-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
bash
https://unpkg.com/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
',7),n=[l];function p(d,r,h,o,c,u){return s(),i("div",null,n)}const g=a(t,[["render",p]]);export{k as __pageData,g as default}; diff --git a/docs/document/assets/plugin_dash-quality.md.MnopqkMN.lean.js b/docs/document/assets/plugin_dash-quality.md.MnopqkMN.lean.js new file mode 100644 index 000000000..ec10ef453 --- /dev/null +++ b/docs/document/assets/plugin_dash-quality.md.MnopqkMN.lean.js @@ -0,0 +1 @@ +import{_ as a,o as s,c as i,R as e}from"./chunks/framework.E60viAY0.js";const k=JSON.parse('{"title":"Dash 画质","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/dash-quality.md","filePath":"plugin/dash-quality.md","lastUpdated":1676696783000}'),t={name:"plugin/dash-quality.md"},l=e("",7),n=[l];function p(d,r,h,o,c,u){return s(),i("div",null,n)}const g=a(t,[["render",p]]);export{k as __pageData,g as default}; diff --git a/docs/document/assets/plugin_hls-quality.md.GspGF35D.js b/docs/document/assets/plugin_hls-quality.md.GspGF35D.js new file mode 100644 index 000000000..fc8e2ff0f --- /dev/null +++ b/docs/document/assets/plugin_hls-quality.md.GspGF35D.js @@ -0,0 +1 @@ +import{_ as a,o as s,c as i,R as e}from"./chunks/framework.E60viAY0.js";const k=JSON.parse('{"title":"HLS 画质","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/hls-quality.md","filePath":"plugin/hls-quality.md","lastUpdated":1673441101000}'),l={name:"plugin/hls-quality.md"},t=e('

HLS 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-hls-quality
bash
yarn add artplayer-plugin-hls-quality
bash
pnpm add artplayer-plugin-hls-quality
html
<script src="path/to/artplayer-plugin-hls-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
bash
https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
',7),n=[t];function p(r,h,d,c,o,u){return s(),i("div",null,n)}const g=a(l,[["render",p]]);export{k as __pageData,g as default}; diff --git a/docs/document/assets/plugin_hls-quality.md.GspGF35D.lean.js b/docs/document/assets/plugin_hls-quality.md.GspGF35D.lean.js new file mode 100644 index 000000000..53971f128 --- /dev/null +++ b/docs/document/assets/plugin_hls-quality.md.GspGF35D.lean.js @@ -0,0 +1 @@ +import{_ as a,o as s,c as i,R as e}from"./chunks/framework.E60viAY0.js";const k=JSON.parse('{"title":"HLS 画质","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/hls-quality.md","filePath":"plugin/hls-quality.md","lastUpdated":1673441101000}'),l={name:"plugin/hls-quality.md"},t=e("",7),n=[t];function p(r,h,d,c,o,u){return s(),i("div",null,n)}const g=a(l,[["render",p]]);export{k as __pageData,g as default}; diff --git a/docs/document/assets/plugin_hls-quality.md.b494718c.js b/docs/document/assets/plugin_hls-quality.md.b494718c.js deleted file mode 100644 index 80b736ac4..000000000 --- a/docs/document/assets/plugin_hls-quality.md.b494718c.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as s,c as l,S as e}from"./chunks/framework.532b6b18.js";const y=JSON.parse('{"title":"HLS 画质","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/hls-quality.md","filePath":"plugin/hls-quality.md","lastUpdated":1673441101000}'),n={name:"plugin/hls-quality.md"},t=e('

HLS 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-hls-quality
bash
yarn add artplayer-plugin-hls-quality
bash
pnpm add artplayer-plugin-hls-quality
html
<script src="path/to/artplayer-plugin-hls-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
bash
https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
',7),p=[t];function r(i,o,c,d,u,h){return s(),l("div",null,p)}const m=a(n,[["render",r]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/plugin_hls-quality.md.b494718c.lean.js b/docs/document/assets/plugin_hls-quality.md.b494718c.lean.js deleted file mode 100644 index cd01cb1a8..000000000 --- a/docs/document/assets/plugin_hls-quality.md.b494718c.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as a,o as s,c as l,S as e}from"./chunks/framework.532b6b18.js";const y=JSON.parse('{"title":"HLS 画质","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/hls-quality.md","filePath":"plugin/hls-quality.md","lastUpdated":1673441101000}'),n={name:"plugin/hls-quality.md"},t=e("",7),p=[t];function r(i,o,c,d,u,h){return s(),l("div",null,p)}const m=a(n,[["render",r]]);export{y as __pageData,m as default}; diff --git a/docs/document/assets/plugin_iframe.md.62b646f4.js b/docs/document/assets/plugin_iframe.md.62b646f4.js deleted file mode 100644 index c42f4c118..000000000 --- a/docs/document/assets/plugin_iframe.md.62b646f4.js +++ /dev/null @@ -1,166 +0,0 @@ -import{_ as s,o as a,c as n,S as l}from"./chunks/framework.532b6b18.js";const A=JSON.parse('{"title":"Iframe 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/iframe.md","filePath":"plugin/iframe.md","lastUpdated":1680272727000}'),p={name:"plugin/iframe.md"},o=l(`

Iframe 控制 ​

说明 ​

通过该插件，你可以轻松在 index.html 里控制跨域 iframe.html 页面里的播放器，如在 index.html 里通过代码控制 iframe.html 播放器的功能，或者获取 iframe.html 播放器的值

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-iframe
bash
yarn add artplayer-plugin-iframe
bash
pnpm add artplayer-plugin-iframe
html
<script src="path/to/artplayer-plugin-iframe.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
bash
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js

使用 ​

html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-    </head>
-    <body>
-        <iframe id="iframe"></iframe>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            const iframe = new ArtplayerPluginIframe({
-                // Iframe element
-                iframe: document.querySelector('#iframe'),
-                // Iframe url
-                url: 'path/to/iframe.html',
-            });
-
-            // Send message to iframe
-            iframe.commit(() => {
-                var art = new Artplayer({
-                    container: '.artplayer-app',
-                    url: 'path/to/video.mp4',
-                });
-            });
-        </script>
-    </body>
-</html>
html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-        <style>
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                padding: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
-        <script src="path/to/artplayer.js"></script>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            // Inject scripts to receive messages from instances
-            ArtplayerPluginIframe.inject();
-        </script>
-    </body>
-</html>

index.html 接口 ​

commit ​

从 index.html 将消息推送到 iframe.html，该函数将在 iframe.html 内部运行，同时它也能用于异步获取 iframe.html 里的值

js
iframe.commit(() => {
-    var art = new Artplayer({
-        container: '.artplayer-app',
-        url: 'path/to/video.mp4',
-    });
-});
-
-iframe.commit(() => {
-    art.seek = 5;
-});
-
-// Get the value from the iframe.html
-(async function () {
-    // Use the return keyword
-    var currentTime = await iframe.commit(() => {
-        return art.currentTime;
-    });
-
-    // or use the resolve method
-    var currentTime2 = await iframe.commit((resolve) => {
-        setTimeout(() => {
-            resolve(art.currentTime);
-        }, 1000);
-    });
-})();

message ​

在 index.html 接收来自 iframe.html 的消息

js
iframe.message((event) => {
-    console.info(event);
-});

destroy ​

销毁后 index.html 无法与 iframe.html 通信

js
iframe.destroy();

iframe.html 接口 ​

提示

iframe.html 接口 只能运行在 iframe.html 里

inject ​

注入脚本，接收来自 index.html 的消息

js
ArtplayerPluginIframe.inject();

postMessage ​

将消息推送到 index.html

js
iframe.message((event) => {
-    console.info(event);
-});
-
-iframe.commit(() => {
-    ArtplayerPluginIframe.postMessage({
-        type: 'currentTime',
-        data: art.currentTime,
-    });
-});

例子 ​

最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 iframe.html 里的 fullscreenWeb 事件并通知到 index.html 即可

html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-    </head>
-    <body>
-        <iframe id="iframe"></iframe>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <style>
-            .fullscreenWeb {
-                position: fixed;
-                z-index: 9999;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                right: 0;
-                bottom: 0;
-            }
-        </style>
-        <script>
-            const $iframe = document.querySelector('#iframe');
-            const iframe = new ArtplayerPluginIframe({
-                iframe: $iframe,
-                url: 'path/to/iframe.html',
-            });
-
-            iframe.message(({ type, data }) => {
-                switch (type) {
-                    case 'fullscreenWeb':
-                        if (data) {
-                            $iframe.classList.add('fullscreenWeb');
-                        } else {
-                            $iframe.classList.remove('fullscreenWeb');
-                        }
-                        break;
-                    default:
-                        break;
-                }
-            });
-
-            iframe.commit(() => {
-                var art = new Artplayer({
-                    container: '.artplayer-app',
-                    url: 'path/to/video.mp4',
-                });
-
-                art.on('fullscreenWeb', (state) => {
-                    ArtplayerPluginIframe.postMessage({
-                        type: 'fullscreenWeb',
-                        data: state,
-                    });
-                });
-            });
-        </script>
-    </body>
-</html>
html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-        <style>
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                padding: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
-        <script src="path/to/artplayer.js"></script>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            ArtplayerPluginIframe.inject();
-        </script>
-    </body>
-</html>
`,32),e=[o];function r(t,c,F,D,y,i){return a(),n("div",null,e)}const b=s(p,[["render",r]]);export{A as __pageData,b as default}; diff --git a/docs/document/assets/plugin_iframe.md.62b646f4.lean.js b/docs/document/assets/plugin_iframe.md.62b646f4.lean.js deleted file mode 100644 index bd22be0ad..000000000 --- a/docs/document/assets/plugin_iframe.md.62b646f4.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,o as a,c as n,S as l}from"./chunks/framework.532b6b18.js";const A=JSON.parse('{"title":"Iframe 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/iframe.md","filePath":"plugin/iframe.md","lastUpdated":1680272727000}'),p={name:"plugin/iframe.md"},o=l("",32),e=[o];function r(t,c,F,D,y,i){return a(),n("div",null,e)}const b=s(p,[["render",r]]);export{A as __pageData,b as default}; diff --git a/docs/document/assets/plugin_iframe.md.Y3z3hB9z.js b/docs/document/assets/plugin_iframe.md.Y3z3hB9z.js new file mode 100644 index 000000000..6091c98ae --- /dev/null +++ b/docs/document/assets/plugin_iframe.md.Y3z3hB9z.js @@ -0,0 +1,168 @@ +import{_ as s,o as i,c as a,R as n}from"./chunks/framework.E60viAY0.js";const y=JSON.parse('{"title":"Iframe 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/iframe.md","filePath":"plugin/iframe.md","lastUpdated":1680272727000}'),l={name:"plugin/iframe.md"},p=n(`

Iframe 控制 ​

说明 ​

通过该插件，你可以轻松在 index.html 里控制跨域 iframe.html 页面里的播放器，如在 index.html 里通过代码控制 iframe.html 播放器的功能，或者获取 iframe.html 播放器的值

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-iframe
bash
yarn add artplayer-plugin-iframe
bash
pnpm add artplayer-plugin-iframe
html
<script src="path/to/artplayer-plugin-iframe.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
bash
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js

使用 ​

html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            const iframe = new ArtplayerPluginIframe({
+                // Iframe element
+                iframe: document.querySelector('#iframe'),
+                // Iframe url
+                url: 'path/to/iframe.html',
+            });
+
+            // Send message to iframe
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
+            });
+        </script>
+    </body>
+</html>
html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            // Inject scripts to receive messages from instances
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>

index.html 接口 ​

commit ​

从 index.html 将消息推送到 iframe.html，该函数将在 iframe.html 内部运行，同时它也能用于异步获取 iframe.html 里的值

js
iframe.commit(() => {
+    var art = new Artplayer({
+        container: '.artplayer-app',
+        url: 'path/to/video.mp4',
+    });
+});
+
+iframe.commit(() => {
+    art.seek = 5;
+});
+
+// Get the value from the iframe.html
+(async function () {
+    // Use the return keyword
+    var currentTime = await iframe.commit(() => {
+        return art.currentTime;
+    });
+
+    // or use the resolve method
+    var currentTime2 = await iframe.commit((resolve) => {
+        setTimeout(() => {
+            resolve(art.currentTime);
+        }, 1000);
+    });
+})();

message ​

在 index.html 接收来自 iframe.html 的消息

js
iframe.message((event) => {
+    console.info(event);
+});

destroy ​

销毁后 index.html 无法与 iframe.html 通信

js
iframe.destroy();

iframe.html 接口 ​

提示

iframe.html 接口 只能运行在 iframe.html 里

inject ​

注入脚本，接收来自 index.html 的消息

js
ArtplayerPluginIframe.inject();

postMessage ​

将消息推送到 index.html

js
iframe.message((event) => {
+    console.info(event);
+});
+
+iframe.commit(() => {
+    ArtplayerPluginIframe.postMessage({
+        type: 'currentTime',
+        data: art.currentTime,
+    });
+});

例子 ​

最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 iframe.html 里的 fullscreenWeb 事件并通知到 index.html 即可

html

+<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <style>
+            .fullscreenWeb {
+                position: fixed;
+                z-index: 9999;
+                width: 100%;
+                height: 100%;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+            }
+        </style>
+        <script>
+            const $iframe = document.querySelector('#iframe');
+            const iframe = new ArtplayerPluginIframe({
+                iframe: $iframe,
+                url: 'path/to/iframe.html',
+            });
+
+            iframe.message(({ type, data }) => {
+                switch (type) {
+                    case 'fullscreenWeb':
+                        if (data) {
+                            $iframe.classList.add('fullscreenWeb');
+                        } else {
+                            $iframe.classList.remove('fullscreenWeb');
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            });
+
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
+
+                art.on('fullscreenWeb', (state) => {
+                    ArtplayerPluginIframe.postMessage({
+                        type: 'fullscreenWeb',
+                        data: state,
+                    });
+                });
+            });
+        </script>
+    </body>
+</html>
html

+<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>
`,32),h=[p];function t(e,k,r,E,d,g){return i(),a("div",null,h)}const b=s(l,[["render",t]]);export{y as __pageData,b as default}; diff --git a/docs/document/assets/plugin_iframe.md.Y3z3hB9z.lean.js b/docs/document/assets/plugin_iframe.md.Y3z3hB9z.lean.js new file mode 100644 index 000000000..c3a05fc07 --- /dev/null +++ b/docs/document/assets/plugin_iframe.md.Y3z3hB9z.lean.js @@ -0,0 +1 @@ +import{_ as s,o as i,c as a,R as n}from"./chunks/framework.E60viAY0.js";const y=JSON.parse('{"title":"Iframe 控制","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/iframe.md","filePath":"plugin/iframe.md","lastUpdated":1680272727000}'),l={name:"plugin/iframe.md"},p=n("",32),h=[p];function t(e,k,r,E,d,g){return i(),a("div",null,h)}const b=s(l,[["render",t]]);export{y as __pageData,b as default}; diff --git a/docs/document/assets/start_i18n.md.7503329d.js b/docs/document/assets/start_i18n.md.7503329d.js deleted file mode 100644 index 5723b1868..000000000 --- a/docs/document/assets/start_i18n.md.7503329d.js +++ /dev/null @@ -1,52 +0,0 @@ -import{_ as s,o as a,c as n,S as l}from"./chunks/framework.532b6b18.js";const A=JSON.parse('{"title":"语言设置","description":"","frontmatter":{},"headers":[],"relativePath":"start/i18n.md","filePath":"start/i18n.md","lastUpdated":1693027339000}'),p={name:"start/i18n.md"},o=l(`

语言设置 ​

DANGER

鉴于捆绑的多国语言越来越多, 从 5.1.0 版本开始, artplayer.js 核心代码除了包含 简体中文 和 英文 外, 不再捆绑其它多国语言, 需要自行导入需要的语言。

WARNING

当无法匹配到语言时, 会默认显示英文, i18n 写法参考: artplayer/types/i18n.d.ts

默认语言 ​

默认语言有: en, zh-cn, 无需手动导入

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'zh-cn', // or 'en'
-});

导入语言 ​

打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言

打包后的语言文件存放于: artplayer/dist/i18n/*.js

手动导入的语言有: cs, es, fa, fr, id, pl, ru, zh-tw

js
import id from 'artplayer/dist/i18n/id.js';
-import zhTw from 'artplayer/dist/i18n/zh-tw.js';
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: { 
-        id: id,
-        'zh-tw': zhTw,
-    },
-    lang: 'zh-tw',
-});
js
<script src="artplayer/dist/i18n/id.js"></script>
-<script src="artplayer/dist/i18n/zh-tw.js"></script>
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: { 
-        id: window['artplayer-i18n-id'],
-        'zh-tw': window['artplayer-i18n-zh-tw'],
-    },
-    lang: 'zh-tw',
-});

新增语言 ​

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'your-lang',
-    i18n: {
-        'your-lang': {
-            Play: 'Your Play'
-        },
-    },
-});

修改语言 ​

js
import zhTw from 'artplayer/i18n/zh-tw.js';
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: {
-        // Change the default language
-        'zh-cn': {
-            Play: 'Your Play'
-        },
-        // Change the imported language
-        'zh-tw': {
-            ...zhTw,
-            Play: 'Your Play'
-        },
-    },
-});
`,15),e=[o];function r(c,t,D,y,F,i){return a(),n("div",null,e)}const d=s(p,[["render",r]]);export{A as __pageData,d as default}; diff --git a/docs/document/assets/start_i18n.md.7503329d.lean.js b/docs/document/assets/start_i18n.md.7503329d.lean.js deleted file mode 100644 index cdd20dff1..000000000 --- a/docs/document/assets/start_i18n.md.7503329d.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,o as a,c as n,S as l}from"./chunks/framework.532b6b18.js";const A=JSON.parse('{"title":"语言设置","description":"","frontmatter":{},"headers":[],"relativePath":"start/i18n.md","filePath":"start/i18n.md","lastUpdated":1693027339000}'),p={name:"start/i18n.md"},o=l("",15),e=[o];function r(c,t,D,y,F,i){return a(),n("div",null,e)}const d=s(p,[["render",r]]);export{A as __pageData,d as default}; diff --git a/docs/document/assets/start_i18n.md.eP6fmX5M.js b/docs/document/assets/start_i18n.md.eP6fmX5M.js new file mode 100644 index 000000000..5ae63c9aa --- /dev/null +++ b/docs/document/assets/start_i18n.md.eP6fmX5M.js @@ -0,0 +1,52 @@ +import{_ as s,o as a,c as i,R as n}from"./chunks/framework.E60viAY0.js";const y=JSON.parse('{"title":"语言设置","description":"","frontmatter":{},"headers":[],"relativePath":"start/i18n.md","filePath":"start/i18n.md","lastUpdated":1693027339000}'),l={name:"start/i18n.md"},p=n(`

语言设置 ​

DANGER

鉴于捆绑的多国语言越来越多, 从 5.1.0 版本开始, artplayer.js 核心代码除了包含 简体中文 和 英文 外, 不再捆绑其它多国语言, 需要自行导入需要的语言。

WARNING

当无法匹配到语言时, 会默认显示英文, i18n 写法参考: artplayer/types/i18n.d.ts

默认语言 ​

默认语言有: en, zh-cn, 无需手动导入

js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'zh-cn', // or 'en'
+});

导入语言 ​

打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言

打包后的语言文件存放于: artplayer/dist/i18n/*.js

手动导入的语言有: cs, es, fa, fr, id, pl, ru, zh-tw

js
import id from 'artplayer/dist/i18n/id.js';
+import zhTw from 'artplayer/dist/i18n/zh-tw.js';
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: { 
+        id: id,
+        'zh-tw': zhTw,
+    },
+    lang: 'zh-tw',
+});
js
<script src="artplayer/dist/i18n/id.js"></script>
+<script src="artplayer/dist/i18n/zh-tw.js"></script>
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: { 
+        id: window['artplayer-i18n-id'],
+        'zh-tw': window['artplayer-i18n-zh-tw'],
+    },
+    lang: 'zh-tw',
+});

新增语言 ​

js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'your-lang',
+    i18n: {
+        'your-lang': {
+            Play: 'Your Play'
+        },
+    },
+});

修改语言 ​

js
import zhTw from 'artplayer/i18n/zh-tw.js';
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: {
+        // Change the default language
+        'zh-cn': {
+            Play: 'Your Play'
+        },
+        // Change the imported language
+        'zh-tw': {
+            ...zhTw,
+            Play: 'Your Play'
+        },
+    },
+});
`,15),e=[p];function h(t,k,r,E,d,c){return a(),i("div",null,e)}const b=s(l,[["render",h]]);export{y as __pageData,b as default}; diff --git a/docs/document/assets/start_i18n.md.eP6fmX5M.lean.js b/docs/document/assets/start_i18n.md.eP6fmX5M.lean.js new file mode 100644 index 000000000..c5bfb6fe6 --- /dev/null +++ b/docs/document/assets/start_i18n.md.eP6fmX5M.lean.js @@ -0,0 +1 @@ +import{_ as s,o as a,c as i,R as n}from"./chunks/framework.E60viAY0.js";const y=JSON.parse('{"title":"语言设置","description":"","frontmatter":{},"headers":[],"relativePath":"start/i18n.md","filePath":"start/i18n.md","lastUpdated":1693027339000}'),l={name:"start/i18n.md"},p=n("",15),e=[p];function h(t,k,r,E,d,c){return a(),i("div",null,e)}const b=s(l,[["render",h]]);export{y as __pageData,b as default}; diff --git a/docs/document/assets/start_option.md.81dcd571.js b/docs/document/assets/start_option.md.81dcd571.js deleted file mode 100644 index 8b25ef875..000000000 --- a/docs/document/assets/start_option.md.81dcd571.js +++ /dev/null @@ -1,380 +0,0 @@ -import{_ as n,o as l,c as p,S as s,k as a}from"./chunks/framework.532b6b18.js";const ra=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1693027339000}'),e={name:"start/option.md"},o=s('

基础选项 ​

container ​

  • Type: String, Element
  • Default: #artplayer

播放器挂载的 DOM 容器

',4),c=a("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app', 
-    // container: document.querySelector('.artplayer-app'),
-    url: '/assets/sample/video.mp4',
-});

您可能需要初始化容器元素的大小，如:

css
.artplayer-app {
-    width: 400px;
-    height: 300px;
-}

或者使用 aspect-ratio：

css
.artplayer-app {
-    aspect-ratio: 16/9;
-}

提示

全部选项里，只有 container 是必填的

url ​

  • Type: String
  • Default: ''

视频源地址

`,9),t=a("div",{className:"run-code"},"▶ Run Code",-1),D=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

有时候 url 地址没那么快知道，这时候你可以异步设置 url

`,2),i=a("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-});
-
-setTimeout(() => {
-    art.url = '/assets/sample/video.mp4';
-}, 1000);

提示

默认支持三种视频文件格式：.mp4, .ogg, .webm

如需要播放 .m3u8 或者 .flv 等其它格式，请参考左侧的 第三方库

id ​

  • Type: String
  • Default: ''

播放器的唯一标识，目前只用于记忆播放 autoplayback

`,5),F=a("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
-    id: 'your-url-id',
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

onReady ​

  • Type: Function
  • Default: undefined

构造函数接受一个函数作为第二个参数，播放器初始化成功且视频可以播放时触发，和ready事件一样

`,4),A=a("div",{className:"run-code"},"▶ Run Code",-1),d=s(`
js
var art = new Artplayer(
-    {
-        container: '.artplayer-app',
-        url: '/assets/sample/video.mp4',
-        muted: true,
-    },
-    function onReady(art) {
-        this.play()
-    },
-);

等同于:

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
-
-art.on('ready', () => {
-    art.play();
-});

提示

回调函数里的this就是播放器实例，但回调函数假如使用了箭头函数，this则不会指向播放器实例

poster ​

  • Type: String
  • Default: ''

视频的海报，只会出现在播放器初始化且未播放的状态下

`,7),h=a("div",{className:"run-code"},"▶ Run Code",-1),u=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    poster: '/assets/sample/poster.jpg',
-});

theme ​

  • Type: String
  • Default: #f00

播放器主题颜色，目前用于 进度条 和 高亮元素 上

`,4),b=a("div",{className:"run-code"},"▶ Run Code",-1),m=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    theme: '#ffad00',
-});

volume ​

  • Type: Number
  • Default: 0.7

播放器的默认音量

`,4),g=a("div",{className:"run-code"},"▶ Run Code",-1),_=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    volume: 0.5,
-});

提示

播放器会缓存最后一次音量的大小，下次初始化时（如刷新页面）播放器会读取该缓存值

isLive ​

  • Type: Boolean
  • Default: false

使用直播模式，会隐藏进度条和播放时间

`,5),v=a("div",{className:"run-code"},"▶ Run Code",-1),T=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    isLive: true,
-});

muted ​

  • Type: Boolean
  • Default: false

是否默认静音

`,4),E=a("div",{className:"run-code"},"▶ Run Code",-1),f=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});

autoplay ​

  • Type: Boolean
  • Default: false

是否自动播放

`,4),S=a("div",{className:"run-code"},"▶ Run Code",-1),k=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoplay: true,
-    muted: true,
-});

提示

假如希望默认进入页面就能自动播放视频，muted 必需为 true，更多信息请阅读 Autoplay Policy Changes

autoSize ​

  • Type: Boolean
  • Default: false

播放器的尺寸默认会填充整个 container 容器尺寸，所以经常出现黑边，该值能自动调整播放器尺寸以隐藏黑边，类似 css 的 object-fit: cover;

`,5),P=a("div",{className:"run-code"},"▶ Run Code",-1),w=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-});

autoMini ​

  • Type: Boolean
  • Default: false

当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式

`,4),R=a("div",{className:"run-code"},"▶ Run Code",-1),V=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoMini: true,
-});

loop ​

  • Type: Boolean
  • Default: false

是否循环播放

`,4),j=a("div",{className:"run-code"},"▶ Run Code",-1),q=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    loop: true,
-});

flip ​

  • Type: Boolean
  • Default: false

是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里

`,4),N=a("div",{className:"run-code"},"▶ Run Code",-1),I=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    flip: true,
-    setting: true,
-});

playbackRate ​

  • Type: Boolean
  • Default: false

是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里

`,4),x=a("div",{className:"run-code"},"▶ Run Code",-1),B=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    playbackRate: true,
-    setting: true,
-});

aspectRatio ​

  • Type: Boolean
  • Default: false

是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里

`,4),O=a("div",{className:"run-code"},"▶ Run Code",-1),z=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    aspectRatio: true,
-    setting: true,
-});

screenshot ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示 视频截图 功能

`,4),L=a("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    screenshot: true,
-});

提示

由于浏览器安全机制，假如视频源地址和网站是跨域的，可能会出现截图失败

setting ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示 设置面板 的开关按钮

`,5),$=a("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});

hotkey ​

  • Type: Boolean
  • Default: true

是否使用快捷键

`,4),Y=a("div",{className:"run-code"},"▶ Run Code",-1),W=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    hotkey: true,
-});
热键描述
↑增加音量
↓降低音量
←视频快进
→视频快退
space切换播放/暂停

提示

只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效

pip ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示 画中画 的开关按钮

`,6),J=a("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    pip: true,
-});

mutex ​

  • Type: Boolean
  • Default: true

假如页面里同时存在多个播放器，是否只能让一个播放器播放

`,4),G=a("div",{className:"run-code"},"▶ Run Code",-1),K=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    mutex: true,
-});

fullscreen ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示播放器 窗口全屏 按钮

`,4),Q=a("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-});

fullscreenWeb ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示播放器 网页全屏 按钮

`,4),Z=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});

subtitleOffset ​

  • Type: Boolean
  • Default: false

字幕时间偏移，范围在 [-5s, 5s]，出现在 设置面板 里

`,4),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitleOffset: true,
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-    setting: true,
-});

miniProgressBar ​

  • Type: Boolean
  • Default: false

迷你进度条，只在播放器失去焦点后且正在播放时出现

`,4),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    miniProgressBar: true,
-});

useSSR ​

  • Type: Boolean
  • Default: false

是否使用 SSR 挂载模式，假如你希望在播放器挂载前，就提前渲染好播放器所需的 HTML 时有用

你可以通过 Artplayer.html 访问到播放器所需的 HTML

`,5),es=a("div",{className:"run-code"},"▶ Run Code",-1),os=s(`
js
var $container = document.querySelector('.artplayer-app');
-$container.innerHTML = Artplayer.html;
-
-var art = new Artplayer({
-    container: $container,
-    url: '/assets/sample/video.mp4',
-    useSSR: true,
-});

playsInline ​

  • Type: Boolean
  • Default: true

在移动端是否使用 playsInline 模式

`,4),cs=a("div",{className:"run-code"},"▶ Run Code",-1),rs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    playsInline: true,
-});

layers ​

  • Type: Array
  • Default: []

初始化自定义的 层

`,4),ts=a("div",{className:"run-code"},"▶ Run Code",-1),Ds=s(`
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: \`<img style="width: 100px" src="\${img}">\`,
-            style: {
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-                opacity: '.9',
-            },
-            click: function (...args) {
-                console.info('click', args);
-                art.layers.show = false;
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-    ],
-});

组件配置 请参考以下地址：

/component/layers.html

settings ​

  • Type: Array
  • Default: []

初始化自定义的 设置面板

`,5),is=a("div",{className:"run-code"},"▶ Run Code",-1),ys=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'setting01',
-            selector: [
-                {
-                    html: 'setting01-01',
-                },
-                {
-                    html: 'setting01-02',
-                },
-            ],
-            onSelect: function (...args) {
-                console.info(args);
-            },
-        },
-        {
-            html: 'setting02',
-            selector: [
-                {
-                    html: 'setting02-01',
-                },
-                {
-                    html: 'setting02-02',
-                },
-            ],
-            onSelect: function (...args) {
-                console.info(args);
-            },
-        },
-    ],
-});

设置面板 请参考以下地址

/component/setting.html

contextmenu ​

  • Type: Array
  • Default: []

初始化自定义的 右键菜单

`,5),Fs=a("div",{className:"run-code"},"▶ Run Code",-1),Cs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            html: 'your-menu',
-            click: function (...args) {
-                console.info('click', args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});

组件配置 请参考以下地址：

/component/contextmenu.html- Type:

controls ​

  • Type: Array
  • Default: []

初始化自定义的底部 控制栏

`,5),As=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'left',
-            html: 'your-control',
-            tooltip: 'Your Control',
-            style: {
-                color: 'green',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-        },
-    ],
-});

组件配置 请参考以下地址：

/component/controls.html

quality ​

  • Type: Array
  • Default: []

是否在底部控制栏里显示 画质选择 列表

属性类型描述
defaultBoolean默认画质
htmlString画质名字
urlString画质地址
`,6),hs=a("div",{className:"run-code"},"▶ Run Code",-1),us=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    quality: [
-        {
-            default: true,
-            html: 'SD 480P',
-            url: '/assets/sample/video.mp4',
-        },
-        {
-            html: 'HD 720P',
-            url: '/assets/sample/video.mp4',
-        },
-    ],
-});

highlight ​

  • Type: Array
  • Default: []

在进度条上显示 高亮信息

属性类型描述
timeNumber高亮时间（单位秒）
textString高亮文本
`,5),bs=a("div",{className:"run-code"},"▶ Run Code",-1),ms=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    highlight: [
-        {
-            time: 60,
-            text: 'One more chance',
-        },
-        {
-            time: 120,
-            text: '谁でもいいはずなのに',
-        },
-        {
-            time: 180,
-            text: '夏の想い出がまわる',
-        },
-        {
-            time: 240,
-            text: 'こんなとこにあるはずもないのに',
-        },
-        {
-            time: 300,
-            text: '－－终わり－－',
-        },
-    ],
-});

plugins ​

  • Type: Array
  • Default: []

初始化自定义的 插件

`,4),gs=a("div",{className:"run-code"},"▶ Run Code",-1),_s=s(`
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
-
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [myPlugin],
-});

thumbnails ​

  • Type: Object
  • Default: {}

在进度条上设置 预览图

属性类型描述
urlString预览图地址
numberNumber预览图数量
columnNumber预览图列数
widthNumber预览图宽度
heightNumber预览图高度
`,5),vs=a("div",{className:"run-code"},"▶ Run Code",-1),Ts=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    thumbnails: {
-        url: '/assets/sample/thumbnails.png',
-        number: 60,
-        column: 10,
-    },
-});

在线生成预览图

artplayer-tool-thumbnail

subtitle ​

  • Type: Object
  • Default: {}

设置视频的字幕，支持字幕格式：vtt, srt, ass

属性类型描述
urlString字幕地址
typeString字幕类型，可选 vtt, srt, ass
styleObject字幕样式
encodingString字幕编码，默认 utf-8
escapeBoolean是否转义 html 标签，默认为 true
onVttLoadFunction用于修改 vtt 文本的函数
`,6),Es=a("div",{className:"run-code"},"▶ Run Code",-1),fs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-        type: 'srt',
-        encoding: 'utf-8',
-        escape: true,
-        style: {
-            color: '#03A9F4',
-            'font-size': '30px',
-        },
-    },
-});

moreVideoAttr ​

  • Type: Object
  • Default: {'controls': false,'preload': 'metadata'}

更多视频属性，这些属性将直接写入视频元素里

`,4),Ss=a("div",{className:"run-code"},"▶ Run Code",-1),ks=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    moreVideoAttr: {
-        'webkit-playsinline': true,
-        playsInline: true,
-    },
-});

icons ​

  • Type: Object
  • Default: {}

用于替换默认图标，支持 Html 字符串和 HTMLElement

`,4),Ps=a("div",{className:"run-code"},"▶ Run Code",-1),ws=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    icons: {
-        loading: '<img src="/assets/img/ploading.gif">',
-        state: '<img src="/assets/img/state.png">',
-    },
-});

全部图标的定义

artplayer/types/icons.d.ts

type ​

  • Type: String
  • Default: ''

用于指明视频的格式，需要配合 customType 一起使用，默认视频的格式就是视频地址的后缀（如 .m3u8, .mkv, .ts），但有时候视频地地址没有正确的后缀，所以需要特别指明

`,5),Rs=a("div",{className:"run-code"},"▶ Run Code",-1),Vs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.m3u8',
-    type: 'm3u8',
-});

后缀的识别

播放器只能解析这种后缀：/assets/sample/video.m3u8

但无法解析这种后缀：/assets/sample/video?type=m3u8

所以假如你使用了 customType，最好同时要指明 type

customType ​

  • Type: Object
  • Default: {}

通过视频的 type 进行匹配，把视频解码权交给第三方程序进行处理，处理的函数能接收三个参数

  • video : 视频 DOM 元素
  • url : 视频地址
  • art : 当前实例
`,6),js=a("div",{className:"run-code"},"▶ Run Code",-1),qs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.m3u8',
-    customType: {
-        m3u8: function (video, url, art) {
-            //
-        },
-    },
-});

lang ​

  • Type: String
  • Default: navigator.language.toLowerCase()

默认显示语言，目前支持：en, zh-cn

`,4),Ns=a("div",{className:"run-code"},"▶ Run Code",-1),Is=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'en',
-});

更多的语言设置

/start/i18n.html

i18n ​

  • Type: Object
  • Default: {}

自定义 i18n 配置，该配置会和自带的 i18n 进行深度合并

新增你的语言:

`,6),xs=a("div",{className:"run-code"},"▶ Run Code",-1),Bs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'your-lang',
-    i18n: {
-        'your-lang': {
-            Play: 'Your Play'
-        },
-    },
-});

修改现有的语言

`,2),Os=a("div",{className:"run-code"},"▶ Run Code",-1),zs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: {
-        'zh-cn': {
-            Play: 'Your Play'
-        },
-        'zh-tw': {
-            Play: 'Your Play'
-        },
-    },
-});

更多的语言设置

/start/i18n.html

lock ​

  • Type: Boolean
  • Default: false

是否在移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏

`,5),Ls=a("div",{className:"run-code"},"▶ Run Code",-1),Ms=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lock: true,
-});

fastForward ​

  • Type: Boolean
  • Default: false

是否在移动端添加长按视频快进功能

`,4),$s=a("div",{className:"run-code"},"▶ Run Code",-1),Hs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});

autoPlayback ​

  • Type: Boolean
  • Default: false

是否使用自动 回放功能

`,4),Ys=a("div",{className:"run-code"},"▶ Run Code",-1),Ws=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    id: 'your-url-id',
-    autoPlayback: true,
-});

提示

因为播放器默认使用 url 作为 key 来缓存播放进度的

但假如你的同一个视频的 url 是不同的话，那么你需要使用 id 来标识视频的唯一 key

autoOrientation ​

  • Type: Boolean
  • Default: false

是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器

`,5),Js=a("div",{className:"run-code"},"▶ Run Code",-1),Us=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoOrientation: true,
-});

airplay ​

  • Type: Boolean
  • Default: false

是否显示 airplay 按钮，当前只有部分浏览器支持该功能

`,4),Gs=a("div",{className:"run-code"},"▶ Run Code",-1),Ks=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    airplay: true,
-});

cssVar ​

  • Type: Object
  • Default: {}

用于改变内置的css变量

`,4),Qs=a("div",{className:"run-code"},"▶ Run Code",-1),Xs=s(`
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    cssVar: {
-        //
-    },
-});

cssVar 写法参考

artplayer/types/cssVar.d.d.ts

`,2),Zs=[o,c,r,t,D,i,y,F,C,A,d,h,u,b,m,g,_,v,T,E,f,S,k,P,w,R,V,j,q,N,I,x,B,O,z,L,M,$,H,Y,W,J,U,G,K,Q,X,Z,ss,as,ns,ls,ps,es,os,cs,rs,ts,Ds,is,ys,Fs,Cs,As,ds,hs,us,bs,ms,gs,_s,vs,Ts,Es,fs,Ss,ks,Ps,ws,Rs,Vs,js,qs,Ns,Is,xs,Bs,Os,zs,Ls,Ms,$s,Hs,Ys,Ws,Js,Us,Gs,Ks,Qs,Xs];function sa(aa,na,la,pa,ea,oa){return l(),p("div",null,Zs)}const ta=n(e,[["render",sa]]);export{ra as __pageData,ta as default}; diff --git a/docs/document/assets/start_option.md.81dcd571.lean.js b/docs/document/assets/start_option.md.81dcd571.lean.js deleted file mode 100644 index fb7f2d49e..000000000 --- a/docs/document/assets/start_option.md.81dcd571.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as n,o as l,c as p,S as s,k as a}from"./chunks/framework.532b6b18.js";const ra=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1693027339000}'),e={name:"start/option.md"},o=s("",4),c=a("div",{className:"run-code"},"▶ Run Code",-1),r=s("",9),t=a("div",{className:"run-code"},"▶ Run Code",-1),D=s("",2),i=a("div",{className:"run-code"},"▶ Run Code",-1),y=s("",5),F=a("div",{className:"run-code"},"▶ Run Code",-1),C=s("",4),A=a("div",{className:"run-code"},"▶ Run Code",-1),d=s("",7),h=a("div",{className:"run-code"},"▶ Run Code",-1),u=s("",4),b=a("div",{className:"run-code"},"▶ Run Code",-1),m=s("",4),g=a("div",{className:"run-code"},"▶ Run Code",-1),_=s("",5),v=a("div",{className:"run-code"},"▶ Run Code",-1),T=s("",4),E=a("div",{className:"run-code"},"▶ Run Code",-1),f=s("",4),S=a("div",{className:"run-code"},"▶ Run Code",-1),k=s("",5),P=a("div",{className:"run-code"},"▶ Run Code",-1),w=s("",4),R=a("div",{className:"run-code"},"▶ Run Code",-1),V=s("",4),j=a("div",{className:"run-code"},"▶ Run Code",-1),q=s("",4),N=a("div",{className:"run-code"},"▶ Run Code",-1),I=s("",4),x=a("div",{className:"run-code"},"▶ Run Code",-1),B=s("",4),O=a("div",{className:"run-code"},"▶ Run Code",-1),z=s("",4),L=a("div",{className:"run-code"},"▶ Run Code",-1),M=s("",5),$=a("div",{className:"run-code"},"▶ Run Code",-1),H=s("",4),Y=a("div",{className:"run-code"},"▶ Run Code",-1),W=s("",6),J=a("div",{className:"run-code"},"▶ Run Code",-1),U=s("",4),G=a("div",{className:"run-code"},"▶ Run Code",-1),K=s("",4),Q=a("div",{className:"run-code"},"▶ Run Code",-1),X=s("",4),Z=a("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),as=a("div",{className:"run-code"},"▶ Run Code",-1),ns=s("",4),ls=a("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",5),es=a("div",{className:"run-code"},"▶ Run Code",-1),os=s("",4),cs=a("div",{className:"run-code"},"▶ Run Code",-1),rs=s("",4),ts=a("div",{className:"run-code"},"▶ Run Code",-1),Ds=s("",5),is=a("div",{className:"run-code"},"▶ Run Code",-1),ys=s("",5),Fs=a("div",{className:"run-code"},"▶ Run Code",-1),Cs=s("",5),As=a("div",{className:"run-code"},"▶ Run Code",-1),ds=s("",6),hs=a("div",{className:"run-code"},"▶ Run Code",-1),us=s("",5),bs=a("div",{className:"run-code"},"▶ Run Code",-1),ms=s("",4),gs=a("div",{className:"run-code"},"▶ Run Code",-1),_s=s("",5),vs=a("div",{className:"run-code"},"▶ Run Code",-1),Ts=s("",6),Es=a("div",{className:"run-code"},"▶ Run Code",-1),fs=s("",4),Ss=a("div",{className:"run-code"},"▶ Run Code",-1),ks=s("",4),Ps=a("div",{className:"run-code"},"▶ Run Code",-1),ws=s("",5),Rs=a("div",{className:"run-code"},"▶ Run Code",-1),Vs=s("",6),js=a("div",{className:"run-code"},"▶ Run Code",-1),qs=s("",4),Ns=a("div",{className:"run-code"},"▶ Run Code",-1),Is=s("",6),xs=a("div",{className:"run-code"},"▶ Run Code",-1),Bs=s("",2),Os=a("div",{className:"run-code"},"▶ Run Code",-1),zs=s("",5),Ls=a("div",{className:"run-code"},"▶ Run Code",-1),Ms=s("",4),$s=a("div",{className:"run-code"},"▶ Run Code",-1),Hs=s("",4),Ys=a("div",{className:"run-code"},"▶ Run Code",-1),Ws=s("",5),Js=a("div",{className:"run-code"},"▶ Run Code",-1),Us=s("",4),Gs=a("div",{className:"run-code"},"▶ Run Code",-1),Ks=s("",4),Qs=a("div",{className:"run-code"},"▶ Run Code",-1),Xs=s("",2),Zs=[o,c,r,t,D,i,y,F,C,A,d,h,u,b,m,g,_,v,T,E,f,S,k,P,w,R,V,j,q,N,I,x,B,O,z,L,M,$,H,Y,W,J,U,G,K,Q,X,Z,ss,as,ns,ls,ps,es,os,cs,rs,ts,Ds,is,ys,Fs,Cs,As,ds,hs,us,bs,ms,gs,_s,vs,Ts,Es,fs,Ss,ks,Ps,ws,Rs,Vs,js,qs,Ns,Is,xs,Bs,Os,zs,Ls,Ms,$s,Hs,Ys,Ws,Js,Us,Gs,Ks,Qs,Xs];function sa(aa,na,la,pa,ea,oa){return l(),p("div",null,Zs)}const ta=n(e,[["render",sa]]);export{ra as __pageData,ta as default}; diff --git a/docs/document/assets/start_option.md.FFLG77Kb.js b/docs/document/assets/start_option.md.FFLG77Kb.js new file mode 100644 index 000000000..7c8c355c3 --- /dev/null +++ b/docs/document/assets/start_option.md.FFLG77Kb.js @@ -0,0 +1,380 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const ti=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1700581325000}'),e={name:"start/option.md"},p=s('

基础选项 ​

container ​

  • Type: String, Element
  • Default: #artplayer

播放器挂载的 DOM 容器

',4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app', 
+    // container: document.querySelector('.artplayer-app'),
+    url: '/assets/sample/video.mp4',
+});

您可能需要初始化容器元素的大小，如:

css
.artplayer-app {
+    width: 400px;
+    height: 300px;
+}

或者使用 aspect-ratio：

css
.artplayer-app {
+    aspect-ratio: 16/9;
+}

提示

全部选项里，只有 container 是必填的

url ​

  • Type: String
  • Default: ''

视频源地址

`,9),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

有时候 url 地址没那么快知道，这时候你可以异步设置 url

`,2),d=i("div",{className:"run-code"},"▶ Run Code",-1),E=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+});
+
+setTimeout(() => {
+    art.url = '/assets/sample/video.mp4';
+}, 1000);

提示

默认支持三种视频文件格式：.mp4, .ogg, .webm

如需要播放 .m3u8 或者 .flv 等其它格式，请参考左侧的 第三方库

id ​

  • Type: String
  • Default: ''

播放器的唯一标识，目前只用于记忆播放 autoplayback

`,5),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s(`
js
var art = new Artplayer({
+    id: 'your-url-id',
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

onReady ​

  • Type: Function
  • Default: undefined

构造函数接受一个函数作为第二个参数，播放器初始化成功且视频可以播放时触发，和ready事件一样

`,4),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s(`
js
var art = new Artplayer(
+    {
+        container: '.artplayer-app',
+        url: '/assets/sample/video.mp4',
+        muted: true,
+    },
+    function onReady(art) {
+        this.play()
+    },
+);

等同于:

js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
+
+art.on('ready', () => {
+    art.play();
+});

提示

回调函数里的this就是播放器实例，但回调函数假如使用了箭头函数，this则不会指向播放器实例

poster ​

  • Type: String
  • Default: ''

视频的海报，只会出现在播放器初始化且未播放的状态下

`,7),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    poster: '/assets/sample/poster.jpg',
+});

theme ​

  • Type: String
  • Default: #f00

播放器主题颜色，目前用于 进度条 和 高亮元素 上

`,4),m=i("div",{className:"run-code"},"▶ Run Code",-1),F=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    theme: '#ffad00',
+});

volume ​

  • Type: Number
  • Default: 0.7

播放器的默认音量

`,4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    volume: 0.5,
+});

提示

播放器会缓存最后一次音量的大小，下次初始化时（如刷新页面）播放器会读取该缓存值

isLive ​

  • Type: Boolean
  • Default: false

使用直播模式，会隐藏进度条和播放时间

`,5),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    isLive: true,
+});

muted ​

  • Type: Boolean
  • Default: false

是否默认静音

`,4),T=i("div",{className:"run-code"},"▶ Run Code",-1),B=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});

autoplay ​

  • Type: Boolean
  • Default: false

是否自动播放

`,4),D=i("div",{className:"run-code"},"▶ Run Code",-1),f=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoplay: true,
+    muted: true,
+});

提示

假如希望默认进入页面就能自动播放视频，muted 必需为 true，更多信息请阅读 Autoplay Policy Changes

autoSize ​

  • Type: Boolean
  • Default: false

播放器的尺寸默认会填充整个 container 容器尺寸，所以经常出现黑边，该值能自动调整播放器尺寸以隐藏黑边，类似 css 的 object-fit: cover;

`,5),S=i("div",{className:"run-code"},"▶ Run Code",-1),P=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+});

autoMini ​

  • Type: Boolean
  • Default: false

当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式

`,4),w=i("div",{className:"run-code"},"▶ Run Code",-1),R=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoMini: true,
+});

loop ​

  • Type: Boolean
  • Default: false

是否循环播放

`,4),V=i("div",{className:"run-code"},"▶ Run Code",-1),j=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    loop: true,
+});

flip ​

  • Type: Boolean
  • Default: false

是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里

`,4),q=i("div",{className:"run-code"},"▶ Run Code",-1),N=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    flip: true,
+    setting: true,
+});

playbackRate ​

  • Type: Boolean
  • Default: false

是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里

`,4),I=i("div",{className:"run-code"},"▶ Run Code",-1),x=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    playbackRate: true,
+    setting: true,
+});

aspectRatio ​

  • Type: Boolean
  • Default: false

是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里

`,4),O=i("div",{className:"run-code"},"▶ Run Code",-1),z=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    aspectRatio: true,
+    setting: true,
+});

screenshot ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示 视频截图 功能

`,4),L=i("div",{className:"run-code"},"▶ Run Code",-1),M=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
+});

提示

由于浏览器安全机制，假如视频源地址和网站是跨域的，可能会出现截图失败

setting ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示 设置面板 的开关按钮

`,5),$=i("div",{className:"run-code"},"▶ Run Code",-1),H=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});

hotkey ​

  • Type: Boolean
  • Default: true

是否使用快捷键

`,4),Y=i("div",{className:"run-code"},"▶ Run Code",-1),W=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    hotkey: true,
+});
热键描述
↑增加音量
↓降低音量
←视频快进
→视频快退
space切换播放/暂停

提示

只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效

pip ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示 画中画 的开关按钮

`,6),J=i("div",{className:"run-code"},"▶ Run Code",-1),U=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    pip: true,
+});

mutex ​

  • Type: Boolean
  • Default: true

假如页面里同时存在多个播放器，是否只能让一个播放器播放

`,4),G=i("div",{className:"run-code"},"▶ Run Code",-1),K=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    mutex: true,
+});

fullscreen ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示播放器 窗口全屏 按钮

`,4),Q=i("div",{className:"run-code"},"▶ Run Code",-1),X=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+});

fullscreenWeb ​

  • Type: Boolean
  • Default: false

是否在底部控制栏里显示播放器 网页全屏 按钮

`,4),Z=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});

subtitleOffset ​

  • Type: Boolean
  • Default: false

字幕时间偏移，范围在 [-5s, 5s]，出现在 设置面板 里

`,4),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitleOffset: true,
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+    setting: true,
+});

miniProgressBar ​

  • Type: Boolean
  • Default: false

迷你进度条，只在播放器失去焦点后且正在播放时出现

`,4),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});

useSSR ​

  • Type: Boolean
  • Default: false

是否使用 SSR 挂载模式，假如你希望在播放器挂载前，就提前渲染好播放器所需的 HTML 时有用

你可以通过 Artplayer.html 访问到播放器所需的 HTML

`,5),es=i("div",{className:"run-code"},"▶ Run Code",-1),ps=s(`
js
var $container = document.querySelector('.artplayer-app');
+$container.innerHTML = Artplayer.html;
+
+var art = new Artplayer({
+    container: $container,
+    url: '/assets/sample/video.mp4',
+    useSSR: true,
+});

playsInline ​

  • Type: Boolean
  • Default: true

在移动端是否使用 playsInline 模式

`,4),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    playsInline: true,
+});

layers ​

  • Type: Array
  • Default: []

初始化自定义的 层

`,4),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s(`
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'potser',
+            html: \`<img style="width: 100px" src="\${img}">\`,
+            style: {
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+                opacity: '.9',
+            },
+            click: function (...args) {
+                console.info('click', args);
+                art.layers.show = false;
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+    ],
+});

组件配置 请参考以下地址：

/component/layers.html

settings ​

  • Type: Array
  • Default: []

初始化自定义的 设置面板

`,5),ds=i("div",{className:"run-code"},"▶ Run Code",-1),Es=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'setting01',
+            selector: [
+                {
+                    html: 'setting01-01',
+                },
+                {
+                    html: 'setting01-02',
+                },
+            ],
+            onSelect: function (...args) {
+                console.info(args);
+            },
+        },
+        {
+            html: 'setting02',
+            selector: [
+                {
+                    html: 'setting02-01',
+                },
+                {
+                    html: 'setting02-02',
+                },
+            ],
+            onSelect: function (...args) {
+                console.info(args);
+            },
+        },
+    ],
+});

设置面板 请参考以下地址

/component/setting.html

contextmenu ​

  • Type: Array
  • Default: []

初始化自定义的 右键菜单

`,5),cs=i("div",{className:"run-code"},"▶ Run Code",-1),os=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            html: 'your-menu',
+            click: function (...args) {
+                console.info('click', args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});

组件配置 请参考以下地址：

/component/contextmenu.html- Type:

controls ​

  • Type: Array
  • Default: []

初始化自定义的底部 控制栏

`,5),gs=i("div",{className:"run-code"},"▶ Run Code",-1),ys=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'left',
+            html: 'your-control',
+            tooltip: 'Your Control',
+            style: {
+                color: 'green',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+        },
+    ],
+});

组件配置 请参考以下地址：

/component/controls.html

quality ​

  • Type: Array
  • Default: []

是否在底部控制栏里显示 画质选择 列表

属性类型描述
defaultBoolean默认画质
htmlString画质名字
urlString画质地址
`,6),us=i("div",{className:"run-code"},"▶ Run Code",-1),bs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    quality: [
+        {
+            default: true,
+            html: 'SD 480P',
+            url: '/assets/sample/video.mp4',
+        },
+        {
+            html: 'HD 720P',
+            url: '/assets/sample/video.mp4',
+        },
+    ],
+});

highlight ​

  • Type: Array
  • Default: []

在进度条上显示 高亮信息

属性类型描述
timeNumber高亮时间（单位秒）
textString高亮文本
`,5),ms=i("div",{className:"run-code"},"▶ Run Code",-1),Fs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    highlight: [
+        {
+            time: 60,
+            text: 'One more chance',
+        },
+        {
+            time: 120,
+            text: '谁でもいいはずなのに',
+        },
+        {
+            time: 180,
+            text: '夏の想い出がまわる',
+        },
+        {
+            time: 240,
+            text: 'こんなとこにあるはずもないのに',
+        },
+        {
+            time: 300,
+            text: '－－终わり－－',
+        },
+    ],
+});

plugins ​

  • Type: Array
  • Default: []

初始化自定义的 插件

`,4),_s=i("div",{className:"run-code"},"▶ Run Code",-1),Cs=s(`
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [myPlugin],
+});

thumbnails ​

  • Type: Object
  • Default: {}

在进度条上设置 预览图

属性类型描述
urlString预览图地址
numberNumber预览图数量
columnNumber预览图列数
widthNumber预览图宽度
heightNumber预览图高度
`,5),vs=i("div",{className:"run-code"},"▶ Run Code",-1),As=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    thumbnails: {
+        url: '/assets/sample/thumbnails.png',
+        number: 60,
+        column: 10,
+    },
+});

在线生成预览图

artplayer-tool-thumbnail

subtitle ​

  • Type: Object
  • Default: {}

设置视频的字幕，支持字幕格式：vtt, srt, ass

属性类型描述
nameString字幕名字
urlString字幕地址
typeString字幕类型，可选 vtt, srt, ass
styleObject字幕样式
encodingString字幕编码，默认 utf-8
escapeBoolean是否转义 html 标签，默认为 true
onVttLoadFunction用于修改 vtt 文本的函数
`,6),Ts=i("div",{className:"run-code"},"▶ Run Code",-1),Bs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+        type: 'srt',
+        encoding: 'utf-8',
+        escape: true,
+        style: {
+            color: '#03A9F4',
+            'font-size': '30px',
+        },
+    },
+});

moreVideoAttr ​

  • Type: Object
  • Default: {'controls': false,'preload': 'metadata'}

更多视频属性，这些属性将直接写入视频元素里

`,4),Ds=i("div",{className:"run-code"},"▶ Run Code",-1),fs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    moreVideoAttr: {
+        'webkit-playsinline': true,
+        playsInline: true,
+    },
+});

icons ​

  • Type: Object
  • Default: {}

用于替换默认图标，支持 Html 字符串和 HTMLElement

`,4),Ss=i("div",{className:"run-code"},"▶ Run Code",-1),Ps=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    icons: {
+        loading: '<img src="/assets/img/ploading.gif">',
+        state: '<img src="/assets/img/state.png">',
+    },
+});

全部图标的定义

artplayer/types/icons.d.ts

type ​

  • Type: String
  • Default: ''

用于指明视频的格式，需要配合 customType 一起使用，默认视频的格式就是视频地址的后缀（如 .m3u8, .mkv, .ts），但有时候视频地地址没有正确的后缀，所以需要特别指明

`,5),ws=i("div",{className:"run-code"},"▶ Run Code",-1),Rs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.m3u8',
+    type: 'm3u8',
+});

后缀的识别

播放器只能解析这种后缀：/assets/sample/video.m3u8

但无法解析这种后缀：/assets/sample/video?type=m3u8

所以假如你使用了 customType，最好同时要指明 type

customType ​

  • Type: Object
  • Default: {}

通过视频的 type 进行匹配，把视频解码权交给第三方程序进行处理，处理的函数能接收三个参数

  • video : 视频 DOM 元素
  • url : 视频地址
  • art : 当前实例
`,6),Vs=i("div",{className:"run-code"},"▶ Run Code",-1),js=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.m3u8',
+    customType: {
+        m3u8: function (video, url, art) {
+            //
+        },
+    },
+});

lang ​

  • Type: String
  • Default: navigator.language.toLowerCase()

默认显示语言，目前支持：en, zh-cn

`,4),qs=i("div",{className:"run-code"},"▶ Run Code",-1),Ns=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'en',
+});

更多的语言设置

/start/i18n.html

i18n ​

  • Type: Object
  • Default: {}

自定义 i18n 配置，该配置会和自带的 i18n 进行深度合并

新增你的语言:

`,6),Is=i("div",{className:"run-code"},"▶ Run Code",-1),xs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'your-lang',
+    i18n: {
+        'your-lang': {
+            Play: 'Your Play'
+        },
+    },
+});

修改现有的语言

`,2),Os=i("div",{className:"run-code"},"▶ Run Code",-1),zs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: {
+        'zh-cn': {
+            Play: 'Your Play'
+        },
+        'zh-tw': {
+            Play: 'Your Play'
+        },
+    },
+});

更多的语言设置

/start/i18n.html

lock ​

  • Type: Boolean
  • Default: false

是否在移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏

`,5),Ls=i("div",{className:"run-code"},"▶ Run Code",-1),Ms=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lock: true,
+});

fastForward ​

  • Type: Boolean
  • Default: false

是否在移动端添加长按视频快进功能

`,4),$s=i("div",{className:"run-code"},"▶ Run Code",-1),Hs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});

autoPlayback ​

  • Type: Boolean
  • Default: false

是否使用自动 回放功能

`,4),Ys=i("div",{className:"run-code"},"▶ Run Code",-1),Ws=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    id: 'your-url-id',
+    autoPlayback: true,
+});

提示

因为播放器默认使用 url 作为 key 来缓存播放进度的

但假如你的同一个视频的 url 是不同的话，那么你需要使用 id 来标识视频的唯一 key

autoOrientation ​

  • Type: Boolean
  • Default: false

是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器

`,5),Js=i("div",{className:"run-code"},"▶ Run Code",-1),Us=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoOrientation: true,
+});

airplay ​

  • Type: Boolean
  • Default: false

是否显示 airplay 按钮，当前只有部分浏览器支持该功能

`,4),Gs=i("div",{className:"run-code"},"▶ Run Code",-1),Ks=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    airplay: true,
+});

cssVar ​

  • Type: Object
  • Default: {}

用于改变内置的css变量

`,4),Qs=i("div",{className:"run-code"},"▶ Run Code",-1),Xs=s(`
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    cssVar: {
+        //
+    },
+});

cssVar 写法参考

artplayer/types/cssVar.d.d.ts

`,2),Zs=[p,h,t,k,r,d,E,c,o,g,y,u,b,m,F,_,C,v,A,T,B,D,f,S,P,w,R,V,j,q,N,I,x,O,z,L,M,$,H,Y,W,J,U,G,K,Q,X,Z,ss,is,as,ns,ls,es,ps,hs,ts,ks,rs,ds,Es,cs,os,gs,ys,us,bs,ms,Fs,_s,Cs,vs,As,Ts,Bs,Ds,fs,Ss,Ps,ws,Rs,Vs,js,qs,Ns,Is,xs,Os,zs,Ls,Ms,$s,Hs,Ys,Ws,Js,Us,Gs,Ks,Qs,Xs];function si(ii,ai,ni,li,ei,pi){return n(),l("div",null,Zs)}const ki=a(e,[["render",si]]);export{ti as __pageData,ki as default}; diff --git a/docs/document/assets/start_option.md.FFLG77Kb.lean.js b/docs/document/assets/start_option.md.FFLG77Kb.lean.js new file mode 100644 index 000000000..ac0bd2993 --- /dev/null +++ b/docs/document/assets/start_option.md.FFLG77Kb.lean.js @@ -0,0 +1 @@ +import{_ as a,o as n,c as l,R as s,k as i}from"./chunks/framework.E60viAY0.js";const ti=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1700581325000}'),e={name:"start/option.md"},p=s("",4),h=i("div",{className:"run-code"},"▶ Run Code",-1),t=s("",9),k=i("div",{className:"run-code"},"▶ Run Code",-1),r=s("",2),d=i("div",{className:"run-code"},"▶ Run Code",-1),E=s("",5),c=i("div",{className:"run-code"},"▶ Run Code",-1),o=s("",4),g=i("div",{className:"run-code"},"▶ Run Code",-1),y=s("",7),u=i("div",{className:"run-code"},"▶ Run Code",-1),b=s("",4),m=i("div",{className:"run-code"},"▶ Run Code",-1),F=s("",4),_=i("div",{className:"run-code"},"▶ Run Code",-1),C=s("",5),v=i("div",{className:"run-code"},"▶ Run Code",-1),A=s("",4),T=i("div",{className:"run-code"},"▶ Run Code",-1),B=s("",4),D=i("div",{className:"run-code"},"▶ Run Code",-1),f=s("",5),S=i("div",{className:"run-code"},"▶ Run Code",-1),P=s("",4),w=i("div",{className:"run-code"},"▶ Run Code",-1),R=s("",4),V=i("div",{className:"run-code"},"▶ Run Code",-1),j=s("",4),q=i("div",{className:"run-code"},"▶ Run Code",-1),N=s("",4),I=i("div",{className:"run-code"},"▶ Run Code",-1),x=s("",4),O=i("div",{className:"run-code"},"▶ Run Code",-1),z=s("",4),L=i("div",{className:"run-code"},"▶ Run Code",-1),M=s("",5),$=i("div",{className:"run-code"},"▶ Run Code",-1),H=s("",4),Y=i("div",{className:"run-code"},"▶ Run Code",-1),W=s("",6),J=i("div",{className:"run-code"},"▶ Run Code",-1),U=s("",4),G=i("div",{className:"run-code"},"▶ Run Code",-1),K=s("",4),Q=i("div",{className:"run-code"},"▶ Run Code",-1),X=s("",4),Z=i("div",{className:"run-code"},"▶ Run Code",-1),ss=s("",4),is=i("div",{className:"run-code"},"▶ Run Code",-1),as=s("",4),ns=i("div",{className:"run-code"},"▶ Run Code",-1),ls=s("",5),es=i("div",{className:"run-code"},"▶ Run Code",-1),ps=s("",4),hs=i("div",{className:"run-code"},"▶ Run Code",-1),ts=s("",4),ks=i("div",{className:"run-code"},"▶ Run Code",-1),rs=s("",5),ds=i("div",{className:"run-code"},"▶ Run Code",-1),Es=s("",5),cs=i("div",{className:"run-code"},"▶ Run Code",-1),os=s("",5),gs=i("div",{className:"run-code"},"▶ Run Code",-1),ys=s("",6),us=i("div",{className:"run-code"},"▶ Run Code",-1),bs=s("",5),ms=i("div",{className:"run-code"},"▶ Run Code",-1),Fs=s("",4),_s=i("div",{className:"run-code"},"▶ Run Code",-1),Cs=s("",5),vs=i("div",{className:"run-code"},"▶ Run Code",-1),As=s("",6),Ts=i("div",{className:"run-code"},"▶ Run Code",-1),Bs=s("",4),Ds=i("div",{className:"run-code"},"▶ Run Code",-1),fs=s("",4),Ss=i("div",{className:"run-code"},"▶ Run Code",-1),Ps=s("",5),ws=i("div",{className:"run-code"},"▶ Run Code",-1),Rs=s("",6),Vs=i("div",{className:"run-code"},"▶ Run Code",-1),js=s("",4),qs=i("div",{className:"run-code"},"▶ Run Code",-1),Ns=s("",6),Is=i("div",{className:"run-code"},"▶ Run Code",-1),xs=s("",2),Os=i("div",{className:"run-code"},"▶ Run Code",-1),zs=s("",5),Ls=i("div",{className:"run-code"},"▶ Run Code",-1),Ms=s("",4),$s=i("div",{className:"run-code"},"▶ Run Code",-1),Hs=s("",4),Ys=i("div",{className:"run-code"},"▶ Run Code",-1),Ws=s("",5),Js=i("div",{className:"run-code"},"▶ Run Code",-1),Us=s("",4),Gs=i("div",{className:"run-code"},"▶ Run Code",-1),Ks=s("",4),Qs=i("div",{className:"run-code"},"▶ Run Code",-1),Xs=s("",2),Zs=[p,h,t,k,r,d,E,c,o,g,y,u,b,m,F,_,C,v,A,T,B,D,f,S,P,w,R,V,j,q,N,I,x,O,z,L,M,$,H,Y,W,J,U,G,K,Q,X,Z,ss,is,as,ns,ls,es,ps,hs,ts,ks,rs,ds,Es,cs,os,gs,ys,us,bs,ms,Fs,_s,Cs,vs,As,Ts,Bs,Ds,fs,Ss,Ps,ws,Rs,Vs,js,qs,Ns,Is,xs,Os,zs,Ls,Ms,$s,Hs,Ys,Ws,Js,Us,Gs,Ks,Qs,Xs];function si(ii,ai,ni,li,ei,pi){return n(),l("div",null,Zs)}const ki=a(e,[["render",si]]);export{ti as __pageData,ki as default}; diff --git a/docs/document/assets/style.93a866ad.css b/docs/document/assets/style.93a866ad.css deleted file mode 100644 index a6a8b4636..000000000 --- a/docs/document/assets/style.93a866ad.css +++ /dev/null @@ -1 +0,0 @@ -@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-cyrillic.5f2c6c8c.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-cyrillic-ext.e75737ce.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-greek.d5a6d92a.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-greek-ext.ab0619bc.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-latin.2ed14f66.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-latin-ext.0030eebd.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-vietnamese.14ce25a6.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-cyrillic.ea42a392.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-greek.8f4463c4.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-greek-ext.4fbe9427.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-latin.bd3b6f56.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-latin-ext.bd8920cc.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-vietnamese.6ce511fb.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Chinese Quotes;src:local("PingFang SC Regular"),local("PingFang SC"),local("SimHei"),local("Source Han Sans SC");unicode-range:U+2018,U+2019,U+201C,U+201D}:root{--vp-c-white: #ffffff;--vp-c-black: #000000;--vp-c-gray: #8e8e93;--vp-c-text-light-1: rgba(60, 60, 67);--vp-c-text-light-2: rgba(60, 60, 67, .75);--vp-c-text-light-3: rgba(60, 60, 67, .33);--vp-c-text-dark-1: rgba(255, 255, 245, .86);--vp-c-text-dark-2: rgba(235, 235, 245, .6);--vp-c-text-dark-3: rgba(235, 235, 245, .38);--vp-c-sponsor: #db2777}:root{--vp-c-bg: #ffffff;--vp-c-bg-elv: #ffffff;--vp-c-bg-elv-up: #ffffff;--vp-c-bg-elv-down: #f6f6f7;--vp-c-bg-elv-mute: #f6f6f7;--vp-c-bg-soft: #f6f6f7;--vp-c-bg-soft-up: #f9f9fa;--vp-c-bg-soft-down: #e3e3e5;--vp-c-bg-soft-mute: #e3e3e5;--vp-c-bg-alt: #f6f6f7;--vp-c-border: #c2c2c4;--vp-c-divider: #e2e2e3;--vp-c-gutter: #e2e2e3;--vp-c-neutral: var(--vp-c-black);--vp-c-neutral-inverse: var(--vp-c-white);--vp-c-text-1: var(--vp-c-text-light-1);--vp-c-text-2: var(--vp-c-text-light-2);--vp-c-text-3: var(--vp-c-text-light-3);--vp-c-text-inverse-1: var(--vp-c-text-dark-1);--vp-c-text-inverse-2: var(--vp-c-text-dark-2);--vp-c-text-inverse-3: var(--vp-c-text-dark-3);--vp-c-text-code: #476582;--vp-c-mute: #eeeef0;--vp-c-mute-light: #f3f3f9;--vp-c-mute-lighter: #f9f9fa;--vp-c-mute-dark: #e3e3e5;--vp-c-mute-darker: #d7d7d9;--vp-c-brand: #4565d8;--vp-c-brand-light: #708fff;--vp-c-brand-lighter: #a4b2ff;--vp-c-brand-lightest: #ecefff;--vp-c-brand-dark: #4565d8;--vp-c-brand-darker: #23459f;--vp-c-brand-darkest: #132f59;--vp-c-brand-dimm-1: rgba(112, 143, 255, .05);--vp-c-brand-dimm-2: rgba(112, 143, 255, .2);--vp-c-brand-dimm-3: rgba(112, 143, 255, .5);--vp-c-green: #10b981;--vp-c-green-light: #34d399;--vp-c-green-lighter: #6ee7b7;--vp-c-green-dark: #059669;--vp-c-green-darker: #047857;--vp-c-green-dimm-1: rgba(16, 185, 129, .05);--vp-c-green-dimm-2: rgba(16, 185, 129, .2);--vp-c-green-dimm-3: rgba(16, 185, 129, .5);--vp-c-yellow: #d97706;--vp-c-yellow-light: #f59e0b;--vp-c-yellow-lighter: #fbbf24;--vp-c-yellow-lightest: #fcd34d;--vp-c-yellow-dark: #b45309;--vp-c-yellow-darker: #92400e;--vp-c-yellow-darkest: #6c3d08;--vp-c-yellow-dimm-1: rgba(234, 179, 8, .05);--vp-c-yellow-dimm-2: rgba(234, 179, 8, .2);--vp-c-yellow-dimm-3: rgba(234, 179, 8, .5);--vp-c-red: #f43f5e;--vp-c-red-light: #fb7185;--vp-c-red-lighter: #fda4af;--vp-c-red-lightest: #fdd6e0;--vp-c-red-dark: #e11d48;--vp-c-red-darker: #be123c;--vp-c-red-darkest: #9f1239;--vp-c-red-dimm-1: rgba(244, 63, 94, .05);--vp-c-red-dimm-2: rgba(244, 63, 94, .2);--vp-c-red-dimm-3: rgba(244, 63, 94, .5)}.dark{--vp-c-bg: #1e1e20;--vp-c-bg-elv: #252529;--vp-c-bg-elv-up: #323238;--vp-c-bg-elv-down: #1e1e20;--vp-c-bg-elv-mute: #323238;--vp-c-bg-soft: #252529;--vp-c-bg-soft-up: #323238;--vp-c-bg-soft-down: #1e1e20;--vp-c-bg-soft-mute: #323238;--vp-c-bg-alt: #161618;--vp-c-border: rgba(82, 82, 89, .68);--vp-c-divider: rgba(82, 82, 89, .32);--vp-c-gutter: #000000;--vp-c-neutral: var(--vp-c-white);--vp-c-neutral-inverse: var(--vp-c-black);--vp-c-text-1: var(--vp-c-text-dark-1);--vp-c-text-2: var(--vp-c-text-dark-2);--vp-c-text-3: var(--vp-c-text-dark-3);--vp-c-text-inverse-1: var(--vp-c-text-light-1);--vp-c-text-inverse-2: var(--vp-c-text-light-2);--vp-c-text-inverse-3: var(--vp-c-text-light-3);--vp-c-text-code: #c9def1;--vp-c-mute: #323238;--vp-c-mute-light: #3a3a3c;--vp-c-mute-lighter: #505053;--vp-c-mute-dark: #222226;--vp-c-mute-darker: #505053;--vp-c-brand: #708fff;--vp-c-brand-light: #a4b2ff;--vp-c-brand-lighter: #a4c8ff;--vp-c-brand-lightest: #ecefff;--vp-c-brand-dark: #4565d8;--vp-c-brand-darker: #23459f;--vp-c-brand-darkest: #132f59;--vp-c-brand-dimm-1: rgba(112, 143, 255, .05);--vp-c-brand-dimm-2: rgba(112, 143, 255, .2);--vp-c-brand-dimm-3: rgba(112, 143, 255, .5);--vp-c-green: #10b981;--vp-c-green-light: #34d399;--vp-c-green-lighter: #6ee7b7;--vp-c-green-lightest: #a7f3d0;--vp-c-green-dark: #059669;--vp-c-green-darker: #047857;--vp-c-green-darkest: #065f46;--vp-c-green-dimm-1: rgba(16, 185, 129, .05);--vp-c-green-dimm-2: rgba(16, 185, 129, .2);--vp-c-green-dimm-3: rgba(16, 185, 129, .5);--vp-c-yellow: #d1a336;--vp-c-yellow-light: #f8e3a1;--vp-c-yellow-lighter: #fff0c0;--vp-c-yellow-lightest: #fff7dc;--vp-c-yellow-dark: #b45309;--vp-c-yellow-darker: #92400e;--vp-c-yellow-darkest: #6c3d08;--vp-c-yellow-dimm-1: rgba(234, 179, 8, .05);--vp-c-yellow-dimm-2: rgba(234, 179, 8, .2);--vp-c-yellow-dimm-3: rgba(234, 179, 8, .5);--vp-c-red: #f43f5e;--vp-c-red-light: #fb7185;--vp-c-red-lighter: #fda4af;--vp-c-red-lightest: #fdd6e0;--vp-c-red-dark: #e11d48;--vp-c-red-darker: #be123c;--vp-c-red-darkest: #9f1239;--vp-c-red-dimm-1: rgba(244, 63, 94, .05);--vp-c-red-dimm-2: rgba(244, 63, 94, .2);--vp-c-red-dimm-3: rgba(244, 63, 94, .5)}:root{--vp-font-family-base: "Chinese Quotes", "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--vp-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}:root{--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);--vp-shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16)}:root{--vp-z-index-local-nav: 10;--vp-z-index-nav: 20;--vp-z-index-layout-top: 30;--vp-z-index-backdrop: 40;--vp-z-index-sidebar: 50;--vp-z-index-footer: 60}:root{--vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");--vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E")}:root{--vp-layout-max-width: 1440px}:root{--vp-header-anchor-symbol: "#"}:root{--vp-code-line-height: 1.7;--vp-code-font-size: .875em;--vp-c-code-dimm: var(--vp-c-text-dark-3);--vp-code-block-color: var(--vp-c-text-dark-1);--vp-code-block-bg: #161618;--vp-code-block-bg-light: #1e1e20;--vp-code-block-divider-color: #000000;--vp-code-line-highlight-color: rgba(0, 0, 0, .5);--vp-code-line-number-color: var(--vp-c-code-dimm);--vp-code-line-diff-add-color: var(--vp-c-green-dimm-2);--vp-code-line-diff-add-symbol-color: var(--vp-c-green);--vp-code-line-diff-remove-color: var(--vp-c-red-dimm-2);--vp-code-line-diff-remove-symbol-color: var(--vp-c-red);--vp-code-line-warning-color: var(--vp-c-yellow-dimm-2);--vp-code-line-error-color: var(--vp-c-red-dimm-2);--vp-code-copy-code-border-color: transparent;--vp-code-copy-code-bg: var(--vp-code-block-bg-light);--vp-code-copy-code-hover-border-color: var(--vp-c-divider);--vp-code-copy-code-hover-bg: var(--vp-code-block-bg-light);--vp-code-copy-code-active-text: var(--vp-c-text-dark-2);--vp-code-tab-divider: var(--vp-code-block-divider-color);--vp-code-tab-text-color: var(--vp-c-text-dark-2);--vp-code-tab-bg: var(--vp-code-block-bg);--vp-code-tab-hover-text-color: var(--vp-c-text-dark-1);--vp-code-tab-active-text-color: var(--vp-c-text-dark-1);--vp-code-tab-active-bar-color: var(--vp-c-brand)}.dark{--vp-code-block-bg: #161618}:root:not(.dark) .vp-adaptive-theme{--vp-c-code-dimm: var(--vp-c-text-2);--vp-code-block-color: var(--vp-c-text-1);--vp-code-block-bg: #f8f8f8;--vp-code-block-divider-color: var(--vp-c-divider);--vp-code-line-highlight-color: #ececec;--vp-code-line-number-color: var(--vp-c-code-dimm);--vp-code-copy-code-bg: #e2e2e2;--vp-code-copy-code-hover-bg: #dcdcdc;--vp-code-copy-code-active-text: var(--vp-c-text-2);--vp-code-tab-divider: var(--vp-c-divider);--vp-code-tab-text-color: var(--vp-c-text-2);--vp-code-tab-bg: var(--vp-code-block-bg);--vp-code-tab-hover-text-color: var(--vp-c-text-1);--vp-code-tab-active-text-color: var(--vp-c-text-1)}:root{--vp-button-brand-border: var(--vp-c-brand);--vp-button-brand-text: var(--vp-c-white);--vp-button-brand-bg: var(--vp-c-brand-dark);--vp-button-brand-hover-border: var(--vp-c-brand-light);--vp-button-brand-hover-text: var(--vp-c-white);--vp-button-brand-hover-bg: var(--vp-c-brand-darker);--vp-button-brand-active-border: var(--vp-c-brand-light);--vp-button-brand-active-text: var(--vp-c-white);--vp-button-brand-active-bg: var(--vp-c-brand-darkest);--vp-button-alt-border: var(--vp-c-border);--vp-button-alt-text: var(--vp-c-neutral);--vp-button-alt-bg: var(--vp-c-mute);--vp-button-alt-hover-border: var(--vp-c-border);--vp-button-alt-hover-text: var(--vp-c-neutral);--vp-button-alt-hover-bg: var(--vp-c-mute-dark);--vp-button-alt-active-border: var(--vp-c-border);--vp-button-alt-active-text: var(--vp-c-neutral);--vp-button-alt-active-bg: var(--vp-c-mute-darker);--vp-button-sponsor-border: var(--vp-c-gray-light-3);--vp-button-sponsor-text: var(--vp-c-text-light-2);--vp-button-sponsor-bg: transparent;--vp-button-sponsor-hover-border: var(--vp-c-sponsor);--vp-button-sponsor-hover-text: var(--vp-c-sponsor);--vp-button-sponsor-hover-bg: transparent;--vp-button-sponsor-active-border: var(--vp-c-sponsor);--vp-button-sponsor-active-text: var(--vp-c-sponsor);--vp-button-sponsor-active-bg: transparent}.dark{--vp-button-sponsor-border: var(--vp-c-gray-dark-1);--vp-button-sponsor-text: var(--vp-c-text-dark-2)}:root{--vp-custom-block-font-size: 14px;--vp-custom-block-code-font-size: 13px;--vp-custom-block-info-border: var(--vp-c-border);--vp-custom-block-info-text: var(--vp-c-text-2);--vp-custom-block-info-bg: var(--vp-c-bg-soft);--vp-custom-block-info-code-bg: var(--vp-c-mute);--vp-custom-block-tip-border: var(--vp-c-brand);--vp-custom-block-tip-text: var(--vp-c-brand);--vp-custom-block-tip-bg: var(--vp-c-bg-soft);--vp-custom-block-tip-code-bg: var(--vp-c-mute);--vp-custom-block-warning-border: var(--vp-c-yellow);--vp-custom-block-warning-text: var(--vp-c-yellow);--vp-custom-block-warning-bg: var(--vp-c-bg-soft);--vp-custom-block-warning-code-bg: var(--vp-c-mute);--vp-custom-block-danger-border: var(--vp-c-red);--vp-custom-block-danger-text: var(--vp-c-red);--vp-custom-block-danger-bg: var(--vp-c-bg-soft);--vp-custom-block-danger-code-bg: var(--vp-c-mute);--vp-custom-block-details-border: var(--vp-custom-block-info-border);--vp-custom-block-details-text: var(--vp-custom-block-info-text);--vp-custom-block-details-bg: var(--vp-custom-block-info-bg);--vp-custom-block-details-code-bg: var(--vp-custom-block-details-bg)}:root{--vp-input-border-color: var(--vp-c-border);--vp-input-bg-color: var(--vp-c-bg-alt);--vp-input-hover-border-color: var(--vp-c-gray);--vp-input-switch-bg-color: var(--vp-c-mute)}:root{--vp-nav-height: 64px;--vp-nav-bg-color: var(--vp-c-bg);--vp-nav-screen-bg-color: var(--vp-c-bg);--vp-nav-logo-height: 24px}:root{--vp-local-nav-bg-color: var(--vp-c-bg)}:root{--vp-sidebar-width: 272px;--vp-sidebar-bg-color: var(--vp-c-bg-alt)}:root{--vp-backdrop-bg-color: rgba(0, 0, 0, .6)}:root{--vp-home-hero-name-color: var(--vp-c-brand);--vp-home-hero-name-background: transparent;--vp-home-hero-image-background-image: none;--vp-home-hero-image-filter: none}:root{--vp-badge-info-border: var(--vp-c-border);--vp-badge-info-text: var(--vp-c-text-2);--vp-badge-info-bg: var(--vp-c-mute);--vp-badge-tip-border: var(--vp-c-brand);--vp-badge-tip-text: var(--vp-c-brand);--vp-badge-tip-bg: var(--vp-c-brand-dimm-1);--vp-badge-warning-border: var(--vp-c-yellow);--vp-badge-warning-text: var(--vp-c-yellow);--vp-badge-warning-bg: var(--vp-c-yellow-dimm-1);--vp-badge-danger-border: var(--vp-c-red);--vp-badge-danger-text: var(--vp-c-red);--vp-badge-danger-bg: var(--vp-c-red-dimm-1)}:root{--vp-carbon-ads-text-color: var(--vp-c-text-1);--vp-carbon-ads-poweredby-color: var(--vp-c-text-2);--vp-carbon-ads-bg-color: var(--vp-c-bg-soft);--vp-carbon-ads-hover-text-color: var(--vp-c-brand);--vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1)}:root{--vp-local-search-bg: var(--vp-c-bg);--vp-local-search-result-bg: var(--vp-c-bg);--vp-local-search-result-border: var(--vp-c-divider);--vp-local-search-result-selected-bg: var(--vp-c-bg);--vp-local-search-result-selected-border: var(--vp-c-brand);--vp-local-search-highlight-bg: var(--vp-c-green-lighter);--vp-local-search-highlight-text: var(--vp-c-black)}*,:before,:after{box-sizing:border-box}html{line-height:1.4;font-size:16px;-webkit-text-size-adjust:100%}html.dark{color-scheme:dark}body{margin:0;width:100%;min-width:320px;min-height:100vh;line-height:24px;font-family:var(--vp-font-family-base);font-size:16px;font-weight:400;color:var(--vp-c-text-1);background-color:var(--vp-c-bg);direction:ltr;font-synthesis:style;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}h1,h2,h3,h4,h5,h6{margin:0;line-height:24px;font-size:16px;font-weight:400}p{margin:0}strong,b{font-weight:600}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}a{color:inherit;text-decoration:inherit}ol,ul{list-style:none;margin:0;padding:0}blockquote{margin:0}pre,code,kbd,samp{font-family:var(--vp-font-family-mono)}img,svg,video,canvas,audio,iframe,embed,object{display:block}figure{margin:0}img,video{max-width:100%;height:auto}button,input,optgroup,select,textarea{border:0;padding:0;line-height:inherit;color:inherit}button{padding:0;font-family:inherit;background-color:transparent;background-image:none}button:enabled,[role=button]:enabled{cursor:pointer}button:focus,button:focus-visible{outline:1px dotted;outline:4px auto -webkit-focus-ring-color}button:focus:not(:focus-visible){outline:none!important}input:focus,textarea:focus,select:focus{outline:none}table{border-collapse:collapse}input{background-color:transparent}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:var(--vp-c-text-3)}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:var(--vp-c-text-3)}input::placeholder,textarea::placeholder{color:var(--vp-c-text-3)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}textarea{resize:vertical}select{-webkit-appearance:none}fieldset{margin:0;padding:0}h1,h2,h3,h4,h5,h6,li,p{overflow-wrap:break-word}vite-error-overlay{z-index:9999}.visually-hidden{position:absolute;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden}.custom-block{border:1px solid transparent;border-radius:8px;padding:16px 16px 8px;line-height:24px;font-size:var(--vp-custom-block-font-size);color:var(--vp-c-text-2)}.custom-block.info{border-color:var(--vp-custom-block-info-border);color:var(--vp-custom-block-info-text);background-color:var(--vp-custom-block-info-bg)}.custom-block.custom-block th,.custom-block.custom-block blockquote>p{font-size:var(--vp-custom-block-font-size);color:inherit}.custom-block.info code{background-color:var(--vp-custom-block-info-code-bg)}.custom-block.tip{border-color:var(--vp-custom-block-tip-border);color:var(--vp-custom-block-tip-text);background-color:var(--vp-custom-block-tip-bg)}.custom-block.tip code{background-color:var(--vp-custom-block-tip-code-bg)}.custom-block.warning{border-color:var(--vp-custom-block-warning-border);color:var(--vp-custom-block-warning-text);background-color:var(--vp-custom-block-warning-bg)}.custom-block.warning code{background-color:var(--vp-custom-block-warning-code-bg)}.custom-block.danger{border-color:var(--vp-custom-block-danger-border);color:var(--vp-custom-block-danger-text);background-color:var(--vp-custom-block-danger-bg)}.custom-block.danger code{background-color:var(--vp-custom-block-danger-code-bg)}.custom-block.details{border-color:var(--vp-custom-block-details-border);color:var(--vp-custom-block-details-text);background-color:var(--vp-custom-block-details-bg)}.custom-block.details code{background-color:var(--vp-custom-block-details-code-bg)}.custom-block-title{font-weight:600}.custom-block p+p{margin:8px 0}.custom-block.details summary{margin:0 0 8px;font-weight:700;cursor:pointer}.custom-block.details summary+p{margin:8px 0}.custom-block a{color:inherit;font-weight:600;text-decoration:underline dotted;text-underline-offset:2px;transition:opacity .25s}.custom-block a:hover{opacity:.75}.custom-block code{font-size:var(--vp-custom-block-code-font-size)}.dark .vp-code-light{display:none}html:not(.dark) .vp-code-dark{display:none}.vp-code-group{margin-top:16px}.vp-code-group .tabs{position:relative;display:flex;margin-right:-24px;margin-left:-24px;padding:0 12px;background-color:var(--vp-code-tab-bg);overflow-x:auto;overflow-y:hidden;box-shadow:inset 0 -1px var(--vp-code-tab-divider)}@media (min-width: 640px){.vp-code-group .tabs{margin-right:0;margin-left:0;border-radius:8px 8px 0 0}}.vp-code-group .tabs input{position:fixed;opacity:0;pointer-events:none}.vp-code-group .tabs label{position:relative;display:inline-block;border-bottom:1px solid transparent;padding:0 12px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-code-tab-text-color);white-space:nowrap;cursor:pointer;transition:color .25s}.vp-code-group .tabs label:after{position:absolute;right:8px;bottom:-1px;left:8px;z-index:1;height:1px;content:"";background-color:transparent;transition:background-color .25s}.vp-code-group label:hover{color:var(--vp-code-tab-hover-text-color)}.vp-code-group input:checked+label{color:var(--vp-code-tab-active-text-color)}.vp-code-group input:checked+label:after{background-color:var(--vp-code-tab-active-bar-color)}.vp-code-group div[class*=language-],.vp-block{display:none;margin-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important}.vp-code-group div[class*=language-].active,.vp-block.active{display:block}.vp-block{padding:20px 24px}.vp-doc h1,.vp-doc h2,.vp-doc h3,.vp-doc h4,.vp-doc h5,.vp-doc h6{position:relative;font-weight:600;outline:none}.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:28px}.vp-doc h2{margin:48px 0 16px;border-top:1px solid var(--vp-c-divider);padding-top:24px;letter-spacing:-.02em;line-height:32px;font-size:24px}.vp-doc h3{margin:32px 0 0;letter-spacing:-.01em;line-height:28px;font-size:20px}.vp-doc .header-anchor{position:absolute;top:0;left:0;margin-left:-.87em;font-weight:500;-webkit-user-select:none;user-select:none;opacity:0;transition:color .25s,opacity .25s}.vp-doc .header-anchor:before{content:var(--vp-header-anchor-symbol)}.vp-doc h1:hover .header-anchor,.vp-doc h1 .header-anchor:focus,.vp-doc h2:hover .header-anchor,.vp-doc h2 .header-anchor:focus,.vp-doc h3:hover .header-anchor,.vp-doc h3 .header-anchor:focus,.vp-doc h4:hover .header-anchor,.vp-doc h4 .header-anchor:focus,.vp-doc h5:hover .header-anchor,.vp-doc h5 .header-anchor:focus,.vp-doc h6:hover .header-anchor,.vp-doc h6 .header-anchor:focus{opacity:1}@media (min-width: 768px){.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:32px}}.vp-doc h2 .header-anchor{top:24px}.vp-doc p,.vp-doc summary{margin:16px 0}.vp-doc p{line-height:28px}.vp-doc blockquote{margin:16px 0;border-left:2px solid var(--vp-c-divider);padding-left:16px;transition:border-color .5s}.vp-doc blockquote>p{margin:0;font-size:16px;color:var(--vp-c-text-2);transition:color .5s}.vp-doc a{font-weight:500;color:var(--vp-c-brand)}.vp-doc a:hover{text-decoration:underline dotted;text-underline-offset:2px}.vp-doc strong{font-weight:600}.vp-doc ul,.vp-doc ol{padding-left:1.25rem;margin:16px 0}.vp-doc ul{list-style:disc}.vp-doc ol{list-style:decimal}.vp-doc li+li{margin-top:8px}.vp-doc li>ol,.vp-doc li>ul{margin:8px 0 0}.vp-doc table{display:block;border-collapse:collapse;margin:20px 0;overflow-x:auto}.vp-doc tr{border-top:1px solid var(--vp-c-divider);transition:background-color .5s}.vp-doc tr:nth-child(2n){background-color:var(--vp-c-bg-soft)}.vp-doc th,.vp-doc td{border:1px solid var(--vp-c-divider);padding:8px 16px}.vp-doc th{text-align:left;font-size:14px;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-doc td{font-size:14px}.vp-doc hr{margin:16px 0;border:none;border-top:1px solid var(--vp-c-divider)}.vp-doc .custom-block{margin:16px 0}.vp-doc .custom-block p{margin:8px 0;line-height:24px}.vp-doc .custom-block p:first-child{margin:0}.vp-doc .custom-block a{color:inherit;font-weight:600}.vp-doc .custom-block code{font-size:var(--vp-custom-block-code-font-size);font-weight:700;color:inherit}.vp-doc .custom-block div[class*=language-]{margin:8px 0;border-radius:8px}.vp-doc .custom-block div[class*=language-] code{font-weight:400;background-color:transparent}.vp-doc .custom-block .vp-code-group .tabs{margin:0;border-radius:8px 8px 0 0}.vp-doc :not(pre,h1,h2,h3,h4,h5,h6)>code{font-size:var(--vp-code-font-size)}.vp-doc :not(pre)>code{border-radius:4px;padding:3px 6px;color:var(--vp-c-text-code);background-color:var(--vp-c-mute);transition:color .5s,background-color .5s}.vp-doc h1>code,.vp-doc h2>code,.vp-doc h3>code{font-size:.9em}.vp-doc a>code{color:var(--vp-c-brand)}.vp-doc div[class*=language-],.vp-block{position:relative;margin:16px -24px;background-color:var(--vp-code-block-bg);overflow-x:auto;transition:background-color .5s}@media (min-width: 640px){.vp-doc div[class*=language-],.vp-block{border-radius:8px;margin:16px 0}}@media (max-width: 639px){.vp-doc li div[class*=language-]{border-radius:8px 0 0 8px}}.vp-doc div[class*=language-]+div[class*=language-],.vp-doc div[class$=-api]+div[class*=language-],.vp-doc div[class*=language-]+div[class$=-api]>div[class*=language-]{margin-top:-8px}.vp-doc [class*=language-] pre,.vp-doc [class*=language-] code{direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.vp-doc [class*=language-] pre{position:relative;z-index:1;margin:0;padding:20px 0;background:transparent;overflow-x:auto}.vp-doc [class*=language-] code{display:block;padding:0 24px;width:fit-content;min-width:100%;line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-block-color);transition:color .5s}.vp-doc [class*=language-] code .highlighted{background-color:var(--vp-code-line-highlight-color);transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .highlighted.error{background-color:var(--vp-code-line-error-color)}.vp-doc [class*=language-] code .highlighted.warning{background-color:var(--vp-code-line-warning-color)}.vp-doc [class*=language-] code .diff{transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .diff:before{position:absolute;left:10px}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){filter:blur(.095rem);opacity:.4;transition:filter .35s,opacity .35s}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){opacity:.7;transition:filter .35s,opacity .35s}.vp-doc [class*=language-]:hover .has-focused-lines .line:not(.has-focus){filter:blur(0);opacity:1}.vp-doc [class*=language-] code .diff.remove{background-color:var(--vp-code-line-diff-remove-color);opacity:.7}.vp-doc [class*=language-] code .diff.remove:before{content:"-";color:var(--vp-code-line-diff-remove-symbol-color)}.vp-doc [class*=language-] code .diff.add{background-color:var(--vp-code-line-diff-add-color)}.vp-doc [class*=language-] code .diff.add:before{content:"+";color:var(--vp-code-line-diff-add-symbol-color)}.vp-doc div[class*=language-].line-numbers-mode{padding-left:32px}.vp-doc .line-numbers-wrapper{position:absolute;top:0;bottom:0;left:0;z-index:3;border-right:1px solid var(--vp-code-block-divider-color);padding-top:20px;width:32px;text-align:center;font-family:var(--vp-font-family-mono);line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-line-number-color);transition:border-color .5s,color .5s}.vp-doc [class*=language-]>button.copy{direction:ltr;position:absolute;top:12px;right:12px;z-index:3;border:1px solid var(--vp-code-copy-code-border-color);border-radius:4px;width:40px;height:40px;background-color:var(--vp-code-copy-code-bg);opacity:0;cursor:pointer;background-image:var(--vp-icon-copy);background-position:50%;background-size:20px;background-repeat:no-repeat;transition:border-color .25s,background-color .25s,opacity .25s}.vp-doc [class*=language-]:hover>button.copy,.vp-doc [class*=language-]>button.copy:focus{opacity:1}.vp-doc [class*=language-]>button.copy:hover,.vp-doc [class*=language-]>button.copy.copied{border-color:var(--vp-code-copy-code-hover-border-color);background-color:var(--vp-code-copy-code-hover-bg)}.vp-doc [class*=language-]>button.copy.copied,.vp-doc [class*=language-]>button.copy:hover.copied{border-radius:0 4px 4px 0;background-color:var(--vp-code-copy-code-hover-bg);background-image:var(--vp-icon-copied)}.vp-doc [class*=language-]>button.copy.copied:before,.vp-doc [class*=language-]>button.copy:hover.copied:before{position:relative;top:-1px;left:-65px;display:flex;justify-content:center;align-items:center;border:1px solid var(--vp-code-copy-code-hover-border-color);border-right:0;border-radius:4px 0 0 4px;width:64px;height:40px;text-align:center;font-size:12px;font-weight:500;color:var(--vp-code-copy-code-active-text);background-color:var(--vp-code-copy-code-hover-bg);white-space:nowrap;content:"Copied"}.vp-doc [class*=language-]>span.lang{position:absolute;top:2px;right:8px;z-index:2;font-size:12px;font-weight:500;color:var(--vp-c-code-dimm);transition:color .4s,opacity .4s}.vp-doc [class*=language-]:hover>button.copy+span.lang,.vp-doc [class*=language-]>button.copy:focus+span.lang{opacity:0}.vp-doc .VPTeamMembers{margin-top:24px}.vp-doc .VPTeamMembers.small.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}.vp-doc .VPTeamMembers.small.count-2 .container,.vp-doc .VPTeamMembers.small.count-3 .container{max-width:100%!important}.vp-doc .VPTeamMembers.medium.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}:is(.vp-external-link-icon,.vp-doc a[href*="://"],.vp-doc a[target=_blank]):not(.no-icon):after{display:inline-block;margin-top:-1px;margin-left:4px;width:11px;height:11px;background:currentColor;color:var(--vp-c-text-3);flex-shrink:0;--icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");-webkit-mask-image:var(--icon);mask-image:var(--icon)}.vp-external-link-icon:after{content:""}.vp-sponsor{border-radius:16px;overflow:hidden}.vp-sponsor.aside{border-radius:12px}.vp-sponsor-section+.vp-sponsor-section{margin-top:4px}.vp-sponsor-tier{margin-bottom:4px;text-align:center;letter-spacing:1px;line-height:24px;width:100%;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-sponsor.normal .vp-sponsor-tier{padding:13px 0 11px;font-size:14px}.vp-sponsor.aside .vp-sponsor-tier{padding:9px 0 7px;font-size:12px}.vp-sponsor-grid+.vp-sponsor-tier{margin-top:4px}.vp-sponsor-grid{display:flex;flex-wrap:wrap;gap:4px}.vp-sponsor-grid.xmini .vp-sponsor-grid-link{height:64px}.vp-sponsor-grid.xmini .vp-sponsor-grid-image{max-width:64px;max-height:22px}.vp-sponsor-grid.mini .vp-sponsor-grid-link{height:72px}.vp-sponsor-grid.mini .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.small .vp-sponsor-grid-link{height:96px}.vp-sponsor-grid.small .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.medium .vp-sponsor-grid-link{height:112px}.vp-sponsor-grid.medium .vp-sponsor-grid-image{max-width:120px;max-height:36px}.vp-sponsor-grid.big .vp-sponsor-grid-link{height:184px}.vp-sponsor-grid.big .vp-sponsor-grid-image{max-width:192px;max-height:56px}.vp-sponsor-grid[data-vp-grid="2"] .vp-sponsor-grid-item{width:calc((100% - 4px)/2)}.vp-sponsor-grid[data-vp-grid="3"] .vp-sponsor-grid-item{width:calc((100% - 4px * 2) / 3)}.vp-sponsor-grid[data-vp-grid="4"] .vp-sponsor-grid-item{width:calc((100% - 12px)/4)}.vp-sponsor-grid[data-vp-grid="5"] .vp-sponsor-grid-item{width:calc((100% - 16px)/5)}.vp-sponsor-grid[data-vp-grid="6"] .vp-sponsor-grid-item{width:calc((100% - 4px * 5) / 6)}.vp-sponsor-grid-item{flex-shrink:0;width:100%;background-color:var(--vp-c-bg-soft);transition:background-color .25s}.vp-sponsor-grid-item:hover{background-color:var(--vp-c-bg-soft-down)}.vp-sponsor-grid-item:hover .vp-sponsor-grid-image{filter:grayscale(0) invert(0)}.vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.dark .vp-sponsor-grid-item:hover{background-color:var(--vp-c-white)}.dark .vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.vp-sponsor-grid-link{display:flex}.vp-sponsor-grid-box{display:flex;justify-content:center;align-items:center;width:100%}.vp-sponsor-grid-image{max-width:100%;filter:grayscale(1);transition:filter .25s}.dark .vp-sponsor-grid-image{filter:grayscale(1) invert(1)}.VPBadge[data-v-02919808]{display:inline-block;margin-left:2px;border:1px solid transparent;border-radius:12px;padding:0 10px;line-height:22px;font-size:12px;font-weight:600;transform:translateY(-2px)}.vp-doc h1>.VPBadge[data-v-02919808]{margin-top:4px;vertical-align:top}.vp-doc h2>.VPBadge[data-v-02919808]{margin-top:3px;line-height:20px;padding:0 8px;vertical-align:top}.vp-doc h3>.VPBadge[data-v-02919808]{line-height:20px;vertical-align:middle}.vp-doc h4>.VPBadge[data-v-02919808],.vp-doc h5>.VPBadge[data-v-02919808],.vp-doc h6>.VPBadge[data-v-02919808]{vertical-align:middle;line-height:18px}.VPBadge.info[data-v-02919808]{border-color:var(--vp-badge-info-border);color:var(--vp-badge-info-text);background-color:var(--vp-badge-info-bg)}.VPBadge.tip[data-v-02919808]{border-color:var(--vp-badge-tip-border);color:var(--vp-badge-tip-text);background-color:var(--vp-badge-tip-bg)}.VPBadge.warning[data-v-02919808]{border-color:var(--vp-badge-warning-border);color:var(--vp-badge-warning-text);background-color:var(--vp-badge-warning-bg)}.VPBadge.danger[data-v-02919808]{border-color:var(--vp-badge-danger-border);color:var(--vp-badge-danger-text);background-color:var(--vp-badge-danger-bg)}.VPBackdrop[data-v-c79a1216]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--vp-z-index-backdrop);background:var(--vp-backdrop-bg-color);transition:opacity .5s}.VPBackdrop.fade-enter-from[data-v-c79a1216],.VPBackdrop.fade-leave-to[data-v-c79a1216]{opacity:0}.VPBackdrop.fade-leave-active[data-v-c79a1216]{transition-duration:.25s}@media (min-width: 1280px){.VPBackdrop[data-v-c79a1216]{display:none}}.NotFound[data-v-a172abb3]{padding:64px 24px 96px;text-align:center}@media (min-width: 768px){.NotFound[data-v-a172abb3]{padding:96px 32px 168px}}.code[data-v-a172abb3]{line-height:64px;font-size:64px;font-weight:600}.title[data-v-a172abb3]{padding-top:12px;letter-spacing:2px;line-height:20px;font-size:20px;font-weight:700}.divider[data-v-a172abb3]{margin:24px auto 18px;width:64px;height:1px;background-color:var(--vp-c-divider)}.quote[data-v-a172abb3]{margin:0 auto;max-width:256px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.action[data-v-a172abb3]{padding-top:20px}.link[data-v-a172abb3]{display:inline-block;border:1px solid var(--vp-c-brand);border-radius:16px;padding:3px 16px;font-size:14px;font-weight:500;color:var(--vp-c-brand);transition:border-color .25s,color .25s}.link[data-v-a172abb3]:hover{border-color:var(--vp-c-brand-dark);color:var(--vp-c-brand-dark)}.root[data-v-d0ee3533]{position:relative;z-index:1}.nested[data-v-d0ee3533]{padding-left:16px}.outline-link[data-v-d0ee3533]{display:block;line-height:28px;color:var(--vp-c-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .5s;font-weight:400}.outline-link[data-v-d0ee3533]:hover,.outline-link.active[data-v-d0ee3533]{color:var(--vp-c-text-1);transition:color .25s}.outline-link.nested[data-v-d0ee3533]{padding-left:13px}.VPDocAsideOutline[data-v-ff0f39c8]{display:none}.VPDocAsideOutline.has-outline[data-v-ff0f39c8]{display:block}.content[data-v-ff0f39c8]{position:relative;border-left:1px solid var(--vp-c-divider);padding-left:16px;font-size:13px;font-weight:500}.outline-marker[data-v-ff0f39c8]{position:absolute;top:32px;left:-1px;z-index:0;opacity:0;width:1px;height:18px;background-color:var(--vp-c-brand);transition:top .25s cubic-bezier(0,1,.5,1),background-color .5s,opacity .25s}.outline-title[data-v-ff0f39c8]{letter-spacing:.4px;line-height:28px;font-size:13px;font-weight:600}.VPDocAside[data-v-3f215769]{display:flex;flex-direction:column;flex-grow:1}.spacer[data-v-3f215769]{flex-grow:1}.VPDocAside[data-v-3f215769] .spacer+.VPDocAsideSponsors,.VPDocAside[data-v-3f215769] .spacer+.VPDocAsideCarbonAds{margin-top:24px}.VPDocAside[data-v-3f215769] .VPDocAsideSponsors+.VPDocAsideCarbonAds{margin-top:16px}.VPLastUpdated[data-v-149a99df]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 640px){.VPLastUpdated[data-v-149a99df]{line-height:32px;font-size:14px;font-weight:500}}.VPDocFooter[data-v-37656e44]{margin-top:64px}.edit-info[data-v-37656e44]{padding-bottom:18px}@media (min-width: 640px){.edit-info[data-v-37656e44]{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px}}.edit-link-button[data-v-37656e44]{display:flex;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-brand);transition:color .25s}.edit-link-button[data-v-37656e44]:hover{color:var(--vp-c-brand-dark)}.edit-link-icon[data-v-37656e44]{margin-right:8px;width:14px;height:14px;fill:currentColor}.prev-next[data-v-37656e44]{border-top:1px solid var(--vp-c-divider);padding-top:24px;display:grid;grid-row-gap:8px}@media (min-width: 640px){.prev-next[data-v-37656e44]{grid-template-columns:repeat(2,1fr);grid-column-gap:16px}}.pager-link[data-v-37656e44]{display:block;border:1px solid var(--vp-c-divider);border-radius:8px;padding:11px 16px 13px;width:100%;height:100%;transition:border-color .25s}.pager-link[data-v-37656e44]:hover{border-color:var(--vp-c-brand)}.pager-link.next[data-v-37656e44]{margin-left:auto;text-align:right}.desc[data-v-37656e44]{display:block;line-height:20px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.title[data-v-37656e44]{display:block;line-height:20px;font-size:14px;font-weight:500;color:var(--vp-c-brand);transition:color .25s}.VPDocOutlineDropdown[data-v-0c1fc463]{margin-bottom:48px}.VPDocOutlineDropdown button[data-v-0c1fc463]{display:block;font-size:14px;font-weight:500;line-height:24px;border:1px solid var(--vp-c-border);padding:4px 12px;color:var(--vp-c-text-2);background-color:var(--vp-c-mute);border-radius:8px;transition:color .5s}.VPDocOutlineDropdown button[data-v-0c1fc463]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPDocOutlineDropdown button.open[data-v-0c1fc463]{color:var(--vp-c-text-1)}.icon[data-v-0c1fc463]{display:inline-block;vertical-align:middle;width:16px;height:16px;fill:currentColor}[data-v-0c1fc463] .outline-link{font-size:14px;font-weight:400}.open>.icon[data-v-0c1fc463]{transform:rotate(90deg)}.items[data-v-0c1fc463]{margin-top:12px;border-left:1px solid var(--vp-c-divider)}.VPDoc[data-v-6b87e69f]{padding:32px 24px 96px;width:100%}.VPDoc .VPDocOutlineDropdown[data-v-6b87e69f]{display:none}@media (min-width: 960px) and (max-width: 1279px){.VPDoc .VPDocOutlineDropdown[data-v-6b87e69f]{display:block}}@media (min-width: 768px){.VPDoc[data-v-6b87e69f]{padding:48px 32px 128px}}@media (min-width: 960px){.VPDoc[data-v-6b87e69f]{padding:32px 32px 0}.VPDoc:not(.has-sidebar) .container[data-v-6b87e69f]{display:flex;justify-content:center;max-width:992px}.VPDoc:not(.has-sidebar) .content[data-v-6b87e69f]{max-width:752px}}@media (min-width: 1280px){.VPDoc .container[data-v-6b87e69f]{display:flex;justify-content:center}.VPDoc .aside[data-v-6b87e69f]{display:block}}@media (min-width: 1440px){.VPDoc:not(.has-sidebar) .content[data-v-6b87e69f]{max-width:784px}.VPDoc:not(.has-sidebar) .container[data-v-6b87e69f]{max-width:1104px}}.container[data-v-6b87e69f]{margin:0 auto;width:100%}.aside[data-v-6b87e69f]{position:relative;display:none;order:2;flex-grow:1;padding-left:32px;width:100%;max-width:256px}.left-aside[data-v-6b87e69f]{order:1;padding-left:unset;padding-right:32px}.aside-container[data-v-6b87e69f]{position:fixed;top:0;padding-top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 32px);width:224px;height:100vh;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}.aside-container[data-v-6b87e69f]::-webkit-scrollbar{display:none}.aside-curtain[data-v-6b87e69f]{position:fixed;bottom:0;z-index:10;width:224px;height:32px;background:linear-gradient(transparent,var(--vp-c-bg) 70%)}.aside-content[data-v-6b87e69f]{display:flex;flex-direction:column;min-height:calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px));padding-bottom:32px}.content[data-v-6b87e69f]{position:relative;margin:0 auto;width:100%}@media (min-width: 960px){.content[data-v-6b87e69f]{padding:0 32px 128px}}@media (min-width: 1280px){.content[data-v-6b87e69f]{order:1;margin:0;min-width:640px}}.content-container[data-v-6b87e69f]{margin:0 auto}.VPDoc.has-aside .content-container[data-v-6b87e69f]{max-width:688px}.external-link-icon-enabled[data-v-6b87e69f] :is(.vp-doc a[href*="://"],.vp-doc a[target=_blank]):after{content:"";color:currentColor}.VPButton[data-v-567ba664]{display:inline-block;border:1px solid transparent;text-align:center;font-weight:600;white-space:nowrap;transition:color .25s,border-color .25s,background-color .25s}.VPButton[data-v-567ba664]:active{transition:color .1s,border-color .1s,background-color .1s}.VPButton.medium[data-v-567ba664]{border-radius:20px;padding:0 20px;line-height:38px;font-size:14px}.VPButton.big[data-v-567ba664]{border-radius:24px;padding:0 24px;line-height:46px;font-size:16px}.VPButton.brand[data-v-567ba664]{border-color:var(--vp-button-brand-border);color:var(--vp-button-brand-text);background-color:var(--vp-button-brand-bg)}.VPButton.brand[data-v-567ba664]:hover{border-color:var(--vp-button-brand-hover-border);color:var(--vp-button-brand-hover-text);background-color:var(--vp-button-brand-hover-bg)}.VPButton.brand[data-v-567ba664]:active{border-color:var(--vp-button-brand-active-border);color:var(--vp-button-brand-active-text);background-color:var(--vp-button-brand-active-bg)}.VPButton.alt[data-v-567ba664]{border-color:var(--vp-button-alt-border);color:var(--vp-button-alt-text);background-color:var(--vp-button-alt-bg)}.VPButton.alt[data-v-567ba664]:hover{border-color:var(--vp-button-alt-hover-border);color:var(--vp-button-alt-hover-text);background-color:var(--vp-button-alt-hover-bg)}.VPButton.alt[data-v-567ba664]:active{border-color:var(--vp-button-alt-active-border);color:var(--vp-button-alt-active-text);background-color:var(--vp-button-alt-active-bg)}.VPButton.sponsor[data-v-567ba664]{border-color:var(--vp-button-sponsor-border);color:var(--vp-button-sponsor-text);background-color:var(--vp-button-sponsor-bg)}.VPButton.sponsor[data-v-567ba664]:hover{border-color:var(--vp-button-sponsor-hover-border);color:var(--vp-button-sponsor-hover-text);background-color:var(--vp-button-sponsor-hover-bg)}.VPButton.sponsor[data-v-567ba664]:active{border-color:var(--vp-button-sponsor-active-border);color:var(--vp-button-sponsor-active-text);background-color:var(--vp-button-sponsor-active-bg)}html:not(.dark) .VPImage.dark[data-v-8426fc1a]{display:none}.dark .VPImage.light[data-v-8426fc1a]{display:none}.VPHero[data-v-da5d1713]{margin-top:calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px}@media (min-width: 640px){.VPHero[data-v-da5d1713]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px}}@media (min-width: 960px){.VPHero[data-v-da5d1713]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px}}.container[data-v-da5d1713]{display:flex;flex-direction:column;margin:0 auto;max-width:1152px}@media (min-width: 960px){.container[data-v-da5d1713]{flex-direction:row}}.main[data-v-da5d1713]{position:relative;z-index:10;order:2;flex-grow:1;flex-shrink:0}.VPHero.has-image .container[data-v-da5d1713]{text-align:center}@media (min-width: 960px){.VPHero.has-image .container[data-v-da5d1713]{text-align:left}}@media (min-width: 960px){.main[data-v-da5d1713]{order:1;width:calc((100% / 3) * 2)}.VPHero.has-image .main[data-v-da5d1713]{max-width:592px}}.name[data-v-da5d1713],.text[data-v-da5d1713]{max-width:392px;letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;white-space:pre-wrap}.VPHero.has-image .name[data-v-da5d1713],.VPHero.has-image .text[data-v-da5d1713]{margin:0 auto}.name[data-v-da5d1713]{color:var(--vp-home-hero-name-color)}.clip[data-v-da5d1713]{background:var(--vp-home-hero-name-background);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--vp-home-hero-name-color)}@media (min-width: 640px){.name[data-v-da5d1713],.text[data-v-da5d1713]{max-width:576px;line-height:56px;font-size:48px}}@media (min-width: 960px){.name[data-v-da5d1713],.text[data-v-da5d1713]{line-height:64px;font-size:56px}.VPHero.has-image .name[data-v-da5d1713],.VPHero.has-image .text[data-v-da5d1713]{margin:0}}.tagline[data-v-da5d1713]{padding-top:8px;max-width:392px;line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--vp-c-text-2)}.VPHero.has-image .tagline[data-v-da5d1713]{margin:0 auto}@media (min-width: 640px){.tagline[data-v-da5d1713]{padding-top:12px;max-width:576px;line-height:32px;font-size:20px}}@media (min-width: 960px){.tagline[data-v-da5d1713]{line-height:36px;font-size:24px}.VPHero.has-image .tagline[data-v-da5d1713]{margin:0}}.actions[data-v-da5d1713]{display:flex;flex-wrap:wrap;margin:-6px;padding-top:24px}.VPHero.has-image .actions[data-v-da5d1713]{justify-content:center}@media (min-width: 640px){.actions[data-v-da5d1713]{padding-top:32px}}@media (min-width: 960px){.VPHero.has-image .actions[data-v-da5d1713]{justify-content:flex-start}}.action[data-v-da5d1713]{flex-shrink:0;padding:6px}.image[data-v-da5d1713]{order:1;margin:-76px -24px -48px}@media (min-width: 640px){.image[data-v-da5d1713]{margin:-108px -24px -48px}}@media (min-width: 960px){.image[data-v-da5d1713]{flex-grow:1;order:2;margin:0;min-height:100%}}.image-container[data-v-da5d1713]{position:relative;margin:0 auto;width:320px;height:320px}@media (min-width: 640px){.image-container[data-v-da5d1713]{width:392px;height:392px}}@media (min-width: 960px){.image-container[data-v-da5d1713]{display:flex;justify-content:center;align-items:center;width:100%;height:100%;transform:translate(-32px,-32px)}}.image-bg[data-v-da5d1713]{position:absolute;top:50%;left:50%;border-radius:50%;width:192px;height:192px;background-image:var(--vp-home-hero-image-background-image);filter:var(--vp-home-hero-image-filter);transform:translate(-50%,-50%)}@media (min-width: 640px){.image-bg[data-v-da5d1713]{width:256px;height:256px}}@media (min-width: 960px){.image-bg[data-v-da5d1713]{width:320px;height:320px}}[data-v-da5d1713] .image-src{position:absolute;top:50%;left:50%;max-width:192px;max-height:192px;transform:translate(-50%,-50%)}@media (min-width: 640px){[data-v-da5d1713] .image-src{max-width:256px;max-height:256px}}@media (min-width: 960px){[data-v-da5d1713] .image-src{max-width:320px;max-height:320px}}.VPFeature[data-v-33086751]{display:block;border:1px solid var(--vp-c-bg-soft);border-radius:12px;height:100%;background-color:var(--vp-c-bg-soft);transition:border-color .25s,background-color .25s}.VPFeature.link[data-v-33086751]:hover{border-color:var(--vp-c-brand);background-color:var(--vp-c-bg-soft-up)}.box[data-v-33086751]{display:flex;flex-direction:column;padding:24px;height:100%}.VPFeature[data-v-33086751] .VPImage{margin-bottom:20px}.icon[data-v-33086751]{display:flex;justify-content:center;align-items:center;margin-bottom:20px;border-radius:6px;background-color:var(--vp-c-bg-soft-down);width:48px;height:48px;font-size:24px;transition:background-color .25s}.title[data-v-33086751]{line-height:24px;font-size:16px;font-weight:600}.details[data-v-33086751]{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.link-text[data-v-33086751]{padding-top:8px}.link-text-value[data-v-33086751]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-brand)}.link-text-icon[data-v-33086751]{display:inline-block;margin-left:6px;width:14px;height:14px;fill:currentColor}.VPFeatures[data-v-39646fad]{position:relative;padding:0 24px}@media (min-width: 640px){.VPFeatures[data-v-39646fad]{padding:0 48px}}@media (min-width: 960px){.VPFeatures[data-v-39646fad]{padding:0 64px}}.container[data-v-39646fad]{margin:0 auto;max-width:1152px}.items[data-v-39646fad]{display:flex;flex-wrap:wrap;margin:-8px}.item[data-v-39646fad]{padding:8px;width:100%}@media (min-width: 640px){.item.grid-2[data-v-39646fad],.item.grid-4[data-v-39646fad],.item.grid-6[data-v-39646fad]{width:50%}}@media (min-width: 768px){.item.grid-2[data-v-39646fad],.item.grid-4[data-v-39646fad]{width:50%}.item.grid-3[data-v-39646fad],.item.grid-6[data-v-39646fad]{width:calc(100% / 3)}}@media (min-width: 960px){.item.grid-4[data-v-39646fad]{width:25%}}.VPHome[data-v-d82743a8]{padding-bottom:96px}.VPHome[data-v-d82743a8] .VPHomeSponsors{margin-top:112px;margin-bottom:-128px}@media (min-width: 768px){.VPHome[data-v-d82743a8]{padding-bottom:128px}}.VPContent[data-v-669faec9]{flex-grow:1;flex-shrink:0;margin:var(--vp-layout-top-height, 0px) auto 0;width:100%}.VPContent.is-home[data-v-669faec9]{width:100%;max-width:100%}.VPContent.has-sidebar[data-v-669faec9]{margin:0}@media (min-width: 960px){.VPContent[data-v-669faec9]{padding-top:var(--vp-nav-height)}.VPContent.has-sidebar[data-v-669faec9]{margin:var(--vp-layout-top-height, 0px) 0 0;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPContent.has-sidebar[data-v-669faec9]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.VPFooter[data-v-e03eb2e1]{position:relative;z-index:var(--vp-z-index-footer);border-top:1px solid var(--vp-c-gutter);padding:32px 24px;background-color:var(--vp-c-bg)}.VPFooter.has-sidebar[data-v-e03eb2e1]{display:none}@media (min-width: 768px){.VPFooter[data-v-e03eb2e1]{padding:32px}}.container[data-v-e03eb2e1]{margin:0 auto;max-width:var(--vp-layout-max-width);text-align:center}.message[data-v-e03eb2e1],.copyright[data-v-e03eb2e1]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.VPLocalNavOutlineDropdown[data-v-18201f51]{padding:12px 20px 11px}.VPLocalNavOutlineDropdown button[data-v-18201f51]{display:block;font-size:12px;font-weight:500;line-height:24px;color:var(--vp-c-text-2);transition:color .5s;position:relative}.VPLocalNavOutlineDropdown button[data-v-18201f51]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPLocalNavOutlineDropdown button.open[data-v-18201f51]{color:var(--vp-c-text-1)}.icon[data-v-18201f51]{display:inline-block;vertical-align:middle;margin-left:2px;width:14px;height:14px;fill:currentColor}[data-v-18201f51] .outline-link{font-size:14px;padding:2px 0}.open>.icon[data-v-18201f51]{transform:rotate(90deg)}.items[data-v-18201f51]{position:absolute;top:64px;right:16px;left:16px;display:grid;gap:1px;border:1px solid var(--vp-c-border);border-radius:8px;background-color:var(--vp-c-gutter);max-height:calc(var(--vp-vh, 100vh) - 86px);overflow:hidden auto;box-shadow:var(--vp-shadow-3)}.header[data-v-18201f51]{background-color:var(--vp-c-bg-soft)}.top-link[data-v-18201f51]{display:block;padding:0 16px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-c-brand)}.outline[data-v-18201f51]{padding:8px 0;background-color:var(--vp-c-bg-soft)}.flyout-enter-active[data-v-18201f51]{transition:all .2s ease-out}.flyout-leave-active[data-v-18201f51]{transition:all .15s ease-in}.flyout-enter-from[data-v-18201f51],.flyout-leave-to[data-v-18201f51]{opacity:0;transform:translateY(-16px)}.VPLocalNav[data-v-5cfd5582]{position:sticky;top:0;left:0;z-index:var(--vp-z-index-local-nav);display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--vp-c-gutter);border-bottom:1px solid var(--vp-c-gutter);padding-top:var(--vp-layout-top-height, 0px);width:100%;background-color:var(--vp-local-nav-bg-color)}.VPLocalNav.fixed[data-v-5cfd5582]{position:fixed}.VPLocalNav.reached-top[data-v-5cfd5582]{border-top-color:transparent}@media (min-width: 960px){.VPLocalNav[data-v-5cfd5582]{display:none}}.menu[data-v-5cfd5582]{display:flex;align-items:center;padding:12px 24px 11px;line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.menu[data-v-5cfd5582]:hover{color:var(--vp-c-text-1);transition:color .25s}@media (min-width: 768px){.menu[data-v-5cfd5582]{padding:0 32px}}.menu-icon[data-v-5cfd5582]{margin-right:8px;width:16px;height:16px;fill:currentColor}.VPOutlineDropdown[data-v-5cfd5582]{padding:12px 24px 11px}@media (min-width: 768px){.VPOutlineDropdown[data-v-5cfd5582]{padding:12px 32px 11px}}.VPSwitch[data-v-f3c41672]{position:relative;border-radius:11px;display:block;width:40px;height:22px;flex-shrink:0;border:1px solid var(--vp-input-border-color);background-color:var(--vp-input-switch-bg-color);transition:border-color .25s}.VPSwitch[data-v-f3c41672]:hover{border-color:var(--vp-input-hover-border-color)}.check[data-v-f3c41672]{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background-color:var(--vp-c-neutral-inverse);box-shadow:var(--vp-shadow-1);transition:transform .25s}.icon[data-v-f3c41672]{position:relative;display:block;width:18px;height:18px;border-radius:50%;overflow:hidden}.icon[data-v-f3c41672] svg{position:absolute;top:3px;left:3px;width:12px;height:12px;fill:var(--vp-c-text-2)}.dark .icon[data-v-f3c41672] svg{fill:var(--vp-c-text-1);transition:opacity .25s}.sun[data-v-82b282f1]{opacity:1}.moon[data-v-82b282f1],.dark .sun[data-v-82b282f1]{opacity:0}.dark .moon[data-v-82b282f1]{opacity:1}.dark .VPSwitchAppearance[data-v-82b282f1] .check{transform:translate(18px)}.VPNavBarAppearance[data-v-f6a63727]{display:none}@media (min-width: 1280px){.VPNavBarAppearance[data-v-f6a63727]{display:flex;align-items:center}}.VPMenuGroup+.VPMenuLink[data-v-2f2cfafc]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.link[data-v-2f2cfafc]{display:block;border-radius:6px;padding:0 12px;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);white-space:nowrap;transition:background-color .25s,color .25s}.link[data-v-2f2cfafc]:hover{color:var(--vp-c-brand);background-color:var(--vp-c-bg-elv-mute)}.link.active[data-v-2f2cfafc]{color:var(--vp-c-brand)}.VPMenuGroup[data-v-69e747b5]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.VPMenuGroup[data-v-69e747b5]:first-child{margin-top:0;border-top:0;padding-top:0}.VPMenuGroup+.VPMenuGroup[data-v-69e747b5]{margin-top:12px;border-top:1px solid var(--vp-c-divider)}.title[data-v-69e747b5]{padding:0 12px;line-height:32px;font-size:14px;font-weight:600;color:var(--vp-c-text-2);white-space:nowrap;transition:color .25s}.VPMenu[data-v-e7ea1737]{border-radius:12px;padding:12px;min-width:128px;border:1px solid var(--vp-c-divider);background-color:var(--vp-c-bg-elv);box-shadow:var(--vp-shadow-3);transition:background-color .5s;max-height:calc(100vh - var(--vp-nav-height));overflow-y:auto}.VPMenu[data-v-e7ea1737] .group{margin:0 -12px;padding:0 12px 12px}.VPMenu[data-v-e7ea1737] .group+.group{border-top:1px solid var(--vp-c-divider);padding:11px 12px 12px}.VPMenu[data-v-e7ea1737] .group:last-child{padding-bottom:0}.VPMenu[data-v-e7ea1737] .group+.item{border-top:1px solid var(--vp-c-divider);padding:11px 16px 0}.VPMenu[data-v-e7ea1737] .item{padding:0 16px;white-space:nowrap}.VPMenu[data-v-e7ea1737] .label{flex-grow:1;line-height:28px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.VPMenu[data-v-e7ea1737] .action{padding-left:24px}.VPFlyout[data-v-a7b5672a]{position:relative}.VPFlyout[data-v-a7b5672a]:hover{color:var(--vp-c-brand);transition:color .25s}.VPFlyout:hover .text[data-v-a7b5672a]{color:var(--vp-c-text-2)}.VPFlyout:hover .icon[data-v-a7b5672a]{fill:var(--vp-c-text-2)}.VPFlyout.active .text[data-v-a7b5672a]{color:var(--vp-c-brand)}.VPFlyout.active:hover .text[data-v-a7b5672a]{color:var(--vp-c-brand-dark)}.VPFlyout:hover .menu[data-v-a7b5672a],.button[aria-expanded=true]+.menu[data-v-a7b5672a]{opacity:1;visibility:visible;transform:translateY(0)}.button[aria-expanded=false]+.menu[data-v-a7b5672a]{opacity:0;visibility:hidden;transform:translateY(0)}.button[data-v-a7b5672a]{display:flex;align-items:center;padding:0 12px;height:var(--vp-nav-height);color:var(--vp-c-text-1);transition:color .5s}.text[data-v-a7b5672a]{display:flex;align-items:center;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.option-icon[data-v-a7b5672a]{margin-right:0;width:16px;height:16px;fill:currentColor}.text-icon[data-v-a7b5672a]{margin-left:4px;width:14px;height:14px;fill:currentColor}.icon[data-v-a7b5672a]{width:20px;height:20px;fill:currentColor;transition:fill .25s}.menu[data-v-a7b5672a]{position:absolute;top:calc(var(--vp-nav-height) / 2 + 20px);right:0;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,transform .25s}.VPSocialLink[data-v-f80f8133]{display:flex;justify-content:center;align-items:center;width:36px;height:36px;color:var(--vp-c-text-2);transition:color .5s}.VPSocialLink[data-v-f80f8133]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPSocialLink[data-v-f80f8133]>svg{width:20px;height:20px;fill:currentColor}.VPSocialLinks[data-v-7bc22406]{display:flex;justify-content:center}.VPNavBarExtra[data-v-40855f84]{display:none;margin-right:-12px}@media (min-width: 768px){.VPNavBarExtra[data-v-40855f84]{display:block}}@media (min-width: 1280px){.VPNavBarExtra[data-v-40855f84]{display:none}}.trans-title[data-v-40855f84]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.item.appearance[data-v-40855f84],.item.social-links[data-v-40855f84]{display:flex;align-items:center;padding:0 12px}.item.appearance[data-v-40855f84]{min-width:176px}.appearance-action[data-v-40855f84]{margin-right:-2px}.social-links-list[data-v-40855f84]{margin:-4px -8px}.VPNavBarHamburger[data-v-e5dd9c1c]{display:flex;justify-content:center;align-items:center;width:48px;height:var(--vp-nav-height)}@media (min-width: 768px){.VPNavBarHamburger[data-v-e5dd9c1c]{display:none}}.container[data-v-e5dd9c1c]{position:relative;width:16px;height:14px;overflow:hidden}.VPNavBarHamburger:hover .top[data-v-e5dd9c1c]{top:0;left:0;transform:translate(4px)}.VPNavBarHamburger:hover .middle[data-v-e5dd9c1c]{top:6px;left:0;transform:translate(0)}.VPNavBarHamburger:hover .bottom[data-v-e5dd9c1c]{top:12px;left:0;transform:translate(8px)}.VPNavBarHamburger.active .top[data-v-e5dd9c1c]{top:6px;transform:translate(0) rotate(225deg)}.VPNavBarHamburger.active .middle[data-v-e5dd9c1c]{top:6px;transform:translate(16px)}.VPNavBarHamburger.active .bottom[data-v-e5dd9c1c]{top:6px;transform:translate(0) rotate(135deg)}.VPNavBarHamburger.active:hover .top[data-v-e5dd9c1c],.VPNavBarHamburger.active:hover .middle[data-v-e5dd9c1c],.VPNavBarHamburger.active:hover .bottom[data-v-e5dd9c1c]{background-color:var(--vp-c-text-2);transition:top .25s,background-color .25s,transform .25s}.top[data-v-e5dd9c1c],.middle[data-v-e5dd9c1c],.bottom[data-v-e5dd9c1c]{position:absolute;width:16px;height:2px;background-color:var(--vp-c-text-1);transition:top .25s,background-color .5s,transform .25s}.top[data-v-e5dd9c1c]{top:0;left:0;transform:translate(0)}.middle[data-v-e5dd9c1c]{top:6px;left:0;transform:translate(8px)}.bottom[data-v-e5dd9c1c]{top:12px;left:0;transform:translate(4px)}.VPNavBarMenuLink[data-v-0b525393]{display:flex;align-items:center;padding:0 12px;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.VPNavBarMenuLink.active[data-v-0b525393],.VPNavBarMenuLink[data-v-0b525393]:hover{color:var(--vp-c-brand)}.VPNavBarMenu[data-v-7f418b0f]{display:none}@media (min-width: 768px){.VPNavBarMenu[data-v-7f418b0f]{display:flex}}.VPPluginSearch-flex-logo{width:80px;margin-left:calc(100% - 90px);padding-bottom:10px}.VPPluginSearch-search-list{padding:1rem;max-height:calc(100vh - 230px);overflow-x:auto}.VPPluginSearch-search-item-icon{font-family:none;align-self:center;padding:0 1rem 0 0;font-size:x-large}.VPPluginSearch-search-list>div{color:var(--vp-c-brand-dark);font-weight:700}.VPPluginSearch-search-item{padding:.25rem 1rem;margin:8px 0 0;border:solid 1px;border-radius:6px;display:flex;border-color:var(--vp-custom-block-details-border);color:var(--vp-custom-block-details-text);background-color:var(--vp-custom-block-details-bg)}.VPPluginSearch-search-item p{margin:0;font-size:smaller;color:var(--c-text-light-3)}.VPPluginSearch-search-item:hover{color:#fff;background:var(--vp-c-brand-dark)}.VPPluginSearch-search-item:hover>p{color:#fff}.VPNavBarSearch{display:flex;align-items:center;padding-left:16px}.DocSearch-MagnifierLabel{margin:16px;color:var(--c-brand-light);stroke-width:2px}.DocSearch-Input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#58565636;border:solid 1px var(--c-brand-light);color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;width:80%;margin:8px;padding:8px;border-radius:6px}.dark .DocSearch-Input{color:var(--vp-c-text-1)}.VPPluginSearch-modal-back{left:0;right:0;top:0;bottom:0;background:#545454b3;position:fixed;z-index:65}.dark .VPPluginSearch-modal{background-color:#242424}.VPPluginSearch-modal{background-color:#f9f9f9;border-radius:6px;box-shadow:none;flex-direction:column;margin:80px auto auto;max-width:560px;position:relative}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}@media (max-width: 768px){.VPPluginSearch-modal{max-width:100%;border-radius:0}}.dark .DocSearch-Form{background-color:var(--vt-c-bg-mute)}.DocSearch-Form{background-color:#fff;border:1px solid var(--vt-c-brand);padding:6px}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Button-Key{align-items:center;background:var(--c-brand-light);border-radius:3px;box-shadow:var(--c-brand);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:2px;position:relative;top:-1px;width:20px}body.dark .DocSearch-Button:hover{box-shadow:none}.DocSearch{--docsearch-primary-color: var(--vt-c-brand);--docsearch-highlight-color: var(--docsearch-primary-color);--docsearch-text-color: var(--vt-c-text-1);--docsearch-muted-color: #ebebeb99;--docsearch-searchbox-shadow: none;--docsearch-searchbox-focus-background: transparent;--docsearch-key-gradient: transparent;--docsearch-key-shadow: none;--docsearch-modal-background: var(--vt-c-bg-soft);--docsearch-footer-background: var(--vt-c-bg)}.dark .DocSearch{--docsearch-modal-shadow: none;--docsearch-footer-shadow: none;--docsearch-logo-color: #ebebeb99;--docsearch-hit-background: #2f2f2f;--docsearch-hit-color: #ebebeb99;--docsearch-hit-shadow: none}.dark .DocSearch-Footer{border-top:1px solid var(--vt-c-divider)}.DocSearch-Form{background-color:#fff;border:1px solid var(--vt-c-brand)}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Button{display:flex;justify-content:center;align-items:center;margin:0;width:48px;height:55px;background:transparent;border:none}.DocSearch-Button:hover{background:transparent}.DocSearch-Button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}.DocSearch-Button:focus:not(:focus-visible){outline:none!important}@media (min-width: 768px){.DocSearch-Button{justify-content:flex-start;width:100%}}.DocSearch-MagnifierLabel{color:var(--vp-c-brand-dark)}.DocSearch-Button .DocSearch-Search-Icon{transition:color .5s;fill:currentColor;width:18px;height:18px;position:relative}@media (min-width: 768px){.DocSearch-Button .DocSearch-Search-Icon{top:1px;margin-right:10px;width:15px;height:15px}}.DocSearch-Button:hover .DocSearch-Search-Icon{color:var(--vt-c-text-1)}.DocSearch-Button-Placeholder{transition:color .5s;font-size:13px;font-weight:500;color:#6669;display:none;padding:0 10px 0 0}@media (min-width: 960px){.DocSearch-Button-Placeholder{display:inline-block}}.DocSearch-Button:hover .DocSearch-Button-Placeholder{color:var(--vt-c-text-1)}.DocSearch-Button .DocSearch-Button-Key{margin-top:2px;border:1px solid var(--vt-c-divider);border-right:none;border-radius:4px 0 0 4px;display:none;padding-left:6px;height:22px;line-height:22px;transition:color .5s,border-color .5s;min-width:0}.DocSearch-Button .DocSearch-Button-Key+.DocSearch-Button-Key{border-right:1px solid var(--vt-c-divider);border-left:none;border-radius:0 4px 4px 0;padding-left:2px;padding-right:6px}.DocSearch-Button:hover .DocSearch-Button-Key{color:var(--vt-c-brand-light)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Key{display:inline-block}}.DocSearch-Button-Key{font-size:12px;font-weight:500;height:20px;margin:0;width:auto;color:var(--vt-c-text-3);transition:color .5s;display:inline-block;padding:0 1px}.VPNavBarSocialLinks[data-v-0394ad82]{display:none}@media (min-width: 1280px){.VPNavBarSocialLinks[data-v-0394ad82]{display:flex;align-items:center}}.title[data-v-86d1bed8]{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;height:var(--vp-nav-height);font-size:16px;font-weight:600;color:var(--vp-c-text-1);transition:opacity .25s}@media (min-width: 960px){.title[data-v-86d1bed8]{flex-shrink:0}.VPNavBarTitle.has-sidebar .title[data-v-86d1bed8]{border-bottom-color:var(--vp-c-divider)}}[data-v-86d1bed8] .logo{margin-right:8px;height:var(--vp-nav-logo-height)}.VPNavBarTranslations[data-v-74abcbb9]{display:none}@media (min-width: 1280px){.VPNavBarTranslations[data-v-74abcbb9]{display:flex;align-items:center}}.title[data-v-74abcbb9]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.VPNavBar[data-v-0937f67c]{position:relative;border-bottom:1px solid transparent;padding:0 8px 0 24px;height:var(--vp-nav-height);pointer-events:none;white-space:nowrap}@media (min-width: 768px){.VPNavBar[data-v-0937f67c]{padding:0 32px}}@media (min-width: 960px){.VPNavBar.has-sidebar[data-v-0937f67c]{padding:0}.VPNavBar[data-v-0937f67c]:not(.has-sidebar):not(.top){border-bottom-color:var(--vp-c-gutter);background-color:var(--vp-nav-bg-color)}}.container[data-v-0937f67c]{display:flex;justify-content:space-between;margin:0 auto;max-width:calc(var(--vp-layout-max-width) - 64px);height:var(--vp-nav-height);pointer-events:none}.container>.title[data-v-0937f67c],.container>.content[data-v-0937f67c]{pointer-events:none}.container[data-v-0937f67c] *{pointer-events:auto}@media (min-width: 960px){.VPNavBar.has-sidebar .container[data-v-0937f67c]{max-width:100%}}.title[data-v-0937f67c]{flex-shrink:0;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar.has-sidebar .title[data-v-0937f67c]{position:absolute;top:0;left:0;z-index:2;padding:0 32px;width:var(--vp-sidebar-width);height:var(--vp-nav-height);background-color:transparent}}@media (min-width: 1440px){.VPNavBar.has-sidebar .title[data-v-0937f67c]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}.content[data-v-0937f67c]{flex-grow:1}@media (min-width: 960px){.VPNavBar.has-sidebar .content[data-v-0937f67c]{position:relative;z-index:1;padding-right:32px;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPNavBar.has-sidebar .content[data-v-0937f67c]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.content-body[data-v-0937f67c]{display:flex;justify-content:flex-end;align-items:center;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar:not(.top) .content-body[data-v-0937f67c]{position:relative;background-color:var(--vp-nav-bg-color)}}@media (max-width: 767px){.content-body[data-v-0937f67c]{column-gap:.5rem}}.menu+.translations[data-v-0937f67c]:before,.menu+.appearance[data-v-0937f67c]:before,.menu+.social-links[data-v-0937f67c]:before,.translations+.appearance[data-v-0937f67c]:before,.appearance+.social-links[data-v-0937f67c]:before{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--vp-c-divider);content:""}.menu+.appearance[data-v-0937f67c]:before,.translations+.appearance[data-v-0937f67c]:before{margin-right:16px}.appearance+.social-links[data-v-0937f67c]:before{margin-left:16px}.social-links[data-v-0937f67c]{margin-right:-8px}@media (min-width: 960px){.VPNavBar.has-sidebar .curtain[data-v-0937f67c]{position:absolute;right:0;bottom:-31px;width:calc(100% - var(--vp-sidebar-width));height:32px}.VPNavBar.has-sidebar .curtain[data-v-0937f67c]:before{display:block;width:100%;height:32px;background:linear-gradient(var(--vp-c-bg),transparent 70%);content:""}}@media (min-width: 1440px){.VPNavBar.has-sidebar .curtain[data-v-0937f67c]{width:calc(100% - ((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)))}}.VPNavScreenMenuLink[data-v-30be0acb]{display:block;border-bottom:1px solid var(--vp-c-divider);padding:12px 0 11px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:border-color .25s,color .25s}.VPNavScreenMenuLink[data-v-30be0acb]:hover{color:var(--vp-c-brand)}.VPNavScreenMenuGroupLink[data-v-6656c42a]{display:block;margin-left:12px;line-height:32px;font-size:14px;font-weight:400;color:var(--vp-c-text-1);transition:color .25s}.VPNavScreenMenuGroupLink[data-v-6656c42a]:hover{color:var(--vp-c-brand)}.VPNavScreenMenuGroupSection[data-v-8133b170]{display:block}.title[data-v-8133b170]{line-height:32px;font-size:13px;font-weight:700;color:var(--vp-c-text-2);transition:color .25s}.VPNavScreenMenuGroup[data-v-338a1689]{border-bottom:1px solid var(--vp-c-divider);height:48px;overflow:hidden;transition:border-color .5s}.VPNavScreenMenuGroup .items[data-v-338a1689]{visibility:hidden}.VPNavScreenMenuGroup.open .items[data-v-338a1689]{visibility:visible}.VPNavScreenMenuGroup.open[data-v-338a1689]{padding-bottom:10px;height:auto}.VPNavScreenMenuGroup.open .button[data-v-338a1689]{padding-bottom:6px;color:var(--vp-c-brand)}.VPNavScreenMenuGroup.open .button-icon[data-v-338a1689]{transform:rotate(45deg)}.button[data-v-338a1689]{display:flex;justify-content:space-between;align-items:center;padding:12px 4px 11px 0;width:100%;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.button[data-v-338a1689]:hover{color:var(--vp-c-brand)}.button-icon[data-v-338a1689]{width:14px;height:14px;fill:var(--vp-c-text-2);transition:fill .5s,transform .25s}.group[data-v-338a1689]:first-child{padding-top:0}.group+.group[data-v-338a1689],.group+.item[data-v-338a1689]{padding-top:4px}.VPNavScreenAppearance[data-v-add8f686]{display:flex;justify-content:space-between;align-items:center;border-radius:8px;padding:12px 14px 12px 16px;background-color:var(--vp-c-bg-soft)}.text[data-v-add8f686]{line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.VPNavScreenTranslations[data-v-d72aa483]{height:24px;overflow:hidden}.VPNavScreenTranslations.open[data-v-d72aa483]{height:auto}.title[data-v-d72aa483]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-text-1)}.icon[data-v-d72aa483]{width:16px;height:16px;fill:currentColor}.icon.lang[data-v-d72aa483]{margin-right:8px}.icon.chevron[data-v-d72aa483]{margin-left:4px}.list[data-v-d72aa483]{padding:4px 0 0 24px}.link[data-v-d72aa483]{line-height:32px;font-size:13px;color:var(--vp-c-text-1)}.VPNavScreen[data-v-69fcc70f]{position:fixed;top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px);right:0;bottom:0;left:0;padding:0 32px;width:100%;background-color:var(--vp-nav-screen-bg-color);overflow-y:auto;transition:background-color .5s;pointer-events:auto}.VPNavScreen.fade-enter-active[data-v-69fcc70f],.VPNavScreen.fade-leave-active[data-v-69fcc70f]{transition:opacity .25s}.VPNavScreen.fade-enter-active .container[data-v-69fcc70f],.VPNavScreen.fade-leave-active .container[data-v-69fcc70f]{transition:transform .25s ease}.VPNavScreen.fade-enter-from[data-v-69fcc70f],.VPNavScreen.fade-leave-to[data-v-69fcc70f]{opacity:0}.VPNavScreen.fade-enter-from .container[data-v-69fcc70f],.VPNavScreen.fade-leave-to .container[data-v-69fcc70f]{transform:translateY(-8px)}@media (min-width: 768px){.VPNavScreen[data-v-69fcc70f]{display:none}}.container[data-v-69fcc70f]{margin:0 auto;padding:24px 0 96px;max-width:288px}.menu+.translations[data-v-69fcc70f],.menu+.appearance[data-v-69fcc70f],.translations+.appearance[data-v-69fcc70f]{margin-top:24px}.menu+.social-links[data-v-69fcc70f]{margin-top:16px}.appearance+.social-links[data-v-69fcc70f]{margin-top:16px}.VPNav[data-v-7e5bc4a5]{position:relative;top:var(--vp-layout-top-height, 0px);left:0;z-index:var(--vp-z-index-nav);width:100%;pointer-events:none;transition:background-color .5s}@media (min-width: 960px){.VPNav[data-v-7e5bc4a5]{position:fixed}}.VPSidebarItem.level-0[data-v-9b797284]{padding-bottom:24px}.VPSidebarItem.collapsed.level-0[data-v-9b797284]{padding-bottom:10px}.item[data-v-9b797284]{position:relative;display:flex;width:100%}.VPSidebarItem.collapsible>.item[data-v-9b797284]{cursor:pointer}.indicator[data-v-9b797284]{position:absolute;top:6px;bottom:6px;left:-17px;width:1px;transition:background-color .25s}.VPSidebarItem.level-2.is-active>.item>.indicator[data-v-9b797284],.VPSidebarItem.level-3.is-active>.item>.indicator[data-v-9b797284],.VPSidebarItem.level-4.is-active>.item>.indicator[data-v-9b797284],.VPSidebarItem.level-5.is-active>.item>.indicator[data-v-9b797284]{background-color:var(--vp-c-brand)}.link[data-v-9b797284]{display:flex;align-items:center;flex-grow:1}.text[data-v-9b797284]{flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;transition:color .25s}.VPSidebarItem.level-0 .text[data-v-9b797284]{font-weight:700;color:var(--vp-c-text-1)}.VPSidebarItem.level-1 .text[data-v-9b797284],.VPSidebarItem.level-2 .text[data-v-9b797284],.VPSidebarItem.level-3 .text[data-v-9b797284],.VPSidebarItem.level-4 .text[data-v-9b797284],.VPSidebarItem.level-5 .text[data-v-9b797284]{font-weight:500;color:var(--vp-c-text-2)}.VPSidebarItem.level-0.is-link>.item>.link:hover .text[data-v-9b797284],.VPSidebarItem.level-1.is-link>.item>.link:hover .text[data-v-9b797284],.VPSidebarItem.level-2.is-link>.item>.link:hover .text[data-v-9b797284],.VPSidebarItem.level-3.is-link>.item>.link:hover .text[data-v-9b797284],.VPSidebarItem.level-4.is-link>.item>.link:hover .text[data-v-9b797284],.VPSidebarItem.level-5.is-link>.item>.link:hover .text[data-v-9b797284]{color:var(--vp-c-brand)}.VPSidebarItem.level-0.has-active>.item>.text[data-v-9b797284],.VPSidebarItem.level-1.has-active>.item>.text[data-v-9b797284],.VPSidebarItem.level-2.has-active>.item>.text[data-v-9b797284],.VPSidebarItem.level-3.has-active>.item>.text[data-v-9b797284],.VPSidebarItem.level-4.has-active>.item>.text[data-v-9b797284],.VPSidebarItem.level-5.has-active>.item>.text[data-v-9b797284],.VPSidebarItem.level-0.has-active>.item>.link>.text[data-v-9b797284],.VPSidebarItem.level-1.has-active>.item>.link>.text[data-v-9b797284],.VPSidebarItem.level-2.has-active>.item>.link>.text[data-v-9b797284],.VPSidebarItem.level-3.has-active>.item>.link>.text[data-v-9b797284],.VPSidebarItem.level-4.has-active>.item>.link>.text[data-v-9b797284],.VPSidebarItem.level-5.has-active>.item>.link>.text[data-v-9b797284]{color:var(--vp-c-text-1)}.VPSidebarItem.level-0.is-active>.item .link>.text[data-v-9b797284],.VPSidebarItem.level-1.is-active>.item .link>.text[data-v-9b797284],.VPSidebarItem.level-2.is-active>.item .link>.text[data-v-9b797284],.VPSidebarItem.level-3.is-active>.item .link>.text[data-v-9b797284],.VPSidebarItem.level-4.is-active>.item .link>.text[data-v-9b797284],.VPSidebarItem.level-5.is-active>.item .link>.text[data-v-9b797284]{color:var(--vp-c-brand)}.caret[data-v-9b797284]{display:flex;justify-content:center;align-items:center;margin-right:-7px;width:32px;height:32px;color:var(--vp-c-text-3);cursor:pointer;transition:color .25s;flex-shrink:0}.item:hover .caret[data-v-9b797284]{color:var(--vp-c-text-2)}.item:hover .caret[data-v-9b797284]:hover{color:var(--vp-c-text-1)}.caret-icon[data-v-9b797284]{width:18px;height:18px;fill:currentColor;transform:rotate(90deg);transition:transform .25s}.VPSidebarItem.collapsed .caret-icon[data-v-9b797284]{transform:rotate(0)}.VPSidebarItem.level-1 .items[data-v-9b797284],.VPSidebarItem.level-2 .items[data-v-9b797284],.VPSidebarItem.level-3 .items[data-v-9b797284],.VPSidebarItem.level-4 .items[data-v-9b797284],.VPSidebarItem.level-5 .items[data-v-9b797284]{border-left:1px solid var(--vp-c-divider);padding-left:16px}.VPSidebarItem.collapsed .items[data-v-9b797284]{display:none}.VPSidebar[data-v-845b8fc6]{position:fixed;top:var(--vp-layout-top-height, 0px);bottom:0;left:0;z-index:var(--vp-z-index-sidebar);padding:32px 32px 96px;width:calc(100vw - 64px);max-width:320px;background-color:var(--vp-sidebar-bg-color);opacity:0;box-shadow:var(--vp-c-shadow-3);overflow-x:hidden;overflow-y:auto;transform:translate(-100%);transition:opacity .5s,transform .25s ease;overscroll-behavior:contain}.VPSidebar.open[data-v-845b8fc6]{opacity:1;visibility:visible;transform:translate(0);transition:opacity .25s,transform .5s cubic-bezier(.19,1,.22,1)}.dark .VPSidebar[data-v-845b8fc6]{box-shadow:var(--vp-shadow-1)}@media (min-width: 960px){.VPSidebar[data-v-845b8fc6]{z-index:1;padding-top:var(--vp-nav-height);padding-bottom:128px;width:var(--vp-sidebar-width);max-width:100%;background-color:var(--vp-sidebar-bg-color);opacity:1;visibility:visible;box-shadow:none;transform:translate(0)}}@media (min-width: 1440px){.VPSidebar[data-v-845b8fc6]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}@media (min-width: 960px){.curtain[data-v-845b8fc6]{position:sticky;top:-64px;left:0;z-index:1;margin-top:calc(var(--vp-nav-height) * -1);margin-right:-32px;margin-left:-32px;height:var(--vp-nav-height);background-color:var(--vp-sidebar-bg-color)}}.nav[data-v-845b8fc6]{outline:0}.group+.group[data-v-845b8fc6]{border-top:1px solid var(--vp-c-divider);padding-top:10px}@media (min-width: 960px){.group[data-v-845b8fc6]{padding-top:10px;width:calc(var(--vp-sidebar-width) - 64px)}}.VPSkipLink[data-v-ae3e3f51]{top:8px;left:8px;padding:8px 16px;z-index:999;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;color:var(--vp-c-brand);box-shadow:var(--vp-shadow-3);background-color:var(--vp-c-bg)}.VPSkipLink[data-v-ae3e3f51]:focus{height:auto;width:auto;clip:auto;clip-path:none}@media (min-width: 1280px){.VPSkipLink[data-v-ae3e3f51]{top:14px;left:16px}}.Layout[data-v-255ec12d]{display:flex;flex-direction:column;min-height:100vh}.VPHomeSponsors[data-v-3c6e61c2]{border-top:1px solid var(--vp-c-gutter);padding:88px 24px 96px;background-color:var(--vp-c-bg)}.container[data-v-3c6e61c2]{margin:0 auto;max-width:1152px}.love[data-v-3c6e61c2]{margin:0 auto;width:28px;height:28px;color:var(--vp-c-text-3)}.icon[data-v-3c6e61c2]{width:28px;height:28px;fill:currentColor}.message[data-v-3c6e61c2]{margin:0 auto;padding-top:10px;max-width:320px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.sponsors[data-v-3c6e61c2]{padding-top:32px}.action[data-v-3c6e61c2]{padding-top:40px;text-align:center}.VPTeamPage[data-v-10b00018]{padding-bottom:96px}@media (min-width: 768px){.VPTeamPage[data-v-10b00018]{padding-bottom:128px}}.VPTeamPageSection+.VPTeamPageSection[data-v-10b00018-s],.VPTeamMembers+.VPTeamPageSection[data-v-10b00018-s]{margin-top:64px}.VPTeamMembers+.VPTeamMembers[data-v-10b00018-s]{margin-top:24px}@media (min-width: 768px){.VPTeamPageTitle+.VPTeamPageSection[data-v-10b00018-s]{margin-top:16px}.VPTeamPageSection+.VPTeamPageSection[data-v-10b00018-s],.VPTeamMembers+.VPTeamPageSection[data-v-10b00018-s]{margin-top:96px}}.VPTeamMembers[data-v-10b00018-s]{padding:0 24px}@media (min-width: 768px){.VPTeamMembers[data-v-10b00018-s]{padding:0 48px}}@media (min-width: 960px){.VPTeamMembers[data-v-10b00018-s]{padding:0 64px}}.VPTeamPageTitle[data-v-bf2cbdac]{padding:48px 32px;text-align:center}@media (min-width: 768px){.VPTeamPageTitle[data-v-bf2cbdac]{padding:64px 48px 48px}}@media (min-width: 960px){.VPTeamPageTitle[data-v-bf2cbdac]{padding:80px 64px 48px}}.title[data-v-bf2cbdac]{letter-spacing:0;line-height:44px;font-size:36px;font-weight:500}@media (min-width: 768px){.title[data-v-bf2cbdac]{letter-spacing:-.5px;line-height:56px;font-size:48px}}.lead[data-v-bf2cbdac]{margin:0 auto;max-width:512px;padding-top:12px;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 768px){.lead[data-v-bf2cbdac]{max-width:592px;letter-spacing:.15px;line-height:28px;font-size:20px}}.VPTeamPageSection[data-v-b1a88750]{padding:0 32px}@media (min-width: 768px){.VPTeamPageSection[data-v-b1a88750]{padding:0 48px}}@media (min-width: 960px){.VPTeamPageSection[data-v-b1a88750]{padding:0 64px}}.title[data-v-b1a88750]{position:relative;margin:0 auto;max-width:1152px;text-align:center;color:var(--vp-c-text-2)}.title-line[data-v-b1a88750]{position:absolute;top:16px;left:0;width:100%;height:1px;background-color:var(--vp-c-divider)}.title-text[data-v-b1a88750]{position:relative;display:inline-block;padding:0 24px;letter-spacing:0;line-height:32px;font-size:20px;font-weight:500;background-color:var(--vp-c-bg)}.lead[data-v-b1a88750]{margin:0 auto;max-width:480px;padding-top:12px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.members[data-v-b1a88750]{padding-top:40px}.VPTeamMembersItem[data-v-a3462077]{display:flex;flex-direction:column;gap:2px;border-radius:12px;width:100%;height:100%;overflow:hidden}.VPTeamMembersItem.small .profile[data-v-a3462077]{padding:32px}.VPTeamMembersItem.small .data[data-v-a3462077]{padding-top:20px}.VPTeamMembersItem.small .avatar[data-v-a3462077]{width:64px;height:64px}.VPTeamMembersItem.small .name[data-v-a3462077]{line-height:24px;font-size:16px}.VPTeamMembersItem.small .affiliation[data-v-a3462077]{padding-top:4px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .desc[data-v-a3462077]{padding-top:12px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .links[data-v-a3462077]{margin:0 -16px -20px;padding:10px 0 0}.VPTeamMembersItem.medium .profile[data-v-a3462077]{padding:48px 32px}.VPTeamMembersItem.medium .data[data-v-a3462077]{padding-top:24px;text-align:center}.VPTeamMembersItem.medium .avatar[data-v-a3462077]{width:96px;height:96px}.VPTeamMembersItem.medium .name[data-v-a3462077]{letter-spacing:.15px;line-height:28px;font-size:20px}.VPTeamMembersItem.medium .affiliation[data-v-a3462077]{padding-top:4px;font-size:16px}.VPTeamMembersItem.medium .desc[data-v-a3462077]{padding-top:16px;max-width:288px;font-size:16px}.VPTeamMembersItem.medium .links[data-v-a3462077]{margin:0 -16px -12px;padding:16px 12px 0}.profile[data-v-a3462077]{flex-grow:1;background-color:var(--vp-c-bg-soft)}.data[data-v-a3462077]{text-align:center}.avatar[data-v-a3462077]{position:relative;flex-shrink:0;margin:0 auto;border-radius:50%;box-shadow:var(--vp-shadow-3)}.avatar-img[data-v-a3462077]{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;object-fit:cover}.name[data-v-a3462077]{margin:0;font-weight:600}.affiliation[data-v-a3462077]{margin:0;font-weight:500;color:var(--vp-c-text-2)}.org.link[data-v-a3462077]{color:var(--vp-c-text-2);transition:color .25s}.org.link[data-v-a3462077]:hover{color:var(--vp-c-brand)}.desc[data-v-a3462077]{margin:0 auto}.desc[data-v-a3462077] a{font-weight:500;color:var(--vp-c-brand);text-decoration-style:dotted;transition:color .25s}.links[data-v-a3462077]{display:flex;justify-content:center;height:56px}.sp-link[data-v-a3462077]{display:flex;justify-content:center;align-items:center;text-align:center;padding:16px;font-size:14px;font-weight:500;color:var(--vp-c-sponsor);background-color:var(--vp-c-bg-soft);transition:color .25s,background-color .25s}.sp .sp-link.link[data-v-a3462077]:hover,.sp .sp-link.link[data-v-a3462077]:focus{outline:none;color:var(--vp-c-white);background-color:var(--vp-c-sponsor)}.sp-icon[data-v-a3462077]{margin-right:8px;width:16px;height:16px;fill:currentColor}.VPTeamMembers.small .container[data-v-04685dce]{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}.VPTeamMembers.small.count-1 .container[data-v-04685dce]{max-width:276px}.VPTeamMembers.small.count-2 .container[data-v-04685dce]{max-width:576px}.VPTeamMembers.small.count-3 .container[data-v-04685dce]{max-width:876px}.VPTeamMembers.medium .container[data-v-04685dce]{grid-template-columns:repeat(auto-fit,minmax(256px,1fr))}@media (min-width: 375px){.VPTeamMembers.medium .container[data-v-04685dce]{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}}.VPTeamMembers.medium.count-1 .container[data-v-04685dce]{max-width:368px}.VPTeamMembers.medium.count-2 .container[data-v-04685dce]{max-width:760px}.container[data-v-04685dce]{display:grid;gap:24px;margin:0 auto;max-width:1152px} diff --git a/docs/document/assets/style.K1VI4RxB.css b/docs/document/assets/style.K1VI4RxB.css new file mode 100644 index 000000000..eebbfde69 --- /dev/null +++ b/docs/document/assets/style.K1VI4RxB.css @@ -0,0 +1 @@ +@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-cyrillic.jIZ9REo5.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-cyrillic-ext.8T9wMG5w.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-greek.Cb5wWeGA.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-greek-ext.9JiNzaSO.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-latin.bvIUbFQP.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-latin-ext.GZWE-KO4.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/document/assets/inter-roman-vietnamese.paY3CzEB.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-cyrillic.-nLMcIwj.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-cyrillic-ext.OVycGSDq.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-greek.PSfer2Kc.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-greek-ext.hznxWNZO.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-latin.27E69YJn.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-latin-ext.RnFly65-.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/document/assets/inter-italic-vietnamese.xzQHe1q1.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Chinese Quotes;src:local("PingFang SC Regular"),local("PingFang SC"),local("SimHei"),local("Source Han Sans SC");unicode-range:U+2018,U+2019,U+201C,U+201D}:root{--vp-c-white: #ffffff;--vp-c-black: #000000;--vp-c-neutral: var(--vp-c-black);--vp-c-neutral-inverse: var(--vp-c-white)}.dark{--vp-c-neutral: var(--vp-c-white);--vp-c-neutral-inverse: var(--vp-c-black)}:root{--vp-c-gray-1: #dddde3;--vp-c-gray-2: #e4e4e9;--vp-c-gray-3: #ebebef;--vp-c-gray-soft: rgba(142, 150, 170, .14);--vp-c-indigo-1: #3451b2;--vp-c-indigo-2: #3a5ccc;--vp-c-indigo-3: #5672cd;--vp-c-indigo-soft: rgba(100, 108, 255, .14);--vp-c-green-1: #18794e;--vp-c-green-2: #299764;--vp-c-green-3: #30a46c;--vp-c-green-soft: rgba(16, 185, 129, .14);--vp-c-yellow-1: #915930;--vp-c-yellow-2: #946300;--vp-c-yellow-3: #9f6a00;--vp-c-yellow-soft: rgba(234, 179, 8, .14);--vp-c-red-1: #b8272c;--vp-c-red-2: #d5393e;--vp-c-red-3: #e0575b;--vp-c-red-soft: rgba(244, 63, 94, .14);--vp-c-sponsor: #db2777}.dark{--vp-c-gray-1: #515c67;--vp-c-gray-2: #414853;--vp-c-gray-3: #32363f;--vp-c-gray-soft: rgba(101, 117, 133, .16);--vp-c-indigo-1: #a8b1ff;--vp-c-indigo-2: #5c73e7;--vp-c-indigo-3: #3e63dd;--vp-c-indigo-soft: rgba(100, 108, 255, .16);--vp-c-green-1: #3dd68c;--vp-c-green-2: #30a46c;--vp-c-green-3: #298459;--vp-c-green-soft: rgba(16, 185, 129, .16);--vp-c-yellow-1: #f9b44e;--vp-c-yellow-2: #da8b17;--vp-c-yellow-3: #a46a0a;--vp-c-yellow-soft: rgba(234, 179, 8, .16);--vp-c-red-1: #f66f81;--vp-c-red-2: #f14158;--vp-c-red-3: #b62a3c;--vp-c-red-soft: rgba(244, 63, 94, .16)}:root{--vp-c-bg: #ffffff;--vp-c-bg-alt: #f6f6f7;--vp-c-bg-elv: #ffffff;--vp-c-bg-soft: #f6f6f7}.dark{--vp-c-bg: #1b1b1f;--vp-c-bg-alt: #161618;--vp-c-bg-elv: #202127;--vp-c-bg-soft: #202127}:root{--vp-c-border: #c2c2c4;--vp-c-divider: #e2e2e3;--vp-c-gutter: #e2e2e3}.dark{--vp-c-border: #3c3f44;--vp-c-divider: #2e2e32;--vp-c-gutter: #000000}:root{--vp-c-text-1: rgba(60, 60, 67);--vp-c-text-2: rgba(60, 60, 67, .78);--vp-c-text-3: rgba(60, 60, 67, .56)}.dark{--vp-c-text-1: rgba(255, 255, 245, .86);--vp-c-text-2: rgba(235, 235, 245, .6);--vp-c-text-3: rgba(235, 235, 245, .38)}:root{--vp-c-default-1: var(--vp-c-gray-1);--vp-c-default-2: var(--vp-c-gray-2);--vp-c-default-3: var(--vp-c-gray-3);--vp-c-default-soft: var(--vp-c-gray-soft);--vp-c-brand-1: var(--vp-c-indigo-1);--vp-c-brand-2: var(--vp-c-indigo-2);--vp-c-brand-3: var(--vp-c-indigo-3);--vp-c-brand-soft: var(--vp-c-indigo-soft);--vp-c-brand: var(--vp-c-brand-1);--vp-c-tip-1: var(--vp-c-brand-1);--vp-c-tip-2: var(--vp-c-brand-2);--vp-c-tip-3: var(--vp-c-brand-3);--vp-c-tip-soft: var(--vp-c-brand-soft);--vp-c-warning-1: var(--vp-c-yellow-1);--vp-c-warning-2: var(--vp-c-yellow-2);--vp-c-warning-3: var(--vp-c-yellow-3);--vp-c-warning-soft: var(--vp-c-yellow-soft);--vp-c-danger-1: var(--vp-c-red-1);--vp-c-danger-2: var(--vp-c-red-2);--vp-c-danger-3: var(--vp-c-red-3);--vp-c-danger-soft: var(--vp-c-red-soft)}:root{--vp-font-family-base: "Chinese Quotes", "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--vp-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}:root{--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);--vp-shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16)}:root{--vp-z-index-footer: 10;--vp-z-index-local-nav: 20;--vp-z-index-nav: 30;--vp-z-index-layout-top: 40;--vp-z-index-backdrop: 50;--vp-z-index-sidebar: 60}:root{--vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");--vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E")}:root{--vp-layout-max-width: 1440px}:root{--vp-header-anchor-symbol: "#"}:root{--vp-code-line-height: 1.7;--vp-code-font-size: .875em;--vp-code-color: var(--vp-c-brand-1);--vp-code-link-color: var(--vp-c-brand-1);--vp-code-link-hover-color: var(--vp-c-brand-2);--vp-code-bg: var(--vp-c-default-soft);--vp-code-block-color: var(--vp-c-text-2);--vp-code-block-bg: var(--vp-c-bg-alt);--vp-code-block-divider-color: var(--vp-c-gutter);--vp-code-lang-color: var(--vp-c-text-3);--vp-code-line-highlight-color: var(--vp-c-default-soft);--vp-code-line-number-color: var(--vp-c-text-3);--vp-code-line-diff-add-color: var(--vp-c-green-soft);--vp-code-line-diff-add-symbol-color: var(--vp-c-green-1);--vp-code-line-diff-remove-color: var(--vp-c-red-soft);--vp-code-line-diff-remove-symbol-color: var(--vp-c-red-1);--vp-code-line-warning-color: var(--vp-c-yellow-soft);--vp-code-line-error-color: var(--vp-c-red-soft);--vp-code-copy-code-border-color: var(--vp-c-divider);--vp-code-copy-code-bg: var(--vp-c-bg-soft);--vp-code-copy-code-hover-border-color: var(--vp-c-divider);--vp-code-copy-code-hover-bg: var(--vp-c-bg);--vp-code-copy-code-active-text: var(--vp-c-text-2);--vp-code-copy-copied-text-content: "Copied";--vp-code-tab-divider: var(--vp-code-block-divider-color);--vp-code-tab-text-color: var(--vp-c-text-2);--vp-code-tab-bg: var(--vp-code-block-bg);--vp-code-tab-hover-text-color: var(--vp-c-text-1);--vp-code-tab-active-text-color: var(--vp-c-text-1);--vp-code-tab-active-bar-color: var(--vp-c-brand-1)}:root{--vp-button-brand-border: transparent;--vp-button-brand-text: var(--vp-c-white);--vp-button-brand-bg: var(--vp-c-brand-3);--vp-button-brand-hover-border: transparent;--vp-button-brand-hover-text: var(--vp-c-white);--vp-button-brand-hover-bg: var(--vp-c-brand-2);--vp-button-brand-active-border: transparent;--vp-button-brand-active-text: var(--vp-c-white);--vp-button-brand-active-bg: var(--vp-c-brand-1);--vp-button-alt-border: transparent;--vp-button-alt-text: var(--vp-c-text-1);--vp-button-alt-bg: var(--vp-c-default-3);--vp-button-alt-hover-border: transparent;--vp-button-alt-hover-text: var(--vp-c-text-1);--vp-button-alt-hover-bg: var(--vp-c-default-2);--vp-button-alt-active-border: transparent;--vp-button-alt-active-text: var(--vp-c-text-1);--vp-button-alt-active-bg: var(--vp-c-default-1);--vp-button-sponsor-border: var(--vp-c-text-2);--vp-button-sponsor-text: var(--vp-c-text-2);--vp-button-sponsor-bg: transparent;--vp-button-sponsor-hover-border: var(--vp-c-sponsor);--vp-button-sponsor-hover-text: var(--vp-c-sponsor);--vp-button-sponsor-hover-bg: transparent;--vp-button-sponsor-active-border: var(--vp-c-sponsor);--vp-button-sponsor-active-text: var(--vp-c-sponsor);--vp-button-sponsor-active-bg: transparent}:root{--vp-custom-block-font-size: 14px;--vp-custom-block-code-font-size: 13px;--vp-custom-block-info-border: transparent;--vp-custom-block-info-text: var(--vp-c-text-1);--vp-custom-block-info-bg: var(--vp-c-default-soft);--vp-custom-block-info-code-bg: var(--vp-c-default-soft);--vp-custom-block-tip-border: transparent;--vp-custom-block-tip-text: var(--vp-c-text-1);--vp-custom-block-tip-bg: var(--vp-c-brand-soft);--vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);--vp-custom-block-warning-border: transparent;--vp-custom-block-warning-text: var(--vp-c-text-1);--vp-custom-block-warning-bg: var(--vp-c-warning-soft);--vp-custom-block-warning-code-bg: var(--vp-c-warning-soft);--vp-custom-block-danger-border: transparent;--vp-custom-block-danger-text: var(--vp-c-text-1);--vp-custom-block-danger-bg: var(--vp-c-danger-soft);--vp-custom-block-danger-code-bg: var(--vp-c-danger-soft);--vp-custom-block-details-border: var(--vp-custom-block-info-border);--vp-custom-block-details-text: var(--vp-custom-block-info-text);--vp-custom-block-details-bg: var(--vp-custom-block-info-bg);--vp-custom-block-details-code-bg: var(--vp-custom-block-info-code-bg)}:root{--vp-input-border-color: var(--vp-c-border);--vp-input-bg-color: var(--vp-c-bg-alt);--vp-input-switch-bg-color: var(--vp-c-gray-soft)}:root{--vp-nav-height: 64px;--vp-nav-bg-color: var(--vp-c-bg);--vp-nav-screen-bg-color: var(--vp-c-bg);--vp-nav-logo-height: 24px}.hide-nav{--vp-nav-height: 0px}.hide-nav .VPSidebar{--vp-nav-height: 22px}:root{--vp-local-nav-bg-color: var(--vp-c-bg)}:root{--vp-sidebar-width: 272px;--vp-sidebar-bg-color: var(--vp-c-bg-alt)}:root{--vp-backdrop-bg-color: rgba(0, 0, 0, .6)}:root{--vp-home-hero-name-color: var(--vp-c-brand-1);--vp-home-hero-name-background: transparent;--vp-home-hero-image-background-image: none;--vp-home-hero-image-filter: none}:root{--vp-badge-info-border: transparent;--vp-badge-info-text: var(--vp-c-text-2);--vp-badge-info-bg: var(--vp-c-default-soft);--vp-badge-tip-border: transparent;--vp-badge-tip-text: var(--vp-c-brand-1);--vp-badge-tip-bg: var(--vp-c-brand-soft);--vp-badge-warning-border: transparent;--vp-badge-warning-text: var(--vp-c-warning-1);--vp-badge-warning-bg: var(--vp-c-warning-soft);--vp-badge-danger-border: transparent;--vp-badge-danger-text: var(--vp-c-danger-1);--vp-badge-danger-bg: var(--vp-c-danger-soft)}:root{--vp-carbon-ads-text-color: var(--vp-c-text-1);--vp-carbon-ads-poweredby-color: var(--vp-c-text-2);--vp-carbon-ads-bg-color: var(--vp-c-bg-soft);--vp-carbon-ads-hover-text-color: var(--vp-c-brand-1);--vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1)}:root{--vp-local-search-bg: var(--vp-c-bg);--vp-local-search-result-bg: var(--vp-c-bg);--vp-local-search-result-border: var(--vp-c-divider);--vp-local-search-result-selected-bg: var(--vp-c-bg);--vp-local-search-result-selected-border: var(--vp-c-brand-1);--vp-local-search-highlight-bg: var(--vp-c-brand-1);--vp-local-search-highlight-text: var(--vp-c-neutral-inverse)}@media (prefers-reduced-motion: reduce){*,:before,:after{animation-delay:-1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;background-attachment:initial!important;scroll-behavior:auto!important;transition-duration:0s!important;transition-delay:0s!important}}*,:before,:after{box-sizing:border-box}html{line-height:1.4;font-size:16px;-webkit-text-size-adjust:100%}html.dark{color-scheme:dark}body{margin:0;width:100%;min-width:320px;min-height:100vh;line-height:24px;font-family:var(--vp-font-family-base);font-size:16px;font-weight:400;color:var(--vp-c-text-1);background-color:var(--vp-c-bg);direction:ltr;font-synthesis:style;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}h1,h2,h3,h4,h5,h6{margin:0;line-height:24px;font-size:16px;font-weight:400}p{margin:0}strong,b{font-weight:600}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}a{color:inherit;text-decoration:inherit}ol,ul{list-style:none;margin:0;padding:0}blockquote{margin:0}pre,code,kbd,samp{font-family:var(--vp-font-family-mono)}img,svg,video,canvas,audio,iframe,embed,object{display:block}figure{margin:0}img,video{max-width:100%;height:auto}button,input,optgroup,select,textarea{border:0;padding:0;line-height:inherit;color:inherit}button{padding:0;font-family:inherit;background-color:transparent;background-image:none}button:enabled,[role=button]:enabled{cursor:pointer}button:focus,button:focus-visible{outline:1px dotted;outline:4px auto -webkit-focus-ring-color}button:focus:not(:focus-visible){outline:none!important}input:focus,textarea:focus,select:focus{outline:none}table{border-collapse:collapse}input{background-color:transparent}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:var(--vp-c-text-3)}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:var(--vp-c-text-3)}input::placeholder,textarea::placeholder{color:var(--vp-c-text-3)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}textarea{resize:vertical}select{-webkit-appearance:none}fieldset{margin:0;padding:0}h1,h2,h3,h4,h5,h6,li,p{overflow-wrap:break-word}vite-error-overlay{z-index:9999}mjx-container{display:inline-block;margin:auto 2px -2px}mjx-container>svg{margin:auto}.visually-hidden{position:absolute;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden}.custom-block{border:1px solid transparent;border-radius:8px;padding:16px 16px 8px;line-height:24px;font-size:var(--vp-custom-block-font-size);color:var(--vp-c-text-2)}.custom-block.info{border-color:var(--vp-custom-block-info-border);color:var(--vp-custom-block-info-text);background-color:var(--vp-custom-block-info-bg)}.custom-block.info a,.custom-block.info code{color:var(--vp-c-brand-1)}.custom-block.info a:hover{color:var(--vp-c-brand-2)}.custom-block.info code{background-color:var(--vp-custom-block-info-code-bg)}.custom-block.tip{border-color:var(--vp-custom-block-tip-border);color:var(--vp-custom-block-tip-text);background-color:var(--vp-custom-block-tip-bg)}.custom-block.tip a,.custom-block.tip code{color:var(--vp-c-brand-1)}.custom-block.tip a:hover{color:var(--vp-c-brand-2)}.custom-block.tip code{background-color:var(--vp-custom-block-tip-code-bg)}.custom-block.warning{border-color:var(--vp-custom-block-warning-border);color:var(--vp-custom-block-warning-text);background-color:var(--vp-custom-block-warning-bg)}.custom-block.warning a,.custom-block.warning code{color:var(--vp-c-warning-1)}.custom-block.warning a:hover{color:var(--vp-c-warning-2)}.custom-block.warning code{background-color:var(--vp-custom-block-warning-code-bg)}.custom-block.danger{border-color:var(--vp-custom-block-danger-border);color:var(--vp-custom-block-danger-text);background-color:var(--vp-custom-block-danger-bg)}.custom-block.danger a,.custom-block.danger code{color:var(--vp-c-danger-1)}.custom-block.danger a:hover{color:var(--vp-c-danger-2)}.custom-block.danger code{background-color:var(--vp-custom-block-danger-code-bg)}.custom-block.details{border-color:var(--vp-custom-block-details-border);color:var(--vp-custom-block-details-text);background-color:var(--vp-custom-block-details-bg)}.custom-block.details a{color:var(--vp-c-brand-1)}.custom-block.details a:hover{color:var(--vp-c-brand-2)}.custom-block.details code{background-color:var(--vp-custom-block-details-code-bg)}.custom-block-title{font-weight:600}.custom-block p+p{margin:8px 0}.custom-block.details summary{margin:0 0 8px;font-weight:700;cursor:pointer}.custom-block.details summary+p{margin:8px 0}.custom-block a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;transition:opacity .25s}.custom-block a:hover{opacity:.75}.custom-block code{font-size:var(--vp-custom-block-code-font-size)}.custom-block.custom-block th,.custom-block.custom-block blockquote>p{font-size:var(--vp-custom-block-font-size);color:inherit}.dark .vp-code span{color:var(--shiki-dark, inherit)}html:not(.dark) .vp-code span{color:var(--shiki-light, inherit)}.vp-code-group{margin-top:16px}.vp-code-group .tabs{position:relative;display:flex;margin-right:-24px;margin-left:-24px;padding:0 12px;background-color:var(--vp-code-tab-bg);overflow-x:auto;overflow-y:hidden;box-shadow:inset 0 -1px var(--vp-code-tab-divider)}@media (min-width: 640px){.vp-code-group .tabs{margin-right:0;margin-left:0;border-radius:8px 8px 0 0}}.vp-code-group .tabs input{position:fixed;opacity:0;pointer-events:none}.vp-code-group .tabs label{position:relative;display:inline-block;border-bottom:1px solid transparent;padding:0 12px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-code-tab-text-color);white-space:nowrap;cursor:pointer;transition:color .25s}.vp-code-group .tabs label:after{position:absolute;right:8px;bottom:-1px;left:8px;z-index:1;height:2px;border-radius:2px;content:"";background-color:transparent;transition:background-color .25s}.vp-code-group label:hover{color:var(--vp-code-tab-hover-text-color)}.vp-code-group input:checked+label{color:var(--vp-code-tab-active-text-color)}.vp-code-group input:checked+label:after{background-color:var(--vp-code-tab-active-bar-color)}.vp-code-group div[class*=language-],.vp-block{display:none;margin-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important}.vp-code-group div[class*=language-].active,.vp-block.active{display:block}.vp-block{padding:20px 24px}.vp-doc h1,.vp-doc h2,.vp-doc h3,.vp-doc h4,.vp-doc h5,.vp-doc h6{position:relative;font-weight:600;outline:none}.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:28px}.vp-doc h2{margin:48px 0 16px;border-top:1px solid var(--vp-c-divider);padding-top:24px;letter-spacing:-.02em;line-height:32px;font-size:24px}.vp-doc h3{margin:32px 0 0;letter-spacing:-.01em;line-height:28px;font-size:20px}.vp-doc .header-anchor{position:absolute;top:0;left:0;margin-left:-.87em;font-weight:500;-webkit-user-select:none;user-select:none;opacity:0;text-decoration:none;transition:color .25s,opacity .25s}.vp-doc .header-anchor:before{content:var(--vp-header-anchor-symbol)}.vp-doc h1:hover .header-anchor,.vp-doc h1 .header-anchor:focus,.vp-doc h2:hover .header-anchor,.vp-doc h2 .header-anchor:focus,.vp-doc h3:hover .header-anchor,.vp-doc h3 .header-anchor:focus,.vp-doc h4:hover .header-anchor,.vp-doc h4 .header-anchor:focus,.vp-doc h5:hover .header-anchor,.vp-doc h5 .header-anchor:focus,.vp-doc h6:hover .header-anchor,.vp-doc h6 .header-anchor:focus{opacity:1}@media (min-width: 768px){.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:32px}}.vp-doc h2 .header-anchor{top:24px}.vp-doc p,.vp-doc summary{margin:16px 0}.vp-doc p{line-height:28px}.vp-doc blockquote{margin:16px 0;border-left:2px solid var(--vp-c-divider);padding-left:16px;transition:border-color .5s}.vp-doc blockquote>p{margin:0;font-size:16px;color:var(--vp-c-text-2);transition:color .5s}.vp-doc a{font-weight:500;color:var(--vp-c-brand-1);text-decoration:underline;text-underline-offset:2px;transition:color .25s,opacity .25s}.vp-doc a:hover{color:var(--vp-c-brand-2)}.vp-doc strong{font-weight:600}.vp-doc ul,.vp-doc ol{padding-left:1.25rem;margin:16px 0}.vp-doc ul{list-style:disc}.vp-doc ol{list-style:decimal}.vp-doc li+li{margin-top:8px}.vp-doc li>ol,.vp-doc li>ul{margin:8px 0 0}.vp-doc table{display:block;border-collapse:collapse;margin:20px 0;overflow-x:auto}.vp-doc tr{background-color:var(--vp-c-bg);border-top:1px solid var(--vp-c-divider);transition:background-color .5s}.vp-doc tr:nth-child(2n){background-color:var(--vp-c-bg-soft)}.vp-doc th,.vp-doc td{border:1px solid var(--vp-c-divider);padding:8px 16px}.vp-doc th{text-align:left;font-size:14px;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-doc td{font-size:14px}.vp-doc hr{margin:16px 0;border:none;border-top:1px solid var(--vp-c-divider)}.vp-doc .custom-block{margin:16px 0}.vp-doc .custom-block p{margin:8px 0;line-height:24px}.vp-doc .custom-block p:first-child{margin:0}.vp-doc .custom-block div[class*=language-]{margin:8px 0;border-radius:8px}.vp-doc .custom-block div[class*=language-] code{font-weight:400;background-color:transparent}.vp-doc .custom-block .vp-code-group .tabs{margin:0;border-radius:8px 8px 0 0}.vp-doc :not(pre,h1,h2,h3,h4,h5,h6)>code{font-size:var(--vp-code-font-size);color:var(--vp-code-color)}.vp-doc :not(pre)>code{border-radius:4px;padding:3px 6px;background-color:var(--vp-code-bg);transition:color .25s,background-color .5s}.vp-doc a>code{color:var(--vp-code-link-color)}.vp-doc a:hover>code{color:var(--vp-code-link-hover-color)}.vp-doc h1>code,.vp-doc h2>code,.vp-doc h3>code{font-size:.9em}.vp-doc div[class*=language-],.vp-block{position:relative;margin:16px -24px;background-color:var(--vp-code-block-bg);overflow-x:auto;transition:background-color .5s}@media (min-width: 640px){.vp-doc div[class*=language-],.vp-block{border-radius:8px;margin:16px 0}}@media (max-width: 639px){.vp-doc li div[class*=language-]{border-radius:8px 0 0 8px}}.vp-doc div[class*=language-]+div[class*=language-],.vp-doc div[class$=-api]+div[class*=language-],.vp-doc div[class*=language-]+div[class$=-api]>div[class*=language-]{margin-top:-8px}.vp-doc [class*=language-] pre,.vp-doc [class*=language-] code{direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.vp-doc [class*=language-] pre{position:relative;z-index:1;margin:0;padding:20px 0;background:transparent;overflow-x:auto}.vp-doc [class*=language-] code{display:block;padding:0 24px;width:fit-content;min-width:100%;line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-block-color);transition:color .5s}.vp-doc [class*=language-] code .highlighted{background-color:var(--vp-code-line-highlight-color);transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .highlighted.error{background-color:var(--vp-code-line-error-color)}.vp-doc [class*=language-] code .highlighted.warning{background-color:var(--vp-code-line-warning-color)}.vp-doc [class*=language-] code .diff{transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .diff:before{position:absolute;left:10px}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){filter:blur(.095rem);opacity:.4;transition:filter .35s,opacity .35s}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){opacity:.7;transition:filter .35s,opacity .35s}.vp-doc [class*=language-]:hover .has-focused-lines .line:not(.has-focus){filter:blur(0);opacity:1}.vp-doc [class*=language-] code .diff.remove{background-color:var(--vp-code-line-diff-remove-color);opacity:.7}.vp-doc [class*=language-] code .diff.remove:before{content:"-";color:var(--vp-code-line-diff-remove-symbol-color)}.vp-doc [class*=language-] code .diff.add{background-color:var(--vp-code-line-diff-add-color)}.vp-doc [class*=language-] code .diff.add:before{content:"+";color:var(--vp-code-line-diff-add-symbol-color)}.vp-doc div[class*=language-].line-numbers-mode{padding-left:32px}.vp-doc .line-numbers-wrapper{position:absolute;top:0;bottom:0;left:0;z-index:3;border-right:1px solid var(--vp-code-block-divider-color);padding-top:20px;width:32px;text-align:center;font-family:var(--vp-font-family-mono);line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-line-number-color);transition:border-color .5s,color .5s}.vp-doc [class*=language-]>button.copy{direction:ltr;position:absolute;top:12px;right:12px;z-index:3;border:1px solid var(--vp-code-copy-code-border-color);border-radius:4px;width:40px;height:40px;background-color:var(--vp-code-copy-code-bg);opacity:0;cursor:pointer;background-image:var(--vp-icon-copy);background-position:50%;background-size:20px;background-repeat:no-repeat;transition:border-color .25s,background-color .25s,opacity .25s}.vp-doc [class*=language-]:hover>button.copy,.vp-doc [class*=language-]>button.copy:focus{opacity:1}.vp-doc [class*=language-]>button.copy:hover,.vp-doc [class*=language-]>button.copy.copied{border-color:var(--vp-code-copy-code-hover-border-color);background-color:var(--vp-code-copy-code-hover-bg)}.vp-doc [class*=language-]>button.copy.copied,.vp-doc [class*=language-]>button.copy:hover.copied{border-radius:0 4px 4px 0;background-color:var(--vp-code-copy-code-hover-bg);background-image:var(--vp-icon-copied)}.vp-doc [class*=language-]>button.copy.copied:before,.vp-doc [class*=language-]>button.copy:hover.copied:before{position:relative;top:-1px;transform:translate(calc(-100% - 1px));display:flex;justify-content:center;align-items:center;border:1px solid var(--vp-code-copy-code-hover-border-color);border-right:0;border-radius:4px 0 0 4px;padding:0 10px;width:fit-content;height:40px;text-align:center;font-size:12px;font-weight:500;color:var(--vp-code-copy-code-active-text);background-color:var(--vp-code-copy-code-hover-bg);white-space:nowrap;content:var(--vp-code-copy-copied-text-content)}.vp-doc [class*=language-]>span.lang{position:absolute;top:2px;right:8px;z-index:2;font-size:12px;font-weight:500;color:var(--vp-code-lang-color);transition:color .4s,opacity .4s}.vp-doc [class*=language-]:hover>button.copy+span.lang,.vp-doc [class*=language-]>button.copy:focus+span.lang{opacity:0}.vp-doc .VPTeamMembers{margin-top:24px}.vp-doc .VPTeamMembers.small.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}.vp-doc .VPTeamMembers.small.count-2 .container,.vp-doc .VPTeamMembers.small.count-3 .container{max-width:100%!important}.vp-doc .VPTeamMembers.medium.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}:is(.vp-external-link-icon,.vp-doc a[href*="://"],.vp-doc a[target=_blank]):not(.no-icon):after{display:inline-block;margin-top:-1px;margin-left:4px;width:11px;height:11px;background:currentColor;color:var(--vp-c-text-3);flex-shrink:0;--icon: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M0 0h24v24H0V0z' fill='none' /%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z' /%3E%3C/svg%3E");-webkit-mask-image:var(--icon);mask-image:var(--icon)}.vp-external-link-icon:after{content:""}.vp-sponsor{border-radius:16px;overflow:hidden}.vp-sponsor.aside{border-radius:12px}.vp-sponsor-section+.vp-sponsor-section{margin-top:4px}.vp-sponsor-tier{margin-bottom:4px;text-align:center;letter-spacing:1px;line-height:24px;width:100%;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-sponsor.normal .vp-sponsor-tier{padding:13px 0 11px;font-size:14px}.vp-sponsor.aside .vp-sponsor-tier{padding:9px 0 7px;font-size:12px}.vp-sponsor-grid+.vp-sponsor-tier{margin-top:4px}.vp-sponsor-grid{display:flex;flex-wrap:wrap;gap:4px}.vp-sponsor-grid.xmini .vp-sponsor-grid-link{height:64px}.vp-sponsor-grid.xmini .vp-sponsor-grid-image{max-width:64px;max-height:22px}.vp-sponsor-grid.mini .vp-sponsor-grid-link{height:72px}.vp-sponsor-grid.mini .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.small .vp-sponsor-grid-link{height:96px}.vp-sponsor-grid.small .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.medium .vp-sponsor-grid-link{height:112px}.vp-sponsor-grid.medium .vp-sponsor-grid-image{max-width:120px;max-height:36px}.vp-sponsor-grid.big .vp-sponsor-grid-link{height:184px}.vp-sponsor-grid.big .vp-sponsor-grid-image{max-width:192px;max-height:56px}.vp-sponsor-grid[data-vp-grid="2"] .vp-sponsor-grid-item{width:calc((100% - 4px)/2)}.vp-sponsor-grid[data-vp-grid="3"] .vp-sponsor-grid-item{width:calc((100% - 4px * 2) / 3)}.vp-sponsor-grid[data-vp-grid="4"] .vp-sponsor-grid-item{width:calc((100% - 12px)/4)}.vp-sponsor-grid[data-vp-grid="5"] .vp-sponsor-grid-item{width:calc((100% - 16px)/5)}.vp-sponsor-grid[data-vp-grid="6"] .vp-sponsor-grid-item{width:calc((100% - 4px * 5) / 6)}.vp-sponsor-grid-item{flex-shrink:0;width:100%;background-color:var(--vp-c-bg-soft);transition:background-color .25s}.vp-sponsor-grid-item:hover{background-color:var(--vp-c-default-soft)}.vp-sponsor-grid-item:hover .vp-sponsor-grid-image{filter:grayscale(0) invert(0)}.vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.dark .vp-sponsor-grid-item:hover{background-color:var(--vp-c-white)}.dark .vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.vp-sponsor-grid-link{display:flex}.vp-sponsor-grid-box{display:flex;justify-content:center;align-items:center;width:100%}.vp-sponsor-grid-image{max-width:100%;filter:grayscale(1);transition:filter .25s}.dark .vp-sponsor-grid-image{filter:grayscale(1) invert(1)}.VPBadge[data-v-9613cc9f]{display:inline-block;margin-left:2px;border:1px solid transparent;border-radius:12px;padding:0 10px;line-height:22px;font-size:12px;font-weight:500;transform:translateY(-2px)}.vp-doc h1>.VPBadge[data-v-9613cc9f]{margin-top:4px;vertical-align:top}.vp-doc h2>.VPBadge[data-v-9613cc9f]{margin-top:3px;padding:0 8px;vertical-align:top}.vp-doc h3>.VPBadge[data-v-9613cc9f]{vertical-align:middle}.vp-doc h4>.VPBadge[data-v-9613cc9f],.vp-doc h5>.VPBadge[data-v-9613cc9f],.vp-doc h6>.VPBadge[data-v-9613cc9f]{vertical-align:middle;line-height:18px}.VPBadge.info[data-v-9613cc9f]{border-color:var(--vp-badge-info-border);color:var(--vp-badge-info-text);background-color:var(--vp-badge-info-bg)}.VPBadge.tip[data-v-9613cc9f]{border-color:var(--vp-badge-tip-border);color:var(--vp-badge-tip-text);background-color:var(--vp-badge-tip-bg)}.VPBadge.warning[data-v-9613cc9f]{border-color:var(--vp-badge-warning-border);color:var(--vp-badge-warning-text);background-color:var(--vp-badge-warning-bg)}.VPBadge.danger[data-v-9613cc9f]{border-color:var(--vp-badge-danger-border);color:var(--vp-badge-danger-text);background-color:var(--vp-badge-danger-bg)}.VPBackdrop[data-v-c79a1216]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--vp-z-index-backdrop);background:var(--vp-backdrop-bg-color);transition:opacity .5s}.VPBackdrop.fade-enter-from[data-v-c79a1216],.VPBackdrop.fade-leave-to[data-v-c79a1216]{opacity:0}.VPBackdrop.fade-leave-active[data-v-c79a1216]{transition-duration:.25s}@media (min-width: 1280px){.VPBackdrop[data-v-c79a1216]{display:none}}.NotFound[data-v-f87ff6e4]{padding:64px 24px 96px;text-align:center}@media (min-width: 768px){.NotFound[data-v-f87ff6e4]{padding:96px 32px 168px}}.code[data-v-f87ff6e4]{line-height:64px;font-size:64px;font-weight:600}.title[data-v-f87ff6e4]{padding-top:12px;letter-spacing:2px;line-height:20px;font-size:20px;font-weight:700}.divider[data-v-f87ff6e4]{margin:24px auto 18px;width:64px;height:1px;background-color:var(--vp-c-divider)}.quote[data-v-f87ff6e4]{margin:0 auto;max-width:256px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.action[data-v-f87ff6e4]{padding-top:20px}.link[data-v-f87ff6e4]{display:inline-block;border:1px solid var(--vp-c-brand-1);border-radius:16px;padding:3px 16px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:border-color .25s,color .25s}.link[data-v-f87ff6e4]:hover{border-color:var(--vp-c-brand-2);color:var(--vp-c-brand-2)}.root[data-v-d0ee3533]{position:relative;z-index:1}.nested[data-v-d0ee3533]{padding-left:16px}.outline-link[data-v-d0ee3533]{display:block;line-height:28px;color:var(--vp-c-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .5s;font-weight:400}.outline-link[data-v-d0ee3533]:hover,.outline-link.active[data-v-d0ee3533]{color:var(--vp-c-text-1);transition:color .25s}.outline-link.nested[data-v-d0ee3533]{padding-left:13px}.VPDocAsideOutline[data-v-d330b1bb]{display:none}.VPDocAsideOutline.has-outline[data-v-d330b1bb]{display:block}.content[data-v-d330b1bb]{position:relative;border-left:1px solid var(--vp-c-divider);padding-left:16px;font-size:13px;font-weight:500}.outline-marker[data-v-d330b1bb]{position:absolute;top:32px;left:-1px;z-index:0;opacity:0;width:2px;border-radius:2px;height:18px;background-color:var(--vp-c-brand-1);transition:top .25s cubic-bezier(0,1,.5,1),background-color .5s,opacity .25s}.outline-title[data-v-d330b1bb]{letter-spacing:.4px;line-height:28px;font-size:13px;font-weight:600}.VPDocAside[data-v-3f215769]{display:flex;flex-direction:column;flex-grow:1}.spacer[data-v-3f215769]{flex-grow:1}.VPDocAside[data-v-3f215769] .spacer+.VPDocAsideSponsors,.VPDocAside[data-v-3f215769] .spacer+.VPDocAsideCarbonAds{margin-top:24px}.VPDocAside[data-v-3f215769] .VPDocAsideSponsors+.VPDocAsideCarbonAds{margin-top:16px}.VPLastUpdated[data-v-7e05ebdb]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 640px){.VPLastUpdated[data-v-7e05ebdb]{line-height:32px;font-size:14px;font-weight:500}}.VPDocFooter[data-v-48f9bb55]{margin-top:64px}.edit-info[data-v-48f9bb55]{padding-bottom:18px}@media (min-width: 640px){.edit-info[data-v-48f9bb55]{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px}}.edit-link-button[data-v-48f9bb55]{display:flex;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:color .25s}.edit-link-button[data-v-48f9bb55]:hover{color:var(--vp-c-brand-2)}.edit-link-icon[data-v-48f9bb55]{margin-right:8px;width:14px;height:14px;fill:currentColor}.prev-next[data-v-48f9bb55]{border-top:1px solid var(--vp-c-divider);padding-top:24px;display:grid;grid-row-gap:8px}@media (min-width: 640px){.prev-next[data-v-48f9bb55]{grid-template-columns:repeat(2,1fr);grid-column-gap:16px}}.pager-link[data-v-48f9bb55]{display:block;border:1px solid var(--vp-c-divider);border-radius:8px;padding:11px 16px 13px;width:100%;height:100%;transition:border-color .25s}.pager-link[data-v-48f9bb55]:hover{border-color:var(--vp-c-brand-1)}.pager-link.next[data-v-48f9bb55]{margin-left:auto;text-align:right}.desc[data-v-48f9bb55]{display:block;line-height:20px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.title[data-v-48f9bb55]{display:block;line-height:20px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1);transition:color .25s}.VPDocOutlineDropdown[data-v-eadfb36b]{margin-bottom:48px}.VPDocOutlineDropdown button[data-v-eadfb36b]{display:block;font-size:14px;font-weight:500;line-height:24px;border:1px solid var(--vp-c-border);padding:4px 12px;color:var(--vp-c-text-2);background-color:var(--vp-c-default-soft);border-radius:8px;transition:color .5s}.VPDocOutlineDropdown button[data-v-eadfb36b]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPDocOutlineDropdown button.open[data-v-eadfb36b]{color:var(--vp-c-text-1)}.icon[data-v-eadfb36b]{display:inline-block;vertical-align:middle;width:16px;height:16px;fill:currentColor}[data-v-eadfb36b] .outline-link{font-size:14px;font-weight:400}.open>.icon[data-v-eadfb36b]{transform:rotate(90deg)}.items[data-v-eadfb36b]{margin-top:12px;border-left:1px solid var(--vp-c-divider)}.VPDoc[data-v-6b87e69f]{padding:32px 24px 96px;width:100%}.VPDoc .VPDocOutlineDropdown[data-v-6b87e69f]{display:none}@media (min-width: 960px) and (max-width: 1279px){.VPDoc .VPDocOutlineDropdown[data-v-6b87e69f]{display:block}}@media (min-width: 768px){.VPDoc[data-v-6b87e69f]{padding:48px 32px 128px}}@media (min-width: 960px){.VPDoc[data-v-6b87e69f]{padding:32px 32px 0}.VPDoc:not(.has-sidebar) .container[data-v-6b87e69f]{display:flex;justify-content:center;max-width:992px}.VPDoc:not(.has-sidebar) .content[data-v-6b87e69f]{max-width:752px}}@media (min-width: 1280px){.VPDoc .container[data-v-6b87e69f]{display:flex;justify-content:center}.VPDoc .aside[data-v-6b87e69f]{display:block}}@media (min-width: 1440px){.VPDoc:not(.has-sidebar) .content[data-v-6b87e69f]{max-width:784px}.VPDoc:not(.has-sidebar) .container[data-v-6b87e69f]{max-width:1104px}}.container[data-v-6b87e69f]{margin:0 auto;width:100%}.aside[data-v-6b87e69f]{position:relative;display:none;order:2;flex-grow:1;padding-left:32px;width:100%;max-width:256px}.left-aside[data-v-6b87e69f]{order:1;padding-left:unset;padding-right:32px}.aside-container[data-v-6b87e69f]{position:fixed;top:0;padding-top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 32px);width:224px;height:100vh;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}.aside-container[data-v-6b87e69f]::-webkit-scrollbar{display:none}.aside-curtain[data-v-6b87e69f]{position:fixed;bottom:0;z-index:10;width:224px;height:32px;background:linear-gradient(transparent,var(--vp-c-bg) 70%)}.aside-content[data-v-6b87e69f]{display:flex;flex-direction:column;min-height:calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px));padding-bottom:32px}.content[data-v-6b87e69f]{position:relative;margin:0 auto;width:100%}@media (min-width: 960px){.content[data-v-6b87e69f]{padding:0 32px 128px}}@media (min-width: 1280px){.content[data-v-6b87e69f]{order:1;margin:0;min-width:640px}}.content-container[data-v-6b87e69f]{margin:0 auto}.VPDoc.has-aside .content-container[data-v-6b87e69f]{max-width:688px}.external-link-icon-enabled :is(.vp-doc a[href*="://"][data-v-6b87e69f],.vp-doc a[target=_blank]):after{content:"";color:currentColor}.VPButton[data-v-c1c5efc1]{display:inline-block;border:1px solid transparent;text-align:center;font-weight:600;white-space:nowrap;transition:color .25s,border-color .25s,background-color .25s}.VPButton[data-v-c1c5efc1]:active{transition:color .1s,border-color .1s,background-color .1s}.VPButton.medium[data-v-c1c5efc1]{border-radius:20px;padding:0 20px;line-height:38px;font-size:14px}.VPButton.big[data-v-c1c5efc1]{border-radius:24px;padding:0 24px;line-height:46px;font-size:16px}.VPButton.brand[data-v-c1c5efc1]{border-color:var(--vp-button-brand-border);color:var(--vp-button-brand-text);background-color:var(--vp-button-brand-bg)}.VPButton.brand[data-v-c1c5efc1]:hover{border-color:var(--vp-button-brand-hover-border);color:var(--vp-button-brand-hover-text);background-color:var(--vp-button-brand-hover-bg)}.VPButton.brand[data-v-c1c5efc1]:active{border-color:var(--vp-button-brand-active-border);color:var(--vp-button-brand-active-text);background-color:var(--vp-button-brand-active-bg)}.VPButton.alt[data-v-c1c5efc1]{border-color:var(--vp-button-alt-border);color:var(--vp-button-alt-text);background-color:var(--vp-button-alt-bg)}.VPButton.alt[data-v-c1c5efc1]:hover{border-color:var(--vp-button-alt-hover-border);color:var(--vp-button-alt-hover-text);background-color:var(--vp-button-alt-hover-bg)}.VPButton.alt[data-v-c1c5efc1]:active{border-color:var(--vp-button-alt-active-border);color:var(--vp-button-alt-active-text);background-color:var(--vp-button-alt-active-bg)}.VPButton.sponsor[data-v-c1c5efc1]{border-color:var(--vp-button-sponsor-border);color:var(--vp-button-sponsor-text);background-color:var(--vp-button-sponsor-bg)}.VPButton.sponsor[data-v-c1c5efc1]:hover{border-color:var(--vp-button-sponsor-hover-border);color:var(--vp-button-sponsor-hover-text);background-color:var(--vp-button-sponsor-hover-bg)}.VPButton.sponsor[data-v-c1c5efc1]:active{border-color:var(--vp-button-sponsor-active-border);color:var(--vp-button-sponsor-active-text);background-color:var(--vp-button-sponsor-active-bg)}html:not(.dark) .VPImage.dark[data-v-8426fc1a]{display:none}.dark .VPImage.light[data-v-8426fc1a]{display:none}.VPHero[data-v-da5d1713]{margin-top:calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px}@media (min-width: 640px){.VPHero[data-v-da5d1713]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px}}@media (min-width: 960px){.VPHero[data-v-da5d1713]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px}}.container[data-v-da5d1713]{display:flex;flex-direction:column;margin:0 auto;max-width:1152px}@media (min-width: 960px){.container[data-v-da5d1713]{flex-direction:row}}.main[data-v-da5d1713]{position:relative;z-index:10;order:2;flex-grow:1;flex-shrink:0}.VPHero.has-image .container[data-v-da5d1713]{text-align:center}@media (min-width: 960px){.VPHero.has-image .container[data-v-da5d1713]{text-align:left}}@media (min-width: 960px){.main[data-v-da5d1713]{order:1;width:calc((100% / 3) * 2)}.VPHero.has-image .main[data-v-da5d1713]{max-width:592px}}.name[data-v-da5d1713],.text[data-v-da5d1713]{max-width:392px;letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;white-space:pre-wrap}.VPHero.has-image .name[data-v-da5d1713],.VPHero.has-image .text[data-v-da5d1713]{margin:0 auto}.name[data-v-da5d1713]{color:var(--vp-home-hero-name-color)}.clip[data-v-da5d1713]{background:var(--vp-home-hero-name-background);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--vp-home-hero-name-color)}@media (min-width: 640px){.name[data-v-da5d1713],.text[data-v-da5d1713]{max-width:576px;line-height:56px;font-size:48px}}@media (min-width: 960px){.name[data-v-da5d1713],.text[data-v-da5d1713]{line-height:64px;font-size:56px}.VPHero.has-image .name[data-v-da5d1713],.VPHero.has-image .text[data-v-da5d1713]{margin:0}}.tagline[data-v-da5d1713]{padding-top:8px;max-width:392px;line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--vp-c-text-2)}.VPHero.has-image .tagline[data-v-da5d1713]{margin:0 auto}@media (min-width: 640px){.tagline[data-v-da5d1713]{padding-top:12px;max-width:576px;line-height:32px;font-size:20px}}@media (min-width: 960px){.tagline[data-v-da5d1713]{line-height:36px;font-size:24px}.VPHero.has-image .tagline[data-v-da5d1713]{margin:0}}.actions[data-v-da5d1713]{display:flex;flex-wrap:wrap;margin:-6px;padding-top:24px}.VPHero.has-image .actions[data-v-da5d1713]{justify-content:center}@media (min-width: 640px){.actions[data-v-da5d1713]{padding-top:32px}}@media (min-width: 960px){.VPHero.has-image .actions[data-v-da5d1713]{justify-content:flex-start}}.action[data-v-da5d1713]{flex-shrink:0;padding:6px}.image[data-v-da5d1713]{order:1;margin:-76px -24px -48px}@media (min-width: 640px){.image[data-v-da5d1713]{margin:-108px -24px -48px}}@media (min-width: 960px){.image[data-v-da5d1713]{flex-grow:1;order:2;margin:0;min-height:100%}}.image-container[data-v-da5d1713]{position:relative;margin:0 auto;width:320px;height:320px}@media (min-width: 640px){.image-container[data-v-da5d1713]{width:392px;height:392px}}@media (min-width: 960px){.image-container[data-v-da5d1713]{display:flex;justify-content:center;align-items:center;width:100%;height:100%;transform:translate(-32px,-32px)}}.image-bg[data-v-da5d1713]{position:absolute;top:50%;left:50%;border-radius:50%;width:192px;height:192px;background-image:var(--vp-home-hero-image-background-image);filter:var(--vp-home-hero-image-filter);transform:translate(-50%,-50%)}@media (min-width: 640px){.image-bg[data-v-da5d1713]{width:256px;height:256px}}@media (min-width: 960px){.image-bg[data-v-da5d1713]{width:320px;height:320px}}[data-v-da5d1713] .image-src{position:absolute;top:50%;left:50%;max-width:192px;max-height:192px;transform:translate(-50%,-50%)}@media (min-width: 640px){[data-v-da5d1713] .image-src{max-width:256px;max-height:256px}}@media (min-width: 960px){[data-v-da5d1713] .image-src{max-width:320px;max-height:320px}}.VPFeature[data-v-33204567]{display:block;border:1px solid var(--vp-c-bg-soft);border-radius:12px;height:100%;background-color:var(--vp-c-bg-soft);transition:border-color .25s,background-color .25s}.VPFeature.link[data-v-33204567]:hover{border-color:var(--vp-c-brand-1)}.box[data-v-33204567]{display:flex;flex-direction:column;padding:24px;height:100%}.box[data-v-33204567]>.VPImage{margin-bottom:20px}.icon[data-v-33204567]{display:flex;justify-content:center;align-items:center;margin-bottom:20px;border-radius:6px;background-color:var(--vp-c-default-soft);width:48px;height:48px;font-size:24px;transition:background-color .25s}.title[data-v-33204567]{line-height:24px;font-size:16px;font-weight:600}.details[data-v-33204567]{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.link-text[data-v-33204567]{padding-top:8px}.link-text-value[data-v-33204567]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-brand-1)}.link-text-icon[data-v-33204567]{display:inline-block;margin-left:6px;width:14px;height:14px;fill:currentColor}.VPFeatures[data-v-a6181336]{position:relative;padding:0 24px}@media (min-width: 640px){.VPFeatures[data-v-a6181336]{padding:0 48px}}@media (min-width: 960px){.VPFeatures[data-v-a6181336]{padding:0 64px}}.container[data-v-a6181336]{margin:0 auto;max-width:1152px}.items[data-v-a6181336]{display:flex;flex-wrap:wrap;margin:-8px}.item[data-v-a6181336]{padding:8px;width:100%}@media (min-width: 640px){.item.grid-2[data-v-a6181336],.item.grid-4[data-v-a6181336],.item.grid-6[data-v-a6181336]{width:50%}}@media (min-width: 768px){.item.grid-2[data-v-a6181336],.item.grid-4[data-v-a6181336]{width:50%}.item.grid-3[data-v-a6181336],.item.grid-6[data-v-a6181336]{width:calc(100% / 3)}}@media (min-width: 960px){.item.grid-4[data-v-a6181336]{width:25%}}.VPHome[data-v-d82743a8]{padding-bottom:96px}.VPHome[data-v-d82743a8] .VPHomeSponsors{margin-top:112px;margin-bottom:-128px}@media (min-width: 768px){.VPHome[data-v-d82743a8]{padding-bottom:128px}}.VPContent[data-v-669faec9]{flex-grow:1;flex-shrink:0;margin:var(--vp-layout-top-height, 0px) auto 0;width:100%}.VPContent.is-home[data-v-669faec9]{width:100%;max-width:100%}.VPContent.has-sidebar[data-v-669faec9]{margin:0}@media (min-width: 960px){.VPContent[data-v-669faec9]{padding-top:var(--vp-nav-height)}.VPContent.has-sidebar[data-v-669faec9]{margin:var(--vp-layout-top-height, 0px) 0 0;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPContent.has-sidebar[data-v-669faec9]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.VPFooter[data-v-e315a0ad]{position:relative;z-index:var(--vp-z-index-footer);border-top:1px solid var(--vp-c-gutter);padding:32px 24px;background-color:var(--vp-c-bg)}.VPFooter.has-sidebar[data-v-e315a0ad]{display:none}.VPFooter[data-v-e315a0ad] a{text-decoration-line:underline;text-underline-offset:2px;transition:color .25s}.VPFooter[data-v-e315a0ad] a:hover{color:var(--vp-c-text-1)}@media (min-width: 768px){.VPFooter[data-v-e315a0ad]{padding:32px}}.container[data-v-e315a0ad]{margin:0 auto;max-width:var(--vp-layout-max-width);text-align:center}.message[data-v-e315a0ad],.copyright[data-v-e315a0ad]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.VPLocalNavOutlineDropdown[data-v-1c15a60a]{padding:12px 20px 11px}.VPLocalNavOutlineDropdown button[data-v-1c15a60a]{display:block;font-size:12px;font-weight:500;line-height:24px;color:var(--vp-c-text-2);transition:color .5s;position:relative}.VPLocalNavOutlineDropdown button[data-v-1c15a60a]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPLocalNavOutlineDropdown button.open[data-v-1c15a60a]{color:var(--vp-c-text-1)}.icon[data-v-1c15a60a]{display:inline-block;vertical-align:middle;margin-left:2px;width:14px;height:14px;fill:currentColor}[data-v-1c15a60a] .outline-link{font-size:14px;padding:2px 0}.open>.icon[data-v-1c15a60a]{transform:rotate(90deg)}.items[data-v-1c15a60a]{position:absolute;top:64px;right:16px;left:16px;display:grid;gap:1px;border:1px solid var(--vp-c-border);border-radius:8px;background-color:var(--vp-c-gutter);max-height:calc(var(--vp-vh, 100vh) - 86px);overflow:hidden auto;box-shadow:var(--vp-shadow-3)}.header[data-v-1c15a60a]{background-color:var(--vp-c-bg-soft)}.top-link[data-v-1c15a60a]{display:block;padding:0 16px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-c-brand-1)}.outline[data-v-1c15a60a]{padding:8px 0;background-color:var(--vp-c-bg-soft)}.flyout-enter-active[data-v-1c15a60a]{transition:all .2s ease-out}.flyout-leave-active[data-v-1c15a60a]{transition:all .15s ease-in}.flyout-enter-from[data-v-1c15a60a],.flyout-leave-to[data-v-1c15a60a]{opacity:0;transform:translateY(-16px)}.VPLocalNav[data-v-f84a0989]{position:sticky;top:0;left:0;z-index:var(--vp-z-index-local-nav);display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--vp-c-gutter);border-bottom:1px solid var(--vp-c-gutter);padding-top:var(--vp-layout-top-height, 0px);width:100%;background-color:var(--vp-local-nav-bg-color)}.VPLocalNav.fixed[data-v-f84a0989]{position:fixed}.VPLocalNav.reached-top[data-v-f84a0989]{border-top-color:transparent}@media (min-width: 960px){.VPLocalNav[data-v-f84a0989]{display:none}}.menu[data-v-f84a0989]{display:flex;align-items:center;padding:12px 24px 11px;line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.menu[data-v-f84a0989]:hover{color:var(--vp-c-text-1);transition:color .25s}@media (min-width: 768px){.menu[data-v-f84a0989]{padding:0 32px}}.menu-icon[data-v-f84a0989]{margin-right:8px;width:16px;height:16px;fill:currentColor}.VPOutlineDropdown[data-v-f84a0989]{padding:12px 24px 11px}@media (min-width: 768px){.VPOutlineDropdown[data-v-f84a0989]{padding:12px 32px 11px}}.VPSwitch[data-v-b1685198]{position:relative;border-radius:11px;display:block;width:40px;height:22px;flex-shrink:0;border:1px solid var(--vp-input-border-color);background-color:var(--vp-input-switch-bg-color);transition:border-color .25s!important}.VPSwitch[data-v-b1685198]:hover{border-color:var(--vp-c-brand-1)}.check[data-v-b1685198]{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background-color:var(--vp-c-neutral-inverse);box-shadow:var(--vp-shadow-1);transition:transform .25s!important}.icon[data-v-b1685198]{position:relative;display:block;width:18px;height:18px;border-radius:50%;overflow:hidden}.icon[data-v-b1685198] svg{position:absolute;top:3px;left:3px;width:12px;height:12px;fill:var(--vp-c-text-2)}.dark .icon[data-v-b1685198] svg{fill:var(--vp-c-text-1);transition:opacity .25s!important}.sun[data-v-cbbe1149]{opacity:1}.moon[data-v-cbbe1149],.dark .sun[data-v-cbbe1149]{opacity:0}.dark .moon[data-v-cbbe1149]{opacity:1}.dark .VPSwitchAppearance[data-v-cbbe1149] .check{transform:translate(18px)}.VPNavBarAppearance[data-v-e6aabb21]{display:none}@media (min-width: 1280px){.VPNavBarAppearance[data-v-e6aabb21]{display:flex;align-items:center}}.VPMenuGroup+.VPMenuLink[data-v-43f1e123]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.link[data-v-43f1e123]{display:block;border-radius:6px;padding:0 12px;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);white-space:nowrap;transition:background-color .25s,color .25s}.link[data-v-43f1e123]:hover{color:var(--vp-c-brand-1);background-color:var(--vp-c-default-soft)}.link.active[data-v-43f1e123]{color:var(--vp-c-brand-1)}.VPMenuGroup[data-v-69e747b5]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.VPMenuGroup[data-v-69e747b5]:first-child{margin-top:0;border-top:0;padding-top:0}.VPMenuGroup+.VPMenuGroup[data-v-69e747b5]{margin-top:12px;border-top:1px solid var(--vp-c-divider)}.title[data-v-69e747b5]{padding:0 12px;line-height:32px;font-size:14px;font-weight:600;color:var(--vp-c-text-2);white-space:nowrap;transition:color .25s}.VPMenu[data-v-e7ea1737]{border-radius:12px;padding:12px;min-width:128px;border:1px solid var(--vp-c-divider);background-color:var(--vp-c-bg-elv);box-shadow:var(--vp-shadow-3);transition:background-color .5s;max-height:calc(100vh - var(--vp-nav-height));overflow-y:auto}.VPMenu[data-v-e7ea1737] .group{margin:0 -12px;padding:0 12px 12px}.VPMenu[data-v-e7ea1737] .group+.group{border-top:1px solid var(--vp-c-divider);padding:11px 12px 12px}.VPMenu[data-v-e7ea1737] .group:last-child{padding-bottom:0}.VPMenu[data-v-e7ea1737] .group+.item{border-top:1px solid var(--vp-c-divider);padding:11px 16px 0}.VPMenu[data-v-e7ea1737] .item{padding:0 16px;white-space:nowrap}.VPMenu[data-v-e7ea1737] .label{flex-grow:1;line-height:28px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.VPMenu[data-v-e7ea1737] .action{padding-left:24px}.VPFlyout[data-v-9c007e85]{position:relative}.VPFlyout[data-v-9c007e85]:hover{color:var(--vp-c-brand-1);transition:color .25s}.VPFlyout:hover .text[data-v-9c007e85]{color:var(--vp-c-text-2)}.VPFlyout:hover .icon[data-v-9c007e85]{fill:var(--vp-c-text-2)}.VPFlyout.active .text[data-v-9c007e85]{color:var(--vp-c-brand-1)}.VPFlyout.active:hover .text[data-v-9c007e85]{color:var(--vp-c-brand-2)}.VPFlyout:hover .menu[data-v-9c007e85],.button[aria-expanded=true]+.menu[data-v-9c007e85]{opacity:1;visibility:visible;transform:translateY(0)}.button[aria-expanded=false]+.menu[data-v-9c007e85]{opacity:0;visibility:hidden;transform:translateY(0)}.button[data-v-9c007e85]{display:flex;align-items:center;padding:0 12px;height:var(--vp-nav-height);color:var(--vp-c-text-1);transition:color .5s}.text[data-v-9c007e85]{display:flex;align-items:center;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.option-icon[data-v-9c007e85]{margin-right:0;width:16px;height:16px;fill:currentColor}.text-icon[data-v-9c007e85]{margin-left:4px;width:14px;height:14px;fill:currentColor}.icon[data-v-9c007e85]{width:20px;height:20px;fill:currentColor;transition:fill .25s}.menu[data-v-9c007e85]{position:absolute;top:calc(var(--vp-nav-height) / 2 + 20px);right:0;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,transform .25s}.VPSocialLink[data-v-f80f8133]{display:flex;justify-content:center;align-items:center;width:36px;height:36px;color:var(--vp-c-text-2);transition:color .5s}.VPSocialLink[data-v-f80f8133]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPSocialLink[data-v-f80f8133]>svg{width:20px;height:20px;fill:currentColor}.VPSocialLinks[data-v-7bc22406]{display:flex;justify-content:center}.VPNavBarExtra[data-v-d0bd9dde]{display:none;margin-right:-12px}@media (min-width: 768px){.VPNavBarExtra[data-v-d0bd9dde]{display:block}}@media (min-width: 1280px){.VPNavBarExtra[data-v-d0bd9dde]{display:none}}.trans-title[data-v-d0bd9dde]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.item.appearance[data-v-d0bd9dde],.item.social-links[data-v-d0bd9dde]{display:flex;align-items:center;padding:0 12px}.item.appearance[data-v-d0bd9dde]{min-width:176px}.appearance-action[data-v-d0bd9dde]{margin-right:-2px}.social-links-list[data-v-d0bd9dde]{margin:-4px -8px}.VPNavBarHamburger[data-v-e5dd9c1c]{display:flex;justify-content:center;align-items:center;width:48px;height:var(--vp-nav-height)}@media (min-width: 768px){.VPNavBarHamburger[data-v-e5dd9c1c]{display:none}}.container[data-v-e5dd9c1c]{position:relative;width:16px;height:14px;overflow:hidden}.VPNavBarHamburger:hover .top[data-v-e5dd9c1c]{top:0;left:0;transform:translate(4px)}.VPNavBarHamburger:hover .middle[data-v-e5dd9c1c]{top:6px;left:0;transform:translate(0)}.VPNavBarHamburger:hover .bottom[data-v-e5dd9c1c]{top:12px;left:0;transform:translate(8px)}.VPNavBarHamburger.active .top[data-v-e5dd9c1c]{top:6px;transform:translate(0) rotate(225deg)}.VPNavBarHamburger.active .middle[data-v-e5dd9c1c]{top:6px;transform:translate(16px)}.VPNavBarHamburger.active .bottom[data-v-e5dd9c1c]{top:6px;transform:translate(0) rotate(135deg)}.VPNavBarHamburger.active:hover .top[data-v-e5dd9c1c],.VPNavBarHamburger.active:hover .middle[data-v-e5dd9c1c],.VPNavBarHamburger.active:hover .bottom[data-v-e5dd9c1c]{background-color:var(--vp-c-text-2);transition:top .25s,background-color .25s,transform .25s}.top[data-v-e5dd9c1c],.middle[data-v-e5dd9c1c],.bottom[data-v-e5dd9c1c]{position:absolute;width:16px;height:2px;background-color:var(--vp-c-text-1);transition:top .25s,background-color .5s,transform .25s}.top[data-v-e5dd9c1c]{top:0;left:0;transform:translate(0)}.middle[data-v-e5dd9c1c]{top:6px;left:0;transform:translate(8px)}.bottom[data-v-e5dd9c1c]{top:12px;left:0;transform:translate(4px)}.VPNavBarMenuLink[data-v-42ef59de]{display:flex;align-items:center;padding:0 12px;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.VPNavBarMenuLink.active[data-v-42ef59de],.VPNavBarMenuLink[data-v-42ef59de]:hover{color:var(--vp-c-brand-1)}.VPNavBarMenu[data-v-7f418b0f]{display:none}@media (min-width: 768px){.VPNavBarMenu[data-v-7f418b0f]{display:flex}}.VPPluginSearch-flex-logo{width:80px;margin-left:calc(100% - 90px);padding-bottom:10px}.VPPluginSearch-search-list{padding:1rem;max-height:calc(100vh - 230px);overflow-x:auto}.VPPluginSearch-search-item-icon{font-family:none;align-self:center;padding:0 1rem 0 0;font-size:x-large}.VPPluginSearch-search-list>div{color:var(--vp-c-brand-dark);font-weight:700}.VPPluginSearch-search-item{padding:.25rem 1rem;margin:8px 0 0;border:solid 1px;border-radius:6px;display:flex;border-color:var(--vp-custom-block-details-border);color:var(--vp-custom-block-details-text);background-color:var(--vp-custom-block-details-bg)}.VPPluginSearch-search-item p{margin:0;font-size:smaller;color:var(--c-text-light-3)}.VPPluginSearch-search-item:hover{color:#fff;background:var(--vp-c-brand-dark)}.VPPluginSearch-search-item:hover>p{color:#fff}.VPNavBarSearch{display:flex;align-items:center;padding-left:16px}.DocSearch-MagnifierLabel{margin:16px;color:var(--c-brand-light);stroke-width:2px}.DocSearch-Input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#58565636;border:solid 1px var(--c-brand-light);color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;width:80%;margin:8px;padding:8px;border-radius:6px}.dark .DocSearch-Input{color:var(--vp-c-text-1)}.VPPluginSearch-modal-back{left:0;right:0;top:0;bottom:0;background:#545454b3;position:fixed;z-index:65}.dark .VPPluginSearch-modal{background-color:#242424}.VPPluginSearch-modal{background-color:#f9f9f9;border-radius:6px;box-shadow:none;flex-direction:column;margin:80px auto auto;max-width:560px;position:relative}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}@media (max-width: 768px){.VPPluginSearch-modal{max-width:100%;border-radius:0}}.dark .DocSearch-Form{background-color:var(--vt-c-bg-mute)}.DocSearch-Form{background-color:#fff;border:1px solid var(--vt-c-brand);padding:6px}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Button-Key{align-items:center;background:var(--c-brand-light);border-radius:3px;box-shadow:var(--c-brand);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;padding-bottom:2px;position:relative;top:-1px;width:20px}body.dark .DocSearch-Button:hover{box-shadow:none}.DocSearch{--docsearch-primary-color: var(--vt-c-brand);--docsearch-highlight-color: var(--docsearch-primary-color);--docsearch-text-color: var(--vt-c-text-1);--docsearch-muted-color: #ebebeb99;--docsearch-searchbox-shadow: none;--docsearch-searchbox-focus-background: transparent;--docsearch-key-gradient: transparent;--docsearch-key-shadow: none;--docsearch-modal-background: var(--vt-c-bg-soft);--docsearch-footer-background: var(--vt-c-bg)}.dark .DocSearch{--docsearch-modal-shadow: none;--docsearch-footer-shadow: none;--docsearch-logo-color: #ebebeb99;--docsearch-hit-background: #2f2f2f;--docsearch-hit-color: #ebebeb99;--docsearch-hit-shadow: none}.dark .DocSearch-Footer{border-top:1px solid var(--vt-c-divider)}.DocSearch-Form{background-color:#fff;border:1px solid var(--vt-c-brand)}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Button{display:flex;justify-content:center;align-items:center;margin:0;width:48px;height:55px;background:transparent;border:none}.DocSearch-Button:hover{background:transparent}.DocSearch-Button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}.DocSearch-Button:focus:not(:focus-visible){outline:none!important}@media (min-width: 768px){.DocSearch-Button{justify-content:flex-start;width:100%}}.DocSearch-MagnifierLabel{color:var(--vp-c-brand-dark)}.DocSearch-Button .DocSearch-Search-Icon{transition:color .5s;fill:currentColor;width:18px;height:18px;position:relative}@media (min-width: 768px){.DocSearch-Button .DocSearch-Search-Icon{top:1px;margin-right:10px;width:15px;height:15px}}.DocSearch-Button:hover .DocSearch-Search-Icon{color:var(--vt-c-text-1)}.DocSearch-Button-Placeholder{transition:color .5s;font-size:13px;font-weight:500;color:#6669;display:none;padding:0 10px 0 0}@media (min-width: 960px){.DocSearch-Button-Placeholder{display:inline-block}}.DocSearch-Button:hover .DocSearch-Button-Placeholder{color:var(--vt-c-text-1)}.DocSearch-Button .DocSearch-Button-Key{margin-top:2px;border:1px solid var(--vt-c-divider);border-right:none;border-radius:4px 0 0 4px;display:none;padding-left:6px;height:22px;line-height:22px;transition:color .5s,border-color .5s;min-width:0}.DocSearch-Button .DocSearch-Button-Key+.DocSearch-Button-Key{border-right:1px solid var(--vt-c-divider);border-left:none;border-radius:0 4px 4px 0;padding-left:2px;padding-right:6px}.DocSearch-Button:hover .DocSearch-Button-Key{color:var(--vt-c-brand-light)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Key{display:inline-block}}.DocSearch-Button-Key{font-size:12px;font-weight:500;height:20px;margin:0;width:auto;color:var(--vt-c-text-3);transition:color .5s;display:inline-block;padding:0 1px}.VPNavBarSocialLinks[data-v-0394ad82]{display:none}@media (min-width: 1280px){.VPNavBarSocialLinks[data-v-0394ad82]{display:flex;align-items:center}}.title[data-v-86d1bed8]{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;height:var(--vp-nav-height);font-size:16px;font-weight:600;color:var(--vp-c-text-1);transition:opacity .25s}@media (min-width: 960px){.title[data-v-86d1bed8]{flex-shrink:0}.VPNavBarTitle.has-sidebar .title[data-v-86d1bed8]{border-bottom-color:var(--vp-c-divider)}}[data-v-86d1bed8] .logo{margin-right:8px;height:var(--vp-nav-logo-height)}.VPNavBarTranslations[data-v-74abcbb9]{display:none}@media (min-width: 1280px){.VPNavBarTranslations[data-v-74abcbb9]{display:flex;align-items:center}}.title[data-v-74abcbb9]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.VPNavBar[data-v-d83f3580]{position:relative;border-bottom:1px solid transparent;padding:0 8px 0 24px;height:var(--vp-nav-height);pointer-events:none;white-space:nowrap}@media (min-width: 768px){.VPNavBar[data-v-d83f3580]{padding:0 32px}}@media (min-width: 960px){.VPNavBar.has-sidebar[data-v-d83f3580]{padding:0}.VPNavBar[data-v-d83f3580]:not(.has-sidebar):not(.top){border-bottom-color:var(--vp-c-gutter);background-color:var(--vp-nav-bg-color)}}.container[data-v-d83f3580]{display:flex;justify-content:space-between;margin:0 auto;max-width:calc(var(--vp-layout-max-width) - 64px);height:var(--vp-nav-height);pointer-events:none}.container>.title[data-v-d83f3580],.container>.content[data-v-d83f3580]{pointer-events:none}.container[data-v-d83f3580] *{pointer-events:auto}@media (min-width: 960px){.VPNavBar.has-sidebar .container[data-v-d83f3580]{max-width:100%}}.title[data-v-d83f3580]{flex-shrink:0;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar.has-sidebar .title[data-v-d83f3580]{position:absolute;top:0;left:0;z-index:2;padding:0 32px;width:var(--vp-sidebar-width);height:var(--vp-nav-height);background-color:transparent}}@media (min-width: 1440px){.VPNavBar.has-sidebar .title[data-v-d83f3580]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}.content[data-v-d83f3580]{flex-grow:1}@media (min-width: 960px){.VPNavBar.has-sidebar .content[data-v-d83f3580]{position:relative;z-index:1;padding-right:32px;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPNavBar.has-sidebar .content[data-v-d83f3580]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.content-body[data-v-d83f3580]{display:flex;justify-content:flex-end;align-items:center;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar:not(.top) .content-body[data-v-d83f3580]{position:relative;background-color:var(--vp-nav-bg-color)}}@media (max-width: 767px){.content-body[data-v-d83f3580]{column-gap:.5rem}}.menu+.translations[data-v-d83f3580]:before,.menu+.appearance[data-v-d83f3580]:before,.menu+.social-links[data-v-d83f3580]:before,.translations+.appearance[data-v-d83f3580]:before,.appearance+.social-links[data-v-d83f3580]:before{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--vp-c-divider);content:""}.menu+.appearance[data-v-d83f3580]:before,.translations+.appearance[data-v-d83f3580]:before{margin-right:16px}.appearance+.social-links[data-v-d83f3580]:before{margin-left:16px}.social-links[data-v-d83f3580]{margin-right:-8px}@media (min-width: 960px){.VPNavBar.has-sidebar .curtain[data-v-d83f3580]{position:absolute;right:0;bottom:-31px;width:calc(100% - var(--vp-sidebar-width));height:32px}.VPNavBar.has-sidebar .curtain[data-v-d83f3580]:before{display:block;width:100%;height:32px;background:linear-gradient(var(--vp-c-bg),transparent 70%);content:""}}@media (min-width: 1440px){.VPNavBar.has-sidebar .curtain[data-v-d83f3580]{width:calc(100% - ((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)))}}.VPNavScreenAppearance[data-v-2d7af913]{display:flex;justify-content:space-between;align-items:center;border-radius:8px;padding:12px 14px 12px 16px;background-color:var(--vp-c-bg-soft)}.text[data-v-2d7af913]{line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.VPNavScreenMenuLink[data-v-05f27b2a]{display:block;border-bottom:1px solid var(--vp-c-divider);padding:12px 0 11px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:border-color .25s,color .25s}.VPNavScreenMenuLink[data-v-05f27b2a]:hover{color:var(--vp-c-brand-1)}.VPNavScreenMenuGroupLink[data-v-19976ae1]{display:block;margin-left:12px;line-height:32px;font-size:14px;font-weight:400;color:var(--vp-c-text-1);transition:color .25s}.VPNavScreenMenuGroupLink[data-v-19976ae1]:hover{color:var(--vp-c-brand-1)}.VPNavScreenMenuGroupSection[data-v-8133b170]{display:block}.title[data-v-8133b170]{line-height:32px;font-size:13px;font-weight:700;color:var(--vp-c-text-2);transition:color .25s}.VPNavScreenMenuGroup[data-v-65ef89ca]{border-bottom:1px solid var(--vp-c-divider);height:48px;overflow:hidden;transition:border-color .5s}.VPNavScreenMenuGroup .items[data-v-65ef89ca]{visibility:hidden}.VPNavScreenMenuGroup.open .items[data-v-65ef89ca]{visibility:visible}.VPNavScreenMenuGroup.open[data-v-65ef89ca]{padding-bottom:10px;height:auto}.VPNavScreenMenuGroup.open .button[data-v-65ef89ca]{padding-bottom:6px;color:var(--vp-c-brand-1)}.VPNavScreenMenuGroup.open .button-icon[data-v-65ef89ca]{transform:rotate(45deg)}.button[data-v-65ef89ca]{display:flex;justify-content:space-between;align-items:center;padding:12px 4px 11px 0;width:100%;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.button[data-v-65ef89ca]:hover{color:var(--vp-c-brand-1)}.button-icon[data-v-65ef89ca]{width:14px;height:14px;fill:var(--vp-c-text-2);transition:fill .5s,transform .25s}.group[data-v-65ef89ca]:first-child{padding-top:0}.group+.group[data-v-65ef89ca],.group+.item[data-v-65ef89ca]{padding-top:4px}.VPNavScreenTranslations[data-v-d72aa483]{height:24px;overflow:hidden}.VPNavScreenTranslations.open[data-v-d72aa483]{height:auto}.title[data-v-d72aa483]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-text-1)}.icon[data-v-d72aa483]{width:16px;height:16px;fill:currentColor}.icon.lang[data-v-d72aa483]{margin-right:8px}.icon.chevron[data-v-d72aa483]{margin-left:4px}.list[data-v-d72aa483]{padding:4px 0 0 24px}.link[data-v-d72aa483]{line-height:32px;font-size:13px;color:var(--vp-c-text-1)}.VPNavScreen[data-v-cc5739dd]{position:fixed;top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px);right:0;bottom:0;left:0;padding:0 32px;width:100%;background-color:var(--vp-nav-screen-bg-color);overflow-y:auto;transition:background-color .5s;pointer-events:auto}.VPNavScreen.fade-enter-active[data-v-cc5739dd],.VPNavScreen.fade-leave-active[data-v-cc5739dd]{transition:opacity .25s}.VPNavScreen.fade-enter-active .container[data-v-cc5739dd],.VPNavScreen.fade-leave-active .container[data-v-cc5739dd]{transition:transform .25s ease}.VPNavScreen.fade-enter-from[data-v-cc5739dd],.VPNavScreen.fade-leave-to[data-v-cc5739dd]{opacity:0}.VPNavScreen.fade-enter-from .container[data-v-cc5739dd],.VPNavScreen.fade-leave-to .container[data-v-cc5739dd]{transform:translateY(-8px)}@media (min-width: 768px){.VPNavScreen[data-v-cc5739dd]{display:none}}.container[data-v-cc5739dd]{margin:0 auto;padding:24px 0 96px;max-width:288px}.menu+.translations[data-v-cc5739dd],.menu+.appearance[data-v-cc5739dd],.translations+.appearance[data-v-cc5739dd]{margin-top:24px}.menu+.social-links[data-v-cc5739dd]{margin-top:16px}.appearance+.social-links[data-v-cc5739dd]{margin-top:16px}.VPNav[data-v-ae24b3ad]{position:relative;top:var(--vp-layout-top-height, 0px);left:0;z-index:var(--vp-z-index-nav);width:100%;pointer-events:none;transition:background-color .5s}@media (min-width: 960px){.VPNav[data-v-ae24b3ad]{position:fixed}}.VPSidebarItem.level-0[data-v-e31bd47b]{padding-bottom:24px}.VPSidebarItem.collapsed.level-0[data-v-e31bd47b]{padding-bottom:10px}.item[data-v-e31bd47b]{position:relative;display:flex;width:100%}.VPSidebarItem.collapsible>.item[data-v-e31bd47b]{cursor:pointer}.indicator[data-v-e31bd47b]{position:absolute;top:6px;bottom:6px;left:-17px;width:2px;border-radius:2px;transition:background-color .25s}.VPSidebarItem.level-2.is-active>.item>.indicator[data-v-e31bd47b],.VPSidebarItem.level-3.is-active>.item>.indicator[data-v-e31bd47b],.VPSidebarItem.level-4.is-active>.item>.indicator[data-v-e31bd47b],.VPSidebarItem.level-5.is-active>.item>.indicator[data-v-e31bd47b]{background-color:var(--vp-c-brand-1)}.link[data-v-e31bd47b]{display:flex;align-items:center;flex-grow:1}.text[data-v-e31bd47b]{flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;transition:color .25s}.VPSidebarItem.level-0 .text[data-v-e31bd47b]{font-weight:700;color:var(--vp-c-text-1)}.VPSidebarItem.level-1 .text[data-v-e31bd47b],.VPSidebarItem.level-2 .text[data-v-e31bd47b],.VPSidebarItem.level-3 .text[data-v-e31bd47b],.VPSidebarItem.level-4 .text[data-v-e31bd47b],.VPSidebarItem.level-5 .text[data-v-e31bd47b]{font-weight:500;color:var(--vp-c-text-2)}.VPSidebarItem.level-0.is-link>.item>.link:hover .text[data-v-e31bd47b],.VPSidebarItem.level-1.is-link>.item>.link:hover .text[data-v-e31bd47b],.VPSidebarItem.level-2.is-link>.item>.link:hover .text[data-v-e31bd47b],.VPSidebarItem.level-3.is-link>.item>.link:hover .text[data-v-e31bd47b],.VPSidebarItem.level-4.is-link>.item>.link:hover .text[data-v-e31bd47b],.VPSidebarItem.level-5.is-link>.item>.link:hover .text[data-v-e31bd47b]{color:var(--vp-c-brand-1)}.VPSidebarItem.level-0.has-active>.item>.text[data-v-e31bd47b],.VPSidebarItem.level-1.has-active>.item>.text[data-v-e31bd47b],.VPSidebarItem.level-2.has-active>.item>.text[data-v-e31bd47b],.VPSidebarItem.level-3.has-active>.item>.text[data-v-e31bd47b],.VPSidebarItem.level-4.has-active>.item>.text[data-v-e31bd47b],.VPSidebarItem.level-5.has-active>.item>.text[data-v-e31bd47b],.VPSidebarItem.level-0.has-active>.item>.link>.text[data-v-e31bd47b],.VPSidebarItem.level-1.has-active>.item>.link>.text[data-v-e31bd47b],.VPSidebarItem.level-2.has-active>.item>.link>.text[data-v-e31bd47b],.VPSidebarItem.level-3.has-active>.item>.link>.text[data-v-e31bd47b],.VPSidebarItem.level-4.has-active>.item>.link>.text[data-v-e31bd47b],.VPSidebarItem.level-5.has-active>.item>.link>.text[data-v-e31bd47b]{color:var(--vp-c-text-1)}.VPSidebarItem.level-0.is-active>.item .link>.text[data-v-e31bd47b],.VPSidebarItem.level-1.is-active>.item .link>.text[data-v-e31bd47b],.VPSidebarItem.level-2.is-active>.item .link>.text[data-v-e31bd47b],.VPSidebarItem.level-3.is-active>.item .link>.text[data-v-e31bd47b],.VPSidebarItem.level-4.is-active>.item .link>.text[data-v-e31bd47b],.VPSidebarItem.level-5.is-active>.item .link>.text[data-v-e31bd47b]{color:var(--vp-c-brand-1)}.caret[data-v-e31bd47b]{display:flex;justify-content:center;align-items:center;margin-right:-7px;width:32px;height:32px;color:var(--vp-c-text-3);cursor:pointer;transition:color .25s;flex-shrink:0}.item:hover .caret[data-v-e31bd47b]{color:var(--vp-c-text-2)}.item:hover .caret[data-v-e31bd47b]:hover{color:var(--vp-c-text-1)}.caret-icon[data-v-e31bd47b]{width:18px;height:18px;fill:currentColor;transform:rotate(90deg);transition:transform .25s}.VPSidebarItem.collapsed .caret-icon[data-v-e31bd47b]{transform:rotate(0)}.VPSidebarItem.level-1 .items[data-v-e31bd47b],.VPSidebarItem.level-2 .items[data-v-e31bd47b],.VPSidebarItem.level-3 .items[data-v-e31bd47b],.VPSidebarItem.level-4 .items[data-v-e31bd47b],.VPSidebarItem.level-5 .items[data-v-e31bd47b]{border-left:1px solid var(--vp-c-divider);padding-left:16px}.VPSidebarItem.collapsed .items[data-v-e31bd47b]{display:none}.VPSidebar[data-v-7f44e717]{position:fixed;top:var(--vp-layout-top-height, 0px);bottom:0;left:0;z-index:var(--vp-z-index-sidebar);padding:32px 32px 96px;width:calc(100vw - 64px);max-width:320px;background-color:var(--vp-sidebar-bg-color);opacity:0;box-shadow:var(--vp-c-shadow-3);overflow-x:hidden;overflow-y:auto;transform:translate(-100%);transition:opacity .5s,transform .25s ease;overscroll-behavior:contain}.VPSidebar.open[data-v-7f44e717]{opacity:1;visibility:visible;transform:translate(0);transition:opacity .25s,transform .5s cubic-bezier(.19,1,.22,1)}.dark .VPSidebar[data-v-7f44e717]{box-shadow:var(--vp-shadow-1)}@media (min-width: 960px){.VPSidebar[data-v-7f44e717]{z-index:1;padding-top:var(--vp-nav-height);width:var(--vp-sidebar-width);max-width:100%;background-color:var(--vp-sidebar-bg-color);opacity:1;visibility:visible;box-shadow:none;transform:translate(0)}}@media (min-width: 1440px){.VPSidebar[data-v-7f44e717]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}@media (min-width: 960px){.curtain[data-v-7f44e717]{position:sticky;top:-64px;left:0;z-index:1;margin-top:calc(var(--vp-nav-height) * -1);margin-right:-32px;margin-left:-32px;height:var(--vp-nav-height);background-color:var(--vp-sidebar-bg-color)}}.nav[data-v-7f44e717]{outline:0}.group+.group[data-v-7f44e717]{border-top:1px solid var(--vp-c-divider);padding-top:10px}@media (min-width: 960px){.group[data-v-7f44e717]{padding-top:10px;width:calc(var(--vp-sidebar-width) - 64px)}}.VPSkipLink[data-v-0f60ec36]{top:8px;left:8px;padding:8px 16px;z-index:999;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;color:var(--vp-c-brand-1);box-shadow:var(--vp-shadow-3);background-color:var(--vp-c-bg)}.VPSkipLink[data-v-0f60ec36]:focus{height:auto;width:auto;clip:auto;clip-path:none}@media (min-width: 1280px){.VPSkipLink[data-v-0f60ec36]{top:14px;left:16px}}.Layout[data-v-5a346dfe]{display:flex;flex-direction:column;min-height:100vh}.VPHomeSponsors[data-v-96bd69d5]{border-top:1px solid var(--vp-c-gutter);padding:88px 24px 96px;background-color:var(--vp-c-bg)}.container[data-v-96bd69d5]{margin:0 auto;max-width:1152px}.love[data-v-96bd69d5]{margin:0 auto;width:28px;height:28px;color:var(--vp-c-text-3)}.icon[data-v-96bd69d5]{width:28px;height:28px;fill:currentColor}.message[data-v-96bd69d5]{margin:0 auto;padding-top:10px;max-width:320px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.sponsors[data-v-96bd69d5]{padding-top:32px}.action[data-v-96bd69d5]{padding-top:40px;text-align:center}.VPTeamPage[data-v-10b00018]{padding-bottom:96px}@media (min-width: 768px){.VPTeamPage[data-v-10b00018]{padding-bottom:128px}}.VPTeamPageSection+.VPTeamPageSection[data-v-10b00018-s],.VPTeamMembers+.VPTeamPageSection[data-v-10b00018-s]{margin-top:64px}.VPTeamMembers+.VPTeamMembers[data-v-10b00018-s]{margin-top:24px}@media (min-width: 768px){.VPTeamPageTitle+.VPTeamPageSection[data-v-10b00018-s]{margin-top:16px}.VPTeamPageSection+.VPTeamPageSection[data-v-10b00018-s],.VPTeamMembers+.VPTeamPageSection[data-v-10b00018-s]{margin-top:96px}}.VPTeamMembers[data-v-10b00018-s]{padding:0 24px}@media (min-width: 768px){.VPTeamMembers[data-v-10b00018-s]{padding:0 48px}}@media (min-width: 960px){.VPTeamMembers[data-v-10b00018-s]{padding:0 64px}}.VPTeamPageTitle[data-v-bf2cbdac]{padding:48px 32px;text-align:center}@media (min-width: 768px){.VPTeamPageTitle[data-v-bf2cbdac]{padding:64px 48px 48px}}@media (min-width: 960px){.VPTeamPageTitle[data-v-bf2cbdac]{padding:80px 64px 48px}}.title[data-v-bf2cbdac]{letter-spacing:0;line-height:44px;font-size:36px;font-weight:500}@media (min-width: 768px){.title[data-v-bf2cbdac]{letter-spacing:-.5px;line-height:56px;font-size:48px}}.lead[data-v-bf2cbdac]{margin:0 auto;max-width:512px;padding-top:12px;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 768px){.lead[data-v-bf2cbdac]{max-width:592px;letter-spacing:.15px;line-height:28px;font-size:20px}}.VPTeamPageSection[data-v-b1a88750]{padding:0 32px}@media (min-width: 768px){.VPTeamPageSection[data-v-b1a88750]{padding:0 48px}}@media (min-width: 960px){.VPTeamPageSection[data-v-b1a88750]{padding:0 64px}}.title[data-v-b1a88750]{position:relative;margin:0 auto;max-width:1152px;text-align:center;color:var(--vp-c-text-2)}.title-line[data-v-b1a88750]{position:absolute;top:16px;left:0;width:100%;height:1px;background-color:var(--vp-c-divider)}.title-text[data-v-b1a88750]{position:relative;display:inline-block;padding:0 24px;letter-spacing:0;line-height:32px;font-size:20px;font-weight:500;background-color:var(--vp-c-bg)}.lead[data-v-b1a88750]{margin:0 auto;max-width:480px;padding-top:12px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.members[data-v-b1a88750]{padding-top:40px}.VPTeamMembersItem[data-v-28528e42]{display:flex;flex-direction:column;gap:2px;border-radius:12px;width:100%;height:100%;overflow:hidden}.VPTeamMembersItem.small .profile[data-v-28528e42]{padding:32px}.VPTeamMembersItem.small .data[data-v-28528e42]{padding-top:20px}.VPTeamMembersItem.small .avatar[data-v-28528e42]{width:64px;height:64px}.VPTeamMembersItem.small .name[data-v-28528e42]{line-height:24px;font-size:16px}.VPTeamMembersItem.small .affiliation[data-v-28528e42]{padding-top:4px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .desc[data-v-28528e42]{padding-top:12px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .links[data-v-28528e42]{margin:0 -16px -20px;padding:10px 0 0}.VPTeamMembersItem.medium .profile[data-v-28528e42]{padding:48px 32px}.VPTeamMembersItem.medium .data[data-v-28528e42]{padding-top:24px;text-align:center}.VPTeamMembersItem.medium .avatar[data-v-28528e42]{width:96px;height:96px}.VPTeamMembersItem.medium .name[data-v-28528e42]{letter-spacing:.15px;line-height:28px;font-size:20px}.VPTeamMembersItem.medium .affiliation[data-v-28528e42]{padding-top:4px;font-size:16px}.VPTeamMembersItem.medium .desc[data-v-28528e42]{padding-top:16px;max-width:288px;font-size:16px}.VPTeamMembersItem.medium .links[data-v-28528e42]{margin:0 -16px -12px;padding:16px 12px 0}.profile[data-v-28528e42]{flex-grow:1;background-color:var(--vp-c-bg-soft)}.data[data-v-28528e42]{text-align:center}.avatar[data-v-28528e42]{position:relative;flex-shrink:0;margin:0 auto;border-radius:50%;box-shadow:var(--vp-shadow-3)}.avatar-img[data-v-28528e42]{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;object-fit:cover}.name[data-v-28528e42]{margin:0;font-weight:600}.affiliation[data-v-28528e42]{margin:0;font-weight:500;color:var(--vp-c-text-2)}.org.link[data-v-28528e42]{color:var(--vp-c-text-2);transition:color .25s}.org.link[data-v-28528e42]:hover{color:var(--vp-c-brand-1)}.desc[data-v-28528e42]{margin:0 auto}.desc[data-v-28528e42] a{font-weight:500;color:var(--vp-c-brand-1);text-decoration-style:dotted;transition:color .25s}.links[data-v-28528e42]{display:flex;justify-content:center;height:56px}.sp-link[data-v-28528e42]{display:flex;justify-content:center;align-items:center;text-align:center;padding:16px;font-size:14px;font-weight:500;color:var(--vp-c-sponsor);background-color:var(--vp-c-bg-soft);transition:color .25s,background-color .25s}.sp .sp-link.link[data-v-28528e42]:hover,.sp .sp-link.link[data-v-28528e42]:focus{outline:none;color:var(--vp-c-white);background-color:var(--vp-c-sponsor)}.sp-icon[data-v-28528e42]{margin-right:8px;width:16px;height:16px;fill:currentColor}.VPTeamMembers.small .container[data-v-6cb0dbc4]{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}.VPTeamMembers.small.count-1 .container[data-v-6cb0dbc4]{max-width:276px}.VPTeamMembers.small.count-2 .container[data-v-6cb0dbc4]{max-width:576px}.VPTeamMembers.small.count-3 .container[data-v-6cb0dbc4]{max-width:876px}.VPTeamMembers.medium .container[data-v-6cb0dbc4]{grid-template-columns:repeat(auto-fit,minmax(256px,1fr))}@media (min-width: 375px){.VPTeamMembers.medium .container[data-v-6cb0dbc4]{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}}.VPTeamMembers.medium.count-1 .container[data-v-6cb0dbc4]{max-width:368px}.VPTeamMembers.medium.count-2 .container[data-v-6cb0dbc4]{max-width:760px}.container[data-v-6cb0dbc4]{display:grid;gap:24px;margin:0 auto;max-width:1152px} diff --git a/docs/document/component/contextmenu.html b/docs/document/component/contextmenu.html index abbada3e6..be09b6f71 100644 --- a/docs/document/component/contextmenu.html +++ b/docs/document/component/contextmenu.html @@ -5,103 +5,105 @@ 右键菜单 | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

右键菜单 ​

配置 ​

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本

创建 ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
+    
Artplayer.js
Appearance
右键菜单 ​
配置 ​
属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
创建 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
 
-art.contextmenu.show = true;
+art.contextmenu.show = true;
 
-// Get the Element of contextmenu by name
-console.info(art.contextmenu['your-menu']);
添加 ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+// Get the Element of contextmenu by name
+console.info(art.contextmenu['your-menu']);
添加 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.contextmenu.add({
-    name: 'your-menu',
-    html: 'Your Menu',
-    click: function (...args) {
-        console.info(args);
-        art.contextmenu.show = false;
-    },
-});
+art.contextmenu.add({
+    name: 'your-menu',
+    html: 'Your Menu',
+    click: function (...args) {
+        console.info(args);
+        art.contextmenu.show = false;
+    },
+});
 
-art.contextmenu.show = true;
+art.contextmenu.show = true;
 
-// Get the Element of contextmenu by name
-console.info(art.contextmenu['your-menu']);
删除 ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
+// Get the Element of contextmenu by name
+console.info(art.contextmenu['your-menu']);
删除 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
 
-art.contextmenu.show = true;
+art.contextmenu.show = true;
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the contextmenu by name
-        art.contextmenu.remove('your-menu')
-    }, 3000);
-});
更新 ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the contextmenu by name
+        art.contextmenu.remove('your-menu')
+    }, 3000);
+});
更新 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
 
-art.contextmenu.show = true;
+art.contextmenu.show = true;
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the contextmenu by name
-        art.contextmenu.update({
-            name: 'your-menu',
-            html: 'Your New Menu',
-        })
-    }, 3000);
-});

-    
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the contextmenu by name
+        art.contextmenu.update({
+            name: 'your-menu',
+            html: 'Your New Menu',
+        })
+    }, 3000);
+});
+ \ No newline at end of file diff --git a/docs/document/component/controls.html b/docs/document/component/controls.html index 516397e5c..92417e9b5 100644 --- a/docs/document/component/controls.html +++ b/docs/document/component/controls.html @@ -5,150 +5,152 @@ 控制器 | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

控制器 ​

配置 ​

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
positionStringleft 和 right 控制控制器出现的左右位置
selectorArray选择列表的对象数组
onSelectFunction选择列表的元素被点击时触发的函数

创建 ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'your-button',
-            index: 10,
-            position: 'left',
-            html: 'Your Button',
-            tooltip: 'Your Button',
-            style: {
-                color: 'red',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-        {
-            name: 'subtitle',
-            position: 'right',
-            html: 'Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: '<span style="color:red">subtitle 01</span>',
-                },
-                {
-                    html: '<span style="color:yellow">subtitle 02</span>',
-                },
-            ],
-            onSelect: function (item, $dom) {
-                console.info(item, $dom);
-                return 'Your ' + item.html;
-            },
-        },
-    ],
-});
+    
Artplayer.js
Appearance
控制器 ​
配置 ​
属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
positionStringleft 和 right 控制控制器出现的左右位置
selectorArray选择列表的对象数组
onSelectFunction选择列表的元素被点击时触发的函数
创建 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'your-button',
+            index: 10,
+            position: 'left',
+            html: 'Your Button',
+            tooltip: 'Your Button',
+            style: {
+                color: 'red',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+        {
+            name: 'subtitle',
+            position: 'right',
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">subtitle 01</span>',
+                },
+                {
+                    html: '<span style="color:yellow">subtitle 02</span>',
+                },
+            ],
+            onSelect: function (item, $dom) {
+                console.info(item, $dom);
+                return 'Your ' + item.html;
+            },
+        },
+    ],
+});
 
-// Get the Element of control by name
-console.info(art.controls['your-button']);
-console.info(art.controls['subtitle']);
添加 ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+// Get the Element of control by name
+console.info(art.controls['your-button']);
+console.info(art.controls['subtitle']);
添加 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.controls.add({
-    name: 'button1',
-    index: 10,
-    position: 'left',
-    html: 'Your Button',
-    tooltip: 'Your Button',
-    style: {
-        color: 'red',
-    },
-    click: function (...args) {
-        console.info('click', args);
-    },
-    mounted: function (...args) {
-        console.info('mounted', args);
-    },
-});
+art.controls.add({
+    name: 'button1',
+    index: 10,
+    position: 'left',
+    html: 'Your Button',
+    tooltip: 'Your Button',
+    style: {
+        color: 'red',
+    },
+    click: function (...args) {
+        console.info('click', args);
+    },
+    mounted: function (...args) {
+        console.info('mounted', args);
+    },
+});
 
-// Get the Element of control by name
-console.info(art.controls['button1']);
删除 ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'Your Button',
-            tooltip: 'Your Button',
-            style: {
-                color: 'red',
-            },
-        }
-    ]
-});
+// Get the Element of control by name
+console.info(art.controls['button1']);
删除 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'Your Button',
+            tooltip: 'Your Button',
+            style: {
+                color: 'red',
+            },
+        }
+    ]
+});
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the control by name
-        art.controls.remove('button1');
-    }, 3000);
-});
更新 ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: 'subtitle 01',
-                },
-                {
-                    html: 'subtitle 02',
-                },
-            ],
-        }
-    ]
-});
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the control by name
+        art.controls.remove('button1');
+    }, 3000);
+});
更新 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: 'subtitle 01',
+                },
+                {
+                    html: 'subtitle 02',
+                },
+            ],
+        }
+    ]
+});
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the control by name
-        art.controls.update({
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'New Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: 'new subtitle 01',
-                },
-                {
-                    html: 'new subtitle 02',
-                },
-            ],
-        });
-    }, 3000);
-});

-    
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the control by name
+        art.controls.update({
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'New Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: 'new subtitle 01',
+                },
+                {
+                    html: 'new subtitle 02',
+                },
+            ],
+        });
+    }, 3000);
+});
+ \ No newline at end of file diff --git a/docs/document/component/layers.html b/docs/document/component/layers.html index 779483bb2..690ef7413 100644 --- a/docs/document/component/layers.html +++ b/docs/document/component/layers.html @@ -5,122 +5,124 @@ 业务层 | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

业务层 ​

配置 ​

属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本

创建 ​

▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: `<img style="width: 100px" src="${img}">`,
-            tooltip: 'Potser Tip',
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-    ],
-});
+    
Artplayer.js
Appearance
业务层 ​
配置 ​
属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
创建 ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'potser',
+            html: `<img style="width: 100px" src="${img}">`,
+            tooltip: 'Potser Tip',
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+    ],
+});
 
-// Get the Element of layer by name
-console.info(art.layers['potser']);
添加 ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+// Get the Element of layer by name
+console.info(art.layers['potser']);
添加 ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.layers.add({
-    name: 'potser',
-    html: `<img style="width: 100px" src="${img}">`,
-    tooltip: 'Potser Tip',
-    style: {
-        position: 'absolute',
-        top: '50px',
-        right: '50px',
-    },
-    click: function (...args) {
-        console.info('click', args);
-    },
-    mounted: function (...args) {
-        console.info('mounted', args);
-    },
-});
+art.layers.add({
+    name: 'potser',
+    html: `<img style="width: 100px" src="${img}">`,
+    tooltip: 'Potser Tip',
+    style: {
+        position: 'absolute',
+        top: '50px',
+        right: '50px',
+    },
+    click: function (...args) {
+        console.info('click', args);
+    },
+    mounted: function (...args) {
+        console.info('mounted', args);
+    },
+});
 
-// Get the Element of layer by name
-console.info(art.layers['potser']);
删除 ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: `<img style="width: 100px" src="${img}">`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-        },
-    ],
-});
+// Get the Element of layer by name
+console.info(art.layers['potser']);
删除 ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'potser',
+            html: `<img style="width: 100px" src="${img}">`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+        },
+    ],
+});
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the layer by name
-        art.layers.remove('potser');
-    }, 3000);
-});
更新 ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: `<img style="width: 100px" src="${img}">`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-        },
-    ],
-});
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the layer by name
+        art.layers.remove('potser');
+    }, 3000);
+});
更新 ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'potser',
+            html: `<img style="width: 100px" src="${img}">`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+        },
+    ],
+});
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the layer by name
-        art.layers.update({
-            name: 'potser',
-            html: `<img style="width: 200px" src="${img}">`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                left: '50px',
-            },
-        });
-    }, 3000);
-});

-    
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the layer by name
+        art.layers.update({
+            name: 'potser',
+            html: `<img style="width: 200px" src="${img}">`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                left: '50px',
+            },
+        });
+    }, 3000);
+});
+ \ No newline at end of file diff --git a/docs/document/component/setting.html b/docs/document/component/setting.html index a22acc9b6..43d613db2 100644 --- a/docs/document/component/setting.html +++ b/docs/document/component/setting.html @@ -5,227 +5,229 @@ 设置面板 | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

设置面板 ​

内置 ​

须先打开设置面板，然后自带四个内置项：flip, playbackRate, aspectRatio, subtitleOffset

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-	setting: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    subtitleOffset: true,
-});

创建 - 选择列表 ​

属性类型描述
htmlString, Element元素的 DOM
iconString, Element元素的图标
selectorArray元素列表
onSelectFunction元素点击事件
widthNumber列表宽度
tooltipString提示文本
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Subtitle',
-            width: 250,
-            tooltip: 'Subtitle 01',
-            selector: [
-                {
-                    default: true,
-                    html: '<span style="color:red">Subtitle 01</span>',
-                    url: '/assets/sample/subtitle.srt?id=1',
-                },
-                {
-                    html: '<span style="color:yellow">Subtitle 02</span>',
-                    url: '/assets/sample/subtitle.srt?id=2',
-                },
-            ],
-            onSelect: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                art.subtitle.url = item.url;
-                return item.html;
-            },
-        },
-        {
-            html: 'Quality',
-            width: 150,
-            tooltip: '1080P',
-            selector: [
-                {
-                    default: true,
-                    html: '1080P',
-                    url: '/assets/sample/video.mp4?id=1080',
-                },
-                {
-                    html: '720P',
-                    url: '/assets/sample/video.mp4?id=720',
-                },
-                {
-                    html: '360P',
-                    url: '/assets/sample/video.mp4?id=360',
-                },
-            ],
-            onSelect: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                art.switchQuality(item.url, item.html);
-                return item.html;
-            },
-        },
-    ],
-});

创建 - 列表嵌套 ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Multi-level',
-            selector: [
-                {
-                    html: 'Setting 01',
-                    width: 150,
-                    selector: [
-                        {
-                            html: 'Setting 01 - 01',
-                        },
-                        {
-                            html: 'Setting 01 - 02',
-                        },
-                    ],
-                    onSelect: function (item, $dom, event) {
-                        console.info(item, $dom, event);
-                        return item.html;
-                    },
-                },
-                {
-                    html: 'Setting 02',
-                    width: 150,
-                    selector: [
-                        {
-                            html: 'Setting 02 - 01',
-                        },
-                        {
-                            html: 'Setting 02 - 02',
-                        },
-                    ],
-                    onSelect: function (item, $dom, event) {
-                        console.info(item, $dom, event);
-                        return item.html;
-                    },
-                },
-            ],
-        },
-    ],
-});

创建 - 切换按钮 ​

属性类型描述
htmlString, Element元素的 DOM 元素
iconString, Element元素的图标
switchBoolean按钮默认状态
onSwitchFunction按钮切换事件
tooltipString提示文本
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'PIP Mode',
-            tooltip: 'Close',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            switch: false,
-            onSwitch: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                const nextState = !item.switch;
-                art.pip = nextState;
-                item.tooltip = nextState ? 'Open' : 'Close';
-                return nextState;
-            },
-        },
-    ],
-});

创建 - 范围滑块 ​

属性类型描述
htmlString, Element元素的 DOM 元素
iconString, Element元素的图标
rangeArray默认状态数组
onRangeFunction完成时触发的事件
onChangeFunction变化时触发的事件
tooltipString提示文本
js
const range = [5, 1, 10, 1];
-const value = range[0];
-const min = range[1];
-const max = range[2];
-const step = range[3];
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-            onChange: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                return item.range + 'x';
-            },
-        },
-    ],
-});

添加 ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
+    
Artplayer.js
Appearance
设置面板 ​
内置 ​
须先打开设置面板，然后自带四个内置项：flip, playbackRate, aspectRatio, subtitleOffset
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+	setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+});
创建 - 选择列表 ​
属性类型描述
htmlString, Element元素的 DOM
iconString, Element元素的图标
selectorArray元素列表
onSelectFunction元素点击事件
widthNumber列表宽度
tooltipString提示文本
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Subtitle',
+            width: 250,
+            tooltip: 'Subtitle 01',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">Subtitle 01</span>',
+                    url: '/assets/sample/subtitle.srt?id=1',
+                },
+                {
+                    html: '<span style="color:yellow">Subtitle 02</span>',
+                    url: '/assets/sample/subtitle.srt?id=2',
+                },
+            ],
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                art.subtitle.url = item.url;
+                return item.html;
+            },
+        },
+        {
+            html: 'Quality',
+            width: 150,
+            tooltip: '1080P',
+            selector: [
+                {
+                    default: true,
+                    html: '1080P',
+                    url: '/assets/sample/video.mp4?id=1080',
+                },
+                {
+                    html: '720P',
+                    url: '/assets/sample/video.mp4?id=720',
+                },
+                {
+                    html: '360P',
+                    url: '/assets/sample/video.mp4?id=360',
+                },
+            ],
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                art.switchQuality(item.url, item.html);
+                return item.html;
+            },
+        },
+    ],
+});
创建 - 列表嵌套 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Multi-level',
+            selector: [
+                {
+                    html: 'Setting 01',
+                    width: 150,
+                    selector: [
+                        {
+                            html: 'Setting 01 - 01',
+                        },
+                        {
+                            html: 'Setting 01 - 02',
+                        },
+                    ],
+                    onSelect: function (item, $dom, event) {
+                        console.info(item, $dom, event);
+                        return item.html;
+                    },
+                },
+                {
+                    html: 'Setting 02',
+                    width: 150,
+                    selector: [
+                        {
+                            html: 'Setting 02 - 01',
+                        },
+                        {
+                            html: 'Setting 02 - 02',
+                        },
+                    ],
+                    onSelect: function (item, $dom, event) {
+                        console.info(item, $dom, event);
+                        return item.html;
+                    },
+                },
+            ],
+        },
+    ],
+});
创建 - 切换按钮 ​
属性类型描述
htmlString, Element元素的 DOM 元素
iconString, Element元素的图标
switchBoolean按钮默认状态
onSwitchFunction按钮切换事件
tooltipString提示文本
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+            onSwitch: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                const nextState = !item.switch;
+                art.pip = nextState;
+                item.tooltip = nextState ? 'Open' : 'Close';
+                return nextState;
+            },
+        },
+    ],
+});
创建 - 范围滑块 ​
属性类型描述
htmlString, Element元素的 DOM 元素
iconString, Element元素的图标
rangeArray默认状态数组
onRangeFunction完成时触发的事件
onChangeFunction变化时触发的事件
tooltipString提示文本
js
const range = [5, 1, 10, 1];
+const value = range[0];
+const min = range[1];
+const max = range[2];
+const step = range[3];
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+            onChange: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                return item.range + 'x';
+            },
+        },
+    ],
+});
添加 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
 
-art.setting.show = true;
+art.setting.show = true;
 
-art.setting.add({
-    html: 'Slider',
-    tooltip: '5x',
-    icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-    range: [5, 1, 10, 1],
-});
删除 ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-    settings: [
-        {
-            name: 'slider',
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-        },
-    ],
-});
+art.setting.add({
+    html: 'Slider',
+    tooltip: '5x',
+    icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+    range: [5, 1, 10, 1],
+});
删除 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    settings: [
+        {
+            name: 'slider',
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+        },
+    ],
+});
 
-art.setting.show = true;
+art.setting.show = true;
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the setting by name
-        art.setting.remove('slider');
-    }, 3000);
-});
更新 ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            name: 'slider',
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-        },
-    ],
-});
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the setting by name
+        art.setting.remove('slider');
+    }, 3000);
+});
更新 ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            name: 'slider',
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+        },
+    ],
+});
 
-art.setting.show = true;
+art.setting.show = true;
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the setting by name
-        art.setting.update({
-            name: 'slider',
-            html: 'PIP Mode',
-            tooltip: 'Close',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            switch: false,
-        });
-    }, 3000);
-});

-    
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the setting by name
+        art.setting.update({
+            name: 'slider',
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+        });
+    }, 3000);
+});
+ \ No newline at end of file diff --git a/docs/document/en/advanced/built-in.html b/docs/document/en/advanced/built-in.html index 292924534..0a16aacb7 100644 --- a/docs/document/en/advanced/built-in.html +++ b/docs/document/en/advanced/built-in.html @@ -3,209 +3,211 @@ - 高级属性 | Artplayer.js + Advanced Properties | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

高级属性 ​

这里的 高级属性 是指挂载在 实例 的 二级属性，比较少用

option ​

播放器的选项

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    
Artplayer.js
Appearance
Advanced Properties ​
The advanced properties here refer to the secondary attributes mounted on the instance, which are less commonly used
option ​
Options for the player
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info(art.option);
提示
假如直接修改这个 option 对象，播放器不会马上做出响应
template ​
管理播放器所有的 DOM 元素
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+console.info(art.option);
Reminder
If you directly modify this option object, the player will not respond immediately.
template ​
Manages all of the DOM elements of the player
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info(art.template);
-console.info(art.template.$video);
提示
为了方便区别 DOM 元素和普通对象，播放器里的所有 DOM 元素都是以 $ 开头命名的
这是所有 DOM 元素的定义：artplayer/types/template.d.ts
events ​
管理播放器所有的 DOM 事件，实质上是代理了 addEventListener 和 removeEventListener, 当使用以下方法来处理事件，播放器销毁时也会自动销毁该事件
  • proxy 方法用于代理 DOM 事件
  • hover 方法用于代理自定义的 hover 事件
  • loadImg 方法用于监听图片的 load 加载事件
▶ Run Code
js
var container = document.querySelector('.artplayer-app');
+console.info(art.template);
+console.info(art.template.$video);
Warning
To easily distinguish between DOM elements and plain objects, all DOM elements in the player are named starting with a $
Here is the definition of all DOM elements: artplayer/types/template.d.ts
events ​
Manages all DOM events in the player, which is essentially a proxy for addEventListener and removeEventListener. When using the following methods to handle events, the event will also be automatically destroyed when the player is destroyed.
  • The proxy method is used to proxy DOM events
  • The hover method is used to proxy custom hover events
  • The loadImg method is used to listen for the load event of images
▶ Run Code
js
var container = document.querySelector('.artplayer-app');
 
-var art = new Artplayer({
-    container: container,
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: container,
+    url: '/assets/sample/video.mp4',
+});
 
-art.events.proxy(container, 'click', event => {
-	console.info('click', event);
-});
+art.events.proxy(container, 'click', event => {
+    console.info('click', event);
+});
 
-art.events.hover(container, (event) => {
-    console.info('mouseenter', event);
-}, (event) => {
-    console.info('mouseleave', event);
-});
+art.events.hover(container, (event) => {
+    console.info('mouseenter', event);
+}, (event) => {
+    console.info('mouseleave', event);
+});
 
-art.events.loadImg('/assets/sample/poster.jpg').then(img => {
-    console.info('loadImg', img);
-});
提示
假如你需要一些 DOM 事件只存在于播放器的生命周期上时，强烈建议使用这些函数，以避免造成内存泄漏
storage ​
管理播放器的本地存储
  • name 属性用于设置缓存的 key
  • set 方法用于设置缓存
  • get 方法用于获取缓存
  • del 方法用于删除缓存
  • clear 方法用于清空缓存
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.events.loadImg('/assets/sample/poster.jpg').then(img => {
+    console.info('loadImg', img);
+});
Warning
If you need some DOM events to only exist during the lifecycle of the player, it is strongly recommended to use these functions to avoid causing memory leaks
storage ​
Manages the local storage of the player
  • The name attribute is used to set the cache key
  • The set method is used to set the cache
  • The get method is used to get the cache
  • The del method is used to delete the cache
  • The clear method is used to clear the cache
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.storage.set('test', { foo: 'bar' });
-const test = art.storage.get('test');
-console.info(test);
-art.storage.del('test');
-art.storage.clear();
提示
默认所有播放器实例都是共享同一个 localStorage 的，而且默认的 key 是 artplayer_settings
如果你想不同的播放器使用不同的 localStorage，你可以修改 art.storage.name 即可
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.storage.set('test', { foo: 'bar' });
+const test = art.storage.get('test');
+console.info(test);
+art.storage.del('test');
+art.storage.clear();
Warning
By default, all player instances share the same localStorage, and the default key is artplayer_settings
If you want different players to use different localStorage, you can modify art.storage.name accordingly
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.storage.name = 'your-storage-key';
-art.storage.set('test', { foo: 'bar' });
icons ​
管理播放器所有的 svg 图标
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.storage.name = 'your-storage-key';
+art.storage.set('test', { foo: 'bar' });
icons ​
Manage all the svg icons of the player
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info(art.icons.loading);
这是所有图标的定义：
artplayer/types/icons.d.ts
i18n ​
管理播放器的 i18n
  • get 方法用于获取 i18n 的值
  • update 方法用于更新 i18n 对象
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+console.info(art.icons.loading);
This is the definition of all icons:
artplayer/types/icons.d.ts
i18n ​
Manage the player's i18n
  • The get method is used to retrieve the value of i18n
  • The update method is used to update the i18n object
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info(art.i18n.get('Play'));
+console.info(art.i18n.get('Play'));
 
-art.i18n.update({
-    'zh-cn': {
-        Play: 'Your Play'
-    }
-});
WARNING
使用 art.i18n.update 只能更新实例化之后的 i18n，假如想在实例化之前更新 i18n，请使用基础选项的 i18n 来更新
notice ​
管理播放器的提示语，只有一个 show 属性用于显示提示语
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.i18n.update({
+    'zh-cn': {
+        Play: 'Your Play'
+    }
+});
WARNING
Using art.i18n.update can only update i18n after instantiation. If you want to update i18n before instantiation, please use the i18n from the basic options for the update.
notice ​
Manage the player's notices, there's only one show property used to display notices.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.notice.show = 'Video Ready To Play';
-})
WARNING
如果想马上隐藏 notice 的显示：art.notice.show = '';
layers ​
管理播放器的层
  • add 方法用于动态添加层
  • show 属性用于设置是否显示全部层
  • toggle 属性用于切换是否显示全部层
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.notice.show = 'Video Ready To Play';
+})
WARNING
To immediately hide the display of notice: art.notice.show = '';
layers ​
Manage the layers of the player
  • The add method is used for dynamically adding layers
  • The remove method is used for dynamically removing layers
  • The update method is used for dynamically updating layers
  • The show property is used to set whether to display all layers or not
  • The toggle method is used to toggle the display of all layers
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.layers.add({
-        html: 'Some Text',
-    });
+art.on('ready', () => {
+    art.layers.add({
+        html: 'Some Text',
+    });
 
-	setTimeout(() => {
-		art.layers.show = false;
-	}, 1000);
-});
组件配置 请参考以下地址：
/component/layers.html
controls ​
管理播放器的控制器
  • add 方法用于动态添加控制器
  • show 属性用于设置是否显示全部控制器
  • toggle 属性用于切换是否显示全部控制器
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+	setTimeout(() => {
+		art.layers.show = false;
+	}, 1000);
+});
Component configuration Please refer to the following address:
/component/layers.html
controls ​
Manage the player's controllers
  • add method is used to dynamically add controllers
  • remove method is used to dynamically remove controllers
  • update method is used to dynamically update controllers
  • show property is used to set whether to display all controllers
  • toggle method is used to toggle the display of all controllers
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.controls.add({
-        html: 'Some Text',
-        position: 'left',
-    });
+art.on('ready', () => {
+    art.controls.add({
+        html: 'Some Text',
+        position: 'left',
+    });
 
-	setTimeout(() => {
-		art.controls.show = false;
-	}, 1000);
-});
组件配置 请参考以下地址：
/component/controls.html
contextmenu ​
管理播放器的右键菜单
  • add 方法用于动态添加菜单
  • show 属性用于设置是否显示全部菜单
  • toggle 属性用于切换是否显示全部菜单
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+	setTimeout(() => {
+		art.controls.show = false;
+	}, 1000);
+});
Component Configuration Please refer to the following address:
/component/controls.html
contextmenu ​
Manage the right-click context menu of the player
  • The add method is used to dynamically add menu items
  • The remove method is used to dynamically remove menu items
  • The update method is used to dynamically update menu items
  • The show attribute is used to set whether to show all menu items
  • The toggle method is used to switch the visibility of all menu items
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.contextmenu.add({
-        html: 'Some Text',
-    });
+art.on('ready', () => {
+    art.contextmenu.add({
+        html: 'Some Text',
+    });
 
-    art.contextmenu.show = true;
-	setTimeout(() => {
-		art.contextmenu.show = false;
-	}, 1000);
-});
组件配置 请参考以下地址：
/component/contextmenu.html
subtitle ​
管理播放器的字幕功能
  • url 属性设置和返回当前字幕地址
  • style 方法设置当前字幕的样式
  • switch 方法设置当前字幕地址和选项
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    art.contextmenu.show = true;
+    setTimeout(() => {
+        art.contextmenu.show = false;
+    }, 1000);
+});
Component Configuration Please refer to the following address:
/component/contextmenu.html
subtitle ​
Manage the subtitle features of the player
  • url property sets and returns the current subtitle address
  • style method sets the style of the current subtitle
  • switch method sets the current subtitle address and options
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.subtitle.url = '/assets/sample/subtitle.srt'
-    art.subtitle.style({
-        color: 'red',
-    });
-});
loading ​
管理播放器的加载层
  • show 属性用于设置是否显示加载层
  • toggle 属性用于切换是否显示加载层
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.subtitle.url = '/assets/sample/subtitle.srt'
+    art.subtitle.style({
+        color: 'red',
+    });
+});
loading ​
Manage the loading layer of the player
  • show property is used to set whether to display the loading layer
  • The toggle attribute is used to toggle the display of the loading layer
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.loading.show = true;
-	setTimeout(() => {
-		art.loading.show = false;
-	}, 1000);
-});
hotkey ​
管理播放器的快捷键功能
  • add 方法用于添加快捷键
  • remove 方法用于删除快捷键
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.loading.show = true;
+	setTimeout(() => {
+		art.loading.show = false;
+	}, 1000);
+});
hotkey ​
Manage the hotkey functionality of the player
  • The add method is used to add a hotkey
  • The remove method is used to remove a hotkey
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-function hotkeyEvent(event) {
-    console.info('click', event);
-}
+function hotkeyEvent(event) {
+    console.info('click', event);
+}
 
-art.on('ready', () => {
-    art.hotkey.add(32, hotkeyEvent);
-    setTimeout(() => {
-		art.hotkey.remove(32, hotkeyEvent);
-	}, 5000);
-});
提示
只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效
mask ​
管理播放器的遮罩层
  • show 属性用于设置是否显示遮罩层
  • toggle 属性用于切换是否显示遮罩层
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.hotkey.add(32, hotkeyEvent);
+    setTimeout(() => {
+		art.hotkey.remove(32, hotkeyEvent);
+	}, 5000);
+});
Warning
Shortcut keys will only work after the player has gained focus (e.g., after clicking on the player).
mask ​
Manage the player's mask layer
  • show property is used to set whether to display the mask layer
  • toggle property is used to toggle the display of the mask layer
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.mask.show = false;
-	setTimeout(() => {
-		art.mask.show = true;
-	}, 1000);
-});
setting ​
管理播放器的设置面板
  • add 方法用于动态添加设置项
  • show 属性用于设置是否显示全部设置项
  • toggle 属性用于切换是否显示全部设置项
  • update 方法动态更新设置项
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    subtitleOffset: true,
-});
+art.on('ready', () => {
+    art.mask.show = false;
+    setTimeout(() => {
+        art.mask.show = true;
+    }, 1000);
+});
setting ​
Manage the player's settings panel
  • add method is used to dynamically add a setting item
  • remove method is used to dynamically remove a setting item
  • update method is used to dynamically update a setting item
  • show property is used to set whether to display all the setting items
  • toggle method is used to toggle whether to display all the setting items
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+});
 
-art.on('ready', () => {
-    art.setting.show = true;
-	setTimeout(() => {
-		art.setting.show = false;
-	}, 1000);
-});
设置面板 请参考以下地址
/component/setting.html
plugins ​
管理播放器的插件功能，只有一个方法 add 用于动态添加插件
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.setting.show = true;
+	setTimeout(() => {
+		art.setting.show = false;
+	}, 1000);
+});
Settings Panel Please refer to the following link
/component/setting.html
plugins ​
Manage the player's plugin features, with only one method add to dynamically add plugins
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
+function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
 
-art.on('ready', () => {
-    art.plugins.add(myPlugin);
-});

-    
+art.on('ready', () => {
+    art.plugins.add(myPlugin);
+});
+ \ No newline at end of file diff --git a/docs/document/en/advanced/class.html b/docs/document/en/advanced/class.html index 18b4d9f94..55c60a442 100644 --- a/docs/document/en/advanced/class.html +++ b/docs/document/en/advanced/class.html @@ -3,30 +3,32 @@ - 静态属性 | Artplayer.js + Static Properties | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

静态属性 ​

这里的 静态属性 是指挂载在 构造函数 的 一级属性，非常少使用

提示

有些属性是全大写的，说明这些属性是不稳定的，可能会在将来被更改

instances ​

返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性

▶ Run Code
js
console.info([...Artplayer.instances]);
+    
Artplayer.js
Appearance
Static Properties ​
Here, Static Properties refer to the first-level properties mounted on the constructor, which are very rarely used.
instances ​
Returns an array of all player instances. You can use this property when you want to manage multiple players at the same time.
▶ Run Code
js
console.info([...Artplayer.instances]);
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-console.info([...Artplayer.instances]);
version ​
返回播放器的版本信息
▶ Run Code
js
console.info(Artplayer.version);
env ​
返回播放器的环境变量
▶ Run Code
js
console.info(Artplayer.env);
build ​
返回播放器的打包时间
▶ Run Code
js
console.info(Artplayer.build);
config ​
返回视频的默认配置
▶ Run Code
js
console.info(Artplayer.config);
utils ​
返回播放器的工具函数集合
▶ Run Code
js
console.info(Artplayer.utils);
全部工具函数请参考以下地址：
artplayer/types/utils.d.ts
scheme ​
返回播放器选项的校验方案
▶ Run Code
js
console.info(Artplayer.scheme);
Emitter ​
返回事件分发器的构造函数
▶ Run Code
js
console.info(Artplayer.Emitter);
validator ​
返回选项的校验函数
▶ Run Code
js
console.info(Artplayer.validator);
kindOf ​
返回类型检测的函数工具
▶ Run Code
js
console.info(Artplayer.kindOf);
html ​
返回播放器所需的 html 字符串
▶ Run Code
js
console.info(Artplayer.html);
option ​
返回播放器的默认选项
▶ Run Code
js
console.info(Artplayer.option);

-    
+console.info([...Artplayer.instances]);

version ​

Returns the version information of the player.

▶ Run Code
js
console.info(Artplayer.version);

env ​

Returns the environment variables of the player.

▶ Run Code
js
console.info(Artplayer.env);

build ​

Returns the build time of the player

▶ Run Code
js
console.info(Artplayer.build);

config ​

Returns the default configuration of the video

▶ Run Code
js
console.info(Artplayer.config);

utils ​

Returns a collection of utility functions for the player

▶ Run Code
js
console.info(Artplayer.utils);

For the full list of utility functions, please refer to the following address:

artplayer/types/utils.d.ts

scheme ​

Returns the validation scheme for the player options

▶ Run Code
js
console.info(Artplayer.scheme);

Emitter ​

Returns the constructor for the event dispatcher

▶ Run Code
js
console.info(Artplayer.Emitter);

validator ​

Returns the validation function for options

▶ Run Code
js
console.info(Artplayer.validator);

kindOf ​

Returns the function tool for type checking

▶ Run Code
js
console.info(Artplayer.kindOf);

html ​

Returns the html string required for the player

▶ Run Code
js
console.info(Artplayer.html);

option ​

Returns the player's default options

▶ Run Code
js
console.info(Artplayer.option);
+ \ No newline at end of file diff --git a/docs/document/en/advanced/event.html b/docs/document/en/advanced/event.html index 5c46a49c2..0d36aa975 100644 --- a/docs/document/en/advanced/event.html +++ b/docs/document/en/advanced/event.html @@ -3,377 +3,433 @@ - 实例事件 | Artplayer.js + Example Events | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

实例事件 ​

播放器的事件分为两种，一种视频的 原生事件 (前缀 video:)，另外一种是 自定义事件

监听事件：

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    
Artplayer.js
Appearance
Example Events ​
Player events are divided into two types, one is the video's native events (prefix video:), the other is custom events
Listening to events:
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('video:canplay', () => {
-    console.info('video:canplay');
-});
只监听一次事件：
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('video:canplay', () => {
+    console.info('video:canplay');
+});
Listen to an event only once:
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.once('video:canplay', () => {
-    console.info('video:canplay');
-});
手动触发事件：
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.once('video:canplay', () => {
+    console.info('video:canplay');
+});
Manually trigger an event:
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.emit('focus');
移除事件：
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.emit('focus');
Remove an event:
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-const onReady = () => {
-    console.info('ready');
-    art.off('ready', onReady);
-}
+const onReady = () => {
+    console.info('ready');
+    art.off('ready', onReady);
+}
 
-art.on('ready', onReady);
全部事件请参考以下地址：
artplayer/types/events.d.ts
ready ​
当播放器首次可以播放器时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', onReady);
For a full list of events, please refer to the following address:
artplayer/types/events.d.ts
ready ​
Triggered when the player is able to play for the first time
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info('ready');
-});
restart ​
当播放器切换地址后并可以播放时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info('ready');
+});
restart ​
Triggered when the player switches the address and is able to play
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.url = '/assets/sample/video.mp4'
-});
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4'
+});
 
-art.on('restart', (url) => {
-    console.info('restart', url);
-});
loop ​
当出现区间循环时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('restart', (url) => {
+    console.info('restart', url);
+});
pause ​
Triggered when the player is paused
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('loop', (start, end) => {
-    console.info('loop', start, end);
-});
pause ​
当播放器暂停时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('pause', () => {
+    console.info('pause');
+});
play ​
Triggered when the player starts playing
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('pause', () => {
-    console.info('pause');
-});
play ​
当播放器播放时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('play', () => {
+    console.info('play');
+});
hotkey ​
Triggered when a hotkey on the player is pressed
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('play', () => {
-    console.info('play');
-});
hotkey ​
当播放器热键被按下时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('hotkey', (event) => {
+    console.info('hotkey', event);
+});
destroy ​
Triggered when the player is destroyed
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('hotkey', (event) => {
-    console.info('hotkey', event);
-});
destroy ​
当播放器销毁时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.destroy();
+});
 
-art.on('ready', () => {
-    art.destroy();
-});
+art.on('destroy', () => {
+    console.info('destroy');
+});
focus ​
Triggered when the player gains focus
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('destroy', () => {
-    console.info('destroy');
-});
focus ​
当播放器获得焦点时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('focus', (event) => {
+    console.info('focus', event);
+});
blur ​
Triggered when the player loses focus
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('focus', (event) => {
-    console.info('focus', event);
-});
blur ​
当播放器失去焦点时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('blur', (event) => {
+    console.info('blur', event);
+});
dblclick ​
Triggered when the player is double-clicked
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('blur', (event) => {
-    console.info('blur', event);
-});
dblclick ​
当播放器被双击时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('dblclick', (event) => {
+    console.info('dblclick', event);
+});
click ​
Triggered when the player is clicked
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('dblclick', (event) => {
-    console.info('dblclick', event);
-});
click ​
当播放器被单击时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('click', (event) => {
+    console.info('click', event);
+});
error ​
Triggered when an error occurs while the player is loading the video
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});
 
-art.on('click', (event) => {
-    console.info('click', event);
-});
error ​
当播放器加载视频发生错误时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});
+art.on('error', (error, reconnectTime) => {
+    console.info(error, reconnectTime);
+});
hover ​
Triggered when the player is hovered or unhovered by the mouse
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('error', (error, reconnectTime) => {
-    console.info(error, reconnectTime);
-});
hover ​
当播放器被鼠标移出或者移入时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('hover', (state, event) => {
+    console.info('hover', state, event);
+});
mousemove ​
Triggered when the mouse moves over the player
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('hover', (state, event) => {
-    console.info('hover', state, event);
-});
mousemove ​
当播放器被鼠标经过时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('mousemove', (event) => {
+    console.info('mousemove', event);
+});
resize ​
Triggered when the player size changes
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('mousemove', (event) => {
-    console.info('mousemove', event);
-});
resize ​
当播放器尺寸变化时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('resize', () => {
+    console.info('resize');
+});
view ​
Triggered when the player appears in the viewport
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('resize', () => {
-    console.info('resize');
-});
view ​
当播放器出现在视口时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
-
-art.on('view', (state) => {
-    console.info('view', state);
-});
lock ​
在移动端，当锁定的状态发生变化时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lock: true,
-});
+art.on('view', (state) => {
+    console.info('view', state);
+});
lock ​
On mobile, triggered when the locked state changes
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lock: true,
+});
 
-art.on('lock', (state) => {
-    console.info('lock', state);
-});
aspectRatio ​
当播放器长宽比变化时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    aspectRatio: true,
-    setting: true,
-});
+art.on('lock', (state) => {
+    console.info('lock', state);
+});
aspectRatio ​
Triggered when the aspect ratio of the player changes
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    aspectRatio: true,
+    setting: true,
+});
 
-art.on('aspectRatio', (aspectRatio) => {
-    console.info('aspectRatio', aspectRatio);
-});
autoHeight ​
当播放器自动设置高度时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('aspectRatio', (aspectRatio) => {
+    console.info('aspectRatio', aspectRatio);
+});
autoHeight ​
Triggered when the player automatically sets the height
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.autoHeight();
-});
+art.on('ready', () => {
+    art.autoHeight();
+});
 
-art.on('autoHeight', (height) => {
-    console.info('autoHeight', height);
-});
autoSize ​
当播放器自动设置尺寸时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-});
+art.on('autoHeight', (height) => {
+    console.info('autoHeight', height);
+});
autoSize ​
Triggered when the player automatically sets the size
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+});
 
-art.on('autoSize', () => {
-    console.info('autoSize');
-});
flip ​
当播放器发生翻转时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    flip: true,
-    setting: true,
-});
+art.on('autoSize', () => {
+    console.info('autoSize');
+});
flip ​
Triggered when the player flips
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    flip: true,
+    setting: true,
+});
 
-art.on('flip', (flip) => {
-    console.info('flip', flip);
-});
fullscreen ​
当播放器发生窗口全屏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-});
+art.on('flip', (flip) => {
+    console.info('flip', flip);
+});
fullscreen ​
Triggered when the player goes into full screen
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+});
 
-art.on('fullscreen', (state) => {
-    console.info('fullscreen', state);
-});
fullscreenWeb ​
当播放器发生网页全屏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
+art.on('fullscreen', (state) => {
+    console.info('fullscreen', state);
+});
fullscreenWeb ​
Triggered when the player enters web fullscreen
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
 
-art.on('fullscreenWeb', (state) => {
-    console.info('fullscreenWeb', state);
-});
mini ​
当播放器进入迷你模式时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('fullscreenWeb', (state) => {
+    console.info('fullscreenWeb', state);
+});
mini ​
Triggered when the player enters mini mode
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.mini = true;
-});
+art.on('ready', () => {
+    art.mini = true;
+});
 
-art.on('mini', (state) => {
-    console.info('mini', state);
-});
pip ​
当播放器进入画中画时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    pip: true,
-});
+art.on('mini', (state) => {
+    console.info('mini', state);
+});
pip ​
Triggered when the player enters Picture-in-Picture mode
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    pip: true,
+});
 
-art.on('pip', (state) => {
-    console.info('pip', state);
-});
screenshot ​
当播放器被截图时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    screenshot: true,
-});
+art.on('pip', (state) => {
+    console.info('pip', state);
+});
screenshot ​
Triggered when the player takes a screenshot
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
+});
 
-art.on('screenshot', (dataUri) => {
-    console.info('screenshot', dataUri);
-});
seek ​
当播放器发生时间跳转时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('screenshot', (dataUri) => {
+    console.info('screenshot', dataUri);
+});
seek ​
Triggered when the player jumps in time
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('seek', (currentTime) => {
-    console.info('seek', currentTime);
-});
subtitleOffset ​
当播放器发生字幕偏移时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitleOffset: true,
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-    setting: true,
-});
+art.on('seek', (currentTime) => {
+    console.info('seek', currentTime);
+});
subtitleOffset ​
Triggered when the subtitle offset occurs in the player
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitleOffset: true,
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+    setting: true,
+});
 
-art.on('subtitleOffset', (offset) => {
-    console.info('subtitleOffset', offset);
-});
subtitleUpdate ​
当字幕更新时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
+art.on('subtitleOffset', (offset) => {
+    console.info('subtitleOffset', offset);
+});
subtitleUpdate ​
Triggered when the subtitle updates
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
 
-art.on('subtitleUpdate', (text) => {
-    console.info('subtitleUpdate', text);
-});
subtitleLoad ​
当字幕加载时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
+art.on('subtitleUpdate', (text) => {
+    console.info('subtitleUpdate', text);
+});
subtitleLoad ​
Triggered when the subtitle loads
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
 
-art.on('subtitleLoad', (url) => {
-    console.info('subtitleLoad', url);
-});
subtitleSwitch ​
当字幕切换时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-});
+art.on('subtitleLoad', (url) => {
+    console.info('subtitleLoad', url);
+});
subtitleSwitch ​
Triggered when subtitles switch
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+});
 
-art.on('ready', () => {
-    art.subtitle.url = '/assets/sample/subtitle.ass';
-});
+art.on('ready', () => {
+    art.subtitle.url = '/assets/sample/subtitle.ass';
+});
 
-art.on('subtitleSwitch', (url) => {
-    console.info('subtitleSwitch', url);
-});
info ​
当信息面板显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('subtitleSwitch', (url) => {
+    console.info('subtitleSwitch', url);
+});
info ​
Triggered when the information panel is shown or hidden
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('info', (state) => {
-    console.log(state);
-});
layer ​
当自定义层显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('info', (state) => {
+    console.log(state);
+});
layer ​
Triggered when a custom layer is shown or hidden
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('layer', (state) => {
-    console.log(state);
-});
loading ​
当加载器显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('layer', (state) => {
+    console.log(state);
+});
loading ​
Triggered when a loader is shown or hidden
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('loading', (state) => {
-    console.log(state);
-});
mask ​
当遮罩层显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('loading', (state) => {
+    console.log(state);
+});
mask ​
Triggered when a mask layer is shown or hidden
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('mask', (state) => {
-    console.log(state);
-});
subtitle ​
当字幕层显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('mask', (state) => {
+    console.log(state);
+});
subtitle ​
Triggered when the subtitle layer is shown or hidden
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('subtitle', (state) => {
-    console.log(state);
-});
contextmenu ​
当右键菜单显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('subtitle', (state) => {
+    console.log(state);
+});
contextmenu ​
Triggered when the right-click menu is shown or hidden
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('contextmenu', (state) => {
-    console.log(state);
-});
control ​
当控制器显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('contextmenu', (state) => {
+    console.log(state);
+});
control ​
Triggered when the controller is shown or hidden
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('control', (state) => {
-    console.log(state);
-});
setting ​
当设置面板显示或隐藏时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
+art.on('control', (state) => {
+    console.log(state);
+});
setting ​
Triggered when the settings panel is shown or hidden
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
 
-art.on('setting', (state) => {
-    console.log(state);
-});
muted ​
当静音的状态变化时触发
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('setting', (state) => {
+    console.log(state);
+});
muted ​
Triggered when the muted state changes
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('muted', (state) => {
-    console.log(state);
-});
video:canplay ​
浏览器可以播放媒体文件了，但估计没有足够的数据来支撑播放到结束，不必停下来进一步缓冲内容
video:canplaythrough ​
浏览器估计它可以在不停止内容缓冲的情况下播放媒体直到结束
video:complete ​
OfflineAudioContext 渲染完成
video:durationchange ​
duration 属性的值改变时触发
video:emptied ​
媒体内容变为空；例如，当这个 media 已经加载完成（或者部分加载完成），则发送此事件，并调用 load() 方法重新加载它
video:ended ​
视频停止播放，因为 media 已经到达结束点
video:error ​
获取媒体数据时出错，或者资源类型不是受支持的媒体格式
video:loadeddata ​
media 中的首帧已经完成加载
video:loadedmetadata ​
已加载元数据
video:pause ​
播放已暂停
video:play ​
播放已开始
video:playing ​
由于缺乏数据而暂停或延迟后，播放准备开始
video:progress ​
在浏览器加载资源时周期性触发
video:ratechange ​
播放速率发生变化
video:seeked ​
跳帧（seek）操作完成
video:seeking ​
跳帧（seek）操作开始
video:stalled ​
用户代理（user agent）正在尝试获取媒体数据，但数据意外未出现
video:suspend ​
媒体数据加载已暂停
video:timeupdate ​
currentTime 属性指定的时间发生变化
video:volumechange ​
音量发生变化
video:waiting ​
由于暂时缺少数据，播放已停止

-    
+art.on('muted', (state) => {
+    console.log(state);
+});

video:canplay ​

The browser can play the media file, but estimates there is not enough data to play through to the end without having to stop for further buffering

video:canplaythrough ​

The browser estimates it can play the media through to the end without stopping for content buffering

video:complete ​

OfflineAudioContext rendering is complete

video:durationchange ​

Triggered when the value of the duration property changes

video:emptied ​

The media content becomes empty; for example, when this media has been completely loaded (or partially loaded), this event is sent and the load() method is called to reload it

## `video:ended`
+
+The video has stopped because the media reached the end point
+
+## `video:error`
+
+An error occurred while fetching media data, or the resource type is not a supported media format
+
+## `video:loadeddata`
+
+The first frame of the media has finished loading
+
+## `video:loadedmetadata`
+
+Metadata has been loaded
+
+## `video:pause`
+
+Playback has been paused
+
+## `video:play`
+
+Playback has started
+
+## `video:playing`
+
+Playback is ready to start following a pause or delay due to lack of data
+
+## `video:progress`
+
+Periodically triggered while the browser is loading resources
+
+## `video:ratechange`
+
+The playback rate has changed
+
+## `video:seeked`
+
+A seek (frame skipping) operation has completed
+
+## `video:seeking`
+
+A seek (frame skipping) operation has started
+
+## `video:stalled`
+
+The user agent is trying to fetch media data, but the data unexpectedly has not appeared
+
+## `video:suspend`
+
+Media data loading has been suspended
+
+## `video:timeupdate`
+
+The time specified by the currentTime attribute has changed
+## `video:volumechange`
+
+Volume changed
+
+## `video:waiting`
+
+Playback has stopped due to temporarily missing data
+ \ No newline at end of file diff --git a/docs/document/en/advanced/global.html b/docs/document/en/advanced/global.html index 292354080..1e8fcdefd 100644 --- a/docs/document/en/advanced/global.html +++ b/docs/document/en/advanced/global.html @@ -3,239 +3,246 @@ - 全局属性 | Artplayer.js + Global Attributes | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

全局属性 ​

这里的 全局属性 也是指挂载在 构造函数 的 一级属性，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到

DEBUG ​

是否开始 debug 模式，可以打印出视频全部的内置事件，默认关闭

▶ Run Code
js
Artplayer.DEBUG = true;
+    
Artplayer.js
Appearance
Global Attributes ​
Here, Global Attributes refer to the first-level properties mounted on the constructor. Property names are all in uppercase, subject to change in the future and basically not needed.
DEBUG ​
Whether to start debug mode, which can print out all built-in events of the video by default is turned off.
▶ Run Code
js
Artplayer.DEBUG = true;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
CONTEXTMENU ​
是否开启右键菜单，默认开启
▶ Run Code
js
Artplayer.CONTEXTMENU = false;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
CONTEXTMENU ​
Whether to enable the right-click context menu, enabled by default.
▶ Run Code
js
Artplayer.CONTEXTMENU = false;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
NOTICE_TIME ​
提示信息的显示时长，单位为毫秒，默认为 2000
▶ Run Code
js
Artplayer.NOTICE_TIME = 5000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
NOTICE_TIME ​
The display duration of the notification message, in milliseconds, defaults to 2000
▶ Run Code
js
Artplayer.NOTICE_TIME = 5000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
SETTING_WIDTH ​
设置面板的默认宽度，单位为像素，默认为 250
▶ Run Code
js
Artplayer.SETTING_WIDTH = 300;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
SETTING_WIDTH ​
The default width of the settings panel, in pixels, defaults to 250
▶ Run Code
js
Artplayer.SETTING_WIDTH = 300;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});
SETTING_ITEM_WIDTH ​
设置面板的设置项的默认宽度，单位为像素，默认为 200
▶ Run Code
js
Artplayer.SETTING_ITEM_WIDTH = 300;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});
SETTING_ITEM_WIDTH ​
Set the default width of the settings items in the panel, in pixels, the default is 200.
▶ Run Code
js
Artplayer.SETTING_ITEM_WIDTH = 300;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});
SETTING_ITEM_HEIGHT ​
设置面板的设置项的默认高度，单位为像素，默认为 35
▶ Run Code
js
Artplayer.SETTING_ITEM_HEIGHT = 40;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});
SETTING_ITEM_HEIGHT ​
Set the default height of the settings items in the panel, in pixels, the default is 35.
▶ Run Code
js
Artplayer.SETTING_ITEM_HEIGHT = 40;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    loop: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-});
RESIZE_TIME ​
resize 事件的节流时间，单位为毫秒，默认为 200
▶ Run Code
js
Artplayer.RESIZE_TIME = 500;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+});
RESIZE_TIME ​
Throttle time for the resize event, in milliseconds, defaults to 200
▶ Run Code
js
Artplayer.RESIZE_TIME = 500;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('resize', () => {
-    console.log('resize');
-});
SCROLL_TIME ​
scroll 事件的节流时间，单位为毫秒，默认为 200
▶ Run Code
js
Artplayer.SCROLL_TIME = 500;
+art.on('resize', () => {
+    console.log('resize');
+});
SCROLL_TIME ​
Throttle time for the scroll event, in milliseconds, defaults to 200
▶ Run Code
js
Artplayer.SCROLL_TIME = 500;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('scroll', () => {
-    console.log('scroll');
-});
SCROLL_GAP ​
view 事件的边界容差距离，单位为像素，默认为 50
▶ Run Code
js
Artplayer.SCROLL_GAP = 100;
+art.on('scroll', () => {
+    console.log('scroll');
+});
SCROLL_GAP ​
The boundary tolerance distance for the view event, in pixels, default is 50
▶ Run Code
js
Artplayer.SCROLL_GAP = 100;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('scroll', () => {
-    console.log('scroll');
-});
AUTO_PLAYBACK_MAX ​
自动回放功能的最大记录数，默认为 10
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_MAX = 20;
+art.on('scroll', () => {
+    console.log('scroll');
+});
AUTO_PLAYBACK_MAX ​
The maximum number of records for the automatic playback feature, default is 10
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_MAX = 20;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});
AUTO_PLAYBACK_MIN ​
自动回放功能的最小记录时长，单位为秒，默认为 5
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_MIN = 10;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});
AUTO_PLAYBACK_MIN ​
The minimum duration for the auto playback feature, in seconds, with a default of 5.
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_MIN = 10;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});
AUTO_PLAYBACK_TIMEOUT ​
自动回放功能的隐藏延迟时长，单位为毫秒，默认为 3000
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});
AUTO_PLAYBACK_TIMEOUT ​
The delay duration for hiding the auto playback feature, in milliseconds, with a default of 3000.
▶ Run Code
js
Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoPlayback: true,
-});
RECONNECT_TIME_MAX ​
发生连接错误时，自动连接的最大次数，默认为 5
▶ Run Code
js
Artplayer.RECONNECT_TIME_MAX = 10;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoPlayback: true,
+});
RECONNECT_TIME_MAX ​
The maximum number of automatic reconnection attempts when a connection error occurs, default is 5
▶ Run Code
js
Artplayer.RECONNECT_TIME_MAX = 10;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});
RECONNECT_SLEEP_TIME ​
发生连接错误时，自动连接的延迟时间，单位为毫秒，默认为 1000
▶ Run Code
js
Artplayer.RECONNECT_SLEEP_TIME = 3000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});
RECONNECT_SLEEP_TIME ​
The delay time for the automatic reconnection attempt when a connection error occurs, in milliseconds, default is 1000
▶ Run Code
js
Artplayer.RECONNECT_SLEEP_TIME = 3000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/404.mp4',
-});
CONTROL_HIDE_TIME ​
底部控制栏的自动隐藏的延迟时间，单位为毫秒，默认为 3000
▶ Run Code
js
Artplayer.CONTROL_HIDE_TIME = 5000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/404.mp4',
+});
CONTROL_HIDE_TIME ​
...
Auto-hide delay time for the bottom control bar, measured in milliseconds, default is 3000
▶ Run Code
js
Artplayer.CONTROL_HIDE_TIME = 5000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
DBCLICK_TIME ​
双击事件的延迟事件，单位为毫秒，默认为 300
▶ Run Code
js
Artplayer.DBCLICK_TIME = 500;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
DBCLICK_TIME ​
Double-click event delay time, measured in milliseconds, default is 300
▶ Run Code
js
Artplayer.DBCLICK_TIME = 500;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('dblclick', () => {
-    console.log('dblclick');
-});
DBCLICK_FULLSCREEN ​
在桌面端，是否双击切换全屏，默认为 true
▶ Run Code
js
Artplayer.DBCLICK_FULLSCREEN = false;
+art.on('dblclick', () => {
+    console.log('dblclick');
+});
DBCLICK_FULLSCREEN ​
On desktop, whether to switch to fullscreen on double click, default is true
▶ Run Code
js
Artplayer.DBCLICK_FULLSCREEN = false;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
MOBILE_DBCLICK_PLAY ​
在移动端，是否双击切换播放暂停，默认为 true
▶ Run Code
js
Artplayer.MOBILE_DBCLICK_PLAY = false;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
MOBILE_DBCLICK_PLAY ​
On mobile, whether to toggle play/pause on double click, default is true
▶ Run Code
js
Artplayer.MOBILE_DBCLICK_PLAY = false;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
MOBILE_CLICK_PLAY ​
在移动端，是否单击切换播放暂停，默认为 false
▶ Run Code
js
Artplayer.MOBILE_CLICK_PLAY = true;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
MOBILE_CLICK_PLAY ​
On mobile, whether to play/pause on single click, default is false
▶ Run Code
js
Artplayer.MOBILE_CLICK_PLAY = true;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
AUTO_ORIENTATION_TIME ​
在移动端，自动旋屏的延迟时间，单位为毫秒，默认为 200
▶ Run Code
js
Artplayer.AUTO_ORIENTATION_TIME = 500;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
On mobile devices, whether a tap toggles play/pause, defaults to false
▶ Run Code
js
Artplayer.MOBILE_CLICK_PLAY = true;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoOrientation: true,
-});
INFO_LOOP_TIME ​
信息面板的刷新时间，单位为毫秒，默认为 1000
▶ Run Code
js
Artplayer.INFO_LOOP_TIME = 2000;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
AUTO_ORIENTATION_TIME ​
On mobile devices, the delay time for auto-rotation, in milliseconds, defaults to 200
▶ Run Code
js
Artplayer.AUTO_ORIENTATION_TIME = 500;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoOrientation: true,
+});
INFO_LOOP_TIME ​
Info panel refresh time, unit in milliseconds, default is 1000
▶ Run Code
js
Artplayer.INFO_LOOP_TIME = 2000;
 
-art.info.show = true;
FAST_FORWARD_VALUE ​
在移动端，长按加速的速率倍数，默认为 3
▶ Run Code
js
Artplayer.FAST_FORWARD_VALUE = 5;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});
FAST_FORWARD_TIME ​
在移动端，长按加速的延迟时间，单位为毫秒，默认为 1000
▶ Run Code
js
Artplayer.FAST_FORWARD_TIME = 2000;
+art.info.show = true;
FAST_FORWARD_VALUE ​
On mobile, the multiplier rate of the speed when long-pressing for fast-forward, default is 3
▶ Run Code
js
Artplayer.FAST_FORWARD_VALUE = 5;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});
TOUCH_MOVE_RATIO ​
在移动端，左右滑动进度的速率倍数，默认为 0.5
▶ Run Code
js
Artplayer.TOUCH_MOVE_RATIO = 1;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});
FAST_FORWARD_TIME ​
The time, in milliseconds, to fast-forward when double-tapped, default is 10 On mobile, the delay time of the long-press acceleration, in milliseconds, default is 1000
▶ Run Code
js
Artplayer.FAST_FORWARD_TIME = 2000;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
VOLUME_STEP ​
快捷键调节音量的幅度比例，默认为 0.1
▶ Run Code
js
Artplayer.VOLUME_STEP = 0.2;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});
TOUCH_MOVE_RATIO ​
On mobile, the ratio of the speed of sliding left and right to seek, default is 0.5
▶ Run Code
js
Artplayer.TOUCH_MOVE_RATIO = 1;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
SEEK_STEP ​
快捷键调节播放进度的幅度，单位为秒，默认为 5
▶ Run Code
js
Artplayer.SEEK_STEP = 10;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
VOLUME_STEP ​
The step ratio of adjusting volume with shortcuts, default is 0.1
▶ Run Code
js
Artplayer.VOLUME_STEP = 0.2;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
PLAYBACK_RATE ​
内置播放速率的列表，默认为 [0.5, 0.75, 1, 1.25, 1.5, 2]
▶ Run Code
js
Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
SEEK_STEP ​
The increment by which the playback progress is adjusted via keyboard shortcuts, in seconds, the default is 5
▶ Run Code
js
Artplayer.SEEK_STEP = 10;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    playbackRate: true,
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
PLAYBACK_RATE ​
The list of built-in playback speeds, by default [0.5, 0.75, 1, 1.25, 1.5, 2]
▶ Run Code
js
Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];
 
-art.contextmenu.show = true;
-art.setting.show = true;
ASPECT_RATIO ​
内置视频长宽比的列表，默认为 ['default', '4:3', '16:9']
▶ Run Code
js
Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    playbackRate: true,
+});
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    aspectRatio: true,
-});
+art.contextmenu.show = true;
+art.setting.show = true;
ASPECT_RATIO ​
Built-in list of video aspect ratios, default is ['default', '4:3', '16:9']
▶ Run Code
js
Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];
 
-art.contextmenu.show = true;
-art.setting.show = true;
FLIP ​
内置视频翻转的列表，默认为 ['normal', 'horizontal', 'vertical']
▶ Run Code
js
Artplayer.FLIP = ['normal', 'horizontal'];
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    aspectRatio: true,
+});
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-});
+art.contextmenu.show = true;
+art.setting.show = true;
FLIP ​
Built-in list of video flips, defaults to ['normal', 'horizontal', 'vertical']
▶ Run Code
js
Artplayer.FLIP = ['normal', 'horizontal'];
 
-art.contextmenu.show = true;
-art.setting.show = true;
FULLSCREEN_WEB_IN_BODY ​
网页全屏时，是否把播放器挂在在 body 元素下，默认为 false
▶ Run Code
js
Artplayer.FULLSCREEN_WEB_IN_BODY = true;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+});
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
LOG_VERSION ​
设置是否打印播放器版本，默认为 true
▶ Run Code
js
Artplayer.LOG_VERSION = false;
+art.contextmenu.show = true;
+art.setting.show = true;
FULLSCREEN_WEB_IN_BODY ​
When in web fullscreen, whether to mount the player under the body element, defaults to false
▶ Run Code
js
Artplayer.FULLSCREEN_WEB_IN_BODY = true;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
USE_RAF ​
设置是否使用 requestAnimationFrame ，默认为 false，目前主要用于进度条的平滑效果
▶ Run Code
js
Artplayer.USE_RAF = true;
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
LOG_VERSION ​
Setting whether to print the player version, the default is true
▶ Run Code
js
Artplayer.LOG_VERSION = false;
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    miniProgressBar: true,
-});

-    
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});

USE_RAF ​

Setting whether to use requestAnimationFrame, the default is false, currently mainly used for smooth progress bar effects

▶ Run Code
js
Artplayer.USE_RAF = true;
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});
+ \ No newline at end of file diff --git a/docs/document/en/advanced/plugin.html b/docs/document/en/advanced/plugin.html index 210f4f15b..0128ddd5a 100644 --- a/docs/document/en/advanced/plugin.html +++ b/docs/document/en/advanced/plugin.html @@ -3,121 +3,123 @@ - 编写插件 | Artplayer.js + Writing Plugins | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

编写插件 ​

但你已经知道播放器的属性, 方法和事件后，再编写插件是非常简单的事

可以在实例化的时候加载插件的函数

▶ Run Code
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
+    
Artplayer.js
Appearance
Writing Plugins ​
Once you know the player's properties, methods, and events, writing plugins is very simple.
You can load the plugin functions when instantiated.
▶ Run Code
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [myPlugin],
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [myPlugin],
+});
 
-art.on('ready', () => {
-    console.info(art.plugins.myPlugin);
-});
可以在实例化之后再加载插件的函数
▶ Run Code
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
+art.on('ready', () => {
+    console.info(art.plugins.myPlugin);
+});
Here's the translation of the provided text into English while preserving the Markdown formatting:
A function that allows loading plugins after instantiation
▶ Run Code
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.plugins.add(myPlugin);
+art.plugins.add(myPlugin);
 
-art.on('ready', () => {
-    console.info(art.plugins.myPlugin);
-});
例如我想写一个在视频暂停后，显示一个图片广告的插件
▶ Run Code
js
function adsPlugin(option) {
-    return (art) => {
-        art.layers.add({
-            name: 'ads',
-            html: `<img style="width: 100px" src="${option.url}">`,
-            style: {
-                display: 'none',
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-            },
-        });
+art.on('ready', () => {
+    console.info(art.plugins.myPlugin);
+});
For example, I want to write a plugin that displays an image advertisement after the video is paused.
js
function adsPlugin(option) {
+    return (art) => {
+        art.layers.add({
+            name: 'ads',
+            html: `<img style="width: 100px" src="${option.url}">`,
+            style: {
+                display: 'none',
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+            },
+        });
 
-        function show() {
-            art.layers.ads.style.display = 'block';
-        }
+        function show() {
+            art.layers.ads.style.display = 'block';
+        }
 
-        function hide() {
-            art.layers.ads.style.display = 'none';
-        }
+        function hide() {
+            art.layers.ads.style.display = 'none';
+        }
 
-        art.controls.add({
-            name: 'hide-ads',
-            position: 'right',
-            html: 'Hide Ads',
-            tooltip: 'Hide Ads',
-            click: hide,
-            style: {
-                marginRight: '20px'
-            }
-        });
+        art.controls.add({
+            name: 'hide-ads',
+            position: 'right',
+            html: 'Hide Ads',
+            tooltip: 'Hide Ads',
+            click: hide,
+            style: {
+                marginRight: '20px'
+            }
+        });
 
-        art.controls.add({
-            name: 'show-ads',
-            position: 'right',
-            html: 'Show Ads',
-            tooltip: 'Show Ads',
-            click: show,
-        });
+        art.controls.add({
+            name: 'show-ads',
+            position: 'right',
+            html: 'Show Ads',
+            tooltip: 'Show Ads',
+            click: show,
+        });
 
-        art.on('play', hide);
-        art.on('pause', show);
+        art.on('play', hide);
+        art.on('pause', show);
 
-        return {
-            name: 'adsPlugin',
-            show,
-            hide
-        };
-    }
-}
+        return {
+            name: 'adsPlugin',
+            show,
+            hide
+        };
+    }
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        adsPlugin({
-            url: '/assets/sample/layer.png'
-        })
-    ],
-});

-    
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        adsPlugin({
+            url: '/assets/sample/layer.png'
+        })
+    ],
+});
+ \ No newline at end of file diff --git a/docs/document/en/advanced/property.html b/docs/document/en/advanced/property.html index 7f0e643fd..7a25de09c 100644 --- a/docs/document/en/advanced/property.html +++ b/docs/document/en/advanced/property.html @@ -3,405 +3,408 @@ - Instance Property | Artplayer.js + Instance Properties | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

Instance Property ​

The Instance Property here refers to the Primary Property attached to the Instance, which is more commonly used

play ​

  • Type: Function

Play video

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+    
Artplayer.js
Appearance
Instance Properties ​
Here, instance properties refer to the primary properties mounted on the instance, which are quite commonly used.
play ​
  • Type: Function
Play video
▶ Run Code
js

+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    art.play();
-});
pause ​
  • Type: Function
Pause video
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+art.on('ready', () => {
+    art.play();
+});
pause ​
  • Type: Function
Pause video
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    art.play();
+art.on('ready', () => {
+    art.play();
 
-    setTimeout(() => {
-        art.pause();
-    }, 3000);
-});
toggle ​
  • Type: Function
Toggle video playback and pause
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+    setTimeout(() => {
+        art.pause();
+    }, 3000);
+});
toggle ​
  • Type: Function
Toggle the play and pause state of the video
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    art.toggle();
+art.on('ready', () => {
+    art.toggle();
 
-    setTimeout(() => {
-        art.toggle();
-    }, 3000);
-});
destroy ​
  • Type: Function
  • Parameter: Boolean
To destroy the player, accept a parameter indicating whether to remove the player's html after destruction. The default value is true
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    setTimeout(() => {
+        art.toggle();
+    }, 3000);
+});
destroy ​
  • Type: Function
  • Parameter: Boolean
Destroy the player. Accepts a parameter indicating whether to remove the player's html after destruction, which defaults to true
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.destroy();
-});
seek ​
  • Type: Setter
  • Parameter: Number
Video time jump in seconds
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.destroy();
+});
seek ​
  • Type: Setter
  • Parameter: Number
Jump to a specific time in the video, in seconds.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 5;
-});
forward ​
  • Type: Setter
  • Parameter: Number
Video time fast forward in seconds
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.seek = 5;
+});
forward ​
  • Type: Setter
  • Parameter: Number
Fast forward the video time, in seconds.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.forward = 5;
-});
backward ​
  • Type: Setter
  • Parameter: Number
Video time rewind in seconds
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.forward = 5;
+});
backward ​
  • Type: Setter
  • Parameter: Number
Video rewind time in seconds
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 5;
+art.on('ready', () => {
+    art.seek = 5;
 
-    setTimeout(() => {
-        art.backward = 2;
-    }, 3000);
-});
volume ​
  • Type: Setter/Getter
  • Parameter: Number
Set and get video volume, range: [0, 1]
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+    setTimeout(() => {
+        art.backward = 2;
+    }, 3000);
+});
volume ​
  • Type: Setter/Getter
  • Parameter: Number
Sets and gets the video volume, which ranges from [0, 1]
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.volume);
-    art.volume = 0.5;
-    console.info(art.volume);
-});
url ​
  • Type: Setter/Getter
  • Parameter: String
Set and get video url
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.volume);
+    art.volume = 0.5;
+    console.info(art.volume);
+});
url ​
  • Type: Setter/Getter
  • Parameter: String
Set and retrieve the video address
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.url = '/assets/sample/video.mp4?t=0';
-});
switch ​
  • Type: Setter
  • Parameter: String
Setting the video url is similar to that of art.url, but some optimization operations will be performed
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.url = '/assets/sample/video.mp4?t=0';
+});
switch ​
  • Type: Setter
  • Parameter: String
Set the video address, which is similar to art.url, but performs some optimization operations
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switch = '/assets/sample/video.mp4?t=0';
-    }, 3000);
-});
switchUrl ​
  • Type: Function
  • Parameter: String
Setting the video url is similar to that of art.url, but some optimization operations will be performed
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switch = '/assets/sample/video.mp4?t=0';
+    }, 3000);
+});
switchUrl ​
  • Type: Function
  • Parameter: String
Set the video address, similar to setting art.url, but some optimization operations will be executed.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switchUrl('/assets/sample/video.mp4?t=0');
-    }, 3000);
-});
Tip
The functions of art.switch and art.switchUrl are the same, except that the art.switchUrl method will return Promise, when resolve means that the new address can be played, and reject means that the new address is loaded error
switchQuality ​
  • Type: Function
  • Parameter: String
Set the video quality address, similar to art.switchUrl, but with the previous playback progress
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchUrl('/assets/sample/video.mp4?t=0');
+    }, 3000);
+});
Warning
art.switch and art.switchUrl have the same functionality. However, the art.switchUrl method will return a Promise. When it resolves, it indicates that the new address can be played; when it rejects, it indicates there was an error loading the new address.
switchQuality ​
  • Type: Function
  • Parameter: String
Set video quality address, similar to art.switchUrl, but it will carry over the previous playback progress.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.seek = 10;
-    setTimeout(() => {
-        art.switchQuality('/assets/sample/video.mp4?t=0');
-    }, 3000);
-});
muted ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get whether the video is muted
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.seek = 10;
+    setTimeout(() => {
+        art.switchQuality('/assets/sample/video.mp4?t=0');
+    }, 3000);
+});
muted ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get whether the video is muted.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.muted);
-    art.muted = true;
-    console.info(art.muted);
-});
currentTime ​
  • Type: Setter/Getter
  • Parameter: Number
Set and get the current time of the video. Setting the time is similar to seek, but it will not trigger additional events
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.muted);
+    art.muted = true;
+    console.info(art.muted);
+});
currentTime ​
  • Type: Setter/Getter
  • Parameter: Number
Set and get the current time of the video. Setting the time is similar to seek, but it does not trigger additional events.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.currentTime);
-    art.currentTime = 5;
-    console.info(art.currentTime);
-});
duration ​
  • Type: Getter
Get video duration
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.currentTime);
+    art.currentTime = 5;
+    console.info(art.currentTime);
+});
duration ​
  • Type: Getter
Get the video duration
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.duration);
-});
Tip
Some videos have no duration, such as live videos or videos that have not been decoded. The duration obtained at this time will be 0
screenshot ​
  • Type: Function
Download a screenshot of the current video frame
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.duration);
+});
Note
Some videos do not have a duration, such as videos that are being live streamed or videos that have not been fully decoded, in which case the obtained duration will be 0
screenshot ​
  • Type: Function
Download a screenshot of the current video frame
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.screenshot();
-});
getDataURL ​
  • Type: Function
Get the base64 address of the screenshot of the current video frame, and return a Promise
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.screenshot();
+});
getDataURL ​
  • Type: Function
Gets the base64 address of the screenshot of the current video frame, which returns a Promise.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', async () => {
-    const url = await art.getDataURL();
-	console.info(url)
-});
getBlobUrl ​
  • Type: Function
Get the blob address of the screenshot of the current video frame, and return a Promise
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', async () => {
+    const url = await art.getDataURL();
+    console.info(url)
+});
getBlobUrl ​
  • Type: Function
Gets the blob address of the screenshot of the current video frame, which returns a Promise.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', async () => {
-    const url = await art.getBlobUrl();
-    console.info(url);
-});
fullscreen ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get full screen of player window
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'Fullscreen Switch',
-            click: function () {
-                art.fullscreen = !art.fullscreen;
-            },
-        },
-    ],
-});
Tip
Due to the browser security mechanism, the page must have interaction before triggering the full screen of the window (for example, the user has clicked on the page)
fullscreenWeb ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get full screen of player web page
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
+art.on('ready', async () => {
+    const url = await art.getBlobUrl();
+    console.info(url);
+});
fullscreen ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get the player window fullscreen
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'Fullscreen Switch',
+            click: function () {
+                art.fullscreen = !art.fullscreen;
+            },
+        },
+    ],
+});
Note
Due to browser security mechanisms, before triggering the window to fullscreen, the page must have had an interaction (e.g. user clicked on the page).
fullscreenWeb ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get the player web page full screen
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
 
-art.on('ready', () => {
-    art.fullscreenWeb = true;
+art.on('ready', () => {
+    art.fullscreenWeb = true;
 
-    setTimeout(() => {
-        art.fullscreenWeb = false;
-    }, 3000);
-});
pip ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get the picture-in-picture mode of the player
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'PIP',
-            click: function () {
-                art.pip = !art.pip;
-            },
-        },
-    ],
-});
Tip
Due to the browser security mechanism, before triggering picture-in-picture, the page must have interaction (for example, the user has clicked on the page)
poster ​
  • Type: Setter/Getter
  • Parameter: String
Set and obtain video posters. You can only see the poster effect before the video is played
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    poster: '/assets/sample/poster.jpg',
-});
+    setTimeout(() => {
+        art.fullscreenWeb = false;
+    }, 3000);
+});
pip ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get the player picture-in-picture mode
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'PIP',
+            click: function () {
+                art.pip = !art.pip;
+            },
+        },
+    ],
+});
Warning
Due to browser security mechanisms, user interaction (e.g., a user click on the page) must occur before triggering picture-in-picture.
poster ​
  • Type: Setter/Getter
  • Parameter: String
Set and get the video poster, the poster effect is visible only before the video starts playing.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    poster: '/assets/sample/poster.jpg',
+});
 
-art.on('ready', () => {
-    console.info(art.poster);
-    art.poster = '/assets/sample/poster.jpg?t=0';
-    console.info(art.poster);
-});
mini ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get player mini mode
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.poster);
+    art.poster = '/assets/sample/poster.jpg?t=0';
+    console.info(art.poster);
+});
mini ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set and get the player's mini mode
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.mini = true;
-});
playing ​
  • Type: Getter
  • Parameter: Boolean
Get whether the video is playing
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+art.on('ready', () => {
+    art.mini = true;
+});
playing ​
  • Type: Getter
  • Parameter: Boolean
Get whether the video is currently playing
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    console.info(art.playing);
-});
autoSize ​
  • Type: Setter/Getter
  • Parameter: Boolean
Set whether the video is adaptive size. After setting it to true, it will only be executed once
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.playing);
+});
autoSize ​
  • Type: Function
Sets whether the video should auto adjust its size
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    art.autoSize();
-});
rect ​
  • Type: Getter
Get the size and coordinate information of the player
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.autoSize();
+});
rect ​
  • Type: Getter
Gets the size and position information of the player
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(JSON.stringify(art.rect));
-});
Tip
Dimension and coordinate information are obtained through getBoundingClientRect
flip ​
  • Type: Setter/Getter
  • Parameter: String
Set and get player rollover, support normal, horizontal, vertical
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(JSON.stringify(art.rect));
+});
Warning
The size and coordinates are obtained via getBoundingClientRect
flip ​
  • Type: Setter/Getter
  • Parameter: String
Set and get the player flip, supports normal, horizontal, vertical
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.flip);
-    art.flip = 'horizontal';
-    console.info(art.flip);
-});
playbackRate ​
  • Type: Setter/Getter
  • Parameter: Number
Set and get player playback speed
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.flip);
+    art.flip = 'horizontal';
+    console.info(art.flip);
+});
playbackRate ​
  • Type: Setter/Getter
  • Parameter: Number Set and get the playback speed of the player
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.playbackRate);
-    art.playbackRate = 2;
-    console.info(art.playbackRate);
-});
aspectRatio ​
  • Type: Setter/Getter
  • Parameter: String
Set and obtain the player aspect ratio
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.playbackRate);
+    art.playbackRate = 2;
+    console.info(art.playbackRate);
+});
aspectRatio ​
  • Type: Setter/Getter
  • Parameter: String
Set and get the aspect ratio of the player
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.aspectRatio);
-    art.aspectRatio = '16:9';
-    console.info(art.aspectRatio);
-});
loop ​
  • Type: Setter/Getter
  • Parameter: Array
Set and obtain interval sequential playback in seconds
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.aspectRatio);
+    art.aspectRatio = '16:9';
+    console.info(art.aspectRatio);
+});
autoHeight ​
  • Type: Function
When the container has only width, this attribute can automatically calculate and set the height of the video
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.loop);
-    art.loop = [5, 10];
-    console.info(art.loop);
-});
Tip
To delete interval looping, just set loop to []
art.loop and art.option.loop aer two different things, please don't mix them up
autoHeight ​
  • Type: Setter/Getter
  • Parameter: Boolean
When the container has only width, this attribute can automatically calculate and set the height of the video. After it is set to true, it will only be executed once
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    art.autoHeight();
+});
 
-art.on('ready', () => {
-    art.autoHeight();
-});
+art.on('resize', () => {
+    art.autoHeight();
+});
Warning
When your container has only width but you do not know the exact height, this property is very useful as it can automatically calculate the video's height, but you need to make sure when to set this property.
attr ​
  • Type: Function
  • Parameter: String
Dynamically get and set the attributes of the video element
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('resize', () => {
-    art.autoHeight();
-});
提示
This attribute is useful when your container has only width but does not know the specific height. It can automatically calculate the height of the video, but you need to determine the time to set this attribute
attr ​
  • Type: Function
  • Parameter: String
Get and set the attributes of the video element dynamically
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.attr('playsInline'));
+    art.attr('playsInline', true);
+    console.info(art.attr('playsInline'));
+});
type ​
  • Type: Setter/Getter
  • Parameter: String
Dynamically get and set the video type
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.attr('playsInline'));
-    art.attr('playsInline', true);
-    console.info(art.attr('playsInline'));
-});
type ​
  • Type: Setter/Getter
  • Parameter: String
Get and set video types dynamically
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.type);
+    art.type = 'm3u8';
+    console.info(art.type);
+});
theme ​
  • Type: Setter/Getter
  • Parameter: String
Dynamically get and set the player's theme color
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.type);
-    art.type = 'm3u8';
-    console.info(art.type);
-});
theme ​
  • Type: Setter/Getter
  • Parameter: String
Get and set player theme color dynamically
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('ready', () => {
+    console.info(art.theme);
+    art.theme = '#000';
+    console.info(art.theme);
+});
airplay ​
  • Type: Function
Activate airplay
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'right',
+            html: 'AirPlay',
+            click: function () {
+                art.airplay();
+            },
+        },
+    ],
+});
loaded ​
  • Type: Getter
The proportion of the video that is cached, ranging from [0, 1], commonly used with the video:timeupdate event.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('ready', () => {
-    console.info(art.theme);
-    art.theme = '#000';
-    console.info(art.theme);
-});
airplay ​
  • Type: Function
Enable airplay
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'right',
-            html: 'AirPlay',
-            click: function () {
-                art.airplay();
-            },
-        },
-    ],
-});
loaded ​
  • Type: Getter
The proportion of video cache, with the range of [0, 1], is often used in conjunction with the video:timeupdate event
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('video:timeupdate', () => {
+    console.info(art.loaded);
+});
played ​
  • Type: Getter
The proportion of the video that has been played, ranging from [0, 1], commonly used with the video:timeupdate event.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.on('video:timeupdate', () => {
-    console.info(art.loaded);
-});
played ​
  • Type: Getter
The proportion of video playback, with the range of [0, 1], is often used in conjunction with the video:timeupdate event
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+art.on('video:timeupdate', () => {
+    console.info(art.played);
+});
proxy ​
  • Type: Function
A proxy function for DOM events, which essentially proxies addEventListener and removeEventListener. When using proxy to handle events, the event will automatically be destroyed when the player is destroyed.
▶ Run Code
js
var container = document.querySelector('.artplayer-app');
 
-art.on('video:timeupdate', () => {
-    console.info(art.played);
-});
proxy ​
  • Type: Function
The proxy function of DOM event essentially proxies addEventListener and removeEventListener. When proxy is used to process the event, the player will also automatically destroy the event when it is destroyed
▶ Run Code
js
var container = document.querySelector('.artplayer-app');
+var art = new Artplayer({
+	container: container,
+	url: '/assets/sample/video.mp4',
+});
 
-var art = new Artplayer({
-	container: container,
-	url: '/assets/sample/video.mp4',
-});
+art.proxy(container, 'click', event => {
+	console.info(event);
+});
Tip
If you need some DOM events to exist only during the lifespan of the player, it is highly recommended to use this function to avoid causing memory leaks.
query ​
  • Type: Function
DOM query function, similar to document.querySelector, but the object being queried is limited within the current player, which can prevent errors due to having the same class name.
▶ Run Code
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
 
-art.proxy(container, 'click', event => {
-	console.info(event);
-});
Tip
If you need some DOM events only exist in the life cycle of the player, we strongly recommend using this function to avoid memory leakage
query ​
  • Type: Function
The query function of DOM is similar to document.querySelector, but the queried object is limited to the current player, which can avoid errors of the same class name
▶ Run Code
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
+console.info(art.query('.art-video'));
video ​
  • Type: Element
A shortcut to return the video element of the player.
▶ Run Code
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
 
-console.info(art.query('.art-video'));
video ​
  • Type: Element
Return the video element of the player
▶ Run Code
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-});
+console.info(art.video);
cssVar ​
  • Type: Function
Dynamically getting or setting css variables
▶ Run Code
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+});
 
-console.info(art.video);
quality ​
  • Type: Setter
Dynamically set the quality list
▶ Run Code
js
var art = new Artplayer({
-	container: '.artplayer-app',
-	url: '/assets/sample/video.mp4',
-	quality: [
-		{
-			default: true,
-			html: 'SD 480P',
-			url: '/assets/sample/video.mp4',
-		},
-		{
-			html: 'HD 720P',
-			url: '/assets/sample/video.mp4',
-		},
-	],
-});
+art.on('ready', () => {
+    console.log(art.cssVar('--art-theme'));
+    art.cssVar('--art-theme', 'green');
+    console.log(art.cssVar('--art-theme'));
+});
quality ​
  • Type: Setter
  • Parameter: Array
Dynamically setting the list of qualities
▶ Run Code
js
var art = new Artplayer({
+	container: '.artplayer-app',
+	url: '/assets/sample/video.mp4',
+	quality: [
+		{
+			default: true,
+			html: 'SD 480P',
+			url: '/assets/sample/video.mp4',
+		},
+		{
+			html: 'HD 720P',
+			url: '/assets/sample/video.mp4',
+		},
+	],
+});
 
-art.on('ready', () => {
-	setTimeout(() => {
-		art.quality = [
-			{
-				default: true,
-				html: '1080P',
-				url: '/assets/sample/video.mp4',
-			},
-			{
-				html: '4K',
-				url: '/assets/sample/video.mp4',
-			},
-		];
-	}, 3000);
-})

-    
+art.on('ready', () => {
+	setTimeout(() => {
+		art.quality = [
+			{
+				default: true,
+				html: '1080P',
+				url: '/assets/sample/video.mp4',
+			},
+			{
+				html: '4K',
+				url: '/assets/sample/video.mp4',
+			},
+		];
+	}, 3000);
+})
+ \ No newline at end of file diff --git a/docs/document/en/component/contextmenu.html b/docs/document/en/component/contextmenu.html index 6c53e3d20..e4cbbfdcd 100644 --- a/docs/document/en/component/contextmenu.html +++ b/docs/document/en/component/contextmenu.html @@ -3,105 +3,107 @@ - Contextmenu | Artplayer.js + Context Menu | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

Contextmenu ​

Config ​

PropertyTypeDescribe
disableBooleanWhether to disable the component
nameStringComponent unique name, used to mark class name
indexNumberComponent index, used for display priority
htmlString, ElementDOM element of the component
styleObjectcomponent style object
clickFunctionComponent click event
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component

Init ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
+    
Artplayer.js
Appearance
Context Menu ​
Configuration ​
PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique name of the component, used for marking the class name
indexNumberComponent index, used for display priority
htmlString, ElementThe DOM element of the component
styleObjectStyle object for the component
clickFunctionClick event for the component
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component
Creation ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
 
-art.contextmenu.show = true;
+art.contextmenu.show = true;
 
-// Get the Element of contextmenu by name
-console.info(art.contextmenu['your-menu']);
Add ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+// Get the Element of contextmenu by name
+console.info(art.contextmenu['your-menu']);
Add ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.contextmenu.add({
-    name: 'your-menu',
-    html: 'Your Menu',
-    click: function (...args) {
-        console.info(args);
-        art.contextmenu.show = false;
-    },
-});
+art.contextmenu.add({
+    name: 'your-menu',
+    html: 'Your Menu',
+    click: function (...args) {
+        console.info(args);
+        art.contextmenu.show = false;
+    },
+});
 
-art.contextmenu.show = true;
+art.contextmenu.show = true;
 
-// Get the Element of contextmenu by name
-console.info(art.contextmenu['your-menu']);
Remove ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
+// Get the Element of contextmenu by name
+console.info(art.contextmenu['your-menu']);
Delete ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
 
-art.contextmenu.show = true;
+art.contextmenu.show = true;
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the contextmenu by name
-        art.contextmenu.remove('your-menu')
-    }, 3000);
-});
Update ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            name: 'your-menu',
-            html: 'Your Menu',
-            click: function (...args) {
-                console.info(args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the context menu by name
+        art.contextmenu.remove('your-menu')
+    }, 3000);
+});
Updates ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            name: 'your-menu',
+            html: 'Your Menu',
+            click: function (...args) {
+                console.info(args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
 
-art.contextmenu.show = true;
+art.contextmenu.show = true;
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the contextmenu by name
-        art.contextmenu.update({
-            name: 'your-menu',
-            html: 'Your New Menu',
-        })
-    }, 3000);
-});

-    
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the contextmenu by name
+        art.contextmenu.update({
+            name: 'your-menu',
+            html: 'Your New Menu',
+        })
+    }, 3000);
+});
+ \ No newline at end of file diff --git a/docs/document/en/component/controls.html b/docs/document/en/component/controls.html index 8d2b3f21d..19464d3a2 100644 --- a/docs/document/en/component/controls.html +++ b/docs/document/en/component/controls.html @@ -3,152 +3,154 @@ - Controls | Artplayer.js + Controller | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

Controls ​

Config ​

PropertyTypeDescribe
disableBooleanWhether to disable the component
nameStringComponent unique name, used to mark class name
indexNumberComponent index, used for display priority
htmlString, ElementDOM element of the component
styleObjectcomponent style object
clickFunctionComponent click event
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component
positionStringleft and right control the left and right positions where the controller appears
selectorArrayArray of objects for the select list
onSelectFunctionA function that is triggered when an element of the select list is clicked

Init ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'your-button',
-            index: 10,
-            position: 'left',
-            html: 'Your Button',
-            tooltip: 'Your Button',
-            style: {
-                color: 'red',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-        {
-            name: 'subtitle',
-            position: 'right',
-            html: 'Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: '<span style="color:red">subtitle 01</span>',
-                },
-                {
-                    html: '<span style="color:yellow">subtitle 02</span>',
-                },
-            ],
-            onSelect: function (item, $dom) {
-                console.info(item, $dom);
-                return 'Your ' + item.html;
-            },
-        },
-    ],
-});
+    
Artplayer.js
Appearance
Controller ​
Configuration ​
PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringThe unique name of the component for class identification
indexNumberThe index of the component, used for display priority
htmlString, ElementThe component's DOM element
styleObjectThe style object for the component
clickFunctionComponent click event
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component
positionStringleft and right control the position of the controller
selectorArrayAn array of objects for the selection list
onSelectFunctionFunction triggered when an item from the selection list is clicked
Creation ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'your-button',
+            index: 10,
+            position: 'left',
+            html: 'Your Button',
+            tooltip: 'Your Button',
+            style: {
+                color: 'red',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+        {
+            name: 'subtitle',
+            position: 'right',
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">subtitle 01</span>',
+                },
+                {
+                    html: '<span style="color:yellow">subtitle 02</span>',
+                },
+            ],
+            onSelect: function (item, $dom) {
+                console.info(item, $dom);
+                return 'Your ' + item.html;
+            },
+        },
+    ],
+});
 
-// Get the Element of control by name
-console.info(art.controls['your-button']);
-console.info(art.controls.subtitle);
Add ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+// Get the Element of control by name
+console.info(art.controls['your-button']);
+console.info(art.controls['subtitle']);
Adding ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.controls.add({
-    name: 'button1',
-    index: 10,
-    position: 'left',
-    html: 'Your Button',
-    tooltip: 'Your Button',
-    style: {
-        color: 'red',
-    },
-    click: function (...args) {
-        console.info('click', args);
-    },
-    mounted: function (...args) {
-        console.info('mounted', args);
-    },
-});
+art.controls.add({
+    name: 'button1',
+    index: 10,
+    position: 'left',
+    html: 'Your Button',
+    tooltip: 'Your Button',
+    style: {
+        color: 'red',
+    },
+    click: function (...args) {
+        console.info('click', args);
+    },
+    mounted: function (...args) {
+        console.info('mounted', args);
+    },
+});
 
-// Get the Element of control by name
-console.info(art.controls.button1);
Remove ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'Your Button',
-            tooltip: 'Your Button',
-            style: {
-                color: 'red',
-            },
-        }
-    ]
-});
+// Get the Element of control by name
+console.info(art.controls['button1']);
Delete ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'Your Button',
+            tooltip: 'Your Button',
+            style: {
+                color: 'red',
+            },
+        }
+    ]
+});
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the control by name
-        art.controls.remove('button1');
-    }, 3000);
-});
Update ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: 'subtitle 01',
-                },
-                {
-                    html: 'subtitle 02',
-                },
-            ],
-        }
-    ]
-});
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the control by name
+        art.controls.remove('button1');
+    }, 3000);
+});
Update ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: 'subtitle 01',
+                },
+                {
+                    html: 'subtitle 02',
+                },
+            ],
+        }
+    ]
+});
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the control by name
-        art.controls.update({
-            name: 'button1',
-            index: 10,
-            position: 'right',
-            html: 'New Subtitle',
-            selector: [
-                {
-                    default: true,
-                    html: 'new subtitle 01',
-                },
-                {
-                    html: 'new subtitle 02',
-                },
-            ],
-        });
-    }, 3000);
-});

-    
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the control by name
+        art.controls.update({
+            name: 'button1',
+            index: 10,
+            position: 'right',
+            html: 'New Subtitle',
+            selector: [
+                {
+                    default: true,
+                    html: 'new subtitle 01',
+                },
+                {
+                    html: 'new subtitle 02',
+                },
+            ],
+        });
+    }, 3000);
+});
+ \ No newline at end of file diff --git a/docs/document/en/component/layers.html b/docs/document/en/component/layers.html index a5c3f6d6b..2679ec5d4 100644 --- a/docs/document/en/component/layers.html +++ b/docs/document/en/component/layers.html @@ -3,124 +3,126 @@ - Layers | Artplayer.js + Layer | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

Layers ​

Config ​

PropertyTypeDescribe
disableBooleanWhether to disable the component
nameStringComponent unique name, used to mark class name
indexNumberComponent index, used for display priority
htmlString, ElementDOM element of the component
styleObjectcomponent style object
clickFunctionComponent click event
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component

Init ​

▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: `<img style="width: 100px" src="${img}">`,
-            tooltip: 'Potser Tip',
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-    ],
-});
+    
Artplayer.js
Appearance
Layer ​
Configuration ​
PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique name of the component, used for marking class name
indexNumberComponent index, used for display priority
htmlString, ElementThe DOM element of the component
styleObjectStyle object for the component
clickFunctionClick event for the component
mountedFunctionTriggered after the component is mounted
tooltipStringTooltip text for the component
Creation ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'poster',
+            html: `<img style="width: 100px" src="${img}">`,
+            tooltip: 'Poster Tip',
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+    ],
+});
 
-// Get the Element of layer by name
-console.info(art.layers['potser']);
Add ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
+// Get the Element of layer by name
+console.info(art.layers['poster']);
Add ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
 
-art.layers.add({
-    name: 'potser',
-    html: `<img style="width: 100px" src="${img}">`,
-    tooltip: 'Potser Tip',
-    style: {
-        position: 'absolute',
-        top: '50px',
-        right: '50px',
-    },
-    click: function (...args) {
-        console.info('click', args);
-    },
-    mounted: function (...args) {
-        console.info('mounted', args);
-    },
-});
+art.layers.add({
+    name: 'poster',
+    html: `<img style="width: 100px" src="${img}">`,
+    tooltip: 'Poster Tip',
+    style: {
+        position: 'absolute',
+        top: '50px',
+        right: '50px',
+    },
+    click: function (...args) {
+        console.info('click', args);
+    },
+    mounted: function (...args) {
+        console.info('mounted', args);
+    },
+});
 
-// Get the Element of layer by name
-console.info(art.layers['potser']);
Remove ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: `<img style="width: 100px" src="${img}">`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-        },
-    ],
-});
+// Get the Element of layer by name
+console.info(art.layers['poster']);
Delete ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'poster',
+            html: `<img style="width: 100px" src="${img}">`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+        },
+    ],
+});
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the layer by name
-        art.layers.remove('potser');
-    }, 3000);
-});
Update ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: `<img style="width: 100px" src="${img}">`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                right: '50px',
-            },
-        },
-    ],
-});
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the layer by name
+        art.layers.remove('poster');
+    }, 3000);
+});
Update ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'poster',
+            html: `<img style="width: 100px" src="${img}">`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                right: '50px',
+            },
+        },
+    ],
+});
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the layer by name
-        art.layers.update({
-            name: 'potser',
-            html: `<img style="width: 200px" src="${img}">`,
-            style: {
-                position: 'absolute',
-                top: '50px',
-                left: '50px',
-            },
-        });
-    }, 3000);
-});

-    
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the layer by name
+        art.layers.update({
+            name: 'poster',
+            html: `<img style="width: 200px" src="${img}">`,
+            style: {
+                position: 'absolute',
+                top: '50px',
+                left: '50px',
+            },
+        });
+    }, 3000);
+});
+ \ No newline at end of file diff --git a/docs/document/en/component/setting.html b/docs/document/en/component/setting.html index cae08a2c4..d7e012084 100644 --- a/docs/document/en/component/setting.html +++ b/docs/document/en/component/setting.html @@ -3,229 +3,231 @@ - Setting | Artplayer.js + Settings Panel | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

Setting ​

Build-in ​

You must open the settings panel first, and then come with four built-in items：flip, playbackRate, aspectRatio, subtitleOffset

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-	setting: true,
-    flip: true,
-    playbackRate: true,
-    aspectRatio: true,
-    subtitleOffset: true,
-});

Init - Select list ​

PropertyTypeDescribe
htmlString, ElementElement DOM
iconString, ElementElement icon
selectorArrayElement list
onSelectFunctionElement click event
widthNumberList width
tooltipStringPrompt text
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Subtitle',
-            width: 250,
-            tooltip: 'Subtitle 01',
-            selector: [
-                {
-                    default: true,
-                    html: '<span style="color:red">Subtitle 01</span>',
-                    url: '/assets/sample/subtitle.srt?id=1',
-                },
-                {
-                    html: '<span style="color:yellow">Subtitle 02</span>',
-                    url: '/assets/sample/subtitle.srt?id=2',
-                },
-            ],
-            onSelect: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                art.subtitle.url = item.url;
-                return item.html;
-            },
-        },
-        {
-            html: 'Quality',
-            width: 150,
-            tooltip: '1080P',
-            selector: [
-                {
-                    default: true,
-                    html: '1080P',
-                    url: '/assets/sample/video.mp4?id=1080',
-                },
-                {
-                    html: '720P',
-                    url: '/assets/sample/video.mp4?id=720',
-                },
-                {
-                    html: '360P',
-                    url: '/assets/sample/video.mp4?id=360',
-                },
-            ],
-            onSelect: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                art.switchQuality(item.url, item.html);
-                return item.html;
-            },
-        },
-    ],
-});

Init - list nesting ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Multi-level',
-            selector: [
-                {
-                    html: 'Setting 01',
-                    width: 150,
-                    selector: [
-                        {
-                            html: 'Setting 01 - 01',
-                        },
-                        {
-                            html: 'Setting 01 - 02',
-                        },
-                    ],
-                    onSelect: function (item, $dom, event) {
-                        console.info(item, $dom, event);
-                        return item.html;
-                    },
-                },
-                {
-                    html: 'Setting 02',
-                    width: 150,
-                    selector: [
-                        {
-                            html: 'Setting 02 - 01',
-                        },
-                        {
-                            html: 'Setting 02 - 02',
-                        },
-                    ],
-                    onSelect: function (item, $dom, event) {
-                        console.info(item, $dom, event);
-                        return item.html;
-                    },
-                },
-            ],
-        },
-    ],
-});

Init - Switch button ​

PropertyTypeDescribe
htmlString, ElementElement DOM
iconString, ElementElement icon
switchBooleanButton default state
onSwitchFunctionButton toggle event
tooltipStringPrompt text
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'PIP Mode',
-            tooltip: 'Close',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            switch: false,
-            onSwitch: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                const nextState = !item.switch;
-                art.pip = nextState;
-                item.tooltip = nextState ? 'Open' : 'Close';
-                return nextState;
-            },
-        },
-    ],
-});

Init - Range slider ​

PropertyTypeDescribe
htmlString, ElementElement DOM
iconString, ElementElement icon
rangeArrayDefault state array
onRangeFunctionEvent fired on completion
onChangeFunctionEvent fired on change
tooltipStringPrompt text
js
const range = [5, 1, 10, 1];
-const value = range[0];
-const min = range[1];
-const max = range[2];
-const step = range[3];
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-            onChange: function (item, $dom, event) {
-                console.info(item, $dom, event);
-                return item.range + 'x';
-            },
-        },
-    ],
-});

Add ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
+    
Artplayer.js
Appearance
Settings Panel ​
Built-in ​
First, open the settings panel, and then it comes with four built-in items: flip, playbackRate, aspectRatio, subtitleOffset
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    subtitleOffset: true,
+});
Create - Selection List ​
PropertyTypeDescription
htmlString, ElementElement's DOM
| icon | String, Element | 元素的图标 | | selector | Array | 元素列表 | | onSelect | Function | 元素点击事件 | | width | Number | 列表宽度 | | tooltip | String | 提示文本 |
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Subtitle',
+            width: 250,
+            tooltip: 'Subtitle 01',
+            selector: [
+                {
+                    default: true,
+                    html: '<span style="color:red">Subtitle 01</span>',
+                    url: '/assets/sample/subtitle.srt?id=1',
+                },
+                {
+                    html: '<span style="color:yellow">Subtitle 02</span>',
+                    url: '/assets/sample/subtitle.srt?id=2',
+                },
+            ],
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                art.subtitle.url = item.url;
+                return item.html;
+            },
+        },
+        {
+            html: 'Quality',
+            width: 150,
+            tooltip: '1080P',
+            selector: [
+                {
+                    default: true,
+                    html: '1080P',
+                    url: '/assets/sample/video.mp4?id=1080',
+                },
+                {
+                    html: '720P',
+                    url: '/assets/sample/video.mp4?id=720',
+                },
+                {
+                    html: '360P',
+                    url: '/assets/sample/video.mp4?id=360',
+                },
+            ],
+            onSelect: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                art.switchQuality(item.url, item.html);
+                return item.html;
+            },
+        },
+    ],
+});
Creating - Nested Lists ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Multi-level',
+            selector: [
+                {
+                    html: 'Setting 01',
+                    width: 150,
+                    selector: [
+                        {
+                            html: 'Setting 01 - 01',
+                        },
+                        {
+                            html: 'Setting 01 - 02',
+                        },
+                    ],
+                    onSelect: function (item, $dom, event) {
+                        console.info(item, $dom, event);
+                        return item.html;
+                    },
+                },
+                {
+                    html: 'Setting 02',
+                    width: 150,
+                    selector: [
+                        {
+                            html: 'Setting 02 - 01',
+                        },
+                        {
+                            html: 'Setting 02 - 02',
+                        },
+                    ],
+                    onSelect: function (item, $dom, event) {
+                        console.info(item, $dom, event);
+                        return item.html;
+                    },
+                },
+            ],
+        },
+    ],
+});
Create - Toggle Button ​
PropertyTypeDescription
htmlString, ElementElement's DOM element
iconString, ElementElement's icon
switchBooleanButton's default state
onSwitchFunctionButton toggle event
tooltipStringTooltip text
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+            onSwitch: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                const nextState = !item.switch;
+                art.pip = nextState;
+                item.tooltip = nextState ? 'Open' : 'Close';
+                return nextState;
+            },
+        },
+    ],
+});
Create - Range Slider ​
AttributeTypeDescription
htmlString, ElementThe element's DOM element
iconString, ElementThe element's icon
rangeArrayDefault state array
onRangeFunctionEvent triggered upon completion
onChangeFunctionEvent triggered on change
tooltipStringTooltip text
js
const range = [5, 1, 10, 1];
+const value = range[0];
+const min = range[1];
+const max = range[2];
+const step = range[3];
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" height="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+            onChange: function (item, $dom, event) {
+                console.info(item, $dom, event);
+                return item.range + 'x';
+            },
+        },
+    ],
+});
Add ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
 
-art.setting.show = true;
+art.setting.show = true;
 
-art.setting.add({
-    html: 'Slider',
-    tooltip: '5x',
-    icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-    range: [5, 1, 10, 1],
-});
Remove ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    flip: true,
-    settings: [
-        {
-            name: 'slider',
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-        },
-    ],
-});
+art.setting.add({
+    html: 'Slider',
+    tooltip: '5x',
+    icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+    range: [5, 1, 10, 1],
+});
Delete ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    flip: true,
+    settings: [
+        {
+            name: 'slider',
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+        },
+    ],
+});
 
-art.setting.show = true;
+art.setting.show = true;
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Delete the setting by name
-        art.setting.remove('slider');
-    }, 3000);
-});
Update ​
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            name: 'slider',
-            html: 'Slider',
-            tooltip: '5x',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            range: [5, 1, 10, 1],
-        },
-    ],
-});
+art.on('ready', () => {
+    setTimeout(() => {
+        // Delete the setting by name
+        art.setting.remove('slider');
+    }, 3000);
+});
Updates ​
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            name: 'slider',
+            html: 'Slider',
+            tooltip: '5x',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            range: [5, 1, 10, 1],
+        },
+    ],
+});
 
-art.setting.show = true;
+art.setting.show = true;
 
-art.on('ready', () => {
-    setTimeout(() => {
-        // Update the setting by name
-        art.setting.update({
-            name: 'slider',
-            html: 'PIP Mode',
-            tooltip: 'Close',
-            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
-            switch: false,
-        });
-    }, 3000);
-});

-    
+art.on('ready', () => {
+    setTimeout(() => {
+        // Update the setting by name
+        art.setting.update({
+            name: 'slider',
+            html: 'PIP Mode',
+            tooltip: 'Close',
+            icon: '<img width="22" heigth="22" src="/assets/img/state.svg">',
+            switch: false,
+        });
+    }, 3000);
+});
+ \ No newline at end of file diff --git a/docs/document/en/index.html b/docs/document/en/index.html index 5ff7ec5f3..03b499065 100644 --- a/docs/document/en/index.html +++ b/docs/document/en/index.html @@ -3,189 +3,191 @@ - Install | Artplayer.js + Installation and Usage | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

Important Note

The English document has not yet been completed, everything is subject to the Chinese document.

Install ​

Install ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

Use ​

js
import Artplayer from 'artplayer';
+    
Artplayer.js
Appearance
Installation and Usage ​
Installation ​
bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js
Usage ​
js
import Artplayer from 'artplayer';
 
-const art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'path/to/video.mp4',
-});
html
<html>
-    <head>
-        <title>ArtPlayer Demo</title>
-        <meta charset="UTF-8" />
-        <style>
-            .artplayer-app {
-                width: 400px;
-                height: 300px;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app"></div>
-    </body>
-</html>
Tip
The size of the player depends on the size of the container, so your container must have a size
The following links can see more use examples
/packages/artplayer-template
Vue.js ​
vue
<template>
-  <div ref="artRef"></div>
-</template>
+const art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'path/to/video.mp4',
+});
html
<html>
+    <head>
+        <title>ArtPlayer Demo</title>
+        <meta charset="UTF-8" />
+        <style>
+            .artplayer-app {
+                width: 400px;
+                height: 300px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app"></div>
+    </body>
+</html>
Warning
The player's size depends on the size of the container container, so your container container must have a size.
You can see more examples of use at the following link
/packages/artplayer-template
Vue.js ​
vue
<template>
+  <div ref="artRef"></div>
+</template>
 
-<script>
-import Artplayer from "artplayer";
+<script>
+import Artplayer from "artplayer";
 
-export default {
-  data() {
-    return {
-      instance: null,
-    };
-  },
-  props: {
-    option: {
-      type: Object,
-      required: true,
-    },
-  },
-  mounted() {
-    this.instance = new Artplayer({
-      ...this.option,
-      container: this.$refs.artRef,
-    });
+export default {
+  data() {
+    return {
+      instance: null,
+    };
+  },
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    this.instance = new Artplayer({
+      ...this.option,
+      container: this.$refs.artRef,
+    });
 
-    this.$nextTick(() => {
-      this.$emit("get-instance", this.instance);
-    });
-  },
-  beforeDestroy() {
-    if (this.instance && this.instance.destroy) {
-      this.instance.destroy(false);
-    }
-  },
-};
-</script>
vue
<template>
-  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
-</template>
+    this.$nextTick(() => {
+      this.$emit("get-instance", this.instance);
+    });
+  },
+  beforeDestroy() {
+    if (this.instance && this.instance.destroy) {
+      this.instance.destroy(false);
+    }
+  },
+};
+</script>
vue
<template>
+  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
+</template>
 
-<script>
-import Artplayer from "./Artplayer.vue";
+<script>
+import Artplayer from "./Artplayer.vue";
 
-export default {
-  data() {
-    return {
-      option: {
-        url: "path/to/video.mp4",
-      },
-      style: {
-        width: "600px",
-        height: "400px",
-        margin: "60px auto 0",
-      },
-    };
-  },
-  components: {
-    Artplayer,
-  },
-  methods: {
-    getInstance(art) {
-      console.info(art);
-    },
-  },
-};
-</script>
Tip
Modifying option directly in Vue.js will not change the player
React.js ​
jsx
import { useEffect, useRef } from 'react';
-import Artplayer from 'artplayer';
+export default {
+  data() {
+    return {
+      option: {
+        url: "path/to/video.mp4",
+      },
+      style: {
+        width: "600px",
+        height: "400px",
+        margin: "60px auto 0",
+      },
+    };
+  },
+  components: {
+    Artplayer,
+  },
+  methods: {
+    getInstance(art) {
+      console.info(art);
+    },
+  },
+};
+</script>
Artplayer Not Responsive：
Modifying option directly in Vue.js will not change the player
React.js ​
jsx
import { useEffect, useRef } from 'react';
+import Artplayer from 'artplayer';
 
-export default function Player({ option, getInstance, ...rest }) {
-    const artRef = useRef();
+export default function Player({ option, getInstance, ...rest }) {
+    const artRef = useRef();
 
-    useEffect(() => {
-        const art = new Artplayer({
-            ...option,
-            container: artRef.current,
-        });
+    useEffect(() => {
+        const art = new Artplayer({
+            ...option,
+            container: artRef.current,
+        });
 
-        if (getInstance && typeof getInstance === 'function') {
-            getInstance(art);
-        }
+        if (getInstance && typeof getInstance === 'function') {
+            getInstance(art);
+        }
 
-        return () => {
-            if (art && art.destroy) {
-                art.destroy(false);
-            }
-        };
-    }, []);
+        return () => {
+            if (art && art.destroy) {
+                art.destroy(false);
+            }
+        };
+    }, []);
 
-    return <div ref={artRef} {...rest}></div>;
-}
jsx
import React from 'react';
-import Artplayer from './ArtPlayer.jsx';
+    return <div ref={artRef} {...rest}></div>;
+}
jsx
import React from 'react';
+import Artplayer from './ArtPlayer.jsx';
 
-function App() {
-    return (
-        <div>
-            <Artplayer
-                option={{
-                    url: 'https://artplayer.org/assets/sample/video.mp4',
-                }}
-                style={{
-                    width: '600px',
-                    height: '400px',
-                    margin: '60px auto 0',
-                }}
-                getInstance={(art) => console.info(art)}
-            />
-        </div>
-    );
-}
+function App() {
+    return (
+        <div>
+            <Artplayer
+                option={{
+                    url: 'https://artplayer.org/assets/sample/video.mp4',
+                }}
+                style={{
+                    width: '600px',
+                    height: '400px',
+                    margin: '60px auto 0',
+                }}
+                getInstance={(art) => console.info(art)}
+            />
+        </div>
+    );
+}
 
-export default App;
Tip
Modifying option directly in React.js will not change the player
TypeScript ​
The artplayer.d.ts that is automatically imported when importing Artplayer, but you can also import the type of options individually
ts
import Artplayer from 'artplayer';
-import { type Option } from 'artplayer/types/option';
+export default App;
Non-responsive Artplayer:
In React.js, directly modifying the option will not change the player
TypeScript ​
Importing Artplayer will automatically import artplayer.d.ts, but you can also separately import the type for options
ts
import Artplayer from 'artplayer';
+import { type Option } from 'artplayer/types/option';
 
-const option: Option = {
-    container: '.artplayer-app',
-    url: './assets/sample/video.mp4',
-};
+const option: Option = {
+    container: '.artplayer-app',
+    url: './assets/sample/video.mp4',
+};
 
-option.volume = 0.5;
+option.volume = 0.5;
 
-const art = new Artplayer(option);
All TypeScript definitions
packages/artplayer/types
JavaScript ​
Sometimes your js file will lose the type prompt of TypeScript. At this time, you can manually import the type
Variable:
js
/**
- * @type {import("artplayer")}
- */
-let art = null;
Parameters:
js
/**
- * @param {import("artplayer")} art
- */
-function getInstance(art) {
-  //
-}
Properties:
js
export default {
-  data() {
-    return {
-      /**
-       * @type {import("artplayer")}
-       */
-      art: null,
-    }
-  }
-}
Option:
js
/**
- * @type {import("artplayer/types/option").Option}
- */
+const art = new Artplayer(option);
Complete TypeScript Definitions
packages/artplayer/types
JavaScript ​
Sometimes your js file may lose the TypeScript type hints, in this case, you can manually import the types
Variables:
js
/**
+ * @type {import("artplayer")}
+ */
+let art = null;
Parameters:
js
/**
+ * @param {import("artplayer")} art
+ */
+function getInstance(art) {
+  //
+}
Properties:
js
export default {
+  data() {
+    return {
+      /**
+       * @type {import("artplayer")}
+       */
+      art: null,
+    }
+  }
+}
Options:
js
/**
+ * @type {import("artplayer/types/option").Option}
+ */
 
-const option = {
-    container: '.artplayer-app',
-    url: './assets/sample/video.mp4',
-};
+const option = {
+    container: '.artplayer-app',
+    url: './assets/sample/video.mp4',
+};
 
-option.volume = 0.5;
+option.volume = 0.5;
 
-const art8 = new Artplayer(option);
Old browsers ​
Production builds of artplayer.js are only compatible with the last major version of Chrome: last 1 Chrome version
For older browsers, use the artplayer.legacy.js file, compatible up to: IE 11
js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js
If you want to be compatible with older browsers, please modify the following configuration and build it yourself:
Build configuration: /scripts/build.js
Reference documents: browserslist
- +const art8 = new Artplayer(option);

Ancient Browsers ​

The production build of artplayer.js is only compatible with the latest major version of Chrome: last 1 Chrome version

For ancient browsers, you can use the artplayer.legacy.js file, which is compatible up to: IE 11

js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

If you need to support even older browsers, please modify the following configuration and then build it yourself:

Build configuration: scripts/build.js

Refer to documentation: browserslist

+ \ No newline at end of file diff --git a/docs/document/en/library/dash.html b/docs/document/en/library/dash.html index bb5f6aa37..9b74d826d 100644 --- a/docs/document/en/library/dash.html +++ b/docs/document/en/library/dash.html @@ -5,44 +5,46 @@ dash.js | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

dash.js ​

👉 https://github.com/Dash-Industry-Forum/dash.js

▶ Run Code
js
function playMpd(video, url, art) {
-    if (dashjs.supportsMediaSource()) {
-        if (art.dash) art.dash.destroy();
-        const dash = dashjs.MediaPlayer().create();
-        dash.initialize(video, url, art.option.autoplay);
-        art.dash = dash; 
-        art.on('destroy', () => dash.destroy());
-    } else {
-        art.notice.show = 'Unsupported playback format: mpd';
-    }
-}
+    
Artplayer.js
Appearance
dash.js ​
👉 https://github.com/Dash-Industry-Forum/dash.js
 ▶ Run Code 
js
function playMpd(video, url, art) {
+    if (dashjs.supportsMediaSource()) {
+        if (art.dash) art.dash.destroy();
+        const dash = dashjs.MediaPlayer().create();
+        dash.initialize(video, url, art.option.autoplay);
+        art.dash = dash; 
+        art.on('destroy', () => dash.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: mpd';
+    }
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
-    type: 'mpd',
-    customType: {
-        mpd: playMpd
-    },
-});
-
-art.on('ready', () => {
-    console.info(art.dash);
-});

-    
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
+    type: 'mpd',
+    customType: {
+        mpd: playMpd
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.dash);
+});
+ \ No newline at end of file diff --git a/docs/document/en/library/flv.html b/docs/document/en/library/flv.html index d20444be0..853c93a33 100644 --- a/docs/document/en/library/flv.html +++ b/docs/document/en/library/flv.html @@ -5,45 +5,47 @@ flv.js | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

flv.js ​

👉 https://github.com/Bilibili/flv.js

▶ Run Code
js
function playFlv(video, url, art) {
-    if (flvjs.isSupported()) {
-        if (art.flv) art.flv.destroy();
-        const flv = flvjs.createPlayer({ type: 'flv', url });
-        flv.attachMediaElement(video);
-        flv.load();
-        art.flv = flv; 
-        art.on('destroy', () => flv.destroy());
-    } else {
-        art.notice.show = 'Unsupported playback format: flv';
-    }
-}
+    
Artplayer.js
Appearance
flv.js ​
👉 https://github.com/Bilibili/flv.js
 ▶ Run Code 
js
function playFlv(video, url, art) {
+    if (flvjs.isSupported()) {
+        if (art.flv) art.flv.destroy();
+        const flv = flvjs.createPlayer({ type: 'flv', url });
+        flv.attachMediaElement(video);
+        flv.load();
+        art.flv = flv; 
+        art.on('destroy', () => flv.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: flv';
+    }
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.flv',
-    type: 'flv',
-    customType: {
-        flv: playFlv,
-    },
-});
-
-art.on('ready', () => {
-    console.info(art.flv);
-});

-    
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.flv',
+    type: 'flv',
+    customType: {
+        flv: playFlv,
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.flv);
+});
+ \ No newline at end of file diff --git a/docs/document/en/library/hls.html b/docs/document/en/library/hls.html index a039871cc..a47481378 100644 --- a/docs/document/en/library/hls.html +++ b/docs/document/en/library/hls.html @@ -5,47 +5,49 @@ hls.js | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

hls.js ​

👉 https://github.com/video-dev/hls.js

▶ Run Code
js
function playM3u8(video, url, art) {
-    if (Hls.isSupported()) {
-        if (art.hls) art.hls.destroy();
-        const hls = new Hls();
-        hls.loadSource(url);
-        hls.attachMedia(video);
-        art.hls = hls;
-        art.on('destroy', () => hls.destroy());
-    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-        video.src = url;
-    } else {
-        art.notice.show = 'Unsupported playback format: m3u8';
-    }
-}
+    
Artplayer.js
Appearance
hls.js ​
👉 https://github.com/video-dev/hls.js
 ▶ Run Code 
js
function playM3u8(video, url, art) {
+    if (Hls.isSupported()) {
+        if (art.hls) art.hls.destroy();
+        const hls = new Hls();
+        hls.loadSource(url);
+        hls.attachMedia(video);
+        art.hls = hls;
+        art.on('destroy', () => hls.destroy());
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = url;
+    } else {
+        art.notice.show = 'Unsupported playback format: m3u8';
+    }
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
-    type: 'm3u8',
-    customType: {
-        m3u8: playM3u8,
-    },
-});
-
-art.on('ready', () => {
-    console.info(art.hls);
-});

-    
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+    type: 'm3u8',
+    customType: {
+        m3u8: playM3u8,
+    },
+});
+
+art.on('ready', () => {
+    console.info(art.hls);
+});
+ \ No newline at end of file diff --git a/docs/document/en/plugin/ads.html b/docs/document/en/plugin/ads.html index c4560facb..7c10059ea 100644 --- a/docs/document/en/plugin/ads.html +++ b/docs/document/en/plugin/ads.html @@ -3,70 +3,72 @@ - 视频广告 | Artplayer.js + Video Ads | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

视频广告 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-ads
bash
yarn add artplayer-plugin-ads
bash
pnpm add artplayer-plugin-ads
html
<script src="path/to/artplayer-plugin-ads.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
bash
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js

使用 ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-    fullscreen: true,
-    fullscreenWeb: true,
-    plugins: [
-        artplayerPluginAds({
-            // html广告，假如是视频广告则忽略该值
-            html: '<img src="/assets/sample/poster.jpg">',
+    
Artplayer.js
Appearance
Video Ads ​
Demo ​
👉 View Full Demo
Installation ​
bash
npm install artplayer-plugin-ads
bash
yarn add artplayer-plugin-ads
bash
pnpm add artplayer-plugin-ads
html
<script src="path/to/artplayer-plugin-ads.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
bash
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
Usage ​
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    plugins: [
+        artplayerPluginAds({
+            // HTML ad, ignored if it's a video ad
+            html: '<img src="/assets/sample/poster.jpg">',
 
-            // 视频广告的地址
-            video: '/assets/sample/test1.mp4',
+            // URL of the video ad
+            video: '/assets/sample/test1.mp4',
 
-            // 广告跳转网址，为空则不跳转
-            url: 'http://artplayer.org',
+            // Ad redirect URL, no redirection if empty
+            url: 'http://artplayer.org',
 
-            // 必须观看的时长，期间不能被跳过，单位为秒
-            // 当该值大于或等于totalDuration时，不能提前关闭广告
-            // 当该值等于或小于0时，则随时都可以关闭广告
-            playDuration: 5,
+            // The duration that must be watched, which can't be skipped, in seconds
+            // If this value is greater than or equal to totalDuration, the ad can't be closed early
+            // If this value is less than or equal to 0, then the ad can be closed at any time
+            playDuration: 5,
 
-            // 广告总时长，单位为秒
-            totalDuration: 10,
+            // Total duration of the ad, in seconds
+            totalDuration: 10,
 
-            // 视频广告是否默认静音
-            muted: false,
+            // Whether the video ad is muted by default
+            muted: false,
 
-            // 多语言支持
-            i18n: {
-                close: '关闭广告',
-                countdown: '%s秒',
-                detail: '查看详情',
-                canBeClosed: '%s秒后可关闭广告',
-            },
-        }),
-    ],
-});
+            // Multilingual support
+            i18n: {
+                close: 'Close ad',
+                countdown: '%s seconds',
+                detail: 'See details',
+                canBeClosed: '%s seconds until the ad can be closed',
+            },
+        }),
+    ],
+});
 
-// ad is clicked
-art.on('artplayerPluginAds:click', (ads) => {
-    console.info(ads);
-});
+// ad is clicked
+art.on('artplayerPluginAds:click', (ads) => {
+    console.info(ads);
+});
 
-// Ad skipped
-art.on('artplayerPluginAds:skip', (ads) => {
-    console.info(ads);
-});

-    
+// Ad skipped
+art.on('artplayerPluginAds:skip', (ads) => {
+    console.info(ads);
+});
+ \ No newline at end of file diff --git a/docs/document/en/plugin/control-ui.html b/docs/document/en/plugin/control-ui.html deleted file mode 100644 index 7ed3e8872..000000000 --- a/docs/document/en/plugin/control-ui.html +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - 控制器皮肤 | Artplayer.js - - - - - - - - - - - - - - -
Artplayer.js

Appearance

On this page

控制器皮肤 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-control
bash
yarn add artplayer-plugin-control
bash
pnpm add artplayer-plugin-control
html
<script src="path/to/artplayer-plugin-control.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-control/dist/artplayer-plugin-control.js
bash
https://unpkg.com/artplayer-plugin-control/dist/artplayer-plugin-control.js

使用 ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-    fullscreenWeb: true,
-    plugins: [
-        artplayerPluginControl(),
-    ],
-});

enable ​

  • Type: Getter/Setter
  • Parameter: Boolean

是否启用新的控制器皮肤

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-    fullscreenWeb: true,
-    controls: [
-        {
-            position: 'right',
-            html: '<button type="button">Switch UI</button>',
-            click: function () {
-                const { enable } = art.plugins.artplayerPluginControl;
-                art.plugins.artplayerPluginControl.enable = !enable;
-            },
-        },
-    ],
-    plugins: [
-        artplayerPluginControl(),
-    ],
-});
- - - - \ No newline at end of file diff --git a/docs/document/en/plugin/danmuku.html b/docs/document/en/plugin/danmuku.html new file mode 100644 index 000000000..ae1fe17d1 --- /dev/null +++ b/docs/document/en/plugin/danmuku.html @@ -0,0 +1,310 @@ + + + + + + Danmuku | Artplayer.js + + + + + + + + + + + + + + + + +
Artplayer.js

Appearance

Danmuku ​

Demo ​

👉 View Full Demo

Installation ​

bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js

Option ​

js
{
+    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
+    speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
+    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
+    fontSize: 25, // 字体大小，支持数字和百分比
+    color: '#FFFFFF', // 默认字体颜色
+    mode: 0, // 默认模式，0-滚动，1-静止
+    margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
+    antiOverlap: true, // 是否防重叠
+    useWorker: true, // 是否使用 web worker
+    synchronousPlayback: false, // 是否同步到播放速度
+    filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
+    lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
+    maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
+    minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
+    maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
+    theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
+    heatmap: true, // 是否开启弹幕热度图, 默认为 false
+    beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
+    // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
+    mount: document.querySelector('.artplayer-danmuku'),
+}

Using Danmuku Array ​

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            // Danmuku array
+            danmuku: [
+                {
+                    text: '111', // Danmuku text
+                    time: 1, // Send time, in seconds
+                    color: '#fff', // Danmuku local color
+                    border: false, // Whether to display outline
+                    mode: 0, // Danmuku mode: 0 for scrolling, 1 for stationary
+                },
+                {
+                    text: '222',
+                    time: 2,
+                    color: 'red',
+                    border: true,
+                    mode: 0,
+                },
+                {
+                    text: '333',
+                    time: 3,
+                    color: 'green',
+                    border: false,
+                    mode: 1,
+                },
+            ],
+        }),
+    ],
+});

Using Danmuku XML ​

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            // Danmuku XML file, consistent with the danmuku format of the Bilibili website
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});

Using Asynchronous Call ​

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            // Use Promise to return asynchronously
+            danmuku: function () {
+                return new Promise((resolve) => {
+                    return resolve([
+                        {
+                            text: '111',
+                            time: 1,
+                        },
+                        {
+                            text: '222',
+                            time: 2,
+                        },
+                        {
+                            text: '333',
+                            time: 3,
+                        },
+                    ]);
+                });
+            },
+        }),
+    ],
+});

hide/show ​

Hide or show the bullet comments with the methods hide and show.

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Hide Danmuku',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.hide();
+            },
+        },
+        {
+            position: 'right',
+            html: 'Show Danmuku',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.show();
+            },
+        },
+    ],
+});

isHide ​

Judge whether the current barrage is hidden or displayed with the isHide property.

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Hide Barrage',
+            click: function (_, event) {
+                if (art.plugins.artplayerPluginDanmuku.isHide) {
+                    art.plugins.artplayerPluginDanmuku.show();
+                    event.target.innerText = 'Hide Barrage';
+                } else {
+                    art.plugins.artplayerPluginDanmuku.hide();
+                    event.target.innerText = 'Show Barrage';
+                }
+            },
+        },
+    ],
+});

emit ​

Send a real-time danmaku message through the emit method

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Send Danmaku',
+            click: function () {
+                var text = prompt('Please enter the danmaku text', 'Danmaku test text');
+                if (!text || !text.trim()) return;
+                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
+                art.plugins.artplayerPluginDanmuku.emit({
+                    text: text,
+                    color: color,
+                    border: true,
+                });
+            },
+        },
+    ],
+});

config ​

Change the barrage configuration in real-time with the config method, supported attributes include:

  • danmuku
  • speed
  • opacity
  • fontSize
  • color
  • mode
  • margin
  • antiOverlap
  • synchronousPlayback
  • filter
  • lockTime
  • beforeEmit
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Danmaku size：<input type="range" min="12" max="50" step="1" value="25">',
+            style: {
+                display: 'flex',
+                alignItems: 'center',
+            },
+            mounted: function ($setting) {
+                const $range = $setting.querySelector('input[type=range]');
+                $range.addEventListener('change', () => {
+                    art.plugins.artplayerPluginDanmuku.config({
+                        fontSize: Number($range.value),
+                    });
+                });
+            },
+        },
+    ],
+});

load ​

The load method can be used to reload the danmu data source or switch to new danmu.

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: 'Reload Danmu',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+        {
+            position: 'right',
+            html: 'Switch Danmu',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.config({
+                    danmuku: '/assets/sample/danmuku-v2.xml',
+                });
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+    ],
+});

reset ​

Used to clear the current displayed barrages

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('resize', () => {
+    art.plugins.artplayerPluginDanmuku.reset();
+});

option ​

Used to get the current barrage configuration

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('ready', () => {
+    console.info(art.plugins.artplayerPluginDanmuku.option);
+});

Event ​

js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
+
+art.on('artplayerPluginDanmuku:emit', (danmu) => {
+    console.info('新增弹幕', danmu);
+});
+
+art.on('artplayerPluginDanmuku:loaded', (danmus) => {
+    console.info('加载弹幕', danmus.length);
+});
+
+art.on('artplayerPluginDanmuku:error', (error) => {
+    console.info('加载错误', error);
+});
+
+art.on('artplayerPluginDanmuku:config', (option) => {
+    console.info('配置变化', option);
+});
+
+art.on('artplayerPluginDanmuku:stop', () => {
+    console.info('弹幕停止');
+});
+
+art.on('artplayerPluginDanmuku:start', () => {
+    console.info('弹幕开始');
+});
+
+art.on('artplayerPluginDanmuku:hide', () => {
+    console.info('弹幕隐藏');
+});
+
+art.on('artplayerPluginDanmuku:show', () => {
+    console.info('弹幕显示');
+});
+
+art.on('artplayerPluginDanmuku:destroy', () => {
+    console.info('弹幕销毁');
+});
+ + + + \ No newline at end of file diff --git a/docs/document/en/plugin/dash-quality.html b/docs/document/en/plugin/dash-quality.html index d1ca9dafd..2eb16185d 100644 --- a/docs/document/en/plugin/dash-quality.html +++ b/docs/document/en/plugin/dash-quality.html @@ -3,23 +3,25 @@ - Dash 画质 | Artplayer.js + Dash Video Quality | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

Dash 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-dash-quality
bash
yarn add artplayer-plugin-dash-quality
bash
pnpm add artplayer-plugin-dash-quality
html
<script src="path/to/artplayer-plugin-dash-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
bash
https://unpkg.com/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
- +
Artplayer.js

Appearance

Dash Video Quality ​

Demo ​

👉 View the full demo

Installation ​

bash
npm install artplayer-plugin-dash-quality
bash
yarn add artplayer-plugin-dash-quality
bash
pnpm add artplayer-plugin-dash-quality
html
<script src="path/to/artplayer-plugin-dash-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
bash
https://unpkg.com/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
+ \ No newline at end of file diff --git a/docs/document/en/plugin/hls-quality.html b/docs/document/en/plugin/hls-quality.html index ed641930f..77c6d1f52 100644 --- a/docs/document/en/plugin/hls-quality.html +++ b/docs/document/en/plugin/hls-quality.html @@ -3,23 +3,25 @@ - HLS 画质 | Artplayer.js + HLS Quality | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

HLS 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-hls-quality
bash
yarn add artplayer-plugin-hls-quality
bash
pnpm add artplayer-plugin-hls-quality
html
<script src="path/to/artplayer-plugin-hls-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
bash
https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
- +
Artplayer.js

Appearance

HLS Quality ​

Demonstration ​

👉 View the full demo

Installation ​

bash
npm install artplayer-plugin-hls-quality
bash
yarn add artplayer-plugin-hls-quality
bash
pnpm add artplayer-plugin-hls-quality
html
<script src="path/to/artplayer-plugin-hls-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
bash
https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
+ \ No newline at end of file diff --git a/docs/document/en/plugin/iframe.html b/docs/document/en/plugin/iframe.html index 675260cda..5568f402b 100644 --- a/docs/document/en/plugin/iframe.html +++ b/docs/document/en/plugin/iframe.html @@ -3,188 +3,192 @@ - Iframe 控制 | Artplayer.js + Iframe Control | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

Iframe 控制 ​

说明 ​

通过该插件，你可以轻松在 index.html 里控制跨域 iframe.html 页面里的播放器，如在 index.html 里通过代码控制 iframe.html 播放器的功能，或者获取 iframe.html 播放器的值

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-iframe
bash
yarn add artplayer-plugin-iframe
bash
pnpm add artplayer-plugin-iframe
html
<script src="path/to/artplayer-plugin-iframe.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
bash
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js

使用 ​

html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-    </head>
-    <body>
-        <iframe id="iframe"></iframe>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            const iframe = new ArtplayerPluginIframe({
-                // Iframe element
-                iframe: document.querySelector('#iframe'),
-                // Iframe url
-                url: 'path/to/iframe.html',
-            });
+    
Artplayer.js
Appearance
Iframe Control ​
Description ​
With this plugin, you can easily control the player inside the cross-domain iframe.html page from within index.html. For example, you can control the functionalities of the iframe.html player from index.html or retrieve the values of the iframe.html player.
Demonstration ​
👉 View full demonstration
Installation ​
bash
npm install artplayer-plugin-iframe
bash
yarn add artplayer-plugin-iframe
bash
pnpm add artplayer-plugin-iframe
html
<script src="path/to/artplayer-plugin-iframe.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
bash
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
Usage ​
html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            const iframe = new ArtplayerPluginIframe({
+                // Iframe element
+                iframe: document.querySelector('#iframe'),
+                // Iframe url
+                url: 'path/to/iframe.html',
+            });
 
-            // Send message to iframe
-            iframe.commit(() => {
-                var art = new Artplayer({
-                    container: '.artplayer-app',
-                    url: 'path/to/video.mp4',
-                });
-            });
-        </script>
-    </body>
-</html>
html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-        <style>
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                padding: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
-        <script src="path/to/artplayer.js"></script>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            // Inject scripts to receive messages from instances
-            ArtplayerPluginIframe.inject();
-        </script>
-    </body>
-</html>
index.html 接口 ​
commit ​
从 index.html 将消息推送到 iframe.html，该函数将在 iframe.html 内部运行，同时它也能用于异步获取 iframe.html 里的值
js
iframe.commit(() => {
-    var art = new Artplayer({
-        container: '.artplayer-app',
-        url: 'path/to/video.mp4',
-    });
-});
+            // Send message to iframe
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
+            });
+        </script>
+    </body>
+</html>
html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            // Inject scripts to receive messages from instances
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>
index.html Interface ​
commit ​
Push messages from index.html to iframe.html. This function will run inside iframe.html and can also be used to asynchronously retrieve values from within iframe.html.
js
iframe.commit(() => {
+    var art = new Artplayer({
+        container: '.artplayer-app',
+        url: 'path/to/video.mp4',
+    });
+});
 
-iframe.commit(() => {
-    art.seek = 5;
-});
+iframe.commit(() => {
+    art.seek = 5;
+});
 
-// Get the value from the iframe.html
-(async function () {
-    // Use the return keyword
-    var currentTime = await iframe.commit(() => {
-        return art.currentTime;
-    });
+// Get the value from the iframe.html
+(async function () {
+    // Use the return keyword
+    var currentTime = await iframe.commit(() => {
+        return art.currentTime;
+    });
 
-    // or use the resolve method
-    var currentTime2 = await iframe.commit((resolve) => {
-        setTimeout(() => {
-            resolve(art.currentTime);
-        }, 1000);
-    });
-})();
message ​
在 index.html 接收来自 iframe.html 的消息
js
iframe.message((event) => {
-    console.info(event);
-});
destroy ​
销毁后 index.html 无法与 iframe.html 通信
js
iframe.destroy();
iframe.html 接口 ​
提示
iframe.html 接口 只能运行在 iframe.html 里
inject ​
注入脚本，接收来自 index.html 的消息
js
ArtplayerPluginIframe.inject();
postMessage ​
将消息推送到 index.html
js
iframe.message((event) => {
-    console.info(event);
-});
+    // or use the resolve method
+    var currentTime2 = await iframe.commit((resolve) => {
+        setTimeout(() => {
+            resolve(art.currentTime);
+        }, 1000);
+    });
+})();
message ​
Receive messages from iframe.html in index.html
js
iframe.message((event) => {
+    console.info(event);
+});
destroy ​
After destruction, index.html can no longer communicate with iframe.html
js
iframe.destroy();
iframe.html Interface ​
Warning
The iframe.html interface can only run inside iframe.html
inject ​
Inject a script, receive messages from index.html
js
ArtplayerPluginIframe.inject();
postMessage ​
Push messages to index.html
js
iframe.message((event) => {
+    console.info(event);
+});
 
-iframe.commit(() => {
-    ArtplayerPluginIframe.postMessage({
-        type: 'currentTime',
-        data: art.currentTime,
-    });
-});
例子 ​
最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 iframe.html 里的 fullscreenWeb 事件并通知到 index.html 即可
html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-    </head>
-    <body>
-        <iframe id="iframe"></iframe>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <style>
-            .fullscreenWeb {
-                position: fixed;
-                z-index: 9999;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                right: 0;
-                bottom: 0;
-            }
-        </style>
-        <script>
-            const $iframe = document.querySelector('#iframe');
-            const iframe = new ArtplayerPluginIframe({
-                iframe: $iframe,
-                url: 'path/to/iframe.html',
-            });
+iframe.commit(() => {
+    ArtplayerPluginIframe.postMessage({
+        type: 'currentTime',
+        data: art.currentTime,
+    });
+});
例子 ​
最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 iframe.html 里的 fullscreenWeb 事件并通知到 index.html 即可
html

+<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <style>
+            .fullscreenWeb {
+                position: fixed;
+                z-index: 9999;
+                width: 100%;
+                height: 100%;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+            }
+        </style>
+        <script>
+            const $iframe = document.querySelector('#iframe');
+            const iframe = new ArtplayerPluginIframe({
+                iframe: $iframe,
+                url: 'path/to/iframe.html',
+            });
 
-            iframe.message(({ type, data }) => {
-                switch (type) {
-                    case 'fullscreenWeb':
-                        if (data) {
-                            $iframe.classList.add('fullscreenWeb');
-                        } else {
-                            $iframe.classList.remove('fullscreenWeb');
-                        }
-                        break;
-                    default:
-                        break;
-                }
-            });
+            iframe.message(({ type, data }) => {
+                switch (type) {
+                    case 'fullscreenWeb':
+                        if (data) {
+                            $iframe.classList.add('fullscreenWeb');
+                        } else {
+                            $iframe.classList.remove('fullscreenWeb');
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            });
 
-            iframe.commit(() => {
-                var art = new Artplayer({
-                    container: '.artplayer-app',
-                    url: 'path/to/video.mp4',
-                });
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
 
-                art.on('fullscreenWeb', (state) => {
-                    ArtplayerPluginIframe.postMessage({
-                        type: 'fullscreenWeb',
-                        data: state,
-                    });
-                });
-            });
-        </script>
-    </body>
-</html>
html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-        <style>
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                padding: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
-        <script src="path/to/artplayer.js"></script>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            ArtplayerPluginIframe.inject();
-        </script>
-    </body>
-</html>

-    
+                art.on('fullscreenWeb', (state) => {
+                    ArtplayerPluginIframe.postMessage({
+                        type: 'fullscreenWeb',
+                        data: state,
+                    });
+                });
+            });
+        </script>
+    </body>
+</html>
html

+<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>
+ \ No newline at end of file diff --git a/docs/document/en/start/i18n.html b/docs/document/en/start/i18n.html index 70026a63e..8b45cd6ba 100644 --- a/docs/document/en/start/i18n.html +++ b/docs/document/en/start/i18n.html @@ -3,74 +3,76 @@ - Language | Artplayer.js + Language Settings | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

Language ​

DANGER

In view of the fact that more and more languages are bundled, starting from version 5.1.0, the core code of artplayer.js will no longer bundle other languages except Simplified Chinese and English, and you need to import the required language.

WARNING

When the language cannot be matched, English will be displayed by default, i18n writing reference: artplayer/types/i18n.d.ts

Default language ​

The default languages are: en, zh-cn, no need to import manually

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'zh-cn', // or 'en'
-});

Import language ​

The language files before packaging are stored in: artplayer/src/i18n/*.js, welcome to add your language

The packaged language files are stored in: artplayer/dist/i18n/*.js

Manually imported languages are: cs, es, fa, fr, id, pl, ru, zh-tw

js
import id from 'artplayer/dist/i18n/id.js';
-import zhTw from 'artplayer/dist/i18n/zh-tw.js';
+    
Artplayer.js
Appearance
Language Settings ​
DANGER
Given the increasing number of bundled multilingual packs, starting from version 5.1.0, the core code of artplayer.js will no longer include other languages besides Simplified Chinese and English. You need to import the required languages on your own.
WARNING
When a language cannot be matched, English will be displayed by default. For i18n usage, refer to: artplayer/types/i18n.d.ts
Default Languages ​
The default languages are: en, zh-cn, which do not require manual import.
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'zh-cn', // or 'en'
+});
Importing Languages ​
Language files before packaging are located in: artplayer/src/i18n/*.js. You are welcome to add your language. Packaged language files are located at: artplayer/dist/i18n/*.js
Manually imported languages include: cs, es, fa, fr, id, pl, ru, zh-tw
js
import id from 'artplayer/dist/i18n/id.js';
+import zhTw from 'artplayer/dist/i18n/zh-tw.js';
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: { 
-        id: id,
-        'zh-tw': zhTw,
-    },
-    lang: 'zh-tw',
-});
js
<script src="artplayer/dist/i18n/id.js"></script>
-<script src="artplayer/dist/i18n/zh-tw.js"></script>
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: { 
+        id: id,
+        'zh-tw': zhTw,
+    },
+    lang: 'zh-tw',
+});
js
<script src="artplayer/dist/i18n/id.js"></script>
+<script src="artplayer/dist/i18n/zh-tw.js"></script>
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: { 
-        id: window['artplayer-i18n-id'],
-        'zh-tw': window['artplayer-i18n-zh-tw'],
-    },
-    lang: 'zh-tw',
-});
New language ​
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'your-lang',
-    i18n: {
-        'your-lang': {
-            Play: 'Your Play'
-        },
-    },
-});
Change language ​
js
import zhTw from 'artplayer/i18n/zh-tw.js';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: { 
+        id: window['artplayer-i18n-id'],
+        'zh-tw': window['artplayer-i18n-zh-tw'],
+    },
+    lang: 'zh-tw',
+});
Add Language ​
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'your-lang',
+    i18n: {
+        'your-lang': {
+            Play: 'Your Play'
+        },
+    },
+});
Modify Language ​
js
import zhTw from 'artplayer/i18n/zh-tw.js';
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: {
-        // Change the default language
-        'zh-cn': {
-            Play: 'Your Play'
-        },
-        // Change the imported language
-        'zh-tw': {
-            ...zhTw,
-            Play: 'Your Play'
-        },
-    },
-});
- +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + i18n: { + // Change the default language + 'zh-cn': { + Play: 'Your Play' + }, + // Change the imported language + 'zh-tw': { + ...zhTw, + Play: 'Your Play' + }, + }, +}); + \ No newline at end of file diff --git a/docs/document/en/start/option.html b/docs/document/en/start/option.html index 35acefd66..0f37e5f18 100644 --- a/docs/document/en/start/option.html +++ b/docs/document/en/start/option.html @@ -3,402 +3,404 @@ - Option | Artplayer.js + Basic Options | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

Option ​

container ​

  • Type: String, Element
  • Default: #artplayer

The DOM container attached to the player

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app', 
-    // container: document.querySelector('.artplayer-app'),
-    url: '/assets/sample/video.mp4',
-});

You may need to initialize the size of container elements, such as:

css
.artplayer-app {
-    width: 400px;
-    height: 300px;
-}

Or use aspect-ratio：

css
.artplayer-app {
-    aspect-ratio: 16/9;
-}

Tip

Of all options, only container is required

url ​

  • Type: String
  • Default: ''

Video source address

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

Sometimes the url address is not known so quickly. At this time, you can set the url asynchronously

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-});
+    
Artplayer.js
Appearance
Basic Options ​
container ​
  • Type: String, Element
  • Default: #artplayer
The DOM container where the player mounts
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app', 
+    // container: document.querySelector('.artplayer-app'),
+    url: '/assets/sample/video.mp4',
+});
You may need to initialize the size of the container element, like:
css
.artplayer-app {
+    width: 400px;
+    height: 300px;
+}
Or use aspect-ratio:
css
.artplayer-app {
+    aspect-ratio: 16/9;
+}
Tip
Among all options, only container is mandatory.
url ​
  • Type: String
  • Default: ''
The video source address
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
Sometimes the url is not known so quickly, in which case you can set the url asynchronously.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+});
 
-setTimeout(() => {
-    art.url = '/assets/sample/video.mp4';
-}, 1000);
Tip
Three video file formats are supported by default: .mp4, .ogg, and .webm
If you need to play .m3u8 or .flv or other formats, please refer to the Libraries on the left
id ​
  • Type: String
  • Default: ''
The unique identifier of the player, currently only used for autoplayback
▶ Run Code
js
var art = new Artplayer({
-    id: 'your-url-id',
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
onReady ​
  • Type: Function
  • Default: undefined
The constructor accepts a function as the second parameter, which is triggered when the player is initialized successfully and the video can be played, just like the ready event
▶ Run Code
js
var art = new Artplayer(
-    {
-        container: '.artplayer-app',
-        url: '/assets/sample/video.mp4',
-        muted: true,
-    },
-    function onReady(art) {
-        this.play()
-    },
-);
Equivalent to:
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+setTimeout(() => {
+    art.url = '/assets/sample/video.mp4';
+}, 1000);
Note
The default support is for three video file formats: .mp4, .ogg, .webm.
If you need to play other formats such as .m3u8 or .flv, please refer to the Third-party Libraries on the left side.
id ​
  • Type: String
  • Default: ''
The unique identifier of the player, currently used only for remembering playback with autoplayback
▶ Run Code
js
var art = new Artplayer({
+    id: 'your-url-id',
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
onReady ​
  • Type: Function
  • Default: undefined
The constructor accepts a function as the second argument, which is triggered when the player is successfully initialized and the video is ready to play, similar to the ready event
▶ Run Code
js
var art = new Artplayer(
+    {
+        container: '.artplayer-app',
+        url: '/assets/sample/video.mp4',
+        muted: true,
+    },
+    function onReady(art) {
+        this.play()
+    },
+);
Equivalent to:
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    art.play();
-});
Tip
The this in the callback function is the player instance, but if the callback function uses the arrow function, the this will not point to the player instance
poster ​
  • Type: String
  • Default: ''
Video posters will only appear when the player is initialized and not played
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    poster: '/assets/sample/poster.jpg',
-});
theme ​
  • Type: String
  • Default: #f00
The player theme color is currently used on the progress bar and highlighted element
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    theme: '#ffad00',
-});
volume ​
  • Type: Number
  • Default: 0.7
Default volume of player
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    volume: 0.5,
-});
Tip
The player will cache the size of the last volume, and the player will read the cache value at the next initialization (such as refreshing the page)
isLive ​
  • Type: Boolean
  • Default: false
When using live mode, the progress bar and playback time will be hidden
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    isLive: true,
-});
muted ​
  • Type: Boolean
  • Default: false
Whether to mute by default
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
autoplay ​
  • Type: Boolean
  • Default: false
Whether to play automatically
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoplay: true,
-    muted: true,
-});
Tip
If you want to enter the page by default to automatically play the video, muted must be true. For more information, please read Autoplay Policy Changes
autoSize ​
  • Type: Boolean
  • Default: false
The size of the player will fill the entire container size by default, so black edges often appear. This value can automatically adjust the size of the player to hide the black edges, similar to the object-fit: contain of css
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-});
autoMini ​
  • Type: Boolean
  • Default: false
When the player scrolls outside the viewport, it automatically enters the mini mode
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoMini: true,
-});
loop ​
  • Type: Boolean
  • Default: false
Whether to play in a loop
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    loop: true,
-});
flip ​
  • Type: Boolean
  • Default: false
Whether to display the video flip function currently only appears in the Setting and Contextmenu
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    flip: true,
-    setting: true,
-});
playbackRate ​
  • Type: Boolean
  • Default: false
Whether to display the video playback speed function will appear in the Setting and Contextmenu
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    playbackRate: true,
-    setting: true,
-});
aspectRatio ​
  • Type: Boolean
  • Default: false
Whether to display the video aspect ratio function will appear in the Setting and Contextmenu
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    aspectRatio: true,
-    setting: true,
-});
screenshot ​
  • Type: Boolean
  • Default: false
Whether to display the video screenshot function in the bottom control bar
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    screenshot: true,
-});
Tip
Due to the browser security policy, if the video source address and website are cross-domain, the screenshot may fail
setting ​
  • Type: Boolean
  • Default: false
Whether to display the switch button of Setting in the bottom control bar
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
hotkey ​
  • Type: Boolean
  • Default: true
Whether to use shortcut keys
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    hotkey: true,
-});
HotkeysSescribe
↑Volume Up
↓Volume Down
←Fast forward
→Fast rewind
spaceToggle play/pause
Tip
These shortcut keys will only take effect after the player gets the focus (such as clicking the player)
pip ​
  • Type: Boolean
  • Default: false
Whether to display the picture in picture switch button in the bottom control bar
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    pip: true,
-});
mutex ​
  • Type: Boolean
  • Default: true
If there are multiple players in the page at the same time, can only one player play
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    mutex: true,
-});
fullscreen ​
  • Type: Boolean
  • Default: false
Whether to display the player window full screen button in the bottom control bar
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-});
fullscreenWeb ​
  • Type: Boolean
  • Default: false
Whether to display the player full screen web page button in the bottom control bar
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
subtitleOffset ​
  • Type: Boolean
  • Default: false
Subtitle time offset, with the range of [-5s, 5s], appears in the Settings
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitleOffset: true,
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-    setting: true,
-});
miniProgressBar ​
  • Type: Boolean
  • Default: false
Mini progress bar, only appears when the player loses focus and is playing
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    miniProgressBar: true,
-});
useSSR ​
  • Type: Boolean
  • Default: false
Whether to use the SSR mount mode is useful if you want to render the HTML required by the player in advance before the player is mounted
You can access the HTML required by the player through Artplayer.html
▶ Run Code
js
var $container = document.querySelector('.artplayer-app');
-$container.innerHTML = Artplayer.html;
+art.on('ready', () => {
+    art.play();
+});
Warning
The this inside the callback function refers to the player instance, but if an arrow function is used for the callback, this will not point to the player instance.
poster ​
  • Type: String
  • Default: ''
The poster of the video, which only appears when the player is initialized and before it starts playing.
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    poster: '/assets/sample/poster.jpg',
+});
theme ​
  • Type: String
  • Default: #f00
Player theme color, currently used for progress bar and highlight elements
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    theme: '#ffad00',
+});
volume ​
  • Type: Number
  • Default: 0.7
The default volume of the player
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    volume: 0.5,
+});
Warning
The player will cache the size of the last volume. When the player is initialized next time (such as refreshing the page), it will read this cached value.
isLive ​
  • Type: Boolean
  • Default: false
Use live mode, which will hide the progress bar and playback time
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    isLive: true,
+});
muted ​
  • Type: Boolean
  • Default: false
Whether to mute by default
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
autoplay ​
  • Type: Boolean
  • Default: false
Whether to play automatically
  • Default: false
Autoplay
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoplay: true,
+    muted: true,
+});
Warning
If you want the video to autoplay by default upon entering the page, muted must be set to true. For more information, please read Autoplay Policy Changes
autoSize ​
  • Type: Boolean
  • Default: false
The size of the player will by default fill the entire container, which often results in black bars. This value can automatically adjust the player size to hide the black bars, similar to css's object-fit: cover;
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+});
autoMini ​
  • Type: Boolean
  • Default: false
Automatically enter mini mode when the player scrolls out of the browser viewport
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoMini: true,
+});
loop ​
  • Type: Boolean
  • Default: false
Whether to loop the video
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    loop: true,
+});
flip ​
  • Type: Boolean
  • Default: false
Whether to show the video flip feature, currently only available in Settings Panel and Context Menu
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    flip: true,
+    setting: true,
+});
playbackRate ​
  • Type: Boolean
  • Default: false
Whether to show the playback speed feature of the video, it will appear in Settings Panel and Context Menu
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    playbackRate: true,
+    setting: true,
+});
aspectRatio ​
  • Type: Boolean
  • Default: false
Displays the video aspect ratio feature, it will appear in the Settings Panel and Context Menu
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    aspectRatio: true,
+    setting: true,
+});
screenshot ​
  • Type: Boolean
  • Default: false
Whether to show the screenshot button, it will appear in the toolbar and context menu Display Screenshot function in the bottom control bar
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
+});
Warning
Due to browser security mechanisms, if the video source address and the website are cross-origin, screenshot failure may occur
setting ​
  • Type: Boolean
  • Default: false
Display the toggle button for the Settings Panel in the bottom control bar
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
hotkey ​
  • Type: Boolean
  • Default: true
Whether to use hotkeys
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    hotkey: true,
+});
HotkeyDescription
↑Increase volume
↓Decrease volume
←Fast forward video
→Rewind video
spaceToggle play/pause
Tip
These hotkeys will only work after the player gains focus (such as after clicking on the player).
pip ​
  • Type: Boolean
  • Default: false Show the Picture in Picture switch button on the bottom control bar
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    pip: true,
+});
mutex ​
  • Type: Boolean
  • Default: true
If there are multiple players on the page, should only one player be allowed to play at a time
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    mutex: true,
+});
fullscreen ​
  • Type: Boolean
  • Default: false Display the Window Fullscreen button on the control bar at the bottom
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+});
fullscreenWeb ​
  • Type: Boolean
  • Default: false
Display the Web Fullscreen button on the control bar at the bottom
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
subtitleOffset ​
  • Type: Boolean
  • Default: false
Subtitle time offset, the range is [-5s, 5s], appearing in the Settings panel
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitleOffset: true,
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+    setting: true,
+});
miniProgressBar ​
  • Type: Boolean
  • Default: false
Mini progress bar, only appears when the player loses focus and is playing
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});
useSSR ​
  • Type: Boolean
  • Default: false
Whether to use SSR (Server-Side Rendering) mount mode, useful if you want to pre-render the player's required HTML before the player mounts
You can access the player's required HTML through Artplayer.html
▶ Run Code
js
var $container = document.querySelector('.artplayer-app');
+$container.innerHTML = Artplayer.html;
 
-var art = new Artplayer({
-    container: $container,
-    url: '/assets/sample/video.mp4',
-    useSSR: true,
-});
playsInline ​
  • Type: Boolean
  • Default: true
Whether to use the playsInline mode on the mobile end
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    playsInline: true,
-});
layers ​
  • Type: Array
  • Default: []
Initialize the customized layers
▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: `<img style="width: 100px" src="${img}">`,
-            style: {
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-                opacity: '.9',
-            },
-            click: function (...args) {
-                console.info('click', args);
-                art.layers.show = false;
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-    ],
-});
Please refer to the following address for Component:
/component/layers.html
settings ​
  • Type: Array
  • Default: []
Initialize the customized Setting
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'setting01',
-            selector: [
-                {
-                    html: 'setting01-01',
-                },
-                {
-                    html: 'setting01-02',
-                },
-            ],
-            onSelect: function (...args) {
-                console.info(args);
-            },
-        },
-        {
-            html: 'setting02',
-            selector: [
-                {
-                    html: 'setting02-01',
-                },
-                {
-                    html: 'setting02-02',
-                },
-            ],
-            onSelect: function (...args) {
-                console.info(args);
-            },
-        },
-    ],
-});
Please refer to the following address for Setting
/component/setting.html
contextmenu ​
  • Type: Array
  • Default: []
Initialize the customized Contextmenu
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            html: 'your-menu',
-            click: function (...args) {
-                console.info('click', args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
Please refer to the following address for Component:
/component/contextmenu.html
controls ​
  • Type: Array
  • Default: []
Initialize the customized Controls
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'left',
-            html: 'your-control',
-            tooltip: 'Your Control',
-            style: {
-                color: 'green',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-        },
-    ],
-});
Please refer to the following address for Setting
/component/controls.html
quality ​
  • Type: Array
  • Default: []
Whether to display the Quality list in the bottom control bar
PropertyTypeDescribe
defaultBooleanDefault quality
htmlStringQuality name
urlStringQuality name
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    quality: [
-        {
-            default: true,
-            html: 'SD 480P',
-            url: '/assets/sample/video.mp4',
-        },
-        {
-            html: 'HD 720P',
-            url: '/assets/sample/video.mp4',
-        },
-    ],
-});
highlight ​
  • Type: Array
  • Default: []
Display highlight on the progress bar
PropertyTypeDescribe
timeNumberHighlight time
textStringHighlight text
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    highlight: [
-        {
-            time: 60,
-            text: 'One more chance',
-        },
-        {
-            time: 120,
-            text: '谁でもいいはずなのに',
-        },
-        {
-            time: 180,
-            text: '夏の想い出がまわる',
-        },
-        {
-            time: 240,
-            text: 'こんなとこにあるはずもないのに',
-        },
-        {
-            time: 300,
-            text: '－－终わり－－',
-        },
-    ],
-});
plugins ​
  • Type: Array
  • Default: []
Initialize customized plugins
▶ Run Code
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
+var art = new Artplayer({
+    container: $container,
+    url: '/assets/sample/video.mp4',
+    useSSR: true,
+});
playsInline ​
  • Type: Boolean
  • Default: true
Whether to use playsInline mode on mobile devices
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    playsInline: true,
+});
layers ​
  • Type: Array
  • Default: []
Initializes custom layers
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'poster',
+            html: `<img style="width: 100px" src="${img}">`,
+            style: {
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+                opacity: '.9',
+            },
+            click: function (...args) {
+                console.info('click', args);
+                art.layers.show = false;
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+    ],
+});
Component Configuration Please refer to the following address:
/component/layers.html
settings ​
  • Type: Array
  • Default: []
Initializes custom settings panel
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'setting01',
+            selector: [
+                {
+                    html: 'setting01-01',
+                },
+                {
+                    html: 'setting01-02',
+                },
+            ],
+            onSelect: function (...args) {
+                console.info(args);
+            },
+        },
+        {
+            html: 'setting02',
+            selector: [
+                {
+                    html: 'setting02-01',
+                },
+                {
+                    html: 'setting02-02',
+                },
+            ],
+            onSelect: function (...args) {
+                console.info(args);
+            },
+        },
+    ],
+});
Settings Panel Please refer to the following address
/component/setting.html
contextmenu ​
  • Type: Array
  • Default: []
Initialize custom context menu
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            html: 'your-menu',
+            click: function (...args) {
+                console.info('click', args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
Component Configuration Please refer to the following address:
/component/contextmenu.html- Type:
controls ​
  • Type: Array
  • Default: []
Initializes custom bottom control bar
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'left',
+            html: 'your-control',
+            tooltip: 'Your Control',
+            style: {
+                color: 'green',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+        },
+    ],
+});
Component Configuration Refer to the following address:
/component/controls.html
quality ​
  • Type: Array
  • Default: []
Whether to show the quality selection list in the bottom control bar
PropertyTypeDescription
defaultBooleanDefault quality
htmlStringQuality name
urlStringQuality URL
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    quality: [
+        {
+            default: true,
+            html: 'SD 480P',
+            url: '/assets/sample/video.mp4',
+        },
+        {
+            html: 'HD 720P',
+            url: '/assets/sample/video.mp4',
+        },
+    ],
+});
highlight ​
  • Type: Array
  • Default: []
Show highlight information on the progress bar
PropertyTypeDescription
timeNumberHighlight time (in seconds)
textStringHighlight text
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    highlight: [
+        {
+            time: 60,
+            text: 'One more chance',
+        },
+        {
+            time: 120,
+            text: '谁でもいいはずなのに',
+        },
+        {
+            time: 180,
+            text: '夏の想い出がまわる',
+        },
+        {
+            time: 240,
+            text: 'こんなとこにあるはずもないのに',
+        },
+        {
+            time: 300,
+            text: '－－终わり－－',
+        },
+    ],
+});
plugins ​
  • Type: Array
  • Default: []
Initialize custom plugins
▶ Run Code
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [myPlugin],
-});
thumbnails ​
  • Type: Object
  • Default: {}
Set the thumbnails image on the progress bar
PropertyTypeDescribe
urlStringThumbnail url
numberNumberThumbnail number
columnNumberThumbnail column
widthNumberThumbnail width
heightNumberThumbnail height
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    thumbnails: {
-        url: '/assets/sample/thumbnails.png',
-        number: 60,
-        column: 10,
-    },
-});
Generate preview thumbnails online
artplayer-tool-thumbnail
subtitle ​
  • Type: Object
  • Default: {}
Set the subtitle of the video and support the subtitle format: vtt, srt, ass
PropertyTypeDescribe
urlStringSubtitle url
typeStringSubtitle type: vtt, srt, ass
styleObjectSubtitle style
encodingStringSubtitle code, Default: utf-8
escapeBooleanWhether to escape the html tag,Default: true
onVttLoadFunctionFunctions for modifying vtt text
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-        type: 'srt',
-        encoding: 'utf-8',
-        escape: true,
-        style: {
-            color: '#03A9F4',
-            'font-size': '30px',
-        },
-    },
-});
moreVideoAttr ​
  • Type: Object
  • Default: {'controls': false,'preload': 'metadata'}
More video attributes, which will be directly written into the video element
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    moreVideoAttr: {
-        'webkit-playsinline': true,
-        playsInline: true,
-    },
-});
icons ​
  • Type: Object
  • Default: {}
It is used to replace the default icon and supports Html String and HTMLElement
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    icons: {
-        loading: '<img src="/assets/img/ploading.gif">',
-        state: '<img src="/assets/img/state.png">',
-    },
-});
Definition of all icons
artplayer/types/icons.d.ts
type ​
  • Type: String
  • Default: ''
It is used to indicate the format of the video. It needs to be used together with the customType. The default format of the video is the suffix of the video address (such as .m3u8, .mkv, .ts). But sometimes the video address does not have the correct suffix, so it needs to be specially specified
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.m3u8',
-    type: 'm3u8',
-});
Identification of suffix
The player can only resolve this suffix: /assets/sample/video.m3u8
However, this suffix cannot be resolved: /assets/sample/video?type=m3u8
So if you use customType, it is better to specify type at the same time
customType ​
  • Type: Object
  • Default: {}
By matching the video's type, the video decoding right is handed over to a third-party program for processing. The processing function can receive three parameters
  • video : Video DOM element
  • url : Video url
  • art : Player instance
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.m3u8',
-    customType: {
-        m3u8: function (video, url, art) {
-            //
-        },
-    },
-});
lang ​
  • Type: String
  • Default: navigator.language.toLowerCase()
The default display language currently supports: en, zh-cn
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'en',
-});
More language setting
/en/start/i18n.html
i18n ​
  • Type: Object
  • Default: {}
Customize the i18n configuration, which will be deeply merged with the built-in i18n
Add your language:
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'your-lang',
-    i18n: {
-        'your-lang': {
-            Play: 'Your Play'
-        },
-    },
-});
Modify existing language:
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: {
-        'zh-cn': {
-            Play: 'Your Play'
-        },
-        'zh-tw': {
-            Play: 'Your Play'
-        },
-    },
-});
More language setting
/en/start/i18n.html
lock ​
  • Type: Boolean
  • Default: false
Whether to display a lock button on the mobile end to hide the bottom control bar
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lock: true,
-});
fastForward ​
  • Type: Boolean
  • Default: false
Whether to add long-press video fast-forward function on the mobile terminal
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});
autoPlayback ​
  • Type: Boolean
  • Default: false
Whether to use automatic playback function
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    id: 'your-url-id',
-    autoPlayback: true,
-});
Tip
Because the player uses url as key by default to cache the playback progress
But if your url of the same video is different, you need to use id to identify the unique key of the video
autoOrientation ​
  • Type: Boolean
  • Default: false
Whether to rotate the player according to the video size and viewport size when the mobile page is full screen
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoOrientation: true,
-});
airplay ​
  • Type: Boolean
  • Default: false
Whether to display the airplay button. Currently, only some browsers support this function
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    airplay: true,
-});
cssVar ​
  • Type: Object
  • Default: {}
Used to change built-in CSS variables
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    cssVar: {
-        //
-    },
-});
cssVar definitions
artplayer/types/cssVar.d.d.ts

-    
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [myPlugin],
+});

thumbnails ​

  • Type: Object
  • Default: {}

Set thumbnails on the progress bar

PropertyTypeDescription
urlStringThumbnail URL
numberNumberNumber of thumbnails
columnNumberColumns of thumbnails
widthNumberThumbnail width
heightNumberThumbnail height
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    thumbnails: {
+        url: '/assets/sample/thumbnails.png',
+        number: 60,
+        column: 10,
+    },
+});

Online thumbnail generation

artplayer-tool-thumbnail

subtitle ​

  • Type: Object
  • Default: {}

Set the video subtitles, supporting subtitle formats: vtt, srt, ass

PropertyTypeDescription
nameStringSubtitle name
urlStringSubtitle URL
typeStringSubtitle type, options: vtt, srt, ass

| style | Object | Subtitle style | | encoding | String | Subtitle encoding, default utf-8 | | escape | Boolean | Whether to escape html tags, default true | | onVttLoad | Function | Function to modify vtt text |

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+        type: 'srt',
+        encoding: 'utf-8',
+        escape: true,
+        style: {
+            color: '#03A9F4',
+            'font-size': '30px',
+        },
+    },
+});

moreVideoAttr ​

  • Type: Object
  • Default: {'controls': false, 'preload': 'metadata'}

Additional video attributes, these attributes will be directly written into the video element

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    moreVideoAttr: {
+        'webkit-playsinline': true,
+        playsInline: true,
+    },
+});

icons ​

  • Type: Object
  • Default: {}

Used to replace default icons, supports Html strings and HTMLElement

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    icons: {
+        loading: '<img src="/assets/img/loading.gif">',
+        state: '<img src="/assets/img/state.png">',
+    },
+});

Definition of all icons

artplayer/types/icons.d.ts

type ​

  • Type: String
  • Default: ''

Used to specify the format of the video, which is used in conjunction with customType. By default, the video format is the same as the file extension of the video URL (such as .m3u8, .mkv, .ts). However, sometimes the video URL does not have the correct file extension, so it needs to be specifically stated.

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.m3u8',
+    type: 'm3u8',
+});

Recognition of file extensions

The player can only parse this type of file extension: /assets/sample/video.m3u8

But it cannot parse this type of file extension: /assets/sample/video?type=m3u8

Therefore, if you use customType, it is best to specify type as well

customType ​

  • Type: Object
  • Default: {}

Matches the video's type to delegate the video decoding to a third-party program for processing. The processing function can receive three parameters:

  • video: Video DOM element
  • url: Video address
  • art: Current instance
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.m3u8',
+    customType: {
+        m3u8: function (video, url, art) {
+            //
+        },
+    },
+});

lang ​

  • Type: String
  • Default: navigator.language.toLowerCase()

Default display language, currently supports: en, zh-cn

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'en',
+});

More language settings

/start/i18n.html

i18n ​

  • Type: Object
  • Default: {}

Custom i18n configuration, which will be deeply merged with the built-in i18n

Add your language:

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'your-lang',
+    i18n: {
+        'your-lang': {
+            Play: 'Your Play'
+        },
+    },
+});

Modifying the existing language

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: {
+        'zh-cn': {
+            Play: 'Your Play'
+        },
+        'zh-tw': {
+            Play: 'Your Play'
+        },
+    },
+});

More language settings

/start/i18n.html

lock ​

  • Type: Boolean
  • Default: false

Whether to display a lock button on mobile to hide the bottom control bar

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lock: true,
+});

fastForward ​

  • Type: Boolean
  • Default: false

Whether to add fast forward function by long pressing on the video on mobile devices

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});

autoPlayback ​

  • Type: Boolean
  • Default: false

Whether to use the automatic playback feature

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    id: 'your-url-id',
+    autoPlayback: true,
+});

Warning

Because the player by default uses url as the key to cache the playback progress

But if the url of the same video is different, then you need to use id to identify the unique key of the video

autoOrientation ​

  • Type: Boolean
  • Default: false

Whether to rotate the player on mobile web pages in full screen according to the video size and the viewport dimensions

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoOrientation: true,
+});

airplay ​

  • Type: Boolean
  • Default: false

Whether to display the airplay button, currently only some browsers support this feature

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    airplay: true,
+});

cssVar ​

  • Type: Object
  • Default: {}

Used to change built-in CSS variables

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    cssVar: {
+        //
+    },
+});

Reference for cssVar syntax

artplayer/types/cssVar.d.ts

+ \ No newline at end of file diff --git a/docs/document/hashmap.json b/docs/document/hashmap.json index cc94e5e48..43b6cc0d5 100644 --- a/docs/document/hashmap.json +++ b/docs/document/hashmap.json @@ -1 +1 @@ -{"advanced_class.md":"e446539f","advanced_built-in.md":"2ab1addc","advanced_plugin.md":"b71cd634","advanced_global.md":"7dd7211c","component_contextmenu.md":"fd4c8f42","component_controls.md":"5efc46cb","advanced_event.md":"d7901aca","component_layers.md":"1b88e508","en_advanced_class.md":"a47f0b69","component_setting.md":"b02da861","en_advanced_built-in.md":"3d9da76b","advanced_property.md":"cb0d16e0","en_advanced_plugin.md":"db33d004","en_advanced_global.md":"15418f1d","en_advanced_event.md":"6b9d4f68","en_component_contextmenu.md":"dac57cfb","en_component_controls.md":"c066e6b8","en_component_layers.md":"446fcd07","en_plugin_control-ui.md":"182a9399","en_plugin_ads.md":"4b93a290","en_library_hls.md":"adcf9c67","en_library_dash.md":"d2caad85","en_plugin_hls-quality.md":"8a5de55a","en_plugin_dash-quality.md":"ed691a8e","en_library_flv.md":"7a295dcf","en_index.md":"8bbfdcd3","en_component_setting.md":"f8787f3a","en_advanced_property.md":"15b8758c","en_start_i18n.md":"63002da5","en_plugin_iframe.md":"ae3ab65b","library_dash.md":"6145d438","library_hls.md":"29fb7b0e","library_flv.md":"a74cc017","index.md":"48e77311","plugin_ads.md":"12a970af","plugin_control-ui.md":"cf85aeee","plugin_hls-quality.md":"b494718c","plugin_dash-quality.md":"90dd7335","start_i18n.md":"7503329d","en_start_option.md":"096c4d13","plugin_iframe.md":"62b646f4","plugin_danmuku.md":"fa90b3e1","start_option.md":"81dcd571"} +{"advanced_plugin.md":"u4SeaDpS","advanced_class.md":"PUY15_yh","advanced_built-in.md":"UYI3B-Hy","advanced_global.md":"NO7cToKE","component_contextmenu.md":"yUI36N-8","advanced_event.md":"CMtflGLG","component_controls.md":"1t7M5ddB","en_advanced_class.md":"Xc4zvIqK","component_layers.md":"PBLuSN2i","component_setting.md":"YkhFuIfX","advanced_property.md":"9BAfOfTo","en_advanced_built-in.md":"7TilV0EA","en_advanced_plugin.md":"V5kifudd","en_advanced_event.md":"6-qAbCVg","en_component_contextmenu.md":"R4YKVJzf","en_component_controls.md":"SXHbRPbx","en_advanced_global.md":"4oaAng9Z","en_component_layers.md":"J3naSppX","en_advanced_property.md":"q2kjLcep","en_library_flv.md":"B8QlSimM","en_plugin_ads.md":"qIahpi8y","en_library_dash.md":"3RbZeCcT","en_library_hls.md":"YUdBjyH8","en_plugin_hls-quality.md":"TidRTREF","en_plugin_dash-quality.md":"jzW8-qLV","en_component_setting.md":"pCDzgQoQ","en_index.md":"lXlh_hOW","en_start_i18n.md":"eJXPNaQ_","en_plugin_danmuku.md":"pycJIXGa","en_plugin_iframe.md":"ufbDiAl_","library_dash.md":"rQV5WaP2","library_flv.md":"yXnwvlZv","library_hls.md":"67A5_0ro","plugin_ads.md":"uajsmJ_k","plugin_hls-quality.md":"GspGF35D","index.md":"_kFQgWbo","plugin_dash-quality.md":"MnopqkMN","start_i18n.md":"eP6fmX5M","plugin_iframe.md":"Y3z3hB9z","en_start_option.md":"BxS2mkxH","plugin_danmuku.md":"j9nErxGM","start_option.md":"FFLG77Kb"} diff --git a/docs/document/index.html b/docs/document/index.html index e5ddd75ea..2788eaee7 100644 --- a/docs/document/index.html +++ b/docs/document/index.html @@ -5,187 +5,189 @@ 安装使用 | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

安装使用 ​

安装 ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js

使用 ​

js
import Artplayer from 'artplayer';
+    
Artplayer.js
Appearance
安装使用 ​
安装 ​
bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js
使用 ​
js
import Artplayer from 'artplayer';
 
-const art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'path/to/video.mp4',
-});
html
<html>
-    <head>
-        <title>ArtPlayer Demo</title>
-        <meta charset="UTF-8" />
-        <style>
-            .artplayer-app {
-                width: 400px;
-                height: 300px;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app"></div>
-    </body>
-</html>
提示
播放器的尺寸依赖于容器 container 的尺寸，所以你的容器 container 必须是有尺寸的
以下链接可以看到更多的使用例子
/packages/artplayer-template
Vue.js ​
vue
<template>
-  <div ref="artRef"></div>
-</template>
+const art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'path/to/video.mp4',
+});
html
<html>
+    <head>
+        <title>ArtPlayer Demo</title>
+        <meta charset="UTF-8" />
+        <style>
+            .artplayer-app {
+                width: 400px;
+                height: 300px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app"></div>
+    </body>
+</html>
提示
播放器的尺寸依赖于容器 container 的尺寸，所以你的容器 container 必须是有尺寸的
以下链接可以看到更多的使用例子
/packages/artplayer-template
Vue.js ​
vue
<template>
+  <div ref="artRef"></div>
+</template>
 
-<script>
-import Artplayer from "artplayer";
+<script>
+import Artplayer from "artplayer";
 
-export default {
-  data() {
-    return {
-      instance: null,
-    };
-  },
-  props: {
-    option: {
-      type: Object,
-      required: true,
-    },
-  },
-  mounted() {
-    this.instance = new Artplayer({
-      ...this.option,
-      container: this.$refs.artRef,
-    });
+export default {
+  data() {
+    return {
+      instance: null,
+    };
+  },
+  props: {
+    option: {
+      type: Object,
+      required: true,
+    },
+  },
+  mounted() {
+    this.instance = new Artplayer({
+      ...this.option,
+      container: this.$refs.artRef,
+    });
 
-    this.$nextTick(() => {
-      this.$emit("get-instance", this.instance);
-    });
-  },
-  beforeDestroy() {
-    if (this.instance && this.instance.destroy) {
-      this.instance.destroy(false);
-    }
-  },
-};
-</script>
vue
<template>
-  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
-</template>
+    this.$nextTick(() => {
+      this.$emit("get-instance", this.instance);
+    });
+  },
+  beforeDestroy() {
+    if (this.instance && this.instance.destroy) {
+      this.instance.destroy(false);
+    }
+  },
+};
+</script>
vue
<template>
+  <Artplayer @get-instance="getInstance" :option="option" :style="style" />
+</template>
 
-<script>
-import Artplayer from "./Artplayer.vue";
+<script>
+import Artplayer from "./Artplayer.vue";
 
-export default {
-  data() {
-    return {
-      option: {
-        url: "path/to/video.mp4",
-      },
-      style: {
-        width: "600px",
-        height: "400px",
-        margin: "60px auto 0",
-      },
-    };
-  },
-  components: {
-    Artplayer,
-  },
-  methods: {
-    getInstance(art) {
-      console.info(art);
-    },
-  },
-};
-</script>
Artplayer 非响应式：
在 Vue.js 里直接修改 option 是不会改变播放器的
React.js ​
jsx
import { useEffect, useRef } from 'react';
-import Artplayer from 'artplayer';
+export default {
+  data() {
+    return {
+      option: {
+        url: "path/to/video.mp4",
+      },
+      style: {
+        width: "600px",
+        height: "400px",
+        margin: "60px auto 0",
+      },
+    };
+  },
+  components: {
+    Artplayer,
+  },
+  methods: {
+    getInstance(art) {
+      console.info(art);
+    },
+  },
+};
+</script>
Artplayer 非响应式：
在 Vue.js 里直接修改 option 是不会改变播放器的
React.js ​
jsx
import { useEffect, useRef } from 'react';
+import Artplayer from 'artplayer';
 
-export default function Player({ option, getInstance, ...rest }) {
-    const artRef = useRef();
+export default function Player({ option, getInstance, ...rest }) {
+    const artRef = useRef();
 
-    useEffect(() => {
-        const art = new Artplayer({
-            ...option,
-            container: artRef.current,
-        });
+    useEffect(() => {
+        const art = new Artplayer({
+            ...option,
+            container: artRef.current,
+        });
 
-        if (getInstance && typeof getInstance === 'function') {
-            getInstance(art);
-        }
+        if (getInstance && typeof getInstance === 'function') {
+            getInstance(art);
+        }
 
-        return () => {
-            if (art && art.destroy) {
-                art.destroy(false);
-            }
-        };
-    }, []);
+        return () => {
+            if (art && art.destroy) {
+                art.destroy(false);
+            }
+        };
+    }, []);
 
-    return <div ref={artRef} {...rest}></div>;
-}
jsx
import React from 'react';
-import Artplayer from './ArtPlayer.jsx';
+    return <div ref={artRef} {...rest}></div>;
+}
jsx
import React from 'react';
+import Artplayer from './ArtPlayer.jsx';
 
-function App() {
-    return (
-        <div>
-            <Artplayer
-                option={{
-                    url: 'https://artplayer.org/assets/sample/video.mp4',
-                }}
-                style={{
-                    width: '600px',
-                    height: '400px',
-                    margin: '60px auto 0',
-                }}
-                getInstance={(art) => console.info(art)}
-            />
-        </div>
-    );
-}
+function App() {
+    return (
+        <div>
+            <Artplayer
+                option={{
+                    url: 'https://artplayer.org/assets/sample/video.mp4',
+                }}
+                style={{
+                    width: '600px',
+                    height: '400px',
+                    margin: '60px auto 0',
+                }}
+                getInstance={(art) => console.info(art)}
+            />
+        </div>
+    );
+}
 
-export default App;
Artplayer 非响应式：
在 React.js 里直接修改 option 是不会改变播放器的
TypeScript ​
导入 Artplayer 时会自动导入的 artplayer.d.ts，但你也可以单独导入选项的类型
ts
import Artplayer from 'artplayer';
-import { type Option } from 'artplayer/types/option';
+export default App;
Artplayer 非响应式：
在 React.js 里直接修改 option 是不会改变播放器的
TypeScript ​
导入 Artplayer 时会自动导入的 artplayer.d.ts，但你也可以单独导入选项的类型
ts
import Artplayer from 'artplayer';
+import { type Option } from 'artplayer/types/option';
 
-const option: Option = {
-    container: '.artplayer-app',
-    url: './assets/sample/video.mp4',
-};
+const option: Option = {
+    container: '.artplayer-app',
+    url: './assets/sample/video.mp4',
+};
 
-option.volume = 0.5;
+option.volume = 0.5;
 
-const art = new Artplayer(option);
全部 TypeScript 定义
packages/artplayer/types
JavaScript ​
有时你的 js 文件会丢失 TypeScript 的类型提示，这时候你可以手动导入类型
变量：
js
/**
- * @type {import("artplayer")}
- */
-let art = null;
参数：
js
/**
- * @param {import("artplayer")} art
- */
-function getInstance(art) {
-  //
-}
属性：
js
export default {
-  data() {
-    return {
-      /**
-       * @type {import("artplayer")}
-       */
-      art: null,
-    }
-  }
-}
选项：
js
/**
- * @type {import("artplayer/types/option").Option}
- */
+const art = new Artplayer(option);
全部 TypeScript 定义
packages/artplayer/types
JavaScript ​
有时你的 js 文件会丢失 TypeScript 的类型提示，这时候你可以手动导入类型
变量：
js
/**
+ * @type {import("artplayer")}
+ */
+let art = null;
参数：
js
/**
+ * @param {import("artplayer")} art
+ */
+function getInstance(art) {
+  //
+}
属性：
js
export default {
+  data() {
+    return {
+      /**
+       * @type {import("artplayer")}
+       */
+      art: null,
+    }
+  }
+}
选项：
js
/**
+ * @type {import("artplayer/types/option").Option}
+ */
 
-const option = {
-    container: '.artplayer-app',
-    url: './assets/sample/video.mp4',
-};
+const option = {
+    container: '.artplayer-app',
+    url: './assets/sample/video.mp4',
+};
 
-option.volume = 0.5;
+option.volume = 0.5;
 
-const art8 = new Artplayer(option);
古老的浏览器 ​
生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome：last 1 Chrome version
对于古老的浏览器，可以使用 artplayer.legacy.js 文件，可以兼容到：IE 11
js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js
假如你要兼容更古老的浏览器时，请修改以下配置然后自行构建：
构建配置：scripts/build.js
参考文档：browserslist
- +const art8 = new Artplayer(option);

古老的浏览器 ​

生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome：last 1 Chrome version

对于古老的浏览器，可以使用 artplayer.legacy.js 文件，可以兼容到：IE 11

js
import Artplayer from 'artplayer/dist/artplayer.legacy.js';
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

假如你要兼容更古老的浏览器时，请修改以下配置然后自行构建：

构建配置：scripts/build.js

参考文档：browserslist

+ \ No newline at end of file diff --git a/docs/document/library/dash.html b/docs/document/library/dash.html index 307201d3d..afeca16bd 100644 --- a/docs/document/library/dash.html +++ b/docs/document/library/dash.html @@ -5,44 +5,46 @@ dash.js | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

dash.js ​

👉 https://github.com/Dash-Industry-Forum/dash.js

▶ Run Code
js
function playMpd(video, url, art) {
-    if (dashjs.supportsMediaSource()) {
-        if (art.dash) art.dash.destroy();
-        const dash = dashjs.MediaPlayer().create();
-        dash.initialize(video, url, art.option.autoplay);
-        art.dash = dash; 
-        art.on('destroy', () => dash.destroy());
-    } else {
-        art.notice.show = 'Unsupported playback format: mpd';
-    }
-}
+    
Artplayer.js
Appearance
dash.js ​
👉 https://github.com/Dash-Industry-Forum/dash.js
 ▶ Run Code 
js
function playMpd(video, url, art) {
+    if (dashjs.supportsMediaSource()) {
+        if (art.dash) art.dash.destroy();
+        const dash = dashjs.MediaPlayer().create();
+        dash.initialize(video, url, art.option.autoplay);
+        art.dash = dash; 
+        art.on('destroy', () => dash.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: mpd';
+    }
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
-    type: 'mpd',
-    customType: {
-        mpd: playMpd
-    },
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd',
+    type: 'mpd',
+    customType: {
+        mpd: playMpd
+    },
+});
 
-art.on('ready', () => {
-    console.info(art.dash);
-});

-    
+art.on('ready', () => {
+    console.info(art.dash);
+});
+ \ No newline at end of file diff --git a/docs/document/library/flv.html b/docs/document/library/flv.html index e6e580faf..be3993980 100644 --- a/docs/document/library/flv.html +++ b/docs/document/library/flv.html @@ -5,45 +5,47 @@ flv.js | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

flv.js ​

👉 https://github.com/Bilibili/flv.js

▶ Run Code
js
function playFlv(video, url, art) {
-    if (flvjs.isSupported()) {
-        if (art.flv) art.flv.destroy();
-        const flv = flvjs.createPlayer({ type: 'flv', url });
-        flv.attachMediaElement(video);
-        flv.load();
-        art.flv = flv; 
-        art.on('destroy', () => flv.destroy());
-    } else {
-        art.notice.show = 'Unsupported playback format: flv';
-    }
-}
+    
Artplayer.js
Appearance
flv.js ​
👉 https://github.com/Bilibili/flv.js
 ▶ Run Code 
js
function playFlv(video, url, art) {
+    if (flvjs.isSupported()) {
+        if (art.flv) art.flv.destroy();
+        const flv = flvjs.createPlayer({ type: 'flv', url });
+        flv.attachMediaElement(video);
+        flv.load();
+        art.flv = flv; 
+        art.on('destroy', () => flv.destroy());
+    } else {
+        art.notice.show = 'Unsupported playback format: flv';
+    }
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.flv',
-    type: 'flv',
-    customType: {
-        flv: playFlv,
-    },
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.flv',
+    type: 'flv',
+    customType: {
+        flv: playFlv,
+    },
+});
 
-art.on('ready', () => {
-    console.info(art.flv);
-});

-    
+art.on('ready', () => {
+    console.info(art.flv);
+});
+ \ No newline at end of file diff --git a/docs/document/library/hls.html b/docs/document/library/hls.html index 32a8b54d2..88b9efaf6 100644 --- a/docs/document/library/hls.html +++ b/docs/document/library/hls.html @@ -5,47 +5,49 @@ hls.js | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

hls.js ​

👉 https://github.com/video-dev/hls.js

▶ Run Code
js
function playM3u8(video, url, art) {
-    if (Hls.isSupported()) {
-        if (art.hls) art.hls.destroy();
-        const hls = new Hls();
-        hls.loadSource(url);
-        hls.attachMedia(video);
-        art.hls = hls;
-        art.on('destroy', () => hls.destroy());
-    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-        video.src = url;
-    } else {
-        art.notice.show = 'Unsupported playback format: m3u8';
-    }
-}
+    
Artplayer.js
Appearance
hls.js ​
👉 https://github.com/video-dev/hls.js
 ▶ Run Code 
js
function playM3u8(video, url, art) {
+    if (Hls.isSupported()) {
+        if (art.hls) art.hls.destroy();
+        const hls = new Hls();
+        hls.loadSource(url);
+        hls.attachMedia(video);
+        art.hls = hls;
+        art.on('destroy', () => hls.destroy());
+    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = url;
+    } else {
+        art.notice.show = 'Unsupported playback format: m3u8';
+    }
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
-    type: 'm3u8',
-    customType: {
-        m3u8: playM3u8,
-    },
-});
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8',
+    type: 'm3u8',
+    customType: {
+        m3u8: playM3u8,
+    },
+});
 
-art.on('ready', () => {
-    console.info(art.hls);
-});

-    
+art.on('ready', () => {
+    console.info(art.hls);
+});
+ \ No newline at end of file diff --git a/docs/document/plugin/ads.html b/docs/document/plugin/ads.html index 430fc5c58..a43123f5c 100644 --- a/docs/document/plugin/ads.html +++ b/docs/document/plugin/ads.html @@ -5,68 +5,70 @@ 视频广告 | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

视频广告 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-ads
bash
yarn add artplayer-plugin-ads
bash
pnpm add artplayer-plugin-ads
html
<script src="path/to/artplayer-plugin-ads.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
bash
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js

使用 ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-    fullscreen: true,
-    fullscreenWeb: true,
-    plugins: [
-        artplayerPluginAds({
-            // html广告，假如是视频广告则忽略该值
-            html: '<img src="/assets/sample/poster.jpg">',
+    
Artplayer.js
Appearance
视频广告 ​
演示 ​
👉 查看完整演示
安装 ​
bash
npm install artplayer-plugin-ads
bash
yarn add artplayer-plugin-ads
bash
pnpm add artplayer-plugin-ads
html
<script src="path/to/artplayer-plugin-ads.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
bash
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
使用 ​
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    plugins: [
+        artplayerPluginAds({
+            // html广告，假如是视频广告则忽略该值
+            html: '<img src="/assets/sample/poster.jpg">',
 
-            // 视频广告的地址
-            video: '/assets/sample/test1.mp4',
+            // 视频广告的地址
+            video: '/assets/sample/test1.mp4',
 
-            // 广告跳转网址，为空则不跳转
-            url: 'http://artplayer.org',
+            // 广告跳转网址，为空则不跳转
+            url: 'http://artplayer.org',
 
-            // 必须观看的时长，期间不能被跳过，单位为秒
-            // 当该值大于或等于totalDuration时，不能提前关闭广告
-            // 当该值等于或小于0时，则随时都可以关闭广告
-            playDuration: 5,
+            // 必须观看的时长，期间不能被跳过，单位为秒
+            // 当该值大于或等于totalDuration时，不能提前关闭广告
+            // 当该值等于或小于0时，则随时都可以关闭广告
+            playDuration: 5,
 
-            // 广告总时长，单位为秒
-            totalDuration: 10,
+            // 广告总时长，单位为秒
+            totalDuration: 10,
 
-            // 视频广告是否默认静音
-            muted: false,
+            // 视频广告是否默认静音
+            muted: false,
 
-            // 多语言支持
-            i18n: {
-                close: '关闭广告',
-                countdown: '%s秒',
-                detail: '查看详情',
-                canBeClosed: '%s秒后可关闭广告',
-            },
-        }),
-    ],
-});
+            // 多语言支持
+            i18n: {
+                close: '关闭广告',
+                countdown: '%s秒',
+                detail: '查看详情',
+                canBeClosed: '%s秒后可关闭广告',
+            },
+        }),
+    ],
+});
 
-// ad is clicked
-art.on('artplayerPluginAds:click', (ads) => {
-    console.info(ads);
-});
+// ad is clicked
+art.on('artplayerPluginAds:click', (ads) => {
+    console.info(ads);
+});
 
-// Ad skipped
-art.on('artplayerPluginAds:skip', (ads) => {
-    console.info(ads);
-});

-    
+// Ad skipped
+art.on('artplayerPluginAds:skip', (ads) => {
+    console.info(ads);
+});
+ \ No newline at end of file diff --git a/docs/document/plugin/control-ui.html b/docs/document/plugin/control-ui.html deleted file mode 100644 index cefa33b31..000000000 --- a/docs/document/plugin/control-ui.html +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - 控制器皮肤 | Artplayer.js - - - - - - - - - - - - - - -
Artplayer.js

Appearance

On this page

控制器皮肤 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-control
bash
yarn add artplayer-plugin-control
bash
pnpm add artplayer-plugin-control
html
<script src="path/to/artplayer-plugin-control.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-control/dist/artplayer-plugin-control.js
bash
https://unpkg.com/artplayer-plugin-control/dist/artplayer-plugin-control.js

使用 ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-    fullscreenWeb: true,
-    plugins: [
-        artplayerPluginControl(),
-    ],
-});

enable ​

  • Type: Getter/Setter
  • Parameter: Boolean

是否启用新的控制器皮肤

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-    fullscreenWeb: true,
-    controls: [
-        {
-            position: 'right',
-            html: '<button type="button">Switch UI</button>',
-            click: function () {
-                const { enable } = art.plugins.artplayerPluginControl;
-                art.plugins.artplayerPluginControl.enable = !enable;
-            },
-        },
-    ],
-    plugins: [
-        artplayerPluginControl(),
-    ],
-});
- - - - \ No newline at end of file diff --git a/docs/document/plugin/danmuku.html b/docs/document/plugin/danmuku.html index 897d3d319..e79f66b53 100644 --- a/docs/document/plugin/danmuku.html +++ b/docs/document/plugin/danmuku.html @@ -5,304 +5,306 @@ 弹幕库 | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

弹幕库 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js

选项 ​

js
{
-    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
-    speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
-    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
-    fontSize: 25, // 字体大小，支持数字和百分比
-    color: '#FFFFFF', // 默认字体颜色
-    mode: 0, // 默认模式，0-滚动，1-静止
-    margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
-    antiOverlap: true, // 是否防重叠
-    useWorker: true, // 是否使用 web worker
-    synchronousPlayback: false, // 是否同步到播放速度
-    filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
-    lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
-    maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
-    minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
-    maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
-    theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
-    heatmap: true, // 是否开启弹幕热度图, 默认为 false
-    beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
-    // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
-    mount: document.querySelector('.artplayer-danmuku'),
-}

使用弹幕数组 ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            // 弹幕数组
-            danmuku: [
-                {
-                    text: '111', // 弹幕文本
-                    time: 1, // 发送时间，单位秒
-                    color: '#fff', // 弹幕局部颜色
-                    border: false, // 是否显示描边
-                    mode: 0, // 弹幕模式: 0表示滚动, 1静止
-                },
-                {
-                    text: '222',
-                    time: 2,
-                    color: 'red',
-                    border: true,
-                    mode: 0,
-                },
-                {
-                    text: '333',
-                    time: 3,
-                    color: 'green',
-                    border: false,
-                    mode: 1,
-                },
-            ],
-        }),
-    ],
-});

使用弹幕 XML ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            // 弹幕 XML 文件，和 Bilibili 网站的弹幕格式一致
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});

使用异步调用 ​

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            // 使用 Promise 异步返回
-            danmuku: function () {
-                return new Promise((resovle) => {
-                    return resovle([
-                        {
-                            text: '111',
-                            time: 1,
-                        },
-                        {
-                            text: '222',
-                            time: 2,
-                        },
-                        {
-                            text: '333',
-                            time: 3,
-                        },
-                    ]);
-                });
-            },
-        }),
-    ],
-});

hide/show ​

通过方法 hide 和 show 进行隐藏或者显示弹幕

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '隐藏弹幕',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.hide();
-            },
-        },
-        {
-            position: 'right',
-            html: '显示弹幕',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.show();
-            },
-        },
-    ],
-});

isHide ​

通过属性 isHide 判断当前弹幕是隐藏或者显示

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '隐藏弹幕',
-            click: function (_, event) {
-                if (art.plugins.artplayerPluginDanmuku.isHide) {
-                    art.plugins.artplayerPluginDanmuku.show();
-                    event.target.innerText = '隐藏弹幕';
-                } else {
-                    art.plugins.artplayerPluginDanmuku.hide();
-                    event.target.innerText = '显示弹幕';
-                }
-            },
-        },
-    ],
-});

emit ​

通过方法 emit 发送一条实时弹幕

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '发送弹幕',
-            click: function () {
-                var text = prompt('请输入弹幕文本', '弹幕测试文本');
-                if (!text || !text.trim()) return;
-                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
-                art.plugins.artplayerPluginDanmuku.emit({
-                    text: text,
-                    color: color,
-                    border: true,
-                });
-            },
-        },
-    ],
-});

config ​

通过方法 config 实时改变弹幕配置，支持属性有：

  • danmuku
  • speed
  • opacity
  • fontSize
  • color
  • mode
  • margin
  • antiOverlap
  • synchronousPlayback
  • filter
  • lockTime
  • beforeEmit
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '弹幕大小：<input type="range" min="12" max="50" step="1" value="25">',
-            style: {
-                display: 'flex',
-                alignItems: 'center',
-            },
-            mounted: function ($setting) {
-                const $range = $setting.querySelector('input[type=range]');
-                $range.addEventListener('change', () => {
-                    art.plugins.artplayerPluginDanmuku.config({
-                        fontSize: Number($range.value),
-                    });
-                });
-            },
-        },
-    ],
-});

load ​

通过 load 方法可以重载弹幕源，或者切换新弹幕

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-    controls: [
-        {
-            position: 'right',
-            html: '重载弹幕',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.load();
-            },
-        },
-        {
-            position: 'right',
-            html: '切换弹幕',
-            click: function () {
-                art.plugins.artplayerPluginDanmuku.config({
-                    danmuku: '/assets/sample/danmuku-v2.xml',
-                });
-                art.plugins.artplayerPluginDanmuku.load();
-            },
-        },
-    ],
-});

reset ​

用于清空当前显示的弹幕

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
+    
Artplayer.js
Appearance
弹幕库 ​
演示 ​
👉 查看完整演示
安装 ​
bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
选项 ​
js
{
+    danmuku: [], // 弹幕库，支持数组, xml 地址, Promise返回数组
+    speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10]
+    opacity: 1, // 弹幕透明度，范围在[0 ~ 1]
+    fontSize: 25, // 字体大小，支持数字和百分比
+    color: '#FFFFFF', // 默认字体颜色
+    mode: 0, // 默认模式，0-滚动，1-静止
+    margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比
+    antiOverlap: true, // 是否防重叠
+    useWorker: true, // 是否使用 web worker
+    synchronousPlayback: false, // 是否同步到播放速度
+    filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送
+    lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60]
+    maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500]
+    minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制
+    maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度
+    theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light
+    heatmap: true, // 是否开启弹幕热度图, 默认为 false
+    beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送
+    // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效
+    mount: document.querySelector('.artplayer-danmuku'),
+}
使用弹幕数组 ​
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            // 弹幕数组
+            danmuku: [
+                {
+                    text: '111', // 弹幕文本
+                    time: 1, // 发送时间，单位秒
+                    color: '#fff', // 弹幕局部颜色
+                    border: false, // 是否显示描边
+                    mode: 0, // 弹幕模式: 0表示滚动, 1静止
+                },
+                {
+                    text: '222',
+                    time: 2,
+                    color: 'red',
+                    border: true,
+                    mode: 0,
+                },
+                {
+                    text: '333',
+                    time: 3,
+                    color: 'green',
+                    border: false,
+                    mode: 1,
+                },
+            ],
+        }),
+    ],
+});
使用弹幕 XML ​
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            // 弹幕 XML 文件，和 Bilibili 网站的弹幕格式一致
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
使用异步调用 ​
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            // 使用 Promise 异步返回
+            danmuku: function () {
+                return new Promise((resovle) => {
+                    return resovle([
+                        {
+                            text: '111',
+                            time: 1,
+                        },
+                        {
+                            text: '222',
+                            time: 2,
+                        },
+                        {
+                            text: '333',
+                            time: 3,
+                        },
+                    ]);
+                });
+            },
+        }),
+    ],
+});
hide/show ​
通过方法 hide 和 show 进行隐藏或者显示弹幕
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '隐藏弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.hide();
+            },
+        },
+        {
+            position: 'right',
+            html: '显示弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.show();
+            },
+        },
+    ],
+});
isHide ​
通过属性 isHide 判断当前弹幕是隐藏或者显示
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '隐藏弹幕',
+            click: function (_, event) {
+                if (art.plugins.artplayerPluginDanmuku.isHide) {
+                    art.plugins.artplayerPluginDanmuku.show();
+                    event.target.innerText = '隐藏弹幕';
+                } else {
+                    art.plugins.artplayerPluginDanmuku.hide();
+                    event.target.innerText = '显示弹幕';
+                }
+            },
+        },
+    ],
+});
emit ​
通过方法 emit 发送一条实时弹幕
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '发送弹幕',
+            click: function () {
+                var text = prompt('请输入弹幕文本', '弹幕测试文本');
+                if (!text || !text.trim()) return;
+                var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
+                art.plugins.artplayerPluginDanmuku.emit({
+                    text: text,
+                    color: color,
+                    border: true,
+                });
+            },
+        },
+    ],
+});
config ​
通过方法 config 实时改变弹幕配置，支持属性有：
  • danmuku
  • speed
  • opacity
  • fontSize
  • color
  • mode
  • margin
  • antiOverlap
  • synchronousPlayback
  • filter
  • lockTime
  • beforeEmit
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '弹幕大小：<input type="range" min="12" max="50" step="1" value="25">',
+            style: {
+                display: 'flex',
+                alignItems: 'center',
+            },
+            mounted: function ($setting) {
+                const $range = $setting.querySelector('input[type=range]');
+                $range.addEventListener('change', () => {
+                    art.plugins.artplayerPluginDanmuku.config({
+                        fontSize: Number($range.value),
+                    });
+                });
+            },
+        },
+    ],
+});
load ​
通过 load 方法可以重载弹幕源，或者切换新弹幕
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '重载弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+        {
+            position: 'right',
+            html: '切换弹幕',
+            click: function () {
+                art.plugins.artplayerPluginDanmuku.config({
+                    danmuku: '/assets/sample/danmuku-v2.xml',
+                });
+                art.plugins.artplayerPluginDanmuku.load();
+            },
+        },
+    ],
+});
reset ​
用于清空当前显示的弹幕
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
 
-art.on('resize', () => {
-    art.plugins.artplayerPluginDanmuku.reset();
-});
option ​
用于获取当前弹幕配置
 ▶ Run Code 
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
+art.on('resize', () => {
+    art.plugins.artplayerPluginDanmuku.reset();
+});
option ​
用于获取当前弹幕配置
 ▶ Run Code 
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
 
-art.on('ready', () => {
-    console.info(art.plugins.artplayerPluginDanmuku.option);
-});
事件 ​
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    plugins: [
-        artplayerPluginDanmuku({
-            danmuku: '/assets/sample/danmuku.xml',
-        }),
-    ],
-});
+art.on('ready', () => {
+    console.info(art.plugins.artplayerPluginDanmuku.option);
+});
事件 ​
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    plugins: [
+        artplayerPluginDanmuku({
+            danmuku: '/assets/sample/danmuku.xml',
+        }),
+    ],
+});
 
-art.on('artplayerPluginDanmuku:emit', (danmu) => {
-    console.info('新增弹幕', danmu);
-});
+art.on('artplayerPluginDanmuku:emit', (danmu) => {
+    console.info('新增弹幕', danmu);
+});
 
-art.on('artplayerPluginDanmuku:loaded', (danmus) => {
-    console.info('加载弹幕', danmus.length);
-});
+art.on('artplayerPluginDanmuku:loaded', (danmus) => {
+    console.info('加载弹幕', danmus.length);
+});
 
-art.on('artplayerPluginDanmuku:error', (error) => {
-    console.info('加载错误', error);
-});
+art.on('artplayerPluginDanmuku:error', (error) => {
+    console.info('加载错误', error);
+});
 
-art.on('artplayerPluginDanmuku:config', (option) => {
-    console.info('配置变化', option);
-});
+art.on('artplayerPluginDanmuku:config', (option) => {
+    console.info('配置变化', option);
+});
 
-art.on('artplayerPluginDanmuku:stop', () => {
-    console.info('弹幕停止');
-});
+art.on('artplayerPluginDanmuku:stop', () => {
+    console.info('弹幕停止');
+});
 
-art.on('artplayerPluginDanmuku:start', () => {
-    console.info('弹幕开始');
-});
+art.on('artplayerPluginDanmuku:start', () => {
+    console.info('弹幕开始');
+});
 
-art.on('artplayerPluginDanmuku:hide', () => {
-    console.info('弹幕隐藏');
-});
+art.on('artplayerPluginDanmuku:hide', () => {
+    console.info('弹幕隐藏');
+});
 
-art.on('artplayerPluginDanmuku:show', () => {
-    console.info('弹幕显示');
-});
+art.on('artplayerPluginDanmuku:show', () => {
+    console.info('弹幕显示');
+});
 
-art.on('artplayerPluginDanmuku:destroy', () => {
-    console.info('弹幕销毁');
-});

-    
+art.on('artplayerPluginDanmuku:destroy', () => {
+    console.info('弹幕销毁');
+});
+ \ No newline at end of file diff --git a/docs/document/plugin/dash-quality.html b/docs/document/plugin/dash-quality.html index 3899e4a06..42fb5c5ad 100644 --- a/docs/document/plugin/dash-quality.html +++ b/docs/document/plugin/dash-quality.html @@ -5,21 +5,23 @@ Dash 画质 | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

Dash 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-dash-quality
bash
yarn add artplayer-plugin-dash-quality
bash
pnpm add artplayer-plugin-dash-quality
html
<script src="path/to/artplayer-plugin-dash-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
bash
https://unpkg.com/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
- +
Artplayer.js

Appearance

Dash 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-dash-quality
bash
yarn add artplayer-plugin-dash-quality
bash
pnpm add artplayer-plugin-dash-quality
html
<script src="path/to/artplayer-plugin-dash-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
bash
https://unpkg.com/artplayer-plugin-dash-quality/dist/artplayer-plugin-dash-quality.js
+ \ No newline at end of file diff --git a/docs/document/plugin/hls-quality.html b/docs/document/plugin/hls-quality.html index e32b774c4..007f91dda 100644 --- a/docs/document/plugin/hls-quality.html +++ b/docs/document/plugin/hls-quality.html @@ -5,21 +5,23 @@ HLS 画质 | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

HLS 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-hls-quality
bash
yarn add artplayer-plugin-hls-quality
bash
pnpm add artplayer-plugin-hls-quality
html
<script src="path/to/artplayer-plugin-hls-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
bash
https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
- +
Artplayer.js

Appearance

HLS 画质 ​

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-hls-quality
bash
yarn add artplayer-plugin-hls-quality
bash
pnpm add artplayer-plugin-hls-quality
html
<script src="path/to/artplayer-plugin-hls-quality.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
bash
https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
+ \ No newline at end of file diff --git a/docs/document/plugin/iframe.html b/docs/document/plugin/iframe.html index 6b9547f12..eabcfd8d9 100644 --- a/docs/document/plugin/iframe.html +++ b/docs/document/plugin/iframe.html @@ -5,186 +5,190 @@ Iframe 控制 | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

Iframe 控制 ​

说明 ​

通过该插件，你可以轻松在 index.html 里控制跨域 iframe.html 页面里的播放器，如在 index.html 里通过代码控制 iframe.html 播放器的功能，或者获取 iframe.html 播放器的值

演示 ​

👉 查看完整演示

安装 ​

bash
npm install artplayer-plugin-iframe
bash
yarn add artplayer-plugin-iframe
bash
pnpm add artplayer-plugin-iframe
html
<script src="path/to/artplayer-plugin-iframe.js"></script>

CDN ​

bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
bash
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js

使用 ​

html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-    </head>
-    <body>
-        <iframe id="iframe"></iframe>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            const iframe = new ArtplayerPluginIframe({
-                // Iframe element
-                iframe: document.querySelector('#iframe'),
-                // Iframe url
-                url: 'path/to/iframe.html',
-            });
+    
Artplayer.js
Appearance
Iframe 控制 ​
说明 ​
通过该插件，你可以轻松在 index.html 里控制跨域 iframe.html 页面里的播放器，如在 index.html 里通过代码控制 iframe.html 播放器的功能，或者获取 iframe.html 播放器的值
演示 ​
👉 查看完整演示
安装 ​
bash
npm install artplayer-plugin-iframe
bash
yarn add artplayer-plugin-iframe
bash
pnpm add artplayer-plugin-iframe
html
<script src="path/to/artplayer-plugin-iframe.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
bash
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
使用 ​
html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            const iframe = new ArtplayerPluginIframe({
+                // Iframe element
+                iframe: document.querySelector('#iframe'),
+                // Iframe url
+                url: 'path/to/iframe.html',
+            });
 
-            // Send message to iframe
-            iframe.commit(() => {
-                var art = new Artplayer({
-                    container: '.artplayer-app',
-                    url: 'path/to/video.mp4',
-                });
-            });
-        </script>
-    </body>
-</html>
html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-        <style>
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                padding: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
-        <script src="path/to/artplayer.js"></script>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            // Inject scripts to receive messages from instances
-            ArtplayerPluginIframe.inject();
-        </script>
-    </body>
-</html>
index.html 接口 ​
commit ​
从 index.html 将消息推送到 iframe.html，该函数将在 iframe.html 内部运行，同时它也能用于异步获取 iframe.html 里的值
js
iframe.commit(() => {
-    var art = new Artplayer({
-        container: '.artplayer-app',
-        url: 'path/to/video.mp4',
-    });
-});
+            // Send message to iframe
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
+            });
+        </script>
+    </body>
+</html>
html
<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            // Inject scripts to receive messages from instances
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>
index.html 接口 ​
commit ​
从 index.html 将消息推送到 iframe.html，该函数将在 iframe.html 内部运行，同时它也能用于异步获取 iframe.html 里的值
js
iframe.commit(() => {
+    var art = new Artplayer({
+        container: '.artplayer-app',
+        url: 'path/to/video.mp4',
+    });
+});
 
-iframe.commit(() => {
-    art.seek = 5;
-});
+iframe.commit(() => {
+    art.seek = 5;
+});
 
-// Get the value from the iframe.html
-(async function () {
-    // Use the return keyword
-    var currentTime = await iframe.commit(() => {
-        return art.currentTime;
-    });
+// Get the value from the iframe.html
+(async function () {
+    // Use the return keyword
+    var currentTime = await iframe.commit(() => {
+        return art.currentTime;
+    });
 
-    // or use the resolve method
-    var currentTime2 = await iframe.commit((resolve) => {
-        setTimeout(() => {
-            resolve(art.currentTime);
-        }, 1000);
-    });
-})();
message ​
在 index.html 接收来自 iframe.html 的消息
js
iframe.message((event) => {
-    console.info(event);
-});
destroy ​
销毁后 index.html 无法与 iframe.html 通信
js
iframe.destroy();
iframe.html 接口 ​
提示
iframe.html 接口 只能运行在 iframe.html 里
inject ​
注入脚本，接收来自 index.html 的消息
js
ArtplayerPluginIframe.inject();
postMessage ​
将消息推送到 index.html
js
iframe.message((event) => {
-    console.info(event);
-});
+    // or use the resolve method
+    var currentTime2 = await iframe.commit((resolve) => {
+        setTimeout(() => {
+            resolve(art.currentTime);
+        }, 1000);
+    });
+})();
message ​
在 index.html 接收来自 iframe.html 的消息
js
iframe.message((event) => {
+    console.info(event);
+});
destroy ​
销毁后 index.html 无法与 iframe.html 通信
js
iframe.destroy();
iframe.html 接口 ​
提示
iframe.html 接口 只能运行在 iframe.html 里
inject ​
注入脚本，接收来自 index.html 的消息
js
ArtplayerPluginIframe.inject();
postMessage ​
将消息推送到 index.html
js
iframe.message((event) => {
+    console.info(event);
+});
 
-iframe.commit(() => {
-    ArtplayerPluginIframe.postMessage({
-        type: 'currentTime',
-        data: art.currentTime,
-    });
-});
例子 ​
最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 iframe.html 里的 fullscreenWeb 事件并通知到 index.html 即可
html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-    </head>
-    <body>
-        <iframe id="iframe"></iframe>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <style>
-            .fullscreenWeb {
-                position: fixed;
-                z-index: 9999;
-                width: 100%;
-                height: 100%;
-                left: 0;
-                top: 0;
-                right: 0;
-                bottom: 0;
-            }
-        </style>
-        <script>
-            const $iframe = document.querySelector('#iframe');
-            const iframe = new ArtplayerPluginIframe({
-                iframe: $iframe,
-                url: 'path/to/iframe.html',
-            });
+iframe.commit(() => {
+    ArtplayerPluginIframe.postMessage({
+        type: 'currentTime',
+        data: art.currentTime,
+    });
+});
例子 ​
最常遇到的问题是，播放器在 iframe.html 里进行网页全屏，但在 index.html 是不生效的，这时候只要监听 iframe.html 里的 fullscreenWeb 事件并通知到 index.html 即可
html

+<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+    </head>
+    <body>
+        <iframe id="iframe"></iframe>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <style>
+            .fullscreenWeb {
+                position: fixed;
+                z-index: 9999;
+                width: 100%;
+                height: 100%;
+                left: 0;
+                top: 0;
+                right: 0;
+                bottom: 0;
+            }
+        </style>
+        <script>
+            const $iframe = document.querySelector('#iframe');
+            const iframe = new ArtplayerPluginIframe({
+                iframe: $iframe,
+                url: 'path/to/iframe.html',
+            });
 
-            iframe.message(({ type, data }) => {
-                switch (type) {
-                    case 'fullscreenWeb':
-                        if (data) {
-                            $iframe.classList.add('fullscreenWeb');
-                        } else {
-                            $iframe.classList.remove('fullscreenWeb');
-                        }
-                        break;
-                    default:
-                        break;
-                }
-            });
+            iframe.message(({ type, data }) => {
+                switch (type) {
+                    case 'fullscreenWeb':
+                        if (data) {
+                            $iframe.classList.add('fullscreenWeb');
+                        } else {
+                            $iframe.classList.remove('fullscreenWeb');
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            });
 
-            iframe.commit(() => {
-                var art = new Artplayer({
-                    container: '.artplayer-app',
-                    url: 'path/to/video.mp4',
-                });
+            iframe.commit(() => {
+                var art = new Artplayer({
+                    container: '.artplayer-app',
+                    url: 'path/to/video.mp4',
+                });
 
-                art.on('fullscreenWeb', (state) => {
-                    ArtplayerPluginIframe.postMessage({
-                        type: 'fullscreenWeb',
-                        data: state,
-                    });
-                });
-            });
-        </script>
-    </body>
-</html>
html
<!DOCTYPE html>
-<html>
-    <head>
-        <title>ArtPlayer</title>
-        <meta charset="UTF-8" />
-        <style>
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                margin: 0;
-                padding: 0;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
-        <script src="path/to/artplayer.js"></script>
-        <script src="path/to/artplayer-plugin-iframe.js"></script>
-        <script>
-            ArtplayerPluginIframe.inject();
-        </script>
-    </body>
-</html>

-    
+                art.on('fullscreenWeb', (state) => {
+                    ArtplayerPluginIframe.postMessage({
+                        type: 'fullscreenWeb',
+                        data: state,
+                    });
+                });
+            });
+        </script>
+    </body>
+</html>
html

+<!DOCTYPE html>
+<html>
+    <head>
+        <title>ArtPlayer</title>
+        <meta charset="UTF-8" />
+        <style>
+            html,
+            body {
+                width: 100%;
+                height: 100%;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="artplayer-app" style="width: 100%; height: 100%;"></div>
+        <script src="path/to/artplayer.js"></script>
+        <script src="path/to/artplayer-plugin-iframe.js"></script>
+        <script>
+            ArtplayerPluginIframe.inject();
+        </script>
+    </body>
+</html>
+ \ No newline at end of file diff --git a/docs/document/start/i18n.html b/docs/document/start/i18n.html index f1b61aa1d..afd15d0f2 100644 --- a/docs/document/start/i18n.html +++ b/docs/document/start/i18n.html @@ -5,72 +5,74 @@ 语言设置 | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

语言设置 ​

DANGER

鉴于捆绑的多国语言越来越多, 从 5.1.0 版本开始, artplayer.js 核心代码除了包含 简体中文 和 英文 外, 不再捆绑其它多国语言, 需要自行导入需要的语言。

WARNING

当无法匹配到语言时, 会默认显示英文, i18n 写法参考: artplayer/types/i18n.d.ts

默认语言 ​

默认语言有: en, zh-cn, 无需手动导入

js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'zh-cn', // or 'en'
-});

导入语言 ​

打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言

打包后的语言文件存放于: artplayer/dist/i18n/*.js

手动导入的语言有: cs, es, fa, fr, id, pl, ru, zh-tw

js
import id from 'artplayer/dist/i18n/id.js';
-import zhTw from 'artplayer/dist/i18n/zh-tw.js';
+    
Artplayer.js
Appearance
语言设置 ​
DANGER
鉴于捆绑的多国语言越来越多, 从 5.1.0 版本开始, artplayer.js 核心代码除了包含 简体中文 和 英文 外, 不再捆绑其它多国语言, 需要自行导入需要的语言。
WARNING
当无法匹配到语言时, 会默认显示英文, i18n 写法参考: artplayer/types/i18n.d.ts
默认语言 ​
默认语言有: en, zh-cn, 无需手动导入
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'zh-cn', // or 'en'
+});
导入语言 ​
打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言
打包后的语言文件存放于: artplayer/dist/i18n/*.js
手动导入的语言有: cs, es, fa, fr, id, pl, ru, zh-tw
js
import id from 'artplayer/dist/i18n/id.js';
+import zhTw from 'artplayer/dist/i18n/zh-tw.js';
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: { 
-        id: id,
-        'zh-tw': zhTw,
-    },
-    lang: 'zh-tw',
-});
js
<script src="artplayer/dist/i18n/id.js"></script>
-<script src="artplayer/dist/i18n/zh-tw.js"></script>
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: { 
+        id: id,
+        'zh-tw': zhTw,
+    },
+    lang: 'zh-tw',
+});
js
<script src="artplayer/dist/i18n/id.js"></script>
+<script src="artplayer/dist/i18n/zh-tw.js"></script>
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: { 
-        id: window['artplayer-i18n-id'],
-        'zh-tw': window['artplayer-i18n-zh-tw'],
-    },
-    lang: 'zh-tw',
-});
新增语言 ​
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'your-lang',
-    i18n: {
-        'your-lang': {
-            Play: 'Your Play'
-        },
-    },
-});
修改语言 ​
js
import zhTw from 'artplayer/i18n/zh-tw.js';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: { 
+        id: window['artplayer-i18n-id'],
+        'zh-tw': window['artplayer-i18n-zh-tw'],
+    },
+    lang: 'zh-tw',
+});
新增语言 ​
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'your-lang',
+    i18n: {
+        'your-lang': {
+            Play: 'Your Play'
+        },
+    },
+});
修改语言 ​
js
import zhTw from 'artplayer/i18n/zh-tw.js';
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: {
-        // Change the default language
-        'zh-cn': {
-            Play: 'Your Play'
-        },
-        // Change the imported language
-        'zh-tw': {
-            ...zhTw,
-            Play: 'Your Play'
-        },
-    },
-});
- +var art = new Artplayer({ + container: '.artplayer-app', + url: '/assets/sample/video.mp4', + i18n: { + // Change the default language + 'zh-cn': { + Play: 'Your Play' + }, + // Change the imported language + 'zh-tw': { + ...zhTw, + Play: 'Your Play' + }, + }, +}); + \ No newline at end of file diff --git a/docs/document/start/option.html b/docs/document/start/option.html index 512d93d66..800601ce0 100644 --- a/docs/document/start/option.html +++ b/docs/document/start/option.html @@ -5,400 +5,402 @@ 基础选项 | Artplayer.js - + + - - - - - + + + + + - + + -
Artplayer.js

Appearance

On this page

基础选项 ​

container ​

  • Type: String, Element
  • Default: #artplayer

播放器挂载的 DOM 容器

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app', 
-    // container: document.querySelector('.artplayer-app'),
-    url: '/assets/sample/video.mp4',
-});

您可能需要初始化容器元素的大小，如:

css
.artplayer-app {
-    width: 400px;
-    height: 300px;
-}

或者使用 aspect-ratio：

css
.artplayer-app {
-    aspect-ratio: 16/9;
-}

提示

全部选项里，只有 container 是必填的

url ​

  • Type: String
  • Default: ''

视频源地址

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});

有时候 url 地址没那么快知道，这时候你可以异步设置 url

▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-});
+    
Artplayer.js
Appearance
基础选项 ​
container ​
  • Type: String, Element
  • Default: #artplayer
播放器挂载的 DOM 容器
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app', 
+    // container: document.querySelector('.artplayer-app'),
+    url: '/assets/sample/video.mp4',
+});
您可能需要初始化容器元素的大小，如:
css
.artplayer-app {
+    width: 400px;
+    height: 300px;
+}
或者使用 aspect-ratio：
css
.artplayer-app {
+    aspect-ratio: 16/9;
+}
提示
全部选项里，只有 container 是必填的
url ​
  • Type: String
  • Default: ''
视频源地址
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
有时候 url 地址没那么快知道，这时候你可以异步设置 url
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+});
 
-setTimeout(() => {
-    art.url = '/assets/sample/video.mp4';
-}, 1000);
提示
默认支持三种视频文件格式：.mp4, .ogg, .webm
如需要播放 .m3u8 或者 .flv 等其它格式，请参考左侧的 第三方库
id ​
  • Type: String
  • Default: ''
播放器的唯一标识，目前只用于记忆播放 autoplayback
▶ Run Code
js
var art = new Artplayer({
-    id: 'your-url-id',
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-});
onReady ​
  • Type: Function
  • Default: undefined
构造函数接受一个函数作为第二个参数，播放器初始化成功且视频可以播放时触发，和ready事件一样
▶ Run Code
js
var art = new Artplayer(
-    {
-        container: '.artplayer-app',
-        url: '/assets/sample/video.mp4',
-        muted: true,
-    },
-    function onReady(art) {
-        this.play()
-    },
-);
等同于:
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
+setTimeout(() => {
+    art.url = '/assets/sample/video.mp4';
+}, 1000);
提示
默认支持三种视频文件格式：.mp4, .ogg, .webm
如需要播放 .m3u8 或者 .flv 等其它格式，请参考左侧的 第三方库
id ​
  • Type: String
  • Default: ''
播放器的唯一标识，目前只用于记忆播放 autoplayback
▶ Run Code
js
var art = new Artplayer({
+    id: 'your-url-id',
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+});
onReady ​
  • Type: Function
  • Default: undefined
构造函数接受一个函数作为第二个参数，播放器初始化成功且视频可以播放时触发，和ready事件一样
▶ Run Code
js
var art = new Artplayer(
+    {
+        container: '.artplayer-app',
+        url: '/assets/sample/video.mp4',
+        muted: true,
+    },
+    function onReady(art) {
+        this.play()
+    },
+);
等同于:
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
 
-art.on('ready', () => {
-    art.play();
-});
提示
回调函数里的this就是播放器实例，但回调函数假如使用了箭头函数，this则不会指向播放器实例
poster ​
  • Type: String
  • Default: ''
视频的海报，只会出现在播放器初始化且未播放的状态下
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    poster: '/assets/sample/poster.jpg',
-});
theme ​
  • Type: String
  • Default: #f00
播放器主题颜色，目前用于 进度条 和 高亮元素 上
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    theme: '#ffad00',
-});
volume ​
  • Type: Number
  • Default: 0.7
播放器的默认音量
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    volume: 0.5,
-});
提示
播放器会缓存最后一次音量的大小，下次初始化时（如刷新页面）播放器会读取该缓存值
isLive ​
  • Type: Boolean
  • Default: false
使用直播模式，会隐藏进度条和播放时间
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    isLive: true,
-});
muted ​
  • Type: Boolean
  • Default: false
是否默认静音
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    muted: true,
-});
autoplay ​
  • Type: Boolean
  • Default: false
是否自动播放
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoplay: true,
-    muted: true,
-});
提示
假如希望默认进入页面就能自动播放视频，muted 必需为 true，更多信息请阅读 Autoplay Policy Changes
autoSize ​
  • Type: Boolean
  • Default: false
播放器的尺寸默认会填充整个 container 容器尺寸，所以经常出现黑边，该值能自动调整播放器尺寸以隐藏黑边，类似 css 的 object-fit: cover;
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoSize: true,
-});
autoMini ​
  • Type: Boolean
  • Default: false
当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoMini: true,
-});
loop ​
  • Type: Boolean
  • Default: false
是否循环播放
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    loop: true,
-});
flip ​
  • Type: Boolean
  • Default: false
是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    flip: true,
-    setting: true,
-});
playbackRate ​
  • Type: Boolean
  • Default: false
是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    playbackRate: true,
-    setting: true,
-});
aspectRatio ​
  • Type: Boolean
  • Default: false
是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    aspectRatio: true,
-    setting: true,
-});
screenshot ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示 视频截图 功能
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    screenshot: true,
-});
提示
由于浏览器安全机制，假如视频源地址和网站是跨域的，可能会出现截图失败
setting ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示 设置面板 的开关按钮
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-});
hotkey ​
  • Type: Boolean
  • Default: true
是否使用快捷键
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    hotkey: true,
-});
热键描述
↑增加音量
↓降低音量
←视频快进
→视频快退
space切换播放/暂停
提示
只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效
pip ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示 画中画 的开关按钮
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    pip: true,
-});
mutex ​
  • Type: Boolean
  • Default: true
假如页面里同时存在多个播放器，是否只能让一个播放器播放
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    mutex: true,
-});
fullscreen ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示播放器 窗口全屏 按钮
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreen: true,
-});
fullscreenWeb ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示播放器 网页全屏 按钮
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fullscreenWeb: true,
-});
subtitleOffset ​
  • Type: Boolean
  • Default: false
字幕时间偏移，范围在 [-5s, 5s]，出现在 设置面板 里
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitleOffset: true,
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-    },
-    setting: true,
-});
miniProgressBar ​
  • Type: Boolean
  • Default: false
迷你进度条，只在播放器失去焦点后且正在播放时出现
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    miniProgressBar: true,
-});
useSSR ​
  • Type: Boolean
  • Default: false
是否使用 SSR 挂载模式，假如你希望在播放器挂载前，就提前渲染好播放器所需的 HTML 时有用
你可以通过 Artplayer.html 访问到播放器所需的 HTML
▶ Run Code
js
var $container = document.querySelector('.artplayer-app');
-$container.innerHTML = Artplayer.html;
+art.on('ready', () => {
+    art.play();
+});
提示
回调函数里的this就是播放器实例，但回调函数假如使用了箭头函数，this则不会指向播放器实例
poster ​
  • Type: String
  • Default: ''
视频的海报，只会出现在播放器初始化且未播放的状态下
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    poster: '/assets/sample/poster.jpg',
+});
theme ​
  • Type: String
  • Default: #f00
播放器主题颜色，目前用于 进度条 和 高亮元素 上
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    theme: '#ffad00',
+});
volume ​
  • Type: Number
  • Default: 0.7
播放器的默认音量
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    volume: 0.5,
+});
提示
播放器会缓存最后一次音量的大小，下次初始化时（如刷新页面）播放器会读取该缓存值
isLive ​
  • Type: Boolean
  • Default: false
使用直播模式，会隐藏进度条和播放时间
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    isLive: true,
+});
muted ​
  • Type: Boolean
  • Default: false
是否默认静音
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    muted: true,
+});
autoplay ​
  • Type: Boolean
  • Default: false
是否自动播放
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoplay: true,
+    muted: true,
+});
提示
假如希望默认进入页面就能自动播放视频，muted 必需为 true，更多信息请阅读 Autoplay Policy Changes
autoSize ​
  • Type: Boolean
  • Default: false
播放器的尺寸默认会填充整个 container 容器尺寸，所以经常出现黑边，该值能自动调整播放器尺寸以隐藏黑边，类似 css 的 object-fit: cover;
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+});
autoMini ​
  • Type: Boolean
  • Default: false
当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoMini: true,
+});
loop ​
  • Type: Boolean
  • Default: false
是否循环播放
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    loop: true,
+});
flip ​
  • Type: Boolean
  • Default: false
是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    flip: true,
+    setting: true,
+});
playbackRate ​
  • Type: Boolean
  • Default: false
是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    playbackRate: true,
+    setting: true,
+});
aspectRatio ​
  • Type: Boolean
  • Default: false
是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    aspectRatio: true,
+    setting: true,
+});
screenshot ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示 视频截图 功能
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    screenshot: true,
+});
提示
由于浏览器安全机制，假如视频源地址和网站是跨域的，可能会出现截图失败
setting ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示 设置面板 的开关按钮
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+});
hotkey ​
  • Type: Boolean
  • Default: true
是否使用快捷键
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    hotkey: true,
+});
热键描述
↑增加音量
↓降低音量
←视频快进
→视频快退
space切换播放/暂停
提示
只在播放器获得焦点后（如点击了播放器后），这些快捷键才会生效
pip ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示 画中画 的开关按钮
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    pip: true,
+});
mutex ​
  • Type: Boolean
  • Default: true
假如页面里同时存在多个播放器，是否只能让一个播放器播放
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    mutex: true,
+});
fullscreen ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示播放器 窗口全屏 按钮
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreen: true,
+});
fullscreenWeb ​
  • Type: Boolean
  • Default: false
是否在底部控制栏里显示播放器 网页全屏 按钮
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fullscreenWeb: true,
+});
subtitleOffset ​
  • Type: Boolean
  • Default: false
字幕时间偏移，范围在 [-5s, 5s]，出现在 设置面板 里
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitleOffset: true,
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+    },
+    setting: true,
+});
miniProgressBar ​
  • Type: Boolean
  • Default: false
迷你进度条，只在播放器失去焦点后且正在播放时出现
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    miniProgressBar: true,
+});
useSSR ​
  • Type: Boolean
  • Default: false
是否使用 SSR 挂载模式，假如你希望在播放器挂载前，就提前渲染好播放器所需的 HTML 时有用
你可以通过 Artplayer.html 访问到播放器所需的 HTML
▶ Run Code
js
var $container = document.querySelector('.artplayer-app');
+$container.innerHTML = Artplayer.html;
 
-var art = new Artplayer({
-    container: $container,
-    url: '/assets/sample/video.mp4',
-    useSSR: true,
-});
playsInline ​
  • Type: Boolean
  • Default: true
在移动端是否使用 playsInline 模式
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    playsInline: true,
-});
layers ​
  • Type: Array
  • Default: []
初始化自定义的 层
▶ Run Code
js
var img = '/assets/sample/layer.png';
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    layers: [
-        {
-            name: 'potser',
-            html: `<img style="width: 100px" src="${img}">`,
-            style: {
-                position: 'absolute',
-                top: '20px',
-                right: '20px',
-                opacity: '.9',
-            },
-            click: function (...args) {
-                console.info('click', args);
-                art.layers.show = false;
-            },
-            mounted: function (...args) {
-                console.info('mounted', args);
-            },
-        },
-    ],
-});
组件配置 请参考以下地址：
/component/layers.html
settings ​
  • Type: Array
  • Default: []
初始化自定义的 设置面板
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    setting: true,
-    settings: [
-        {
-            html: 'setting01',
-            selector: [
-                {
-                    html: 'setting01-01',
-                },
-                {
-                    html: 'setting01-02',
-                },
-            ],
-            onSelect: function (...args) {
-                console.info(args);
-            },
-        },
-        {
-            html: 'setting02',
-            selector: [
-                {
-                    html: 'setting02-01',
-                },
-                {
-                    html: 'setting02-02',
-                },
-            ],
-            onSelect: function (...args) {
-                console.info(args);
-            },
-        },
-    ],
-});
设置面板 请参考以下地址
/component/setting.html
contextmenu ​
  • Type: Array
  • Default: []
初始化自定义的 右键菜单
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    contextmenu: [
-        {
-            html: 'your-menu',
-            click: function (...args) {
-                console.info('click', args);
-                art.contextmenu.show = false;
-            },
-        },
-    ],
-});
组件配置 请参考以下地址：
/component/contextmenu.html- Type:
controls ​
  • Type: Array
  • Default: []
初始化自定义的底部 控制栏
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    controls: [
-        {
-            position: 'left',
-            html: 'your-control',
-            tooltip: 'Your Control',
-            style: {
-                color: 'green',
-            },
-            click: function (...args) {
-                console.info('click', args);
-            },
-        },
-    ],
-});
组件配置 请参考以下地址：
/component/controls.html
quality ​
  • Type: Array
  • Default: []
是否在底部控制栏里显示 画质选择 列表
属性类型描述
defaultBoolean默认画质
htmlString画质名字
urlString画质地址
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    quality: [
-        {
-            default: true,
-            html: 'SD 480P',
-            url: '/assets/sample/video.mp4',
-        },
-        {
-            html: 'HD 720P',
-            url: '/assets/sample/video.mp4',
-        },
-    ],
-});
highlight ​
  • Type: Array
  • Default: []
在进度条上显示 高亮信息
属性类型描述
timeNumber高亮时间（单位秒）
textString高亮文本
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    highlight: [
-        {
-            time: 60,
-            text: 'One more chance',
-        },
-        {
-            time: 120,
-            text: '谁でもいいはずなのに',
-        },
-        {
-            time: 180,
-            text: '夏の想い出がまわる',
-        },
-        {
-            time: 240,
-            text: 'こんなとこにあるはずもないのに',
-        },
-        {
-            time: 300,
-            text: '－－终わり－－',
-        },
-    ],
-});
plugins ​
  • Type: Array
  • Default: []
初始化自定义的 插件
▶ Run Code
js
function myPlugin(art) {
-    console.info(art);
-    return {
-        name: 'myPlugin',
-        something: 'something',
-        doSomething: function () {
-            console.info('doSomething');
-        },
-    };
-}
+var art = new Artplayer({
+    container: $container,
+    url: '/assets/sample/video.mp4',
+    useSSR: true,
+});
playsInline ​
  • Type: Boolean
  • Default: true
在移动端是否使用 playsInline 模式
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    playsInline: true,
+});
layers ​
  • Type: Array
  • Default: []
初始化自定义的 层
▶ Run Code
js
var img = '/assets/sample/layer.png';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    layers: [
+        {
+            name: 'potser',
+            html: `<img style="width: 100px" src="${img}">`,
+            style: {
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+                opacity: '.9',
+            },
+            click: function (...args) {
+                console.info('click', args);
+                art.layers.show = false;
+            },
+            mounted: function (...args) {
+                console.info('mounted', args);
+            },
+        },
+    ],
+});
组件配置 请参考以下地址：
/component/layers.html
settings ​
  • Type: Array
  • Default: []
初始化自定义的 设置面板
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    setting: true,
+    settings: [
+        {
+            html: 'setting01',
+            selector: [
+                {
+                    html: 'setting01-01',
+                },
+                {
+                    html: 'setting01-02',
+                },
+            ],
+            onSelect: function (...args) {
+                console.info(args);
+            },
+        },
+        {
+            html: 'setting02',
+            selector: [
+                {
+                    html: 'setting02-01',
+                },
+                {
+                    html: 'setting02-02',
+                },
+            ],
+            onSelect: function (...args) {
+                console.info(args);
+            },
+        },
+    ],
+});
设置面板 请参考以下地址
/component/setting.html
contextmenu ​
  • Type: Array
  • Default: []
初始化自定义的 右键菜单
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    contextmenu: [
+        {
+            html: 'your-menu',
+            click: function (...args) {
+                console.info('click', args);
+                art.contextmenu.show = false;
+            },
+        },
+    ],
+});
组件配置 请参考以下地址：
/component/contextmenu.html- Type:
controls ​
  • Type: Array
  • Default: []
初始化自定义的底部 控制栏
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    controls: [
+        {
+            position: 'left',
+            html: 'your-control',
+            tooltip: 'Your Control',
+            style: {
+                color: 'green',
+            },
+            click: function (...args) {
+                console.info('click', args);
+            },
+        },
+    ],
+});
组件配置 请参考以下地址：
/component/controls.html
quality ​
  • Type: Array
  • Default: []
是否在底部控制栏里显示 画质选择 列表
属性类型描述
defaultBoolean默认画质
htmlString画质名字
urlString画质地址
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    quality: [
+        {
+            default: true,
+            html: 'SD 480P',
+            url: '/assets/sample/video.mp4',
+        },
+        {
+            html: 'HD 720P',
+            url: '/assets/sample/video.mp4',
+        },
+    ],
+});
highlight ​
  • Type: Array
  • Default: []
在进度条上显示 高亮信息
属性类型描述
timeNumber高亮时间（单位秒）
textString高亮文本
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    highlight: [
+        {
+            time: 60,
+            text: 'One more chance',
+        },
+        {
+            time: 120,
+            text: '谁でもいいはずなのに',
+        },
+        {
+            time: 180,
+            text: '夏の想い出がまわる',
+        },
+        {
+            time: 240,
+            text: 'こんなとこにあるはずもないのに',
+        },
+        {
+            time: 300,
+            text: '－－终わり－－',
+        },
+    ],
+});
plugins ​
  • Type: Array
  • Default: []
初始化自定义的 插件
▶ Run Code
js
function myPlugin(art) {
+    console.info(art);
+    return {
+        name: 'myPlugin',
+        something: 'something',
+        doSomething: function () {
+            console.info('doSomething');
+        },
+    };
+}
 
-var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    plugins: [myPlugin],
-});
thumbnails ​
  • Type: Object
  • Default: {}
在进度条上设置 预览图
属性类型描述
urlString预览图地址
numberNumber预览图数量
columnNumber预览图列数
widthNumber预览图宽度
heightNumber预览图高度
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    thumbnails: {
-        url: '/assets/sample/thumbnails.png',
-        number: 60,
-        column: 10,
-    },
-});
在线生成预览图
artplayer-tool-thumbnail
subtitle ​
  • Type: Object
  • Default: {}
设置视频的字幕，支持字幕格式：vtt, srt, ass
属性类型描述
urlString字幕地址
typeString字幕类型，可选 vtt, srt, ass
styleObject字幕样式
encodingString字幕编码，默认 utf-8
escapeBoolean是否转义 html 标签，默认为 true
onVttLoadFunction用于修改 vtt 文本的函数
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    subtitle: {
-        url: '/assets/sample/subtitle.srt',
-        type: 'srt',
-        encoding: 'utf-8',
-        escape: true,
-        style: {
-            color: '#03A9F4',
-            'font-size': '30px',
-        },
-    },
-});
moreVideoAttr ​
  • Type: Object
  • Default: {'controls': false,'preload': 'metadata'}
更多视频属性，这些属性将直接写入视频元素里
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    moreVideoAttr: {
-        'webkit-playsinline': true,
-        playsInline: true,
-    },
-});
icons ​
  • Type: Object
  • Default: {}
用于替换默认图标，支持 Html 字符串和 HTMLElement
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    icons: {
-        loading: '<img src="/assets/img/ploading.gif">',
-        state: '<img src="/assets/img/state.png">',
-    },
-});
全部图标的定义
artplayer/types/icons.d.ts
type ​
  • Type: String
  • Default: ''
用于指明视频的格式，需要配合 customType 一起使用，默认视频的格式就是视频地址的后缀（如 .m3u8, .mkv, .ts），但有时候视频地地址没有正确的后缀，所以需要特别指明
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.m3u8',
-    type: 'm3u8',
-});
后缀的识别
播放器只能解析这种后缀：/assets/sample/video.m3u8
但无法解析这种后缀：/assets/sample/video?type=m3u8
所以假如你使用了 customType，最好同时要指明 type
customType ​
  • Type: Object
  • Default: {}
通过视频的 type 进行匹配，把视频解码权交给第三方程序进行处理，处理的函数能接收三个参数
  • video : 视频 DOM 元素
  • url : 视频地址
  • art : 当前实例
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.m3u8',
-    customType: {
-        m3u8: function (video, url, art) {
-            //
-        },
-    },
-});
lang ​
  • Type: String
  • Default: navigator.language.toLowerCase()
默认显示语言，目前支持：en, zh-cn
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'en',
-});
更多的语言设置
/start/i18n.html
i18n ​
  • Type: Object
  • Default: {}
自定义 i18n 配置，该配置会和自带的 i18n 进行深度合并
新增你的语言:
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lang: 'your-lang',
-    i18n: {
-        'your-lang': {
-            Play: 'Your Play'
-        },
-    },
-});
修改现有的语言
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    i18n: {
-        'zh-cn': {
-            Play: 'Your Play'
-        },
-        'zh-tw': {
-            Play: 'Your Play'
-        },
-    },
-});
更多的语言设置
/start/i18n.html
lock ​
  • Type: Boolean
  • Default: false
是否在移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    lock: true,
-});
fastForward ​
  • Type: Boolean
  • Default: false
是否在移动端添加长按视频快进功能
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    fastForward: true,
-});
autoPlayback ​
  • Type: Boolean
  • Default: false
是否使用自动 回放功能
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    id: 'your-url-id',
-    autoPlayback: true,
-});
提示
因为播放器默认使用 url 作为 key 来缓存播放进度的
但假如你的同一个视频的 url 是不同的话，那么你需要使用 id 来标识视频的唯一 key
autoOrientation ​
  • Type: Boolean
  • Default: false
是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    autoOrientation: true,
-});
airplay ​
  • Type: Boolean
  • Default: false
是否显示 airplay 按钮，当前只有部分浏览器支持该功能
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    airplay: true,
-});
cssVar ​
  • Type: Object
  • Default: {}
用于改变内置的css变量
▶ Run Code
js
var art = new Artplayer({
-    container: '.artplayer-app',
-    url: '/assets/sample/video.mp4',
-    cssVar: {
-        //
-    },
-});
cssVar 写法参考
artplayer/types/cssVar.d.d.ts

-    
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    plugins: [myPlugin],
+});

thumbnails ​

  • Type: Object
  • Default: {}

在进度条上设置 预览图

属性类型描述
urlString预览图地址
numberNumber预览图数量
columnNumber预览图列数
widthNumber预览图宽度
heightNumber预览图高度
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    thumbnails: {
+        url: '/assets/sample/thumbnails.png',
+        number: 60,
+        column: 10,
+    },
+});

在线生成预览图

artplayer-tool-thumbnail

subtitle ​

  • Type: Object
  • Default: {}

设置视频的字幕，支持字幕格式：vtt, srt, ass

属性类型描述
nameString字幕名字
urlString字幕地址
typeString字幕类型，可选 vtt, srt, ass
styleObject字幕样式
encodingString字幕编码，默认 utf-8
escapeBoolean是否转义 html 标签，默认为 true
onVttLoadFunction用于修改 vtt 文本的函数
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    subtitle: {
+        url: '/assets/sample/subtitle.srt',
+        type: 'srt',
+        encoding: 'utf-8',
+        escape: true,
+        style: {
+            color: '#03A9F4',
+            'font-size': '30px',
+        },
+    },
+});

moreVideoAttr ​

  • Type: Object
  • Default: {'controls': false,'preload': 'metadata'}

更多视频属性，这些属性将直接写入视频元素里

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    moreVideoAttr: {
+        'webkit-playsinline': true,
+        playsInline: true,
+    },
+});

icons ​

  • Type: Object
  • Default: {}

用于替换默认图标，支持 Html 字符串和 HTMLElement

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    icons: {
+        loading: '<img src="/assets/img/ploading.gif">',
+        state: '<img src="/assets/img/state.png">',
+    },
+});

全部图标的定义

artplayer/types/icons.d.ts

type ​

  • Type: String
  • Default: ''

用于指明视频的格式，需要配合 customType 一起使用，默认视频的格式就是视频地址的后缀（如 .m3u8, .mkv, .ts），但有时候视频地地址没有正确的后缀，所以需要特别指明

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.m3u8',
+    type: 'm3u8',
+});

后缀的识别

播放器只能解析这种后缀：/assets/sample/video.m3u8

但无法解析这种后缀：/assets/sample/video?type=m3u8

所以假如你使用了 customType，最好同时要指明 type

customType ​

  • Type: Object
  • Default: {}

通过视频的 type 进行匹配，把视频解码权交给第三方程序进行处理，处理的函数能接收三个参数

  • video : 视频 DOM 元素
  • url : 视频地址
  • art : 当前实例
▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.m3u8',
+    customType: {
+        m3u8: function (video, url, art) {
+            //
+        },
+    },
+});

lang ​

  • Type: String
  • Default: navigator.language.toLowerCase()

默认显示语言，目前支持：en, zh-cn

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'en',
+});

更多的语言设置

/start/i18n.html

i18n ​

  • Type: Object
  • Default: {}

自定义 i18n 配置，该配置会和自带的 i18n 进行深度合并

新增你的语言:

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lang: 'your-lang',
+    i18n: {
+        'your-lang': {
+            Play: 'Your Play'
+        },
+    },
+});

修改现有的语言

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    i18n: {
+        'zh-cn': {
+            Play: 'Your Play'
+        },
+        'zh-tw': {
+            Play: 'Your Play'
+        },
+    },
+});

更多的语言设置

/start/i18n.html

lock ​

  • Type: Boolean
  • Default: false

是否在移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    lock: true,
+});

fastForward ​

  • Type: Boolean
  • Default: false

是否在移动端添加长按视频快进功能

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    fastForward: true,
+});

autoPlayback ​

  • Type: Boolean
  • Default: false

是否使用自动 回放功能

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    id: 'your-url-id',
+    autoPlayback: true,
+});

提示

因为播放器默认使用 url 作为 key 来缓存播放进度的

但假如你的同一个视频的 url 是不同的话，那么你需要使用 id 来标识视频的唯一 key

autoOrientation ​

  • Type: Boolean
  • Default: false

是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoOrientation: true,
+});

airplay ​

  • Type: Boolean
  • Default: false

是否显示 airplay 按钮，当前只有部分浏览器支持该功能

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    airplay: true,
+});

cssVar ​

  • Type: Object
  • Default: {}

用于改变内置的css变量

▶ Run Code
js
var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    cssVar: {
+        //
+    },
+});

cssVar 写法参考

artplayer/types/cssVar.d.d.ts

+ \ No newline at end of file