From cb69e4ad66095f7dbd57685343447fcdba40046c Mon Sep 17 00:00:00 2001 From: "Mr.Hope" Date: Thu, 10 Sep 2026 15:58:17 +0800 Subject: [PATCH 1/2] feat(artplayer-plugin-dash-control)!: support dash.js v5 - replace removed v4 APIs with their v5 equivalents: getRepresentationsByType / getCurrentRepresentationForType / setRepresentationForTypeByIndex - bump dash.js CDN references from 4.5.2 to 5.2.1 (modern/umd build) - rebuild dist, docs/compiled and docs/uncompiled artifacts - regenerate vitepress docs --- README.md | 4 ++-- docs/compiled/artplayer-plugin-dash-control.js | 2 +- .../artplayer-plugin-dash-control.legacy.js | 2 +- docs/compiled/artplayer-plugin-dash-control.mjs | 15 ++++++++------- docs/document/404.html | 2 +- docs/document/advanced/built-in.html | 6 +++--- docs/document/advanced/class.html | 6 +++--- docs/document/advanced/event.html | 6 +++--- docs/document/advanced/global.html | 6 +++--- docs/document/advanced/plugin.html | 6 +++--- docs/document/advanced/property.html | 6 +++--- ...yRIcIA.js => advanced_built-in.md.DbXkhR8l.js} | 2 +- ...n.js => advanced_built-in.md.DbXkhR8l.lean.js} | 2 +- ....Da3aE0pP.js => advanced_class.md.BE9Wp7q6.js} | 2 +- ...lean.js => advanced_class.md.BE9Wp7q6.lean.js} | 2 +- ....mrsB0MsK.js => advanced_event.md.DoIgqIU9.js} | 2 +- ...lean.js => advanced_event.md.DoIgqIU9.lean.js} | 2 +- ...Bdw3azKs.js => advanced_global.md.Db4VcykV.js} | 2 +- ...ean.js => advanced_global.md.Db4VcykV.lean.js} | 2 +- ...B3Pobmcq.js => advanced_plugin.md.CVp3Oe2x.js} | 2 +- ...ean.js => advanced_plugin.md.CVp3Oe2x.lean.js} | 2 +- ...7GaeI3.js => advanced_property.md.C_nOKniE.js} | 2 +- ...n.js => advanced_property.md.C_nOKniE.lean.js} | 2 +- ...Kr.js => component_contextmenu.md.lsIURdc3.js} | 2 +- ... => component_contextmenu.md.lsIURdc3.lean.js} | 2 +- ...2yW1F.js => component_controls.md.CKAl0l5Z.js} | 2 +- ....js => component_controls.md.CKAl0l5Z.lean.js} | 2 +- ...ys52VMi.js => component_layers.md.D34Y4OkH.js} | 2 +- ...an.js => component_layers.md.D34Y4OkH.lean.js} | 2 +- ...5674ir.js => component_setting.md.BwCpY3NU.js} | 2 +- ...n.js => component_setting.md.BwCpY3NU.lean.js} | 2 +- ...pnS.js => en_advanced_built-in.md.yQHjIPvf.js} | 2 +- ...s => en_advanced_built-in.md.yQHjIPvf.lean.js} | 2 +- ...D-Ahrs.js => en_advanced_class.md.DklNHOdd.js} | 2 +- ...n.js => en_advanced_class.md.DklNHOdd.lean.js} | 2 +- ...sqIUNQ.js => en_advanced_event.md.opkwpdYa.js} | 2 +- ...n.js => en_advanced_event.md.opkwpdYa.lean.js} | 2 +- ...kL6RS.js => en_advanced_global.md.C8Y_RPho.js} | 2 +- ....js => en_advanced_global.md.C8Y_RPho.lean.js} | 2 +- ...gK5Nt.js => en_advanced_plugin.md.C22jhoxt.js} | 2 +- ....js => en_advanced_plugin.md.C22jhoxt.lean.js} | 2 +- ...GTk.js => en_advanced_property.md.BBsrm5xX.js} | 2 +- ...s => en_advanced_property.md.BBsrm5xX.lean.js} | 2 +- ...js => en_component_contextmenu.md.BZMIBA5Z.js} | 2 +- ... en_component_contextmenu.md.BZMIBA5Z.lean.js} | 2 +- ...gE.js => en_component_controls.md.CzJX3V-W.js} | 2 +- ... => en_component_controls.md.CzJX3V-W.lean.js} | 2 +- ...XBZy.js => en_component_layers.md.CMe9ljjt.js} | 2 +- ...js => en_component_layers.md.CMe9ljjt.lean.js} | 2 +- ...Y-X.js => en_component_setting.md.BEB18u4V.js} | 2 +- ...s => en_component_setting.md.BEB18u4V.lean.js} | 2 +- ...dex.md.Clwh28HI.js => en_index.md.C1MgLyrG.js} | 8 ++++---- ...h28HI.lean.js => en_index.md.C1MgLyrG.lean.js} | 2 +- ...d.BLwUSSfJ.js => en_start_i18n.md.BBvNm0S6.js} | 4 ++-- ....lean.js => en_start_i18n.md.BBvNm0S6.lean.js} | 2 +- ...C2vGTVOZ.js => en_start_option.md.CTPFIwzU.js} | 2 +- ...ean.js => en_start_option.md.CTPFIwzU.lean.js} | 2 +- ...{index.md.CZIHn4-e.js => index.md.BOUnJIvT.js} | 8 ++++---- ...CZIHn4-e.lean.js => index.md.BOUnJIvT.lean.js} | 2 +- ....FiBSjkUz.js => plugin_danmuku.md.LS-GTgIv.js} | 2 +- ...lean.js => plugin_danmuku.md.LS-GTgIv.lean.js} | 2 +- ...n.md.CDm9a8pv.js => start_i18n.md.xG6dFtWq.js} | 4 ++-- ...8pv.lean.js => start_i18n.md.xG6dFtWq.lean.js} | 2 +- ...md.D52S8Ynf.js => start_option.md.DRwrMHeQ.js} | 2 +- ...f.lean.js => start_option.md.DRwrMHeQ.lean.js} | 2 +- docs/document/component/contextmenu.html | 6 +++--- docs/document/component/controls.html | 6 +++--- docs/document/component/layers.html | 6 +++--- docs/document/component/setting.html | 6 +++--- docs/document/en/advanced/built-in.html | 6 +++--- docs/document/en/advanced/class.html | 6 +++--- docs/document/en/advanced/event.html | 6 +++--- docs/document/en/advanced/global.html | 6 +++--- docs/document/en/advanced/plugin.html | 6 +++--- docs/document/en/advanced/property.html | 6 +++--- docs/document/en/component/contextmenu.html | 6 +++--- docs/document/en/component/controls.html | 6 +++--- docs/document/en/component/layers.html | 6 +++--- docs/document/en/component/setting.html | 6 +++--- docs/document/en/index.html | 12 ++++++------ docs/document/en/start/i18n.html | 8 ++++---- docs/document/en/start/option.html | 6 +++--- docs/document/hashmap.json | 2 +- docs/document/index.html | 12 ++++++------ docs/document/plugin/danmuku.html | 6 +++--- docs/document/start/i18n.html | 8 ++++---- docs/document/start/option.html | 6 +++--- docs/index.html | 4 ++-- docs/test/index.html | 2 +- .../artplayer-plugin-dash-control/index.js | 15 ++++++++------- packages/artplayer-plugin-dash-control/README.md | 2 +- .../dist/artplayer-plugin-dash-control.js | 2 +- .../dist/artplayer-plugin-dash-control.legacy.js | 2 +- .../dist/artplayer-plugin-dash-control.mjs | 15 ++++++++------- .../artplayer-plugin-dash-control/src/index.js | 15 ++++++++------- .../artplayer-vitepress/docs/.vitepress/config.js | 8 ++++---- 96 files changed, 199 insertions(+), 195 deletions(-) rename docs/document/assets/{advanced_built-in.md.DiyRIcIA.js => advanced_built-in.md.DbXkhR8l.js} (99%) rename docs/document/assets/{advanced_built-in.md.DiyRIcIA.lean.js => advanced_built-in.md.DbXkhR8l.lean.js} (91%) rename docs/document/assets/{advanced_class.md.Da3aE0pP.js => advanced_class.md.BE9Wp7q6.js} (99%) rename docs/document/assets/{advanced_class.md.Da3aE0pP.lean.js => advanced_class.md.BE9Wp7q6.lean.js} (88%) rename docs/document/assets/{advanced_event.md.mrsB0MsK.js => advanced_event.md.DoIgqIU9.js} (99%) rename docs/document/assets/{advanced_event.md.mrsB0MsK.lean.js => advanced_event.md.DoIgqIU9.lean.js} (96%) rename docs/document/assets/{advanced_global.md.Bdw3azKs.js => advanced_global.md.Db4VcykV.js} (99%) rename docs/document/assets/{advanced_global.md.Bdw3azKs.lean.js => advanced_global.md.Db4VcykV.lean.js} (94%) rename docs/document/assets/{advanced_plugin.md.B3Pobmcq.js => advanced_plugin.md.CVp3Oe2x.js} (99%) rename docs/document/assets/{advanced_plugin.md.B3Pobmcq.lean.js => advanced_plugin.md.CVp3Oe2x.lean.js} (87%) rename docs/document/assets/{advanced_property.md.CA7GaeI3.js => advanced_property.md.C_nOKniE.js} (99%) rename docs/document/assets/{advanced_property.md.CA7GaeI3.lean.js => advanced_property.md.C_nOKniE.lean.js} (95%) rename docs/document/assets/{component_contextmenu.md.ClKmcIKr.js => component_contextmenu.md.lsIURdc3.js} (99%) rename docs/document/assets/{component_contextmenu.md.ClKmcIKr.lean.js => component_contextmenu.md.lsIURdc3.lean.js} (81%) rename docs/document/assets/{component_controls.md.Cl62yW1F.js => component_controls.md.CKAl0l5Z.js} (99%) rename docs/document/assets/{component_controls.md.Cl62yW1F.lean.js => component_controls.md.CKAl0l5Z.lean.js} (81%) rename docs/document/assets/{component_layers.md.Cys52VMi.js => component_layers.md.D34Y4OkH.js} (99%) rename docs/document/assets/{component_layers.md.Cys52VMi.lean.js => component_layers.md.D34Y4OkH.lean.js} (80%) rename docs/document/assets/{component_setting.md.BP5674ir.js => component_setting.md.BwCpY3NU.js} (99%) rename docs/document/assets/{component_setting.md.BP5674ir.lean.js => component_setting.md.BwCpY3NU.lean.js} (86%) rename docs/document/assets/{en_advanced_built-in.md.CCHa0pnS.js => en_advanced_built-in.md.yQHjIPvf.js} (99%) rename docs/document/assets/{en_advanced_built-in.md.CCHa0pnS.lean.js => en_advanced_built-in.md.yQHjIPvf.lean.js} (91%) rename docs/document/assets/{en_advanced_class.md.SSD-Ahrs.js => en_advanced_class.md.DklNHOdd.js} (99%) rename docs/document/assets/{en_advanced_class.md.SSD-Ahrs.lean.js => en_advanced_class.md.DklNHOdd.lean.js} (88%) rename docs/document/assets/{en_advanced_event.md.DEsqIUNQ.js => en_advanced_event.md.opkwpdYa.js} (99%) rename docs/document/assets/{en_advanced_event.md.DEsqIUNQ.lean.js => en_advanced_event.md.opkwpdYa.lean.js} (96%) rename docs/document/assets/{en_advanced_global.md.3hwkL6RS.js => en_advanced_global.md.C8Y_RPho.js} (99%) rename docs/document/assets/{en_advanced_global.md.3hwkL6RS.lean.js => en_advanced_global.md.C8Y_RPho.lean.js} (94%) rename docs/document/assets/{en_advanced_plugin.md.C8AgK5Nt.js => en_advanced_plugin.md.C22jhoxt.js} (99%) rename docs/document/assets/{en_advanced_plugin.md.C8AgK5Nt.lean.js => en_advanced_plugin.md.C22jhoxt.lean.js} (88%) rename docs/document/assets/{en_advanced_property.md.CaOAGGTk.js => en_advanced_property.md.BBsrm5xX.js} (99%) rename docs/document/assets/{en_advanced_property.md.CaOAGGTk.lean.js => en_advanced_property.md.BBsrm5xX.lean.js} (95%) rename docs/document/assets/{en_component_contextmenu.md.CsJAr6Ey.js => en_component_contextmenu.md.BZMIBA5Z.js} (99%) rename docs/document/assets/{en_component_contextmenu.md.CsJAr6Ey.lean.js => en_component_contextmenu.md.BZMIBA5Z.lean.js} (81%) rename docs/document/assets/{en_component_controls.md.t1Ub-agE.js => en_component_controls.md.CzJX3V-W.js} (99%) rename docs/document/assets/{en_component_controls.md.t1Ub-agE.lean.js => en_component_controls.md.CzJX3V-W.lean.js} (81%) rename docs/document/assets/{en_component_layers.md.Yo2RXBZy.js => en_component_layers.md.CMe9ljjt.js} (99%) rename docs/document/assets/{en_component_layers.md.Yo2RXBZy.lean.js => en_component_layers.md.CMe9ljjt.lean.js} (81%) rename docs/document/assets/{en_component_setting.md.Be0gsY-X.js => en_component_setting.md.BEB18u4V.js} (99%) rename docs/document/assets/{en_component_setting.md.Be0gsY-X.lean.js => en_component_setting.md.BEB18u4V.lean.js} (86%) rename docs/document/assets/{en_index.md.Clwh28HI.js => en_index.md.C1MgLyrG.js} (97%) rename docs/document/assets/{en_index.md.Clwh28HI.lean.js => en_index.md.C1MgLyrG.lean.js} (69%) rename docs/document/assets/{en_start_i18n.md.BLwUSSfJ.js => en_start_i18n.md.BBvNm0S6.js} (97%) rename docs/document/assets/{en_start_i18n.md.BLwUSSfJ.lean.js => en_start_i18n.md.BBvNm0S6.lean.js} (70%) rename docs/document/assets/{en_start_option.md.C2vGTVOZ.js => en_start_option.md.CTPFIwzU.js} (99%) rename docs/document/assets/{en_start_option.md.C2vGTVOZ.lean.js => en_start_option.md.CTPFIwzU.lean.js} (96%) rename docs/document/assets/{index.md.CZIHn4-e.js => index.md.BOUnJIvT.js} (97%) rename docs/document/assets/{index.md.CZIHn4-e.lean.js => index.md.BOUnJIvT.lean.js} (68%) rename docs/document/assets/{plugin_danmuku.md.FiBSjkUz.js => plugin_danmuku.md.LS-GTgIv.js} (99%) rename docs/document/assets/{plugin_danmuku.md.FiBSjkUz.lean.js => plugin_danmuku.md.LS-GTgIv.lean.js} (93%) rename docs/document/assets/{start_i18n.md.CDm9a8pv.js => start_i18n.md.xG6dFtWq.js} (97%) rename docs/document/assets/{start_i18n.md.CDm9a8pv.lean.js => start_i18n.md.xG6dFtWq.lean.js} (69%) rename docs/document/assets/{start_option.md.D52S8Ynf.js => start_option.md.DRwrMHeQ.js} (99%) rename docs/document/assets/{start_option.md.D52S8Ynf.lean.js => start_option.md.DRwrMHeQ.lean.js} (96%) diff --git a/README.md b/README.md index 14a652e66..1b6bb8d82 100644 --- a/README.md +++ b/README.md @@ -116,7 +116,7 @@ let art = new Artplayer({ | :--- | :--- | :--- | | [artplayer-plugin-danmuku](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku) | Danmuku (bullet comment) system |
| | [artplayer-plugin-hls-control](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js%0A./uncompiled/artplayer-plugin-hls-control/index.js&example=hls.control) | HLS quality control |
| -| [artplayer-plugin-dash-control](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-control/index.js&example=dash.control) | DASH quality control |
| +| [artplayer-plugin-dash-control](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-control/index.js&example=dash.control) | DASH quality control |
| | [artplayer-plugin-vtt-thumbnail](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vtt-thumbnail/index.js&example=vtt.thumbnail) | VTT thumbnail preview |
| | [artplayer-plugin-multiple-subtitles](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-multiple-subtitles/index.js&example=multiple.subtitles) | Multiple subtitles support |
| | [artplayer-plugin-chromecast](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-chromecast/index.js&example=chromecast) | Google Chromecast support |
| @@ -136,7 +136,7 @@ let art = new Artplayer({ | Name | Describe | State | | :--- | :--- | :--- | | [hls.js](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js&example=hls) | HLS client |
| -| [dash.js](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js&example=dash) | MPEG DASH player |
| +| [dash.js](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js&example=dash) | MPEG DASH player |
| | [flv.js](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js&example=flv) | HTML5 FLV Player |
| | [mpegts.js](https://artplayer.org/?libs=https://cdn.jsdelivr.net/npm/mpegts.js@1.7.3/dist/mpegts.min.js&example=mpegts) | MPEG-TS/FLV Player |
| | [webtorrent.js](https://artplayer.org/?libs=https://cdn.jsdelivr.net/npm/webtorrent@1/webtorrent.min.js&example=webtorrent) | Streaming torrent client |
| diff --git a/docs/compiled/artplayer-plugin-dash-control.js b/docs/compiled/artplayer-plugin-dash-control.js index bb42c1d7b..5f92ccef8 100644 --- a/docs/compiled/artplayer-plugin-dash-control.js +++ b/docs/compiled/artplayer-plugin-dash-control.js @@ -4,4 +4,4 @@ * (c) 2017-2026 Harvey Zhao * Released under the MIT License. */ -!function(t,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"==typeof define&&define.amd?(t.artplayerPluginDashControl=e(),define(function(){return t.artplayerPluginDashControl})):(t="undefined"!==typeof globalThis?globalThis:t||self).artplayerPluginDashControl=e()}(this,function(){"use strict";function t(t,e){const o=new Map;return t.filter(t=>{const n=t[e];return void 0===n||!o.has(n)&&o.set(n,1)})}return function(e={}){return o=>{const{$video:n}=o.template,{errorHandle:i}=o.constructor.utils;function a(){i(o.dash.getVideoElement()===n,'Cannot find instance of DASH from "art.dash"'),function(n){const i=n.getBitrateInfoListFor("video");if(!i||!i.length)return;const a=e.quality||{},l=a.auto||"Auto",s=a.title||"Quality",r=a.getName||(t=>`${t.height}p`),c=n.getQualityFor("video"),u=n.getSettings().streaming.abr.autoSwitchBitrate.video,d=u?l:r(i[c]),h=t(i.map(t=>({html:r(t),value:t.qualityIndex,default:c===t.qualityIndex&&!u})),"html").sort((t,e)=>e.value-t.value);h.push({html:l,value:"auto",default:u});const g=t=>("auto"===t.value?n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!0}}}}):(n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!1}}}}),n.setQualityFor("video",t.value)),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-quality",position:"right",html:d,style:{padding:"0 10px"},selector:h,onSelect:g}),a.setting&&o.setting.update({name:"dash-quality",tooltip:d,html:s,icon:'',width:200,selector:h,onSelect:g})}(o.dash),function(n){const i=n.getTracksFor("audio");if(!i||!i.length)return;const a=e.audio||{},l=a.auto||"Auto",s=a.title||"Audio",r=a.getName||(t=>t.lang||t.id),c=n.getCurrentTrackFor("audio")||i[0],u=c?r(c):l,d=t(i.map(t=>({html:r(t),value:t,default:c===t})),"html"),h=t=>(n.setCurrentTrack(t.value),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-audio",position:"right",html:u,style:{padding:"0 10px"},selector:d,onSelect:h}),a.setting&&o.setting.update({name:"dash-audio",tooltip:u,html:s,icon:'',width:200,selector:d,onSelect:h})}(o.dash)}return o.on("ready",a),o.on("restart",a),{name:"artplayerPluginDashControl",update:a}}}}); +!function(t,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"==typeof define&&define.amd?(t.artplayerPluginDashControl=e(),define(function(){return t.artplayerPluginDashControl})):(t="undefined"!==typeof globalThis?globalThis:t||self).artplayerPluginDashControl=e()}(this,function(){"use strict";function t(t,e){const o=new Map;return t.filter(t=>{const n=t[e];return void 0===n||!o.has(n)&&o.set(n,1)})}return function(e={}){return o=>{const{$video:n}=o.template,{errorHandle:i}=o.constructor.utils;function a(){i(o.dash.getVideoElement()===n,'Cannot find instance of DASH from "art.dash"'),function(n){const i=n.getRepresentationsByType("video");if(!i||!i.length)return;const a=e.quality||{},l=a.auto||"Auto",s=a.title||"Quality",r=a.getName||(t=>`${t.height}p`),c=n.getCurrentRepresentationForType("video"),u=c&&c.id,d=n.getSettings().streaming.abr.autoSwitchBitrate.video,h=!d&&c?r(c):l,g=t(i.map((t,e)=>({html:r(t),value:e,default:!d&&!!u&&t.id===u})),"html").sort((t,e)=>e.value-t.value);g.push({html:l,value:"auto",default:d});const p=t=>("auto"===t.value?n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!0}}}}):(n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!1}}}}),n.setRepresentationForTypeByIndex("video",t.value)),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-quality",position:"right",html:h,style:{padding:"0 10px"},selector:g,onSelect:p}),a.setting&&o.setting.update({name:"dash-quality",tooltip:h,html:s,icon:'',width:200,selector:g,onSelect:p})}(o.dash),function(n){const i=n.getTracksFor("audio");if(!i||!i.length)return;const a=e.audio||{},l=a.auto||"Auto",s=a.title||"Audio",r=a.getName||(t=>t.lang||t.id),c=n.getCurrentTrackFor("audio")||i[0],u=c?r(c):l,d=t(i.map(t=>({html:r(t),value:t,default:c===t})),"html"),h=t=>(n.setCurrentTrack(t.value),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-audio",position:"right",html:u,style:{padding:"0 10px"},selector:d,onSelect:h}),a.setting&&o.setting.update({name:"dash-audio",tooltip:u,html:s,icon:'',width:200,selector:d,onSelect:h})}(o.dash)}return o.on("ready",a),o.on("restart",a),{name:"artplayerPluginDashControl",update:a}}}}); diff --git a/docs/compiled/artplayer-plugin-dash-control.legacy.js b/docs/compiled/artplayer-plugin-dash-control.legacy.js index bb42c1d7b..5f92ccef8 100644 --- a/docs/compiled/artplayer-plugin-dash-control.legacy.js +++ b/docs/compiled/artplayer-plugin-dash-control.legacy.js @@ -4,4 +4,4 @@ * (c) 2017-2026 Harvey Zhao * Released under the MIT License. */ -!function(t,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"==typeof define&&define.amd?(t.artplayerPluginDashControl=e(),define(function(){return t.artplayerPluginDashControl})):(t="undefined"!==typeof globalThis?globalThis:t||self).artplayerPluginDashControl=e()}(this,function(){"use strict";function t(t,e){const o=new Map;return t.filter(t=>{const n=t[e];return void 0===n||!o.has(n)&&o.set(n,1)})}return function(e={}){return o=>{const{$video:n}=o.template,{errorHandle:i}=o.constructor.utils;function a(){i(o.dash.getVideoElement()===n,'Cannot find instance of DASH from "art.dash"'),function(n){const i=n.getBitrateInfoListFor("video");if(!i||!i.length)return;const a=e.quality||{},l=a.auto||"Auto",s=a.title||"Quality",r=a.getName||(t=>`${t.height}p`),c=n.getQualityFor("video"),u=n.getSettings().streaming.abr.autoSwitchBitrate.video,d=u?l:r(i[c]),h=t(i.map(t=>({html:r(t),value:t.qualityIndex,default:c===t.qualityIndex&&!u})),"html").sort((t,e)=>e.value-t.value);h.push({html:l,value:"auto",default:u});const g=t=>("auto"===t.value?n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!0}}}}):(n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!1}}}}),n.setQualityFor("video",t.value)),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-quality",position:"right",html:d,style:{padding:"0 10px"},selector:h,onSelect:g}),a.setting&&o.setting.update({name:"dash-quality",tooltip:d,html:s,icon:'',width:200,selector:h,onSelect:g})}(o.dash),function(n){const i=n.getTracksFor("audio");if(!i||!i.length)return;const a=e.audio||{},l=a.auto||"Auto",s=a.title||"Audio",r=a.getName||(t=>t.lang||t.id),c=n.getCurrentTrackFor("audio")||i[0],u=c?r(c):l,d=t(i.map(t=>({html:r(t),value:t,default:c===t})),"html"),h=t=>(n.setCurrentTrack(t.value),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-audio",position:"right",html:u,style:{padding:"0 10px"},selector:d,onSelect:h}),a.setting&&o.setting.update({name:"dash-audio",tooltip:u,html:s,icon:'',width:200,selector:d,onSelect:h})}(o.dash)}return o.on("ready",a),o.on("restart",a),{name:"artplayerPluginDashControl",update:a}}}}); +!function(t,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"==typeof define&&define.amd?(t.artplayerPluginDashControl=e(),define(function(){return t.artplayerPluginDashControl})):(t="undefined"!==typeof globalThis?globalThis:t||self).artplayerPluginDashControl=e()}(this,function(){"use strict";function t(t,e){const o=new Map;return t.filter(t=>{const n=t[e];return void 0===n||!o.has(n)&&o.set(n,1)})}return function(e={}){return o=>{const{$video:n}=o.template,{errorHandle:i}=o.constructor.utils;function a(){i(o.dash.getVideoElement()===n,'Cannot find instance of DASH from "art.dash"'),function(n){const i=n.getRepresentationsByType("video");if(!i||!i.length)return;const a=e.quality||{},l=a.auto||"Auto",s=a.title||"Quality",r=a.getName||(t=>`${t.height}p`),c=n.getCurrentRepresentationForType("video"),u=c&&c.id,d=n.getSettings().streaming.abr.autoSwitchBitrate.video,h=!d&&c?r(c):l,g=t(i.map((t,e)=>({html:r(t),value:e,default:!d&&!!u&&t.id===u})),"html").sort((t,e)=>e.value-t.value);g.push({html:l,value:"auto",default:d});const p=t=>("auto"===t.value?n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!0}}}}):(n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!1}}}}),n.setRepresentationForTypeByIndex("video",t.value)),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-quality",position:"right",html:h,style:{padding:"0 10px"},selector:g,onSelect:p}),a.setting&&o.setting.update({name:"dash-quality",tooltip:h,html:s,icon:'',width:200,selector:g,onSelect:p})}(o.dash),function(n){const i=n.getTracksFor("audio");if(!i||!i.length)return;const a=e.audio||{},l=a.auto||"Auto",s=a.title||"Audio",r=a.getName||(t=>t.lang||t.id),c=n.getCurrentTrackFor("audio")||i[0],u=c?r(c):l,d=t(i.map(t=>({html:r(t),value:t,default:c===t})),"html"),h=t=>(n.setCurrentTrack(t.value),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-audio",position:"right",html:u,style:{padding:"0 10px"},selector:d,onSelect:h}),a.setting&&o.setting.update({name:"dash-audio",tooltip:u,html:s,icon:'',width:200,selector:d,onSelect:h})}(o.dash)}return o.on("ready",a),o.on("restart",a),{name:"artplayerPluginDashControl",update:a}}}}); diff --git a/docs/compiled/artplayer-plugin-dash-control.mjs b/docs/compiled/artplayer-plugin-dash-control.mjs index e2374e353..8e5e16c16 100644 --- a/docs/compiled/artplayer-plugin-dash-control.mjs +++ b/docs/compiled/artplayer-plugin-dash-control.mjs @@ -21,22 +21,23 @@ function artplayerPluginDashControl(option = {}) { const { $video } = art.template; const { errorHandle } = art.constructor.utils; function updateQuality(dash) { - const qualities = dash.getBitrateInfoListFor("video"); + const qualities = dash.getRepresentationsByType("video"); if (!qualities || !qualities.length) return; const config = option.quality || {}; const auto = config.auto || "Auto"; const title = config.title || "Quality"; const getName = config.getName || ((level) => `${level.height}p`); - const currentQuality = dash.getQualityFor("video"); + const currentRepresentation = dash.getCurrentRepresentationForType("video"); + const currentId = currentRepresentation && currentRepresentation.id; const currentAuto = dash.getSettings().streaming.abr.autoSwitchBitrate.video; - const defaultHtml = currentAuto ? auto : getName(qualities[currentQuality]); + const defaultHtml = !currentAuto && currentRepresentation ? getName(currentRepresentation) : auto; const selector = uniqBy( - qualities.map((item) => { + qualities.map((item, index) => { return { html: getName(item), - value: item.qualityIndex, - default: currentQuality === item.qualityIndex && !currentAuto + value: index, + default: !currentAuto && !!currentId && item.id === currentId }; }), "html" @@ -67,7 +68,7 @@ function artplayerPluginDashControl(option = {}) { } } }); - dash.setQualityFor("video", item.value); + dash.setRepresentationForTypeByIndex("video", item.value); } art.notice.show = `${title}: ${item.html}`; if (config.control) diff --git a/docs/document/404.html b/docs/document/404.html index a1ae92c1e..1dacdf7dd 100644 --- a/docs/document/404.html +++ b/docs/document/404.html @@ -21,7 +21,7 @@
- + \ No newline at end of file diff --git a/docs/document/advanced/built-in.html b/docs/document/advanced/built-in.html index 8ed46d3b9..6af7ce18b 100644 --- a/docs/document/advanced/built-in.html +++ b/docs/document/advanced/built-in.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

高级属性 ​

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

option ​

播放器的选项

▶ Run Code
js
var art = new Artplayer({
+    
Skip to content

高级属性 ​

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

option ​

播放器的选项

▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
@@ -217,7 +217,7 @@
 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 431c20666..2590c9e64 100644 --- a/docs/document/advanced/class.html +++ b/docs/document/advanced/class.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

静态属性 ​

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

instances ​

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

▶ Run Code
js
console.info([...Artplayer.instances]);
+    
Skip to content

静态属性 ​

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

instances ​

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

▶ Run Code
js
console.info([...Artplayer.instances]);
 
 var art = new Artplayer({
     container: '.artplayer-app',
@@ -31,7 +31,7 @@
 });
 
 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 a38d0656d..710ea3646 100644 --- a/docs/document/advanced/event.html +++ b/docs/document/advanced/event.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

实例事件 ​

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

监听事件:

▶ Run Code
js
var art = new Artplayer({
+    
Skip to content

实例事件 ​

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

监听事件:

▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
@@ -385,7 +385,7 @@
 art.on('keydown', (event) => {
     console.log(event.code);
 });

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 f4c28c148..b1fff9be4 100644 --- a/docs/document/advanced/global.html +++ b/docs/document/advanced/global.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

全局属性 ​

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

DEBUG ​

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

▶ Run Code
js
Artplayer.DEBUG = true;
+    
Skip to content

全局属性 ​

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

DEBUG ​

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

▶ Run Code
js
Artplayer.DEBUG = true;
 
 var art = new Artplayer({
     container: '.artplayer-app',
@@ -248,7 +248,7 @@
 
 // 只销毁界面,不主动清空 src
 art.destroy();
- + \ No newline at end of file diff --git a/docs/document/advanced/plugin.html b/docs/document/advanced/plugin.html index 9cd9dc79b..407d98e27 100644 --- a/docs/document/advanced/plugin.html +++ b/docs/document/advanced/plugin.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

编写插件 ​

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

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

▶ Run Code
js
function myPlugin(art) {
+    
Skip to content

编写插件 ​

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

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

▶ Run Code
js
function myPlugin(art) {
     console.info(art);
     return {
         name: 'myPlugin',
@@ -122,7 +122,7 @@
         })
     ],
 });
- + \ No newline at end of file diff --git a/docs/document/advanced/property.html b/docs/document/advanced/property.html index c7ef2a66c..0a9a0e395 100644 --- a/docs/document/advanced/property.html +++ b/docs/document/advanced/property.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

实例属性 ​

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

play ​

  • Type: Function

播放视频

▶ Run Code
js
var art = new Artplayer({
+    
Skip to content

实例属性 ​

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

play ​

  • Type: Function

播放视频

▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     muted: true,
@@ -457,7 +457,7 @@
 art.on('ready', () => {
     art.subtitleOffset = 1;
 });
- + \ No newline at end of file diff --git a/docs/document/assets/advanced_built-in.md.DiyRIcIA.js b/docs/document/assets/advanced_built-in.md.DbXkhR8l.js similarity index 99% rename from docs/document/assets/advanced_built-in.md.DiyRIcIA.js rename to docs/document/assets/advanced_built-in.md.DbXkhR8l.js index 9f4bc302e..987b03ffd 100644 --- a/docs/document/assets/advanced_built-in.md.DiyRIcIA.js +++ b/docs/document/assets/advanced_built-in.md.DbXkhR8l.js @@ -1,4 +1,4 @@ -import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/built-in.md","filePath":"advanced/built-in.md","lastUpdated":1764425558000}'),e={name:"advanced/built-in.md"};function h(t,a,k,r,E,d){return p(),l("div",null,a[0]||(a[0]=[s('

高级属性 ​

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

option ​

播放器的选项

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/built-in.md","filePath":"advanced/built-in.md","lastUpdated":1764425558000}'),e={name:"advanced/built-in.md"};function h(t,a,k,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s('

高级属性 ​

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

option ​

播放器的选项

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
diff --git a/docs/document/assets/advanced_built-in.md.DiyRIcIA.lean.js b/docs/document/assets/advanced_built-in.md.DbXkhR8l.lean.js
similarity index 91%
rename from docs/document/assets/advanced_built-in.md.DiyRIcIA.lean.js
rename to docs/document/assets/advanced_built-in.md.DbXkhR8l.lean.js
index f3fd8d4d9..e7f31da83 100644
--- a/docs/document/assets/advanced_built-in.md.DiyRIcIA.lean.js
+++ b/docs/document/assets/advanced_built-in.md.DbXkhR8l.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/built-in.md","filePath":"advanced/built-in.md","lastUpdated":1764425558000}'),e={name:"advanced/built-in.md"};function h(t,a,k,r,E,d){return p(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const o=n(e,[["render",h]]);export{g as __pageData,o as default};
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"高级属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/built-in.md","filePath":"advanced/built-in.md","lastUpdated":1764425558000}'),e={name:"advanced/built-in.md"};function h(t,a,k,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const o=n(e,[["render",h]]);export{g as __pageData,o as default};
diff --git a/docs/document/assets/advanced_class.md.Da3aE0pP.js b/docs/document/assets/advanced_class.md.BE9Wp7q6.js
similarity index 99%
rename from docs/document/assets/advanced_class.md.Da3aE0pP.js
rename to docs/document/assets/advanced_class.md.BE9Wp7q6.js
index 31f02f34c..eacfd9e36 100644
--- a/docs/document/assets/advanced_class.md.Da3aE0pP.js
+++ b/docs/document/assets/advanced_class.md.BE9Wp7q6.js
@@ -1,4 +1,4 @@
-import{_ as e,c as n,o as l,ak as s,j as a}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/class.md","filePath":"advanced/class.md","lastUpdated":1682233868000}'),t={name:"advanced/class.md"};function p(d,i,r,h,o,c){return l(),n("div",null,i[0]||(i[0]=[s('

静态属性 ​

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

instances ​

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

',4),a("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
console.info([...Artplayer.instances]);
+import{_ as e,o as n,c as l,ak as s,j as a}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/class.md","filePath":"advanced/class.md","lastUpdated":1682233868000}'),t={name:"advanced/class.md"};function p(d,i,r,h,o,c){return n(),l("div",null,i[0]||(i[0]=[s('

静态属性 ​

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

instances ​

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

',4),a("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
console.info([...Artplayer.instances]);
 
 var art = new Artplayer({
     container: '.artplayer-app',
diff --git a/docs/document/assets/advanced_class.md.Da3aE0pP.lean.js b/docs/document/assets/advanced_class.md.BE9Wp7q6.lean.js
similarity index 88%
rename from docs/document/assets/advanced_class.md.Da3aE0pP.lean.js
rename to docs/document/assets/advanced_class.md.BE9Wp7q6.lean.js
index 52c2f08e3..734d607ff 100644
--- a/docs/document/assets/advanced_class.md.Da3aE0pP.lean.js
+++ b/docs/document/assets/advanced_class.md.BE9Wp7q6.lean.js
@@ -1 +1 @@
-import{_ as e,c as n,o as l,ak as s,j as a}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/class.md","filePath":"advanced/class.md","lastUpdated":1682233868000}'),t={name:"advanced/class.md"};function p(d,i,r,h,o,c){return l(),n("div",null,i[0]||(i[0]=[s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const _=e(t,[["render",p]]);export{u as __pageData,_ as default};
+import{_ as e,o as n,c as l,ak as s,j as a}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"静态属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/class.md","filePath":"advanced/class.md","lastUpdated":1682233868000}'),t={name:"advanced/class.md"};function p(d,i,r,h,o,c){return n(),l("div",null,i[0]||(i[0]=[s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const _=e(t,[["render",p]]);export{u as __pageData,_ as default};
diff --git a/docs/document/assets/advanced_event.md.mrsB0MsK.js b/docs/document/assets/advanced_event.md.DoIgqIU9.js
similarity index 99%
rename from docs/document/assets/advanced_event.md.mrsB0MsK.js
rename to docs/document/assets/advanced_event.md.DoIgqIU9.js
index cdee69356..7af2740fa 100644
--- a/docs/document/assets/advanced_event.md.mrsB0MsK.js
+++ b/docs/document/assets/advanced_event.md.DoIgqIU9.js
@@ -1,4 +1,4 @@
-import{_ as l,c as p,o as e,j as s,ak as i,a}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1729412494000}'),h={name:"advanced/event.md"};function t(k,n,r,E,d,g){return e(),p("div",null,n[0]||(n[0]=[s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),s("p",null,[a("播放器的事件分为两种,一种视频的 "),s("code",null,"原生事件"),a(" (前缀 "),s("code",null,"video:"),a("),另外一种是 "),s("code",null,"自定义事件")],-1),s("p",null,"监听事件:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i(`
js
var art = new Artplayer({
+import{_ as l,o as p,c as e,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1729412494000}'),h={name:"advanced/event.md"};function t(k,n,r,E,d,g){return p(),e("div",null,n[0]||(n[0]=[s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),s("p",null,[a("播放器的事件分为两种,一种视频的 "),s("code",null,"原生事件"),a(" (前缀 "),s("code",null,"video:"),a("),另外一种是 "),s("code",null,"自定义事件")],-1),s("p",null,"监听事件:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
diff --git a/docs/document/assets/advanced_event.md.mrsB0MsK.lean.js b/docs/document/assets/advanced_event.md.DoIgqIU9.lean.js
similarity index 96%
rename from docs/document/assets/advanced_event.md.mrsB0MsK.lean.js
rename to docs/document/assets/advanced_event.md.DoIgqIU9.lean.js
index b862bcb03..7b7e5b16d 100644
--- a/docs/document/assets/advanced_event.md.mrsB0MsK.lean.js
+++ b/docs/document/assets/advanced_event.md.DoIgqIU9.lean.js
@@ -1 +1 @@
-import{_ as l,c as p,o as e,j as s,ak as i,a}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1729412494000}'),h={name:"advanced/event.md"};function t(k,n,r,E,d,g){return e(),p("div",null,n[0]||(n[0]=[s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),s("p",null,[a("播放器的事件分为两种,一种视频的 "),s("code",null,"原生事件"),a(" (前缀 "),s("code",null,"video:"),a("),另外一种是 "),s("code",null,"自定义事件")],-1),s("p",null,"监听事件:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",4),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",43)]))}const o=l(h,[["render",t]]);export{y as __pageData,o as default};
+import{_ as l,o as p,c as e,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"实例事件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/event.md","filePath":"advanced/event.md","lastUpdated":1729412494000}'),h={name:"advanced/event.md"};function t(k,n,r,E,d,g){return p(),e("div",null,n[0]||(n[0]=[s("h1",{id:"实例事件",tabindex:"-1"},[a("实例事件 "),s("a",{class:"header-anchor",href:"#实例事件","aria-label":'Permalink to "实例事件"'},"​")],-1),s("p",null,[a("播放器的事件分为两种,一种视频的 "),s("code",null,"原生事件"),a(" (前缀 "),s("code",null,"video:"),a("),另外一种是 "),s("code",null,"自定义事件")],-1),s("p",null,"监听事件:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",4),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",43)]))}const o=l(h,[["render",t]]);export{y as __pageData,o as default};
diff --git a/docs/document/assets/advanced_global.md.Bdw3azKs.js b/docs/document/assets/advanced_global.md.Db4VcykV.js
similarity index 99%
rename from docs/document/assets/advanced_global.md.Bdw3azKs.js
rename to docs/document/assets/advanced_global.md.Db4VcykV.js
index ea1408703..cf933ddc6 100644
--- a/docs/document/assets/advanced_global.md.Bdw3azKs.js
+++ b/docs/document/assets/advanced_global.md.Db4VcykV.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"全局属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/global.md","filePath":"advanced/global.md","lastUpdated":1764425558000}'),e={name:"advanced/global.md"};function h(t,a,k,r,E,d){return p(),l("div",null,a[0]||(a[0]=[s('

全局属性 ​

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

DEBUG ​

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

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
Artplayer.DEBUG = true;
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"全局属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/global.md","filePath":"advanced/global.md","lastUpdated":1764425558000}'),e={name:"advanced/global.md"};function h(t,a,k,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s('

全局属性 ​

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

DEBUG ​

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

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
Artplayer.DEBUG = true;
 
 var art = new Artplayer({
     container: '.artplayer-app',
diff --git a/docs/document/assets/advanced_global.md.Bdw3azKs.lean.js b/docs/document/assets/advanced_global.md.Db4VcykV.lean.js
similarity index 94%
rename from docs/document/assets/advanced_global.md.Bdw3azKs.lean.js
rename to docs/document/assets/advanced_global.md.Db4VcykV.lean.js
index 01e266f7b..7a80425f0 100644
--- a/docs/document/assets/advanced_global.md.Bdw3azKs.lean.js
+++ b/docs/document/assets/advanced_global.md.Db4VcykV.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"全局属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/global.md","filePath":"advanced/global.md","lastUpdated":1764425558000}'),e={name:"advanced/global.md"};function h(t,a,k,r,E,d){return p(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(e,[["render",h]]);export{g as __pageData,y as default};
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"全局属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/global.md","filePath":"advanced/global.md","lastUpdated":1764425558000}'),e={name:"advanced/global.md"};function h(t,a,k,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(e,[["render",h]]);export{g as __pageData,y as default};
diff --git a/docs/document/assets/advanced_plugin.md.B3Pobmcq.js b/docs/document/assets/advanced_plugin.md.CVp3Oe2x.js
similarity index 99%
rename from docs/document/assets/advanced_plugin.md.B3Pobmcq.js
rename to docs/document/assets/advanced_plugin.md.CVp3Oe2x.js
index e0fbcba3d..1711c5f64 100644
--- a/docs/document/assets/advanced_plugin.md.B3Pobmcq.js
+++ b/docs/document/assets/advanced_plugin.md.CVp3Oe2x.js
@@ -1,4 +1,4 @@
-import{_ as l,c as p,o as h,j as s,ak as a,a as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/plugin.md","filePath":"advanced/plugin.md","lastUpdated":1673441101000}'),k={name:"advanced/plugin.md"};function e(t,n,E,r,d,g){return h(),p("div",null,n[0]||(n[0]=[s("h1",{id:"编写插件",tabindex:"-1"},[i("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-label":'Permalink to "编写插件"'},"​")],-1),s("p",null,[i("但你已经知道播放器的"),s("code",null,"属性"),i(", "),s("code",null,"方法"),i("和"),s("code",null,"事件"),i("后,再编写插件是非常简单的事")],-1),s("p",null,"可以在实例化的时候加载插件的函数",-1),s("div",{className:"run-code"},"▶ Run Code",-1),a(`
js
function myPlugin(art) {
+import{_ as l,o as p,c as h,j as s,a as i,ak as a}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/plugin.md","filePath":"advanced/plugin.md","lastUpdated":1673441101000}'),k={name:"advanced/plugin.md"};function e(t,n,E,r,d,g){return p(),h("div",null,n[0]||(n[0]=[s("h1",{id:"编写插件",tabindex:"-1"},[i("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-label":'Permalink to "编写插件"'},"​")],-1),s("p",null,[i("但你已经知道播放器的"),s("code",null,"属性"),i(", "),s("code",null,"方法"),i("和"),s("code",null,"事件"),i("后,再编写插件是非常简单的事")],-1),s("p",null,"可以在实例化的时候加载插件的函数",-1),s("div",{className:"run-code"},"▶ Run Code",-1),a(`
js
function myPlugin(art) {
     console.info(art);
     return {
         name: 'myPlugin',
diff --git a/docs/document/assets/advanced_plugin.md.B3Pobmcq.lean.js b/docs/document/assets/advanced_plugin.md.CVp3Oe2x.lean.js
similarity index 87%
rename from docs/document/assets/advanced_plugin.md.B3Pobmcq.lean.js
rename to docs/document/assets/advanced_plugin.md.CVp3Oe2x.lean.js
index f410510a4..15e678ec5 100644
--- a/docs/document/assets/advanced_plugin.md.B3Pobmcq.lean.js
+++ b/docs/document/assets/advanced_plugin.md.CVp3Oe2x.lean.js
@@ -1 +1 @@
-import{_ as l,c as p,o as h,j as s,ak as a,a as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/plugin.md","filePath":"advanced/plugin.md","lastUpdated":1673441101000}'),k={name:"advanced/plugin.md"};function e(t,n,E,r,d,g){return h(),p("div",null,n[0]||(n[0]=[s("h1",{id:"编写插件",tabindex:"-1"},[i("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-label":'Permalink to "编写插件"'},"​")],-1),s("p",null,[i("但你已经知道播放器的"),s("code",null,"属性"),i(", "),s("code",null,"方法"),i("和"),s("code",null,"事件"),i("后,再编写插件是非常简单的事")],-1),s("p",null,"可以在实例化的时候加载插件的函数",-1),s("div",{className:"run-code"},"▶ Run Code",-1),a("",2),s("div",{className:"run-code"},"▶ Run Code",-1),a("",2),s("div",{className:"run-code"},"▶ Run Code",-1),a("",1)]))}const b=l(k,[["render",e]]);export{y as __pageData,b as default};
+import{_ as l,o as p,c as h,j as s,a as i,ak as a}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"编写插件","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/plugin.md","filePath":"advanced/plugin.md","lastUpdated":1673441101000}'),k={name:"advanced/plugin.md"};function e(t,n,E,r,d,g){return p(),h("div",null,n[0]||(n[0]=[s("h1",{id:"编写插件",tabindex:"-1"},[i("编写插件 "),s("a",{class:"header-anchor",href:"#编写插件","aria-label":'Permalink to "编写插件"'},"​")],-1),s("p",null,[i("但你已经知道播放器的"),s("code",null,"属性"),i(", "),s("code",null,"方法"),i("和"),s("code",null,"事件"),i("后,再编写插件是非常简单的事")],-1),s("p",null,"可以在实例化的时候加载插件的函数",-1),s("div",{className:"run-code"},"▶ Run Code",-1),a("",2),s("div",{className:"run-code"},"▶ Run Code",-1),a("",2),s("div",{className:"run-code"},"▶ Run Code",-1),a("",1)]))}const b=l(k,[["render",e]]);export{y as __pageData,b as default};
diff --git a/docs/document/assets/advanced_property.md.CA7GaeI3.js b/docs/document/assets/advanced_property.md.C_nOKniE.js
similarity index 99%
rename from docs/document/assets/advanced_property.md.CA7GaeI3.js
rename to docs/document/assets/advanced_property.md.C_nOKniE.js
index 4c7b42d77..ade83d52b 100644
--- a/docs/document/assets/advanced_property.md.CA7GaeI3.js
+++ b/docs/document/assets/advanced_property.md.C_nOKniE.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/property.md","filePath":"advanced/property.md","lastUpdated":1764425558000}'),e={name:"advanced/property.md"};function h(t,a,k,r,E,d){return p(),l("div",null,a[0]||(a[0]=[s('

实例属性 ​

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

play ​

  • Type: Function

播放视频

',5),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/property.md","filePath":"advanced/property.md","lastUpdated":1764425558000}'),e={name:"advanced/property.md"};function h(t,a,k,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s('

实例属性 ​

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

play ​

  • Type: Function

播放视频

',5),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     muted: true,
diff --git a/docs/document/assets/advanced_property.md.CA7GaeI3.lean.js b/docs/document/assets/advanced_property.md.C_nOKniE.lean.js
similarity index 95%
rename from docs/document/assets/advanced_property.md.CA7GaeI3.lean.js
rename to docs/document/assets/advanced_property.md.C_nOKniE.lean.js
index c084d7154..9c774cea0 100644
--- a/docs/document/assets/advanced_property.md.CA7GaeI3.lean.js
+++ b/docs/document/assets/advanced_property.md.C_nOKniE.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/property.md","filePath":"advanced/property.md","lastUpdated":1764425558000}'),e={name:"advanced/property.md"};function h(t,a,k,r,E,d){return p(),l("div",null,a[0]||(a[0]=[s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(e,[["render",h]]);export{g as __pageData,y as default};
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"实例属性","description":"","frontmatter":{},"headers":[],"relativePath":"advanced/property.md","filePath":"advanced/property.md","lastUpdated":1764425558000}'),e={name:"advanced/property.md"};function h(t,a,k,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(e,[["render",h]]);export{g as __pageData,y as default};
diff --git a/docs/document/assets/component_contextmenu.md.ClKmcIKr.js b/docs/document/assets/component_contextmenu.md.lsIURdc3.js
similarity index 99%
rename from docs/document/assets/component_contextmenu.md.ClKmcIKr.js
rename to docs/document/assets/component_contextmenu.md.lsIURdc3.js
index c96309777..01e6e41e3 100644
--- a/docs/document/assets/component_contextmenu.md.ClKmcIKr.js
+++ b/docs/document/assets/component_contextmenu.md.lsIURdc3.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"右键菜单","description":"","frontmatter":{},"headers":[],"relativePath":"component/contextmenu.md","filePath":"component/contextmenu.md","lastUpdated":1682229030000}'),e={name:"component/contextmenu.md"};function h(t,a,k,r,E,d){return p(),l("div",null,a[0]||(a[0]=[s('

右键菜单 ​

配置 ​

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

创建 ​

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"右键菜单","description":"","frontmatter":{},"headers":[],"relativePath":"component/contextmenu.md","filePath":"component/contextmenu.md","lastUpdated":1682229030000}'),e={name:"component/contextmenu.md"};function h(t,a,k,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s('

右键菜单 ​

配置 ​

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

创建 ​

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     contextmenu: [
diff --git a/docs/document/assets/component_contextmenu.md.ClKmcIKr.lean.js b/docs/document/assets/component_contextmenu.md.lsIURdc3.lean.js
similarity index 81%
rename from docs/document/assets/component_contextmenu.md.ClKmcIKr.lean.js
rename to docs/document/assets/component_contextmenu.md.lsIURdc3.lean.js
index 161fe2316..8b19b3abc 100644
--- a/docs/document/assets/component_contextmenu.md.ClKmcIKr.lean.js
+++ b/docs/document/assets/component_contextmenu.md.lsIURdc3.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"右键菜单","description":"","frontmatter":{},"headers":[],"relativePath":"component/contextmenu.md","filePath":"component/contextmenu.md","lastUpdated":1682229030000}'),e={name:"component/contextmenu.md"};function h(t,a,k,r,E,d){return p(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(e,[["render",h]]);export{g as __pageData,y as default};
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"右键菜单","description":"","frontmatter":{},"headers":[],"relativePath":"component/contextmenu.md","filePath":"component/contextmenu.md","lastUpdated":1682229030000}'),e={name:"component/contextmenu.md"};function h(t,a,k,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(e,[["render",h]]);export{g as __pageData,y as default};
diff --git a/docs/document/assets/component_controls.md.Cl62yW1F.js b/docs/document/assets/component_controls.md.CKAl0l5Z.js
similarity index 99%
rename from docs/document/assets/component_controls.md.Cl62yW1F.js
rename to docs/document/assets/component_controls.md.CKAl0l5Z.js
index fd0050d2c..5698ca230 100644
--- a/docs/document/assets/component_controls.md.Cl62yW1F.js
+++ b/docs/document/assets/component_controls.md.CKAl0l5Z.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"控制器","description":"","frontmatter":{},"headers":[],"relativePath":"component/controls.md","filePath":"component/controls.md","lastUpdated":1682233868000}'),h={name:"component/controls.md"};function e(t,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s('

控制器 ​

配置 ​

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

创建 ​

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"控制器","description":"","frontmatter":{},"headers":[],"relativePath":"component/controls.md","filePath":"component/controls.md","lastUpdated":1682233868000}'),h={name:"component/controls.md"};function e(t,a,k,E,r,d){return l(),p("div",null,a[0]||(a[0]=[s('

控制器 ​

配置 ​

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

创建 ​

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     controls: [
diff --git a/docs/document/assets/component_controls.md.Cl62yW1F.lean.js b/docs/document/assets/component_controls.md.CKAl0l5Z.lean.js
similarity index 81%
rename from docs/document/assets/component_controls.md.Cl62yW1F.lean.js
rename to docs/document/assets/component_controls.md.CKAl0l5Z.lean.js
index 25201074e..5786d458b 100644
--- a/docs/document/assets/component_controls.md.Cl62yW1F.lean.js
+++ b/docs/document/assets/component_controls.md.CKAl0l5Z.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"控制器","description":"","frontmatter":{},"headers":[],"relativePath":"component/controls.md","filePath":"component/controls.md","lastUpdated":1682233868000}'),h={name:"component/controls.md"};function e(t,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(h,[["render",e]]);export{g as __pageData,y as default};
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"控制器","description":"","frontmatter":{},"headers":[],"relativePath":"component/controls.md","filePath":"component/controls.md","lastUpdated":1682233868000}'),h={name:"component/controls.md"};function e(t,a,k,E,r,d){return l(),p("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(h,[["render",e]]);export{g as __pageData,y as default};
diff --git a/docs/document/assets/component_layers.md.Cys52VMi.js b/docs/document/assets/component_layers.md.D34Y4OkH.js
similarity index 99%
rename from docs/document/assets/component_layers.md.Cys52VMi.js
rename to docs/document/assets/component_layers.md.D34Y4OkH.js
index b05e845be..9a41f3dec 100644
--- a/docs/document/assets/component_layers.md.Cys52VMi.js
+++ b/docs/document/assets/component_layers.md.D34Y4OkH.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"业务层","description":"","frontmatter":{},"headers":[],"relativePath":"component/layers.md","filePath":"component/layers.md","lastUpdated":1682229030000}'),h={name:"component/layers.md"};function e(t,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s('

业务层 ​

配置 ​

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

创建 ​

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var img = '/assets/sample/layer.png';
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"业务层","description":"","frontmatter":{},"headers":[],"relativePath":"component/layers.md","filePath":"component/layers.md","lastUpdated":1682229030000}'),h={name:"component/layers.md"};function e(t,a,k,E,r,d){return l(),p("div",null,a[0]||(a[0]=[s('

业务层 ​

配置 ​

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

创建 ​

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var img = '/assets/sample/layer.png';
 var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
diff --git a/docs/document/assets/component_layers.md.Cys52VMi.lean.js b/docs/document/assets/component_layers.md.D34Y4OkH.lean.js
similarity index 80%
rename from docs/document/assets/component_layers.md.Cys52VMi.lean.js
rename to docs/document/assets/component_layers.md.D34Y4OkH.lean.js
index 8084e2f1f..c3ad54bdd 100644
--- a/docs/document/assets/component_layers.md.Cys52VMi.lean.js
+++ b/docs/document/assets/component_layers.md.D34Y4OkH.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"业务层","description":"","frontmatter":{},"headers":[],"relativePath":"component/layers.md","filePath":"component/layers.md","lastUpdated":1682229030000}'),h={name:"component/layers.md"};function e(t,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(h,[["render",e]]);export{c as __pageData,y as default};
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"业务层","description":"","frontmatter":{},"headers":[],"relativePath":"component/layers.md","filePath":"component/layers.md","lastUpdated":1682229030000}'),h={name:"component/layers.md"};function e(t,a,k,E,r,d){return l(),p("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(h,[["render",e]]);export{c as __pageData,y as default};
diff --git a/docs/document/assets/component_setting.md.BP5674ir.js b/docs/document/assets/component_setting.md.BwCpY3NU.js
similarity index 99%
rename from docs/document/assets/component_setting.md.BP5674ir.js
rename to docs/document/assets/component_setting.md.BwCpY3NU.js
index 1a7ce69bd..63b738009 100644
--- a/docs/document/assets/component_setting.md.BP5674ir.js
+++ b/docs/document/assets/component_setting.md.BwCpY3NU.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"设置面板","description":"","frontmatter":{},"headers":[],"relativePath":"component/setting.md","filePath":"component/setting.md","lastUpdated":1750384578000}'),t={name:"component/setting.md"};function h(e,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s('

设置面板 ​

内置 ​

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

',3),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"设置面板","description":"","frontmatter":{},"headers":[],"relativePath":"component/setting.md","filePath":"component/setting.md","lastUpdated":1750384578000}'),t={name:"component/setting.md"};function h(e,a,k,E,r,d){return l(),p("div",null,a[0]||(a[0]=[s('

设置面板 ​

内置 ​

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

',3),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 	setting: true,
diff --git a/docs/document/assets/component_setting.md.BP5674ir.lean.js b/docs/document/assets/component_setting.md.BwCpY3NU.lean.js
similarity index 86%
rename from docs/document/assets/component_setting.md.BP5674ir.lean.js
rename to docs/document/assets/component_setting.md.BwCpY3NU.lean.js
index ccc446e0d..1aa3f0269 100644
--- a/docs/document/assets/component_setting.md.BP5674ir.lean.js
+++ b/docs/document/assets/component_setting.md.BwCpY3NU.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"设置面板","description":"","frontmatter":{},"headers":[],"relativePath":"component/setting.md","filePath":"component/setting.md","lastUpdated":1750384578000}'),t={name:"component/setting.md"};function h(e,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(t,[["render",h]]);export{c as __pageData,y as default};
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"设置面板","description":"","frontmatter":{},"headers":[],"relativePath":"component/setting.md","filePath":"component/setting.md","lastUpdated":1750384578000}'),t={name:"component/setting.md"};function h(e,a,k,E,r,d){return l(),p("div",null,a[0]||(a[0]=[s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(t,[["render",h]]);export{c as __pageData,y as default};
diff --git a/docs/document/assets/en_advanced_built-in.md.CCHa0pnS.js b/docs/document/assets/en_advanced_built-in.md.yQHjIPvf.js
similarity index 99%
rename from docs/document/assets/en_advanced_built-in.md.CCHa0pnS.js
rename to docs/document/assets/en_advanced_built-in.md.yQHjIPvf.js
index 04fbb57fa..a91fb346f 100644
--- a/docs/document/assets/en_advanced_built-in.md.CCHa0pnS.js
+++ b/docs/document/assets/en_advanced_built-in.md.yQHjIPvf.js
@@ -1,4 +1,4 @@
-import{_ as n,c as e,o as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Advanced Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1772946913000}'),p={name:"en/advanced/built-in.md"};function t(h,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s('

Advanced Properties ​

The Advanced Properties here refer to the secondary properties attached to the instance, which are less commonly used.

option ​

The player's options.

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Advanced Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1772946913000}'),p={name:"en/advanced/built-in.md"};function t(h,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s('

Advanced Properties ​

The Advanced Properties here refer to the secondary properties attached to the instance, which are less commonly used.

option ​

The player's options.

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
diff --git a/docs/document/assets/en_advanced_built-in.md.CCHa0pnS.lean.js b/docs/document/assets/en_advanced_built-in.md.yQHjIPvf.lean.js
similarity index 91%
rename from docs/document/assets/en_advanced_built-in.md.CCHa0pnS.lean.js
rename to docs/document/assets/en_advanced_built-in.md.yQHjIPvf.lean.js
index f804934f4..6d30b77b1 100644
--- a/docs/document/assets/en_advanced_built-in.md.CCHa0pnS.lean.js
+++ b/docs/document/assets/en_advanced_built-in.md.yQHjIPvf.lean.js
@@ -1 +1 @@
-import{_ as n,c as e,o as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Advanced Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1772946913000}'),p={name:"en/advanced/built-in.md"};function t(h,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const g=n(p,[["render",t]]);export{o as __pageData,g as default};
+import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Advanced Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/built-in.md","filePath":"en/advanced/built-in.md","lastUpdated":1772946913000}'),p={name:"en/advanced/built-in.md"};function t(h,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const g=n(p,[["render",t]]);export{o as __pageData,g as default};
diff --git a/docs/document/assets/en_advanced_class.md.SSD-Ahrs.js b/docs/document/assets/en_advanced_class.md.DklNHOdd.js
similarity index 99%
rename from docs/document/assets/en_advanced_class.md.SSD-Ahrs.js
rename to docs/document/assets/en_advanced_class.md.DklNHOdd.js
index e82d1b92a..957ff0673 100644
--- a/docs/document/assets/en_advanced_class.md.SSD-Ahrs.js
+++ b/docs/document/assets/en_advanced_class.md.DklNHOdd.js
@@ -1,4 +1,4 @@
-import{_ as i,c as n,o as t,ak as s,j as a}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Static Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1772946913000}'),l={name:"en/advanced/class.md"};function r(p,e,d,h,o,c){return t(),n("div",null,e[0]||(e[0]=[s('

Static Properties ​

Here, static properties refer to the first-level properties attached to the constructor, which are rarely used.

instances ​

Returns an array of all player instances. This property can be useful when you need to manage multiple players simultaneously.

',4),a("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
console.info([...Artplayer.instances]);
+import{_ as i,o as n,c as t,ak as s,j as a}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Static Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1772946913000}'),l={name:"en/advanced/class.md"};function r(p,e,d,h,o,c){return n(),t("div",null,e[0]||(e[0]=[s('

Static Properties ​

Here, static properties refer to the first-level properties attached to the constructor, which are rarely used.

instances ​

Returns an array of all player instances. This property can be useful when you need to manage multiple players simultaneously.

',4),a("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
console.info([...Artplayer.instances]);
 
 var art = new Artplayer({
     container: '.artplayer-app',
diff --git a/docs/document/assets/en_advanced_class.md.SSD-Ahrs.lean.js b/docs/document/assets/en_advanced_class.md.DklNHOdd.lean.js
similarity index 88%
rename from docs/document/assets/en_advanced_class.md.SSD-Ahrs.lean.js
rename to docs/document/assets/en_advanced_class.md.DklNHOdd.lean.js
index 4b386171e..b7439029b 100644
--- a/docs/document/assets/en_advanced_class.md.SSD-Ahrs.lean.js
+++ b/docs/document/assets/en_advanced_class.md.DklNHOdd.lean.js
@@ -1 +1 @@
-import{_ as i,c as n,o as t,ak as s,j as a}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Static Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1772946913000}'),l={name:"en/advanced/class.md"};function r(p,e,d,h,o,c){return t(),n("div",null,e[0]||(e[0]=[s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const _=i(l,[["render",r]]);export{u as __pageData,_ as default};
+import{_ as i,o as n,c as t,ak as s,j as a}from"./chunks/framework.xxfEszSJ.js";const u=JSON.parse('{"title":"Static Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/class.md","filePath":"en/advanced/class.md","lastUpdated":1772946913000}'),l={name:"en/advanced/class.md"};function r(p,e,d,h,o,c){return n(),t("div",null,e[0]||(e[0]=[s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",4),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",3),a("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const _=i(l,[["render",r]]);export{u as __pageData,_ as default};
diff --git a/docs/document/assets/en_advanced_event.md.DEsqIUNQ.js b/docs/document/assets/en_advanced_event.md.opkwpdYa.js
similarity index 99%
rename from docs/document/assets/en_advanced_event.md.DEsqIUNQ.js
rename to docs/document/assets/en_advanced_event.md.opkwpdYa.js
index 63531897b..a763ce059 100644
--- a/docs/document/assets/en_advanced_event.md.DEsqIUNQ.js
+++ b/docs/document/assets/en_advanced_event.md.opkwpdYa.js
@@ -1,4 +1,4 @@
-import{_ as e,c as l,o as p,j as s,ak as i,a}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Instance Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1772946913000}'),h={name:"en/advanced/event.md"};function t(k,n,r,E,d,g){return p(),l("div",null,n[0]||(n[0]=[s("h1",{id:"instance-events",tabindex:"-1"},[a("Instance Events "),s("a",{class:"header-anchor",href:"#instance-events","aria-label":'Permalink to "Instance Events"'},"​")],-1),s("p",null,[a("Player events are divided into two types: "),s("code",null,"native events"),a(" of the video (prefixed with "),s("code",null,"video:"),a("), and "),s("code",null,"custom events"),a(".")],-1),s("p",null,"Listening to events:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i(`
js
var art = new Artplayer({
+import{_ as e,o as l,c as p,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Instance Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1772946913000}'),h={name:"en/advanced/event.md"};function t(k,n,r,E,d,g){return l(),p("div",null,n[0]||(n[0]=[s("h1",{id:"instance-events",tabindex:"-1"},[a("Instance Events "),s("a",{class:"header-anchor",href:"#instance-events","aria-label":'Permalink to "Instance Events"'},"​")],-1),s("p",null,[a("Player events are divided into two types: "),s("code",null,"native events"),a(" of the video (prefixed with "),s("code",null,"video:"),a("), and "),s("code",null,"custom events"),a(".")],-1),s("p",null,"Listening to events:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
diff --git a/docs/document/assets/en_advanced_event.md.DEsqIUNQ.lean.js b/docs/document/assets/en_advanced_event.md.opkwpdYa.lean.js
similarity index 96%
rename from docs/document/assets/en_advanced_event.md.DEsqIUNQ.lean.js
rename to docs/document/assets/en_advanced_event.md.opkwpdYa.lean.js
index d5dc62834..08c8e64e8 100644
--- a/docs/document/assets/en_advanced_event.md.DEsqIUNQ.lean.js
+++ b/docs/document/assets/en_advanced_event.md.opkwpdYa.lean.js
@@ -1 +1 @@
-import{_ as e,c as l,o as p,j as s,ak as i,a}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Instance Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1772946913000}'),h={name:"en/advanced/event.md"};function t(k,n,r,E,d,g){return p(),l("div",null,n[0]||(n[0]=[s("h1",{id:"instance-events",tabindex:"-1"},[a("Instance Events "),s("a",{class:"header-anchor",href:"#instance-events","aria-label":'Permalink to "Instance Events"'},"​")],-1),s("p",null,[a("Player events are divided into two types: "),s("code",null,"native events"),a(" of the video (prefixed with "),s("code",null,"video:"),a("), and "),s("code",null,"custom events"),a(".")],-1),s("p",null,"Listening to events:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",4),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",43)]))}const o=e(h,[["render",t]]);export{y as __pageData,o as default};
+import{_ as e,o as l,c as p,j as s,a,ak as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Instance Events","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/event.md","filePath":"en/advanced/event.md","lastUpdated":1772946913000}'),h={name:"en/advanced/event.md"};function t(k,n,r,E,d,g){return l(),p("div",null,n[0]||(n[0]=[s("h1",{id:"instance-events",tabindex:"-1"},[a("Instance Events "),s("a",{class:"header-anchor",href:"#instance-events","aria-label":'Permalink to "Instance Events"'},"​")],-1),s("p",null,[a("Player events are divided into two types: "),s("code",null,"native events"),a(" of the video (prefixed with "),s("code",null,"video:"),a("), and "),s("code",null,"custom events"),a(".")],-1),s("p",null,"Listening to events:",-1),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",2),s("div",{className:"run-code"},"▶ Run Code",-1),i("",4),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",3),s("div",{className:"run-code"},"▶ Run Code",-1),i("",43)]))}const o=e(h,[["render",t]]);export{y as __pageData,o as default};
diff --git a/docs/document/assets/en_advanced_global.md.3hwkL6RS.js b/docs/document/assets/en_advanced_global.md.C8Y_RPho.js
similarity index 99%
rename from docs/document/assets/en_advanced_global.md.3hwkL6RS.js
rename to docs/document/assets/en_advanced_global.md.C8Y_RPho.js
index 116d197ee..cc25def2f 100644
--- a/docs/document/assets/en_advanced_global.md.3hwkL6RS.js
+++ b/docs/document/assets/en_advanced_global.md.C8Y_RPho.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Global Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1772946913000}'),p={name:"en/advanced/global.md"};function h(t,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s('

Global Properties ​

The global properties here refer to the top-level properties mounted on the constructor. All property names are in uppercase. These are subject to change in the future and are rarely used.

DEBUG ​

Whether to enable debug mode, which can print all built-in video events. Default is off.

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
Artplayer.DEBUG = true;
+import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Global Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1772946913000}'),p={name:"en/advanced/global.md"};function h(t,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s('

Global Properties ​

The global properties here refer to the top-level properties mounted on the constructor. All property names are in uppercase. These are subject to change in the future and are rarely used.

DEBUG ​

Whether to enable debug mode, which can print all built-in video events. Default is off.

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
Artplayer.DEBUG = true;
 
 var art = new Artplayer({
     container: '.artplayer-app',
diff --git a/docs/document/assets/en_advanced_global.md.3hwkL6RS.lean.js b/docs/document/assets/en_advanced_global.md.C8Y_RPho.lean.js
similarity index 94%
rename from docs/document/assets/en_advanced_global.md.3hwkL6RS.lean.js
rename to docs/document/assets/en_advanced_global.md.C8Y_RPho.lean.js
index a7ed89f31..5104323c1 100644
--- a/docs/document/assets/en_advanced_global.md.3hwkL6RS.lean.js
+++ b/docs/document/assets/en_advanced_global.md.C8Y_RPho.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Global Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1772946913000}'),p={name:"en/advanced/global.md"};function h(t,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(p,[["render",h]]);export{g as __pageData,y as default};
+import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Global Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/global.md","filePath":"en/advanced/global.md","lastUpdated":1772946913000}'),p={name:"en/advanced/global.md"};function h(t,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(p,[["render",h]]);export{g as __pageData,y as default};
diff --git a/docs/document/assets/en_advanced_plugin.md.C8AgK5Nt.js b/docs/document/assets/en_advanced_plugin.md.C22jhoxt.js
similarity index 99%
rename from docs/document/assets/en_advanced_plugin.md.C8AgK5Nt.js
rename to docs/document/assets/en_advanced_plugin.md.C22jhoxt.js
index 39f33c7e9..6935c1f5d 100644
--- a/docs/document/assets/en_advanced_plugin.md.C8AgK5Nt.js
+++ b/docs/document/assets/en_advanced_plugin.md.C22jhoxt.js
@@ -1,4 +1,4 @@
-import{_ as l,c as p,o as h,j as s,ak as a,a as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Writing Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","filePath":"en/advanced/plugin.md","lastUpdated":1772946913000}'),e={name:"en/advanced/plugin.md"};function k(t,n,E,r,d,g){return h(),p("div",null,n[0]||(n[0]=[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),s("p",null,[i("Once you are familiar with the player's "),s("code",null,"properties"),i(", "),s("code",null,"methods"),i(", and "),s("code",null,"events"),i(", writing a plugin becomes a very straightforward task.")],-1),s("p",null,"You can load a plugin function during instantiation.",-1),s("div",{className:"run-code"},"▶ Run Code",-1),a(`
js
function myPlugin(art) {
+import{_ as l,o as p,c as h,j as s,a as i,ak as a}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Writing Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","filePath":"en/advanced/plugin.md","lastUpdated":1772946913000}'),e={name:"en/advanced/plugin.md"};function k(t,n,E,r,d,g){return p(),h("div",null,n[0]||(n[0]=[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),s("p",null,[i("Once you are familiar with the player's "),s("code",null,"properties"),i(", "),s("code",null,"methods"),i(", and "),s("code",null,"events"),i(", writing a plugin becomes a very straightforward task.")],-1),s("p",null,"You can load a plugin function during instantiation.",-1),s("div",{className:"run-code"},"▶ Run Code",-1),a(`
js
function myPlugin(art) {
     console.info(art);
     return {
         name: 'myPlugin',
diff --git a/docs/document/assets/en_advanced_plugin.md.C8AgK5Nt.lean.js b/docs/document/assets/en_advanced_plugin.md.C22jhoxt.lean.js
similarity index 88%
rename from docs/document/assets/en_advanced_plugin.md.C8AgK5Nt.lean.js
rename to docs/document/assets/en_advanced_plugin.md.C22jhoxt.lean.js
index e755c4fa9..b708a1cad 100644
--- a/docs/document/assets/en_advanced_plugin.md.C8AgK5Nt.lean.js
+++ b/docs/document/assets/en_advanced_plugin.md.C22jhoxt.lean.js
@@ -1 +1 @@
-import{_ as l,c as p,o as h,j as s,ak as a,a as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Writing Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","filePath":"en/advanced/plugin.md","lastUpdated":1772946913000}'),e={name:"en/advanced/plugin.md"};function k(t,n,E,r,d,g){return h(),p("div",null,n[0]||(n[0]=[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),s("p",null,[i("Once you are familiar with the player's "),s("code",null,"properties"),i(", "),s("code",null,"methods"),i(", and "),s("code",null,"events"),i(", writing a plugin becomes a very straightforward task.")],-1),s("p",null,"You can load a plugin function during instantiation.",-1),s("div",{className:"run-code"},"▶ Run Code",-1),a("",2),s("div",{className:"run-code"},"▶ Run Code",-1),a("",2),s("div",{className:"run-code"},"▶ Run Code",-1),a("",1)]))}const b=l(e,[["render",k]]);export{y as __pageData,b as default};
+import{_ as l,o as p,c as h,j as s,a as i,ak as a}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"Writing Plugins","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/plugin.md","filePath":"en/advanced/plugin.md","lastUpdated":1772946913000}'),e={name:"en/advanced/plugin.md"};function k(t,n,E,r,d,g){return p(),h("div",null,n[0]||(n[0]=[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),s("p",null,[i("Once you are familiar with the player's "),s("code",null,"properties"),i(", "),s("code",null,"methods"),i(", and "),s("code",null,"events"),i(", writing a plugin becomes a very straightforward task.")],-1),s("p",null,"You can load a plugin function during instantiation.",-1),s("div",{className:"run-code"},"▶ Run Code",-1),a("",2),s("div",{className:"run-code"},"▶ Run Code",-1),a("",2),s("div",{className:"run-code"},"▶ Run Code",-1),a("",1)]))}const b=l(e,[["render",k]]);export{y as __pageData,b as default};
diff --git a/docs/document/assets/en_advanced_property.md.CaOAGGTk.js b/docs/document/assets/en_advanced_property.md.BBsrm5xX.js
similarity index 99%
rename from docs/document/assets/en_advanced_property.md.CaOAGGTk.js
rename to docs/document/assets/en_advanced_property.md.BBsrm5xX.js
index e59841dc4..bc1a0fc04 100644
--- a/docs/document/assets/en_advanced_property.md.CaOAGGTk.js
+++ b/docs/document/assets/en_advanced_property.md.BBsrm5xX.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1772946913000}'),p={name:"en/advanced/property.md"};function h(t,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s('

Instance Properties ​

Here, Instance Properties refer to the first-level properties mounted on the instance, which are commonly used.

play ​

  • Type: Function

Play the video.

',5),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1772946913000}'),p={name:"en/advanced/property.md"};function h(t,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s('

Instance Properties ​

Here, Instance Properties refer to the first-level properties mounted on the instance, which are commonly used.

play ​

  • Type: Function

Play the video.

',5),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     muted: true,
diff --git a/docs/document/assets/en_advanced_property.md.CaOAGGTk.lean.js b/docs/document/assets/en_advanced_property.md.BBsrm5xX.lean.js
similarity index 95%
rename from docs/document/assets/en_advanced_property.md.CaOAGGTk.lean.js
rename to docs/document/assets/en_advanced_property.md.BBsrm5xX.lean.js
index ed5d27652..4c00f7c54 100644
--- a/docs/document/assets/en_advanced_property.md.CaOAGGTk.lean.js
+++ b/docs/document/assets/en_advanced_property.md.BBsrm5xX.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1772946913000}'),p={name:"en/advanced/property.md"};function h(t,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(p,[["render",h]]);export{g as __pageData,y as default};
+import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Instance Properties","description":"","frontmatter":{},"headers":[],"relativePath":"en/advanced/property.md","filePath":"en/advanced/property.md","lastUpdated":1772946913000}'),p={name:"en/advanced/property.md"};function h(t,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(p,[["render",h]]);export{g as __pageData,y as default};
diff --git a/docs/document/assets/en_component_contextmenu.md.CsJAr6Ey.js b/docs/document/assets/en_component_contextmenu.md.BZMIBA5Z.js
similarity index 99%
rename from docs/document/assets/en_component_contextmenu.md.CsJAr6Ey.js
rename to docs/document/assets/en_component_contextmenu.md.BZMIBA5Z.js
index 2460d3ce4..19a2b0e0e 100644
--- a/docs/document/assets/en_component_contextmenu.md.CsJAr6Ey.js
+++ b/docs/document/assets/en_component_contextmenu.md.BZMIBA5Z.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Context Menu","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/contextmenu.md","filePath":"en/component/contextmenu.md","lastUpdated":1772946913000}'),p={name:"en/component/contextmenu.md"};function t(h,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s('

Context Menu ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique component name for CSS class
indexNumberComponent index for display priority
htmlString, ElementDOM element of the component
styleObjectComponent style object
clickFunctionComponent click event
mountedFunctionTriggered after component mount
tooltipStringTooltip text for the component

Creation ​

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Context Menu","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/contextmenu.md","filePath":"en/component/contextmenu.md","lastUpdated":1772946913000}'),p={name:"en/component/contextmenu.md"};function t(h,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s('

Context Menu ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique component name for CSS class
indexNumberComponent index for display priority
htmlString, ElementDOM element of the component
styleObjectComponent style object
clickFunctionComponent click event
mountedFunctionTriggered after component mount
tooltipStringTooltip text for the component

Creation ​

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     contextmenu: [
diff --git a/docs/document/assets/en_component_contextmenu.md.CsJAr6Ey.lean.js b/docs/document/assets/en_component_contextmenu.md.BZMIBA5Z.lean.js
similarity index 81%
rename from docs/document/assets/en_component_contextmenu.md.CsJAr6Ey.lean.js
rename to docs/document/assets/en_component_contextmenu.md.BZMIBA5Z.lean.js
index d2726034a..7d53947ba 100644
--- a/docs/document/assets/en_component_contextmenu.md.CsJAr6Ey.lean.js
+++ b/docs/document/assets/en_component_contextmenu.md.BZMIBA5Z.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Context Menu","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/contextmenu.md","filePath":"en/component/contextmenu.md","lastUpdated":1772946913000}'),p={name:"en/component/contextmenu.md"};function t(h,a,k,r,E,d){return e(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const o=n(p,[["render",t]]);export{g as __pageData,o as default};
+import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Context Menu","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/contextmenu.md","filePath":"en/component/contextmenu.md","lastUpdated":1772946913000}'),p={name:"en/component/contextmenu.md"};function t(h,a,k,r,E,d){return l(),e("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const o=n(p,[["render",t]]);export{g as __pageData,o as default};
diff --git a/docs/document/assets/en_component_controls.md.t1Ub-agE.js b/docs/document/assets/en_component_controls.md.CzJX3V-W.js
similarity index 99%
rename from docs/document/assets/en_component_controls.md.t1Ub-agE.js
rename to docs/document/assets/en_component_controls.md.CzJX3V-W.js
index f2ced8381..3d8c93c22 100644
--- a/docs/document/assets/en_component_controls.md.t1Ub-agE.js
+++ b/docs/document/assets/en_component_controls.md.CzJX3V-W.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Controls","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/controls.md","filePath":"en/component/controls.md","lastUpdated":1772946913000}'),h={name:"en/component/controls.md"};function e(t,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s('

Controls ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the control
nameStringUnique name of the control, used for class marking
indexNumberControl index, determines display priority
htmlString, ElementDOM element of the control
styleObjectStyle object for the control
clickFunctionClick event handler for the control
mountedFunctionTriggered after the control is mounted
tooltipStringTooltip text for the control
positionStringleft or right - controls which side the control appears on
selectorArrayArray of objects for selection list
onSelectFunctionFunction triggered when a selection list item is clicked

Creation ​

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Controls","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/controls.md","filePath":"en/component/controls.md","lastUpdated":1772946913000}'),h={name:"en/component/controls.md"};function e(t,a,k,E,r,d){return l(),p("div",null,a[0]||(a[0]=[s('

Controls ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the control
nameStringUnique name of the control, used for class marking
indexNumberControl index, determines display priority
htmlString, ElementDOM element of the control
styleObjectStyle object for the control
clickFunctionClick event handler for the control
mountedFunctionTriggered after the control is mounted
tooltipStringTooltip text for the control
positionStringleft or right - controls which side the control appears on
selectorArrayArray of objects for selection list
onSelectFunctionFunction triggered when a selection list item is clicked

Creation ​

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     controls: [
diff --git a/docs/document/assets/en_component_controls.md.t1Ub-agE.lean.js b/docs/document/assets/en_component_controls.md.CzJX3V-W.lean.js
similarity index 81%
rename from docs/document/assets/en_component_controls.md.t1Ub-agE.lean.js
rename to docs/document/assets/en_component_controls.md.CzJX3V-W.lean.js
index 942a1ce27..2659a91a5 100644
--- a/docs/document/assets/en_component_controls.md.t1Ub-agE.lean.js
+++ b/docs/document/assets/en_component_controls.md.CzJX3V-W.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Controls","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/controls.md","filePath":"en/component/controls.md","lastUpdated":1772946913000}'),h={name:"en/component/controls.md"};function e(t,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(h,[["render",e]]);export{g as __pageData,y as default};
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Controls","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/controls.md","filePath":"en/component/controls.md","lastUpdated":1772946913000}'),h={name:"en/component/controls.md"};function e(t,a,k,E,r,d){return l(),p("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(h,[["render",e]]);export{g as __pageData,y as default};
diff --git a/docs/document/assets/en_component_layers.md.Yo2RXBZy.js b/docs/document/assets/en_component_layers.md.CMe9ljjt.js
similarity index 99%
rename from docs/document/assets/en_component_layers.md.Yo2RXBZy.js
rename to docs/document/assets/en_component_layers.md.CMe9ljjt.js
index 22c2f55cc..fa69d5ba7 100644
--- a/docs/document/assets/en_component_layers.md.Yo2RXBZy.js
+++ b/docs/document/assets/en_component_layers.md.CMe9ljjt.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Layers","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/layers.md","filePath":"en/component/layers.md","lastUpdated":1772946913000}'),h={name:"en/component/layers.md"};function e(t,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s('

Layers ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique component name for CSS class
indexNumberComponent index for display priority
htmlString, ElementComponent DOM element
styleObjectComponent style object
clickFunctionComponent click event
mountedFunctionTriggered after component mount
tooltipStringComponent tooltip text

Creation ​

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var img = '/assets/sample/layer.png';
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Layers","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/layers.md","filePath":"en/component/layers.md","lastUpdated":1772946913000}'),h={name:"en/component/layers.md"};function e(t,a,k,E,r,d){return l(),p("div",null,a[0]||(a[0]=[s('

Layers ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique component name for CSS class
indexNumberComponent index for display priority
htmlString, ElementComponent DOM element
styleObjectComponent style object
clickFunctionComponent click event
mountedFunctionTriggered after component mount
tooltipStringComponent tooltip text

Creation ​

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var img = '/assets/sample/layer.png';
 var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
diff --git a/docs/document/assets/en_component_layers.md.Yo2RXBZy.lean.js b/docs/document/assets/en_component_layers.md.CMe9ljjt.lean.js
similarity index 81%
rename from docs/document/assets/en_component_layers.md.Yo2RXBZy.lean.js
rename to docs/document/assets/en_component_layers.md.CMe9ljjt.lean.js
index e026e32e8..40403933b 100644
--- a/docs/document/assets/en_component_layers.md.Yo2RXBZy.lean.js
+++ b/docs/document/assets/en_component_layers.md.CMe9ljjt.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Layers","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/layers.md","filePath":"en/component/layers.md","lastUpdated":1772946913000}'),h={name:"en/component/layers.md"};function e(t,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(h,[["render",e]]);export{c as __pageData,y as default};
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Layers","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/layers.md","filePath":"en/component/layers.md","lastUpdated":1772946913000}'),h={name:"en/component/layers.md"};function e(t,a,k,E,r,d){return l(),p("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(h,[["render",e]]);export{c as __pageData,y as default};
diff --git a/docs/document/assets/en_component_setting.md.Be0gsY-X.js b/docs/document/assets/en_component_setting.md.BEB18u4V.js
similarity index 99%
rename from docs/document/assets/en_component_setting.md.Be0gsY-X.js
rename to docs/document/assets/en_component_setting.md.BEB18u4V.js
index 2258676d3..35cb8cfee 100644
--- a/docs/document/assets/en_component_setting.md.Be0gsY-X.js
+++ b/docs/document/assets/en_component_setting.md.BEB18u4V.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Settings Panel","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/setting.md","filePath":"en/component/setting.md","lastUpdated":1772946913000}'),t={name:"en/component/setting.md"};function e(h,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s('

Settings Panel ​

Built-in ​

First, you need to open the settings panel. It comes with four built-in items: flip, playbackRate, aspectRatio, subtitleOffset.

',3),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Settings Panel","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/setting.md","filePath":"en/component/setting.md","lastUpdated":1772946913000}'),t={name:"en/component/setting.md"};function e(h,a,k,E,r,d){return l(),p("div",null,a[0]||(a[0]=[s('

Settings Panel ​

Built-in ​

First, you need to open the settings panel. It comes with four built-in items: flip, playbackRate, aspectRatio, subtitleOffset.

',3),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     setting: true,
diff --git a/docs/document/assets/en_component_setting.md.Be0gsY-X.lean.js b/docs/document/assets/en_component_setting.md.BEB18u4V.lean.js
similarity index 86%
rename from docs/document/assets/en_component_setting.md.Be0gsY-X.lean.js
rename to docs/document/assets/en_component_setting.md.BEB18u4V.lean.js
index 450ee5be0..5276b0c1d 100644
--- a/docs/document/assets/en_component_setting.md.Be0gsY-X.lean.js
+++ b/docs/document/assets/en_component_setting.md.BEB18u4V.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Settings Panel","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/setting.md","filePath":"en/component/setting.md","lastUpdated":1772946913000}'),t={name:"en/component/setting.md"};function e(h,a,k,E,r,d){return p(),l("div",null,a[0]||(a[0]=[s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(t,[["render",e]]);export{c as __pageData,y as default};
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"Settings Panel","description":"","frontmatter":{},"headers":[],"relativePath":"en/component/setting.md","filePath":"en/component/setting.md","lastUpdated":1772946913000}'),t={name:"en/component/setting.md"};function e(h,a,k,E,r,d){return l(),p("div",null,a[0]||(a[0]=[s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",3),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const y=n(t,[["render",e]]);export{c as __pageData,y as default};
diff --git a/docs/document/assets/en_index.md.Clwh28HI.js b/docs/document/assets/en_index.md.C1MgLyrG.js
similarity index 97%
rename from docs/document/assets/en_index.md.Clwh28HI.js
rename to docs/document/assets/en_index.md.C1MgLyrG.js
index d23937d5f..e6e7bf170 100644
--- a/docs/document/assets/en_index.md.Clwh28HI.js
+++ b/docs/document/assets/en_index.md.C1MgLyrG.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Installation and Usage","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","filePath":"en/index.md","lastUpdated":1775270107000}'),p={name:"en/index.md"};function t(e,s,h,k,r,E){return n(),a("div",null,s[0]||(s[0]=[l(`

Installation and Usage ​

Installation ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
bash
bun 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 ​

html
<html>
+import{_ as i,o as a,c as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Installation and Usage","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","filePath":"en/index.md","lastUpdated":1775270107000}'),p={name:"en/index.md"};function t(e,s,h,k,r,E){return a(),n("div",null,s[0]||(s[0]=[l(`

Installation and Usage ​

Installation ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
bash
bun 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 ​

html
<html>
     <head>
         <title>ArtPlayer Demo</title>
         <meta charset="UTF-8" />
@@ -19,7 +19,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
           });
         </script>
     </body>
-</html>

Note

The player's dimensions depend on the dimensions of its container. Therefore, your container must have defined dimensions.

See more usage examples at the following link

/example

Vue.js ​

vue
<template>
+</html>

Note

The player's dimensions depend on the dimensions of its container. Therefore, your container must have defined dimensions.

See more usage examples at the following link

/example

Vue.js ​

vue
<template>
   <div ref="$container" />
 </template>
 
@@ -71,7 +71,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
 function getInstance(art) {
   console.log(art)
 }
-</script>

Artplayer is not reactive:

Directly modifying the option in Vue.js will not update the player.

React.js ​

jsx
import Artplayer from 'artplayer'
+</script>

Artplayer is not reactive:

Directly modifying the option in Vue.js will not update the player.

React.js ​

jsx
import Artplayer from 'artplayer'
 import { useEffect, useRef } from 'react'
 
 export default function Player({ option, getInstance, ...rest }) {
@@ -154,7 +154,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
 
 option.volume = 0.5;
 
-const art8 = new Artplayer(option);

Legacy Browsers ​

The production build artplayer.js only supports the latest major version of Chrome: last 1 Chrome version.

For legacy browsers, you can use the artplayer.legacy.js file, which is compatible down to: IE 11.

js
import Artplayer from 'artplayer/legacy'
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, modify the following configuration and build it yourself:

Build configuration: scripts/build.js

Reference documentation: browserslist

ECMAScript Module ​

Starting from version 5.2.6, artplayer and all plugins also provide an ESM version in mjs format, such as:

  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
+const art8 = new Artplayer(option);

Legacy Browsers ​

The production build artplayer.js only supports the latest major version of Chrome: last 1 Chrome version.

For legacy browsers, you can use the artplayer.legacy.js file, which is compatible down to: IE 11.

js
import Artplayer from 'artplayer/legacy'
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, modify the following configuration and build it yourself:

Build configuration: scripts/build.js

Reference documentation: browserslist

ECMAScript Module ​

Starting from version 5.2.6, artplayer and all plugins also provide an ESM version in mjs format, such as:

  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
 <html lang="en">
 
 <head>
diff --git a/docs/document/assets/en_index.md.Clwh28HI.lean.js b/docs/document/assets/en_index.md.C1MgLyrG.lean.js
similarity index 69%
rename from docs/document/assets/en_index.md.Clwh28HI.lean.js
rename to docs/document/assets/en_index.md.C1MgLyrG.lean.js
index bd28e4607..089bdb67b 100644
--- a/docs/document/assets/en_index.md.Clwh28HI.lean.js
+++ b/docs/document/assets/en_index.md.C1MgLyrG.lean.js
@@ -1 +1 @@
-import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Installation and Usage","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","filePath":"en/index.md","lastUpdated":1775270107000}'),p={name:"en/index.md"};function t(e,s,h,k,r,E){return n(),a("div",null,s[0]||(s[0]=[l("",50)]))}const c=i(p,[["render",t]]);export{g as __pageData,c as default};
+import{_ as i,o as a,c as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Installation and Usage","description":"","frontmatter":{},"headers":[],"relativePath":"en/index.md","filePath":"en/index.md","lastUpdated":1775270107000}'),p={name:"en/index.md"};function t(e,s,h,k,r,E){return a(),n("div",null,s[0]||(s[0]=[l("",50)]))}const c=i(p,[["render",t]]);export{g as __pageData,c as default};
diff --git a/docs/document/assets/en_start_i18n.md.BLwUSSfJ.js b/docs/document/assets/en_start_i18n.md.BBvNm0S6.js
similarity index 97%
rename from docs/document/assets/en_start_i18n.md.BLwUSSfJ.js
rename to docs/document/assets/en_start_i18n.md.BBvNm0S6.js
index beeaeecdf..12578666e 100644
--- a/docs/document/assets/en_start_i18n.md.BLwUSSfJ.js
+++ b/docs/document/assets/en_start_i18n.md.BBvNm0S6.js
@@ -1,8 +1,8 @@
-import{_ as a,c as i,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Language Settings","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/i18n.md","filePath":"en/start/i18n.md","lastUpdated":1772946913000}'),e={name:"en/start/i18n.md"};function p(t,s,h,r,k,E){return n(),i("div",null,s[0]||(s[0]=[l(`

Language Settings ​

DANGER

Due to the increasing number of bundled multilingual resources, starting from version 5.1.0, the core artplayer.js code will no longer bundle any languages other than Simplified Chinese and English. You will need to manually import any other languages you require.

WARNING

When a language cannot be matched, English will be displayed by default. For i18n syntax reference, see: artplayer/types/i18n.d.ts

Default Languages ​

The default languages are: en, zh-cn. No manual import is required.

js
var art = new Artplayer({
+import{_ as a,o as i,c as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Language Settings","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/i18n.md","filePath":"en/start/i18n.md","lastUpdated":1772946913000}'),e={name:"en/start/i18n.md"};function p(t,s,h,r,k,E){return i(),n("div",null,s[0]||(s[0]=[l(`

Language Settings ​

DANGER

Due to the increasing number of bundled multilingual resources, starting from version 5.1.0, the core artplayer.js code will no longer bundle any languages other than Simplified Chinese and English. You will need to manually import any other languages you require.

WARNING

When a language cannot be matched, English will be displayed by default. For i18n syntax reference, see: artplayer/types/i18n.d.ts

Default Languages ​

The default languages are: en, zh-cn. No manual import is required.

js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     lang: 'zh-cn', // or 'en'
-});

Importing Languages ​

Language files before bundling are located at: artplayer/src/i18n/*.js. Contributions for new languages are welcome.

Bundled language files are located at: artplayer/dist/i18n/*.js

js
import id from 'artplayer/i18n/id';
+});

Importing Languages ​

Language files before bundling are located at: artplayer/src/i18n/*.js. Contributions for new languages are welcome.

Bundled language files are located at: artplayer/dist/i18n/*.js

js
import id from 'artplayer/i18n/id';
 import zhTw from 'artplayer/i18n/zh-tw';
 
 var art = new Artplayer({
diff --git a/docs/document/assets/en_start_i18n.md.BLwUSSfJ.lean.js b/docs/document/assets/en_start_i18n.md.BBvNm0S6.lean.js
similarity index 70%
rename from docs/document/assets/en_start_i18n.md.BLwUSSfJ.lean.js
rename to docs/document/assets/en_start_i18n.md.BBvNm0S6.lean.js
index 7ac994154..7441b4936 100644
--- a/docs/document/assets/en_start_i18n.md.BLwUSSfJ.lean.js
+++ b/docs/document/assets/en_start_i18n.md.BBvNm0S6.lean.js
@@ -1 +1 @@
-import{_ as a,c as i,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Language Settings","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/i18n.md","filePath":"en/start/i18n.md","lastUpdated":1772946913000}'),e={name:"en/start/i18n.md"};function p(t,s,h,r,k,E){return n(),i("div",null,s[0]||(s[0]=[l("",14)]))}const c=a(e,[["render",p]]);export{g as __pageData,c as default};
+import{_ as a,o as i,c as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"Language Settings","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/i18n.md","filePath":"en/start/i18n.md","lastUpdated":1772946913000}'),e={name:"en/start/i18n.md"};function p(t,s,h,r,k,E){return i(),n("div",null,s[0]||(s[0]=[l("",14)]))}const c=a(e,[["render",p]]);export{g as __pageData,c as default};
diff --git a/docs/document/assets/en_start_option.md.C2vGTVOZ.js b/docs/document/assets/en_start_option.md.CTPFIwzU.js
similarity index 99%
rename from docs/document/assets/en_start_option.md.C2vGTVOZ.js
rename to docs/document/assets/en_start_option.md.CTPFIwzU.js
index 53577ec04..563337d5d 100644
--- a/docs/document/assets/en_start_option.md.C2vGTVOZ.js
+++ b/docs/document/assets/en_start_option.md.CTPFIwzU.js
@@ -1,4 +1,4 @@
-import{_ as n,c as e,o as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1772946913000}'),p={name:"en/start/option.md"};function t(h,a,r,k,d,E){return l(),e("div",null,a[0]||(a[0]=[s('

Basic Options ​

container ​

  • Type: String, Element
  • Default: #artplayer

The DOM container where the player is mounted.

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1772946913000}'),p={name:"en/start/option.md"};function t(h,a,r,k,d,E){return e(),l("div",null,a[0]||(a[0]=[s('

Basic Options ​

container ​

  • Type: String, Element
  • Default: #artplayer

The DOM container where the player is mounted.

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app',
     // container: document.querySelector('.artplayer-app'),
     url: '/assets/sample/video.mp4',
diff --git a/docs/document/assets/en_start_option.md.C2vGTVOZ.lean.js b/docs/document/assets/en_start_option.md.CTPFIwzU.lean.js
similarity index 96%
rename from docs/document/assets/en_start_option.md.C2vGTVOZ.lean.js
rename to docs/document/assets/en_start_option.md.CTPFIwzU.lean.js
index a47094c4b..3b159398c 100644
--- a/docs/document/assets/en_start_option.md.C2vGTVOZ.lean.js
+++ b/docs/document/assets/en_start_option.md.CTPFIwzU.lean.js
@@ -1 +1 @@
-import{_ as n,c as e,o as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1772946913000}'),p={name:"en/start/option.md"};function t(h,a,r,k,d,E){return l(),e("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",9),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",7),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const g=n(p,[["render",t]]);export{o as __pageData,g as default};
+import{_ as n,o as e,c as l,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const o=JSON.parse('{"title":"Basic Options","description":"","frontmatter":{},"headers":[],"relativePath":"en/start/option.md","filePath":"en/start/option.md","lastUpdated":1772946913000}'),p={name:"en/start/option.md"};function t(h,a,r,k,d,E){return e(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",9),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",7),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const g=n(p,[["render",t]]);export{o as __pageData,g as default};
diff --git a/docs/document/assets/index.md.CZIHn4-e.js b/docs/document/assets/index.md.BOUnJIvT.js
similarity index 97%
rename from docs/document/assets/index.md.CZIHn4-e.js
rename to docs/document/assets/index.md.BOUnJIvT.js
index 23fe0dc65..b2f7a5e85 100644
--- a/docs/document/assets/index.md.CZIHn4-e.js
+++ b/docs/document/assets/index.md.BOUnJIvT.js
@@ -1,4 +1,4 @@
-import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1775270107000}'),p={name:"index.md"};function t(e,s,h,k,r,E){return n(),a("div",null,s[0]||(s[0]=[l(`

安装使用 ​

安装 ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
bash
bun 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

使用 ​

html
<html>
+import{_ as i,o as a,c as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1775270107000}'),p={name:"index.md"};function t(e,s,h,k,r,E){return a(),n("div",null,s[0]||(s[0]=[l(`

安装使用 ​

安装 ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
bash
bun 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

使用 ​

html
<html>
     <head>
         <title>ArtPlayer Demo</title>
         <meta charset="UTF-8" />
@@ -19,7 +19,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
           });
         </script>
     </body>
-</html>

提示

播放器的尺寸依赖于容器 container 的尺寸,所以你的容器 container 必须是有尺寸的

以下链接可以看到更多的使用例子

/example

Vue.js ​

vue
<template>
+</html>

提示

播放器的尺寸依赖于容器 container 的尺寸,所以你的容器 container 必须是有尺寸的

以下链接可以看到更多的使用例子

/example

Vue.js ​

vue
<template>
   <div ref="$container" />
 </template>
 
@@ -71,7 +71,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
 function getInstance(art) {
   console.log(art)
 }
-</script>

Artplayer 非响应式:

在 Vue.js 里直接修改 option 是不会改变播放器的

React.js ​

jsx
import Artplayer from 'artplayer'
+</script>

Artplayer 非响应式:

在 Vue.js 里直接修改 option 是不会改变播放器的

React.js ​

jsx
import Artplayer from 'artplayer'
 import { useEffect, useRef } from 'react'
 
 export default function Player({ option, getInstance, ...rest }) {
@@ -154,7 +154,7 @@ import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g
 
 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/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

假如你要兼容更古老的浏览器时,请修改以下配置然后自行构建:

构建配置:scripts/build.js

参考文档:browserslist

ECMAScript Module ​

从 5.2.6 开始,artplayer 和所有插件还会提供一个 ESM 版本的 mjs,如:

  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
+const art8 = new Artplayer(option);

古老的浏览器 ​

生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome:last 1 Chrome version

对于古老的浏览器,可以使用 artplayer.legacy.js 文件,可以兼容到:IE 11

js
import Artplayer from 'artplayer/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

假如你要兼容更古老的浏览器时,请修改以下配置然后自行构建:

构建配置:scripts/build.js

参考文档:browserslist

ECMAScript Module ​

从 5.2.6 开始,artplayer 和所有插件还会提供一个 ESM 版本的 mjs,如:

  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
 <html lang="en">
 
 <head>
diff --git a/docs/document/assets/index.md.CZIHn4-e.lean.js b/docs/document/assets/index.md.BOUnJIvT.lean.js
similarity index 68%
rename from docs/document/assets/index.md.CZIHn4-e.lean.js
rename to docs/document/assets/index.md.BOUnJIvT.lean.js
index f32b7f437..11b755706 100644
--- a/docs/document/assets/index.md.CZIHn4-e.lean.js
+++ b/docs/document/assets/index.md.BOUnJIvT.lean.js
@@ -1 +1 @@
-import{_ as i,c as a,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1775270107000}'),p={name:"index.md"};function t(e,s,h,k,r,E){return n(),a("div",null,s[0]||(s[0]=[l("",50)]))}const c=i(p,[["render",t]]);export{g as __pageData,c as default};
+import{_ as i,o as a,c as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"安装使用","description":"","frontmatter":{},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1775270107000}'),p={name:"index.md"};function t(e,s,h,k,r,E){return a(),n("div",null,s[0]||(s[0]=[l("",50)]))}const c=i(p,[["render",t]]);export{g as __pageData,c as default};
diff --git a/docs/document/assets/plugin_danmuku.md.FiBSjkUz.js b/docs/document/assets/plugin_danmuku.md.LS-GTgIv.js
similarity index 99%
rename from docs/document/assets/plugin_danmuku.md.FiBSjkUz.js
rename to docs/document/assets/plugin_danmuku.md.LS-GTgIv.js
index 3a0466f6e..6cee5470f 100644
--- a/docs/document/assets/plugin_danmuku.md.FiBSjkUz.js
+++ b/docs/document/assets/plugin_danmuku.md.LS-GTgIv.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1734270991000}'),h={name:"plugin/danmuku.md"};function e(k,a,t,r,E,d){return p(),l("div",null,a[0]||(a[0]=[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

弹幕结构 ​

每一个弹幕是一个对象,多个弹幕组成的数组就是弹幕库,通常只需要text就可以发送一个弹幕,其余都是非必要参数

js
{
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1734270991000}'),h={name:"plugin/danmuku.md"};function e(k,a,t,r,E,d){return l(),p("div",null,a[0]||(a[0]=[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

弹幕结构 ​

每一个弹幕是一个对象,多个弹幕组成的数组就是弹幕库,通常只需要text就可以发送一个弹幕,其余都是非必要参数

js
{
     text: '', // 弹幕文本
     time: 10, // 弹幕时间, 默认为当前播放器时间
     mode: 0, // 弹幕模式: 0: 滚动(默认),1: 顶部,2: 底部
diff --git a/docs/document/assets/plugin_danmuku.md.FiBSjkUz.lean.js b/docs/document/assets/plugin_danmuku.md.LS-GTgIv.lean.js
similarity index 93%
rename from docs/document/assets/plugin_danmuku.md.FiBSjkUz.lean.js
rename to docs/document/assets/plugin_danmuku.md.LS-GTgIv.lean.js
index b845205b6..227ffddfb 100644
--- a/docs/document/assets/plugin_danmuku.md.FiBSjkUz.lean.js
+++ b/docs/document/assets/plugin_danmuku.md.LS-GTgIv.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1734270991000}'),h={name:"plugin/danmuku.md"};function e(k,a,t,r,E,d){return p(),l("div",null,a[0]||(a[0]=[s("",18),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",2),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",2),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",2),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",1)]))}const c=n(h,[["render",e]]);export{y as __pageData,c as default};
+import{_ as n,o as l,c as p,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const y=JSON.parse('{"title":"弹幕库","description":"","frontmatter":{},"headers":[],"relativePath":"plugin/danmuku.md","filePath":"plugin/danmuku.md","lastUpdated":1734270991000}'),h={name:"plugin/danmuku.md"};function e(k,a,t,r,E,d){return l(),p("div",null,a[0]||(a[0]=[s("",18),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",2),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",2),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",3),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",2),i("div",{className:"run-code","data-libs":"./uncompiled/artplayer-plugin-danmuku/index.js"}," ▶ Run Code ",-1),s("",1)]))}const c=n(h,[["render",e]]);export{y as __pageData,c as default};
diff --git a/docs/document/assets/start_i18n.md.CDm9a8pv.js b/docs/document/assets/start_i18n.md.xG6dFtWq.js
similarity index 97%
rename from docs/document/assets/start_i18n.md.CDm9a8pv.js
rename to docs/document/assets/start_i18n.md.xG6dFtWq.js
index a7435c513..4e1f47669 100644
--- a/docs/document/assets/start_i18n.md.CDm9a8pv.js
+++ b/docs/document/assets/start_i18n.md.xG6dFtWq.js
@@ -1,8 +1,8 @@
-import{_ as a,c as i,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"语言设置","description":"","frontmatter":{},"headers":[],"relativePath":"start/i18n.md","filePath":"start/i18n.md","lastUpdated":1757137705000}'),p={name:"start/i18n.md"};function e(h,s,t,k,r,E){return n(),i("div",null,s[0]||(s[0]=[l(`

语言设置 ​

DANGER

鉴于捆绑的多国语言越来越多, 从 5.1.0 版本开始, artplayer.js 核心代码除了包含 简体中文 和 英文 外, 不再捆绑其它多国语言, 需要自行导入需要的语言。

WARNING

当无法匹配到语言时, 会默认显示英文, i18n 写法参考: artplayer/types/i18n.d.ts

默认语言 ​

默认语言有: en, zh-cn, 无需手动导入

js
var art = new Artplayer({
+import{_ as a,o as i,c as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"语言设置","description":"","frontmatter":{},"headers":[],"relativePath":"start/i18n.md","filePath":"start/i18n.md","lastUpdated":1757137705000}'),p={name:"start/i18n.md"};function e(h,s,t,k,r,E){return i(),n("div",null,s[0]||(s[0]=[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

js
import id from 'artplayer/i18n/id';
+});

导入语言 ​

打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言

打包后的语言文件存放于: artplayer/dist/i18n/*.js

js
import id from 'artplayer/i18n/id';
 import zhTw from 'artplayer/i18n/zh-tw';
 
 var art = new Artplayer({
diff --git a/docs/document/assets/start_i18n.md.CDm9a8pv.lean.js b/docs/document/assets/start_i18n.md.xG6dFtWq.lean.js
similarity index 69%
rename from docs/document/assets/start_i18n.md.CDm9a8pv.lean.js
rename to docs/document/assets/start_i18n.md.xG6dFtWq.lean.js
index 20bad5b7e..47fafaacf 100644
--- a/docs/document/assets/start_i18n.md.CDm9a8pv.lean.js
+++ b/docs/document/assets/start_i18n.md.xG6dFtWq.lean.js
@@ -1 +1 @@
-import{_ as a,c as i,o as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"语言设置","description":"","frontmatter":{},"headers":[],"relativePath":"start/i18n.md","filePath":"start/i18n.md","lastUpdated":1757137705000}'),p={name:"start/i18n.md"};function e(h,s,t,k,r,E){return n(),i("div",null,s[0]||(s[0]=[l("",14)]))}const g=a(p,[["render",e]]);export{c as __pageData,g as default};
+import{_ as a,o as i,c as n,ak as l}from"./chunks/framework.xxfEszSJ.js";const c=JSON.parse('{"title":"语言设置","description":"","frontmatter":{},"headers":[],"relativePath":"start/i18n.md","filePath":"start/i18n.md","lastUpdated":1757137705000}'),p={name:"start/i18n.md"};function e(h,s,t,k,r,E){return i(),n("div",null,s[0]||(s[0]=[l("",14)]))}const g=a(p,[["render",e]]);export{c as __pageData,g as default};
diff --git a/docs/document/assets/start_option.md.D52S8Ynf.js b/docs/document/assets/start_option.md.DRwrMHeQ.js
similarity index 99%
rename from docs/document/assets/start_option.md.D52S8Ynf.js
rename to docs/document/assets/start_option.md.DRwrMHeQ.js
index 442cf966b..52562da0f 100644
--- a/docs/document/assets/start_option.md.D52S8Ynf.js
+++ b/docs/document/assets/start_option.md.DRwrMHeQ.js
@@ -1,4 +1,4 @@
-import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1764425558000}'),p={name:"start/option.md"};function h(t,a,k,r,d,E){return e(),l("div",null,a[0]||(a[0]=[s('

基础选项 ​

container ​

  • Type: String, Element
  • Default: #artplayer

播放器挂载的 DOM 容器

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
+import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1764425558000}'),p={name:"start/option.md"};function h(t,a,k,r,d,E){return l(),e("div",null,a[0]||(a[0]=[s('

基础选项 ​

container ​

  • Type: String, Element
  • Default: #artplayer

播放器挂载的 DOM 容器

',4),i("div",{className:"run-code"},"▶ Run Code",-1),s(`
js
var art = new Artplayer({
     container: '.artplayer-app', 
     // container: document.querySelector('.artplayer-app'),
     url: '/assets/sample/video.mp4',
diff --git a/docs/document/assets/start_option.md.D52S8Ynf.lean.js b/docs/document/assets/start_option.md.DRwrMHeQ.lean.js
similarity index 96%
rename from docs/document/assets/start_option.md.D52S8Ynf.lean.js
rename to docs/document/assets/start_option.md.DRwrMHeQ.lean.js
index f83eb41dc..2e4fe979b 100644
--- a/docs/document/assets/start_option.md.D52S8Ynf.lean.js
+++ b/docs/document/assets/start_option.md.DRwrMHeQ.lean.js
@@ -1 +1 @@
-import{_ as n,c as l,o as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1764425558000}'),p={name:"start/option.md"};function h(t,a,k,r,d,E){return e(),l("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",9),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",7),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const o=n(p,[["render",h]]);export{g as __pageData,o as default};
+import{_ as n,o as l,c as e,ak as s,j as i}from"./chunks/framework.xxfEszSJ.js";const g=JSON.parse('{"title":"基础选项","description":"","frontmatter":{},"headers":[],"relativePath":"start/option.md","filePath":"start/option.md","lastUpdated":1764425558000}'),p={name:"start/option.md"};function h(t,a,k,r,d,E){return l(),e("div",null,a[0]||(a[0]=[s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",9),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",7),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",6),i("div",{className:"run-code"},"▶ Run Code",-1),s("",2),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",4),i("div",{className:"run-code"},"▶ Run Code",-1),s("",5),i("div",{className:"run-code"},"▶ Run Code",-1),s("",1)]))}const o=n(p,[["render",h]]);export{g as __pageData,o as default};
diff --git a/docs/document/component/contextmenu.html b/docs/document/component/contextmenu.html
index f75399365..52a75282d 100644
--- a/docs/document/component/contextmenu.html
+++ b/docs/document/component/contextmenu.html
@@ -13,7 +13,7 @@
     
     
     
-    
+    
     
     
     
@@ -23,7 +23,7 @@
     
   
   
-    
Skip to content

右键菜单 ​

配置 ​

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

创建 ​

▶ Run Code
js
var art = new Artplayer({
+    
Skip to content

右键菜单 ​

配置 ​

属性类型描述
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: [
@@ -106,7 +106,7 @@
         })
     }, 3000);
 });
- + \ No newline at end of file diff --git a/docs/document/component/controls.html b/docs/document/component/controls.html index 0d88d2f05..66135f1fe 100644 --- a/docs/document/component/controls.html +++ b/docs/document/component/controls.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

控制器 ​

配置 ​

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

创建 ​

▶ Run Code
js
var art = new Artplayer({
+    
Skip to content

控制器 ​

配置 ​

属性类型描述
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: [
@@ -153,7 +153,7 @@
         });
     }, 3000);
 });
- + \ No newline at end of file diff --git a/docs/document/component/layers.html b/docs/document/component/layers.html index f5b03f4b5..31c1710da 100644 --- a/docs/document/component/layers.html +++ b/docs/document/component/layers.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

业务层 ​

配置 ​

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

创建 ​

▶ Run Code
js
var img = '/assets/sample/layer.png';
+    
Skip to content

业务层 ​

配置 ​

属性类型描述
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',
@@ -125,7 +125,7 @@
         });
     }, 3000);
 });
- + \ No newline at end of file diff --git a/docs/document/component/setting.html b/docs/document/component/setting.html index 2e8cfa666..1ddb15981 100644 --- a/docs/document/component/setting.html +++ b/docs/document/component/setting.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

设置面板 ​

内置 ​

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

▶ Run Code
js
var art = new Artplayer({
+    
Skip to content

设置面板 ​

内置 ​

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

▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 	setting: true,
@@ -245,7 +245,7 @@
         });
     }, 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 b8dffd90b..20723fbc1 100644 --- a/docs/document/en/advanced/built-in.html +++ b/docs/document/en/advanced/built-in.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

Advanced Properties ​

The Advanced Properties here refer to the secondary properties attached to the instance, which are less commonly used.

option ​

The player's options.

▶ Run Code
js
var art = new Artplayer({
+    
Skip to content

Advanced Properties ​

The Advanced Properties here refer to the secondary properties attached to the instance, which are less commonly used.

option ​

The player's options.

▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
@@ -217,7 +217,7 @@
 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 417b6d0de..d84484130 100644 --- a/docs/document/en/advanced/class.html +++ b/docs/document/en/advanced/class.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

Static Properties ​

Here, static properties refer to the first-level properties attached to the constructor, which are rarely used.

instances ​

Returns an array of all player instances. This property can be useful when you need to manage multiple players simultaneously.

▶ Run Code
js
console.info([...Artplayer.instances]);
+    
Skip to content

Static Properties ​

Here, static properties refer to the first-level properties attached to the constructor, which are rarely used.

instances ​

Returns an array of all player instances. This property can be useful when you need to manage multiple players simultaneously.

▶ Run Code
js
console.info([...Artplayer.instances]);
 
 var art = new Artplayer({
     container: '.artplayer-app',
@@ -31,7 +31,7 @@
 });
 
 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 timestamp of the player.

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

config ​

Returns the default configuration for videos.

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

utils ​

Returns the collection of utility functions for the player.

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

For all utility functions, please refer to the following address:

artplayer/types/utils.d.ts

scheme ​

Returns the validation schema for player options.

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

Emitter ​

Returns the constructor of the event emitter.

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

validator ​

Returns the validation function for options.

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

kindOf ​

Returns the type detection utility function.

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

html ​

Returns the html string required by the player.

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

option ​

Returns the default options of the player.

▶ 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 c93a0a2c5..f73cebb61 100644 --- a/docs/document/en/advanced/event.html +++ b/docs/document/en/advanced/event.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

Instance Events ​

Player events are divided into two types: native events of the video (prefixed with video:), and custom events.

Listening to events:

▶ Run Code
js
var art = new Artplayer({
+    
Skip to content

Instance Events ​

Player events are divided into two types: native events of the video (prefixed with video:), and custom events.

Listening to events:

▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
@@ -385,7 +385,7 @@
 art.on('keydown', (event) => {
     console.log(event.code);
 });

video:canplay ​

The browser can start playing the media, but estimates there is not enough data to play through to the end without stopping for further buffering.

video:canplaythrough ​

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

video:complete ​

The OfflineAudioContext rendering is complete.

video:durationchange ​

Triggered when the value of the duration property changes.

video:emptied ​

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

video:ended ​

Playback has stopped because the media has reached its end.

video:error ​

An error occurred while fetching the 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 begun.

video:playing ​

Playback is ready to start after having been paused or delayed due to lack of data.

video:progress ​

Fired periodically as the browser loads the resource.

video:ratechange ​

The playback rate has changed.

video:seeked ​

A seek operation has completed.

video:seeking ​

A seek operation has begun.

video:stalled ​

The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.

video:suspend ​

Media data loading has been suspended.

video:timeupdate ​

The time indicated by the currentTime property has changed.

video:volumechange ​

The volume has changed.

video:waiting ​

Playback has stopped because of a temporary lack of data.

- + \ No newline at end of file diff --git a/docs/document/en/advanced/global.html b/docs/document/en/advanced/global.html index 2b903e5de..6a5c33011 100644 --- a/docs/document/en/advanced/global.html +++ b/docs/document/en/advanced/global.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

Global Properties ​

The global properties here refer to the top-level properties mounted on the constructor. All property names are in uppercase. These are subject to change in the future and are rarely used.

DEBUG ​

Whether to enable debug mode, which can print all built-in video events. Default is off.

▶ Run Code
js
Artplayer.DEBUG = true;
+    
Skip to content

Global Properties ​

The global properties here refer to the top-level properties mounted on the constructor. All property names are in uppercase. These are subject to change in the future and are rarely used.

DEBUG ​

Whether to enable debug mode, which can print all built-in video events. Default is off.

▶ Run Code
js
Artplayer.DEBUG = true;
 
 var art = new Artplayer({
     container: '.artplayer-app',
@@ -248,7 +248,7 @@
 
 // Only destroy the UI, do not actively clear the src
 art.destroy();
- + \ No newline at end of file diff --git a/docs/document/en/advanced/plugin.html b/docs/document/en/advanced/plugin.html index fee21b907..09bb6e3fe 100644 --- a/docs/document/en/advanced/plugin.html +++ b/docs/document/en/advanced/plugin.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

Writing Plugins ​

Once you are familiar with the player's properties, methods, and events, writing a plugin becomes a very straightforward task.

You can load a plugin function during instantiation.

▶ Run Code
js
function myPlugin(art) {
+    
Skip to content

Writing Plugins ​

Once you are familiar with the player's properties, methods, and events, writing a plugin becomes a very straightforward task.

You can load a plugin function during instantiation.

▶ Run Code
js
function myPlugin(art) {
     console.info(art);
     return {
         name: 'myPlugin',
@@ -122,7 +122,7 @@
         })
     ],
 });
- + \ No newline at end of file diff --git a/docs/document/en/advanced/property.html b/docs/document/en/advanced/property.html index 1d07f8037..84c2eef7c 100644 --- a/docs/document/en/advanced/property.html +++ b/docs/document/en/advanced/property.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

Instance Properties ​

Here, Instance Properties refer to the first-level properties mounted on the instance, which are commonly used.

play ​

  • Type: Function

Play the video.

▶ Run Code
js
var art = new Artplayer({
+    
Skip to content

Instance Properties ​

Here, Instance Properties refer to the first-level properties mounted on the instance, which are commonly used.

play ​

  • Type: Function

Play the video.

▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     muted: true,
@@ -457,7 +457,7 @@
 art.on('ready', () => {
     art.subtitleOffset = 1;
 });
- + \ No newline at end of file diff --git a/docs/document/en/component/contextmenu.html b/docs/document/en/component/contextmenu.html index 3fe48f0e3..dad297eb7 100644 --- a/docs/document/en/component/contextmenu.html +++ b/docs/document/en/component/contextmenu.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

Context Menu ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique component name for CSS class
indexNumberComponent index for display priority
htmlString, ElementDOM element of the component
styleObjectComponent style object
clickFunctionComponent click event
mountedFunctionTriggered after component mount
tooltipStringTooltip text for the component

Creation ​

▶ Run Code
js
var art = new Artplayer({
+    
Skip to content

Context Menu ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique component name for CSS class
indexNumberComponent index for display priority
htmlString, ElementDOM element of the component
styleObjectComponent style object
clickFunctionComponent click event
mountedFunctionTriggered after component mount
tooltipStringTooltip text for the component

Creation ​

▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     contextmenu: [
@@ -106,7 +106,7 @@
         })
     }, 3000);
 });
- + \ No newline at end of file diff --git a/docs/document/en/component/controls.html b/docs/document/en/component/controls.html index 2d45f7dd0..19400a8ef 100644 --- a/docs/document/en/component/controls.html +++ b/docs/document/en/component/controls.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

Controls ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the control
nameStringUnique name of the control, used for class marking
indexNumberControl index, determines display priority
htmlString, ElementDOM element of the control
styleObjectStyle object for the control
clickFunctionClick event handler for the control
mountedFunctionTriggered after the control is mounted
tooltipStringTooltip text for the control
positionStringleft or right - controls which side the control appears on
selectorArrayArray of objects for selection list
onSelectFunctionFunction triggered when a selection list item is clicked

Creation ​

▶ Run Code
js
var art = new Artplayer({
+    
Skip to content

Controls ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the control
nameStringUnique name of the control, used for class marking
indexNumberControl index, determines display priority
htmlString, ElementDOM element of the control
styleObjectStyle object for the control
clickFunctionClick event handler for the control
mountedFunctionTriggered after the control is mounted
tooltipStringTooltip text for the control
positionStringleft or right - controls which side the control appears on
selectorArrayArray of objects for selection list
onSelectFunctionFunction triggered when a selection list item is clicked

Creation ​

▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     controls: [
@@ -153,7 +153,7 @@
         });
     }, 3000);
 });
- + \ No newline at end of file diff --git a/docs/document/en/component/layers.html b/docs/document/en/component/layers.html index d3ea79938..b9494fb44 100644 --- a/docs/document/en/component/layers.html +++ b/docs/document/en/component/layers.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

Layers ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique component name for CSS class
indexNumberComponent index for display priority
htmlString, ElementComponent DOM element
styleObjectComponent style object
clickFunctionComponent click event
mountedFunctionTriggered after component mount
tooltipStringComponent tooltip text

Creation ​

▶ Run Code
js
var img = '/assets/sample/layer.png';
+    
Skip to content

Layers ​

Configuration ​

PropertyTypeDescription
disableBooleanWhether to disable the component
nameStringUnique component name for CSS class
indexNumberComponent index for display priority
htmlString, ElementComponent DOM element
styleObjectComponent style object
clickFunctionComponent click event
mountedFunctionTriggered after component mount
tooltipStringComponent tooltip text

Creation ​

▶ Run Code
js
var img = '/assets/sample/layer.png';
 var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
@@ -125,7 +125,7 @@
         });
     }, 3000);
 });
- + \ No newline at end of file diff --git a/docs/document/en/component/setting.html b/docs/document/en/component/setting.html index fea6bb8e6..1a30a229e 100644 --- a/docs/document/en/component/setting.html +++ b/docs/document/en/component/setting.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

Settings Panel ​

Built-in ​

First, you need to open the settings panel. It comes with four built-in items: flip, playbackRate, aspectRatio, subtitleOffset.

▶ Run Code
js
var art = new Artplayer({
+    
Skip to content

Settings Panel ​

Built-in ​

First, you need to open the settings panel. 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,
@@ -245,7 +245,7 @@
         });
     }, 3000);
 });
- + \ No newline at end of file diff --git a/docs/document/en/index.html b/docs/document/en/index.html index 0f3d2b93a..113e3857f 100644 --- a/docs/document/en/index.html +++ b/docs/document/en/index.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

Installation and Usage ​

Installation ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
bash
bun 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 ​

html
<html>
+    
Skip to content

Installation and Usage ​

Installation ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
bash
bun 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 ​

html
<html>
     <head>
         <title>ArtPlayer Demo</title>
         <meta charset="UTF-8" />
@@ -44,7 +44,7 @@
           });
         </script>
     </body>
-</html>

Note

The player's dimensions depend on the dimensions of its container. Therefore, your container must have defined dimensions.

See more usage examples at the following link

/example

Vue.js ​

vue
<template>
+</html>

Note

The player's dimensions depend on the dimensions of its container. Therefore, your container must have defined dimensions.

See more usage examples at the following link

/example

Vue.js ​

vue
<template>
   <div ref="$container" />
 </template>
 
@@ -96,7 +96,7 @@
 function getInstance(art) {
   console.log(art)
 }
-</script>

Artplayer is not reactive:

Directly modifying the option in Vue.js will not update the player.

React.js ​

jsx
import Artplayer from 'artplayer'
+</script>

Artplayer is not reactive:

Directly modifying the option in Vue.js will not update the player.

React.js ​

jsx
import Artplayer from 'artplayer'
 import { useEffect, useRef } from 'react'
 
 export default function Player({ option, getInstance, ...rest }) {
@@ -179,7 +179,7 @@
 
 option.volume = 0.5;
 
-const art8 = new Artplayer(option);

Legacy Browsers ​

The production build artplayer.js only supports the latest major version of Chrome: last 1 Chrome version.

For legacy browsers, you can use the artplayer.legacy.js file, which is compatible down to: IE 11.

js
import Artplayer from 'artplayer/legacy'
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, modify the following configuration and build it yourself:

Build configuration: scripts/build.js

Reference documentation: browserslist

ECMAScript Module ​

Starting from version 5.2.6, artplayer and all plugins also provide an ESM version in mjs format, such as:

  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
+const art8 = new Artplayer(option);

Legacy Browsers ​

The production build artplayer.js only supports the latest major version of Chrome: last 1 Chrome version.

For legacy browsers, you can use the artplayer.legacy.js file, which is compatible down to: IE 11.

js
import Artplayer from 'artplayer/legacy'
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, modify the following configuration and build it yourself:

Build configuration: scripts/build.js

Reference documentation: browserslist

ECMAScript Module ​

Starting from version 5.2.6, artplayer and all plugins also provide an ESM version in mjs format, such as:

  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -237,7 +237,7 @@
         </script>
     </body>
 </html>

Note

You need to modify it before importing the Artplayer dependency for it to take effect.

- + \ No newline at end of file diff --git a/docs/document/en/start/i18n.html b/docs/document/en/start/i18n.html index 67e6a3f8e..8ad9940f2 100644 --- a/docs/document/en/start/i18n.html +++ b/docs/document/en/start/i18n.html @@ -13,7 +13,7 @@ - + @@ -23,11 +23,11 @@ -
Skip to content

Language Settings ​

DANGER

Due to the increasing number of bundled multilingual resources, starting from version 5.1.0, the core artplayer.js code will no longer bundle any languages other than Simplified Chinese and English. You will need to manually import any other languages you require.

WARNING

When a language cannot be matched, English will be displayed by default. For i18n syntax reference, see: artplayer/types/i18n.d.ts

Default Languages ​

The default languages are: en, zh-cn. No manual import is required.

js
var art = new Artplayer({
+    
Skip to content

Language Settings ​

DANGER

Due to the increasing number of bundled multilingual resources, starting from version 5.1.0, the core artplayer.js code will no longer bundle any languages other than Simplified Chinese and English. You will need to manually import any other languages you require.

WARNING

When a language cannot be matched, English will be displayed by default. For i18n syntax reference, see: artplayer/types/i18n.d.ts

Default Languages ​

The default languages are: en, zh-cn. No manual import is required.

js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     lang: 'zh-cn', // or 'en'
-});

Importing Languages ​

Language files before bundling are located at: artplayer/src/i18n/*.js. Contributions for new languages are welcome.

Bundled language files are located at: artplayer/dist/i18n/*.js

js
import id from 'artplayer/i18n/id';
+});

Importing Languages ​

Language files before bundling are located at: artplayer/src/i18n/*.js. Contributions for new languages are welcome.

Bundled language files are located at: artplayer/dist/i18n/*.js

js
import id from 'artplayer/i18n/id';
 import zhTw from 'artplayer/i18n/zh-tw';
 
 var art = new Artplayer({
@@ -75,7 +75,7 @@
         },
     },
 });
- + \ No newline at end of file diff --git a/docs/document/en/start/option.html b/docs/document/en/start/option.html index f9c0acc8e..63245efe3 100644 --- a/docs/document/en/start/option.html +++ b/docs/document/en/start/option.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

Basic Options ​

container ​

  • Type: String, Element
  • Default: #artplayer

The DOM container where the player is mounted.

▶ Run Code
js
var art = new Artplayer({
+    
Skip to content

Basic Options ​

container ​

  • Type: String, Element
  • Default: #artplayer

The DOM container where the player is mounted.

▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     // container: document.querySelector('.artplayer-app'),
     url: '/assets/sample/video.mp4',
@@ -415,7 +415,7 @@
     url: '/assets/sample/video.mp4',
     proxy: () => document.createElement('video')
 });
- + \ No newline at end of file diff --git a/docs/document/hashmap.json b/docs/document/hashmap.json index afff85c46..1d1623417 100644 --- a/docs/document/hashmap.json +++ b/docs/document/hashmap.json @@ -1 +1 @@ -{"advanced_built-in.md":"DiyRIcIA","advanced_class.md":"Da3aE0pP","advanced_event.md":"mrsB0MsK","advanced_global.md":"Bdw3azKs","advanced_plugin.md":"B3Pobmcq","advanced_property.md":"CA7GaeI3","component_contextmenu.md":"ClKmcIKr","component_controls.md":"Cl62yW1F","component_layers.md":"Cys52VMi","component_setting.md":"BP5674ir","en_advanced_built-in.md":"CCHa0pnS","en_advanced_class.md":"SSD-Ahrs","en_advanced_event.md":"DEsqIUNQ","en_advanced_global.md":"3hwkL6RS","en_advanced_plugin.md":"C8AgK5Nt","en_advanced_property.md":"CaOAGGTk","en_component_contextmenu.md":"CsJAr6Ey","en_component_controls.md":"t1Ub-agE","en_component_layers.md":"Yo2RXBZy","en_component_setting.md":"Be0gsY-X","en_index.md":"Clwh28HI","en_start_i18n.md":"BLwUSSfJ","en_start_option.md":"C2vGTVOZ","index.md":"CZIHn4-e","plugin_danmuku.md":"FiBSjkUz","start_i18n.md":"CDm9a8pv","start_option.md":"D52S8Ynf"} +{"advanced_built-in.md":"DbXkhR8l","advanced_class.md":"BE9Wp7q6","advanced_event.md":"DoIgqIU9","advanced_global.md":"Db4VcykV","advanced_plugin.md":"CVp3Oe2x","advanced_property.md":"C_nOKniE","component_contextmenu.md":"lsIURdc3","component_controls.md":"CKAl0l5Z","component_layers.md":"D34Y4OkH","component_setting.md":"BwCpY3NU","en_advanced_built-in.md":"yQHjIPvf","en_advanced_class.md":"DklNHOdd","en_advanced_event.md":"opkwpdYa","en_advanced_global.md":"C8Y_RPho","en_advanced_plugin.md":"C22jhoxt","en_advanced_property.md":"BBsrm5xX","en_component_contextmenu.md":"BZMIBA5Z","en_component_controls.md":"CzJX3V-W","en_component_layers.md":"CMe9ljjt","en_component_setting.md":"BEB18u4V","en_index.md":"C1MgLyrG","en_start_i18n.md":"BBvNm0S6","en_start_option.md":"CTPFIwzU","index.md":"BOUnJIvT","plugin_danmuku.md":"LS-GTgIv","start_i18n.md":"xG6dFtWq","start_option.md":"DRwrMHeQ"} diff --git a/docs/document/index.html b/docs/document/index.html index 3f52b433c..7d713d72d 100644 --- a/docs/document/index.html +++ b/docs/document/index.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

安装使用 ​

安装 ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
bash
bun 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

使用 ​

html
<html>
+    
Skip to content

安装使用 ​

安装 ​

bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
bash
bun 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

使用 ​

html
<html>
     <head>
         <title>ArtPlayer Demo</title>
         <meta charset="UTF-8" />
@@ -44,7 +44,7 @@
           });
         </script>
     </body>
-</html>

提示

播放器的尺寸依赖于容器 container 的尺寸,所以你的容器 container 必须是有尺寸的

以下链接可以看到更多的使用例子

/example

Vue.js ​

vue
<template>
+</html>

提示

播放器的尺寸依赖于容器 container 的尺寸,所以你的容器 container 必须是有尺寸的

以下链接可以看到更多的使用例子

/example

Vue.js ​

vue
<template>
   <div ref="$container" />
 </template>
 
@@ -96,7 +96,7 @@
 function getInstance(art) {
   console.log(art)
 }
-</script>

Artplayer 非响应式:

在 Vue.js 里直接修改 option 是不会改变播放器的

React.js ​

jsx
import Artplayer from 'artplayer'
+</script>

Artplayer 非响应式:

在 Vue.js 里直接修改 option 是不会改变播放器的

React.js ​

jsx
import Artplayer from 'artplayer'
 import { useEffect, useRef } from 'react'
 
 export default function Player({ option, getInstance, ...rest }) {
@@ -179,7 +179,7 @@
 
 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/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

假如你要兼容更古老的浏览器时,请修改以下配置然后自行构建:

构建配置:scripts/build.js

参考文档:browserslist

ECMAScript Module ​

从 5.2.6 开始,artplayer 和所有插件还会提供一个 ESM 版本的 mjs,如:

  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
+const art8 = new Artplayer(option);

古老的浏览器 ​

生产构建的 artplayer.js 只兼容最新一个主版本的 Chrome:last 1 Chrome version

对于古老的浏览器,可以使用 artplayer.legacy.js 文件,可以兼容到:IE 11

js
import Artplayer from 'artplayer/legacy'
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.legacy.js
bash
https://unpkg.com/artplayer/dist/artplayer.legacy.js

假如你要兼容更古老的浏览器时,请修改以下配置然后自行构建:

构建配置:scripts/build.js

参考文档:browserslist

ECMAScript Module ​

从 5.2.6 开始,artplayer 和所有插件还会提供一个 ESM 版本的 mjs,如:

  • artplayer/dist/artplayer.mjs
  • artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.mjs
html
<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -237,7 +237,7 @@
         </script>
     </body>
 </html>

提示

你需要在引入 Artplayer 依赖前来修改它才会生效

- + \ No newline at end of file diff --git a/docs/document/plugin/danmuku.html b/docs/document/plugin/danmuku.html index f714908c6..eea35af3c 100644 --- a/docs/document/plugin/danmuku.html +++ b/docs/document/plugin/danmuku.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

弹幕库 ​

演示 ​

👉 查看完整演示

安装 ​

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

弹幕结构 ​

每一个弹幕是一个对象,多个弹幕组成的数组就是弹幕库,通常只需要text就可以发送一个弹幕,其余都是非必要参数

js
{
+    
Skip to content

弹幕库 ​

演示 ​

👉 查看完整演示

安装 ​

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

弹幕结构 ​

每一个弹幕是一个对象,多个弹幕组成的数组就是弹幕库,通常只需要text就可以发送一个弹幕,其余都是非必要参数

js
{
     text: '', // 弹幕文本
     time: 10, // 弹幕时间, 默认为当前播放器时间
     mode: 0, // 弹幕模式: 0: 滚动(默认),1: 顶部,2: 底部
@@ -367,7 +367,7 @@
 art.on('artplayerPluginDanmuku:destroy', () => {
     console.info('弹幕销毁');
 });
- + \ No newline at end of file diff --git a/docs/document/start/i18n.html b/docs/document/start/i18n.html index 843ee634f..508a8c7dd 100644 --- a/docs/document/start/i18n.html +++ b/docs/document/start/i18n.html @@ -13,7 +13,7 @@ - + @@ -23,11 +23,11 @@ -
Skip to content

语言设置 ​

DANGER

鉴于捆绑的多国语言越来越多, 从 5.1.0 版本开始, artplayer.js 核心代码除了包含 简体中文 和 英文 外, 不再捆绑其它多国语言, 需要自行导入需要的语言。

WARNING

当无法匹配到语言时, 会默认显示英文, i18n 写法参考: artplayer/types/i18n.d.ts

默认语言 ​

默认语言有: en, zh-cn, 无需手动导入

js
var art = new Artplayer({
+    
Skip to content

语言设置 ​

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

js
import id from 'artplayer/i18n/id';
+});

导入语言 ​

打包前的语言文件存放于: artplayer/src/i18n/*.js, 欢迎来添加你的语言

打包后的语言文件存放于: artplayer/dist/i18n/*.js

js
import id from 'artplayer/i18n/id';
 import zhTw from 'artplayer/i18n/zh-tw';
 
 var art = new Artplayer({
@@ -75,7 +75,7 @@
         },
     },
 });
- + \ No newline at end of file diff --git a/docs/document/start/option.html b/docs/document/start/option.html index e647a0e64..960c747be 100644 --- a/docs/document/start/option.html +++ b/docs/document/start/option.html @@ -13,7 +13,7 @@ - + @@ -23,7 +23,7 @@ -
Skip to content

基础选项 ​

container ​

  • Type: String, Element
  • Default: #artplayer

播放器挂载的 DOM 容器

▶ Run Code
js
var art = new Artplayer({
+    
Skip to content

基础选项 ​

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',
@@ -415,7 +415,7 @@
     url: '/assets/sample/video.mp4',
     proxy: () => document.createElement('video')
 });
- + \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index af773c275..bef0fe4a1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -69,7 +69,7 @@
  • dash.js + href="/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js&example=dash">dash.js
  • artplayer-plugin-dash-control + href="/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-control/index.js&example=dash.control">artplayer-plugin-dash-control
  • - + diff --git a/docs/uncompiled/artplayer-plugin-dash-control/index.js b/docs/uncompiled/artplayer-plugin-dash-control/index.js index 622e12f3a..d99cb1f47 100644 --- a/docs/uncompiled/artplayer-plugin-dash-control/index.js +++ b/docs/uncompiled/artplayer-plugin-dash-control/index.js @@ -17,22 +17,23 @@ var artplayerPluginDashControl = (function() { const { $video } = art.template; const { errorHandle } = art.constructor.utils; function updateQuality(dash) { - const qualities = dash.getBitrateInfoListFor("video"); + const qualities = dash.getRepresentationsByType("video"); if (!qualities || !qualities.length) return; const config = option.quality || {}; const auto = config.auto || "Auto"; const title = config.title || "Quality"; const getName = config.getName || ((level) => `${level.height}p`); - const currentQuality = dash.getQualityFor("video"); + const currentRepresentation = dash.getCurrentRepresentationForType("video"); + const currentId = currentRepresentation && currentRepresentation.id; const currentAuto = dash.getSettings().streaming.abr.autoSwitchBitrate.video; - const defaultHtml = currentAuto ? auto : getName(qualities[currentQuality]); + const defaultHtml = !currentAuto && currentRepresentation ? getName(currentRepresentation) : auto; const selector = uniqBy( - qualities.map((item) => { + qualities.map((item, index) => { return { html: getName(item), - value: item.qualityIndex, - default: currentQuality === item.qualityIndex && !currentAuto + value: index, + default: !currentAuto && !!currentId && item.id === currentId }; }), "html" @@ -63,7 +64,7 @@ var artplayerPluginDashControl = (function() { } } }); - dash.setQualityFor("video", item.value); + dash.setRepresentationForTypeByIndex("video", item.value); } art.notice.show = `${title}: ${item.html}`; if (config.control) diff --git a/packages/artplayer-plugin-dash-control/README.md b/packages/artplayer-plugin-dash-control/README.md index 2ff2efbab..90b0e4e76 100644 --- a/packages/artplayer-plugin-dash-control/README.md +++ b/packages/artplayer-plugin-dash-control/README.md @@ -4,7 +4,7 @@ Dash control plugin for ArtPlayer ## Demo -[https://artplayer.org](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-control/index.js&example=dash.control) +[https://artplayer.org](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-control/index.js&example=dash.control) ## License diff --git a/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.js b/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.js index bb42c1d7b..5f92ccef8 100644 --- a/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.js +++ b/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.js @@ -4,4 +4,4 @@ * (c) 2017-2026 Harvey Zhao * Released under the MIT License. */ -!function(t,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"==typeof define&&define.amd?(t.artplayerPluginDashControl=e(),define(function(){return t.artplayerPluginDashControl})):(t="undefined"!==typeof globalThis?globalThis:t||self).artplayerPluginDashControl=e()}(this,function(){"use strict";function t(t,e){const o=new Map;return t.filter(t=>{const n=t[e];return void 0===n||!o.has(n)&&o.set(n,1)})}return function(e={}){return o=>{const{$video:n}=o.template,{errorHandle:i}=o.constructor.utils;function a(){i(o.dash.getVideoElement()===n,'Cannot find instance of DASH from "art.dash"'),function(n){const i=n.getBitrateInfoListFor("video");if(!i||!i.length)return;const a=e.quality||{},l=a.auto||"Auto",s=a.title||"Quality",r=a.getName||(t=>`${t.height}p`),c=n.getQualityFor("video"),u=n.getSettings().streaming.abr.autoSwitchBitrate.video,d=u?l:r(i[c]),h=t(i.map(t=>({html:r(t),value:t.qualityIndex,default:c===t.qualityIndex&&!u})),"html").sort((t,e)=>e.value-t.value);h.push({html:l,value:"auto",default:u});const g=t=>("auto"===t.value?n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!0}}}}):(n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!1}}}}),n.setQualityFor("video",t.value)),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-quality",position:"right",html:d,style:{padding:"0 10px"},selector:h,onSelect:g}),a.setting&&o.setting.update({name:"dash-quality",tooltip:d,html:s,icon:'',width:200,selector:h,onSelect:g})}(o.dash),function(n){const i=n.getTracksFor("audio");if(!i||!i.length)return;const a=e.audio||{},l=a.auto||"Auto",s=a.title||"Audio",r=a.getName||(t=>t.lang||t.id),c=n.getCurrentTrackFor("audio")||i[0],u=c?r(c):l,d=t(i.map(t=>({html:r(t),value:t,default:c===t})),"html"),h=t=>(n.setCurrentTrack(t.value),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-audio",position:"right",html:u,style:{padding:"0 10px"},selector:d,onSelect:h}),a.setting&&o.setting.update({name:"dash-audio",tooltip:u,html:s,icon:'',width:200,selector:d,onSelect:h})}(o.dash)}return o.on("ready",a),o.on("restart",a),{name:"artplayerPluginDashControl",update:a}}}}); +!function(t,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"==typeof define&&define.amd?(t.artplayerPluginDashControl=e(),define(function(){return t.artplayerPluginDashControl})):(t="undefined"!==typeof globalThis?globalThis:t||self).artplayerPluginDashControl=e()}(this,function(){"use strict";function t(t,e){const o=new Map;return t.filter(t=>{const n=t[e];return void 0===n||!o.has(n)&&o.set(n,1)})}return function(e={}){return o=>{const{$video:n}=o.template,{errorHandle:i}=o.constructor.utils;function a(){i(o.dash.getVideoElement()===n,'Cannot find instance of DASH from "art.dash"'),function(n){const i=n.getRepresentationsByType("video");if(!i||!i.length)return;const a=e.quality||{},l=a.auto||"Auto",s=a.title||"Quality",r=a.getName||(t=>`${t.height}p`),c=n.getCurrentRepresentationForType("video"),u=c&&c.id,d=n.getSettings().streaming.abr.autoSwitchBitrate.video,h=!d&&c?r(c):l,g=t(i.map((t,e)=>({html:r(t),value:e,default:!d&&!!u&&t.id===u})),"html").sort((t,e)=>e.value-t.value);g.push({html:l,value:"auto",default:d});const p=t=>("auto"===t.value?n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!0}}}}):(n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!1}}}}),n.setRepresentationForTypeByIndex("video",t.value)),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-quality",position:"right",html:h,style:{padding:"0 10px"},selector:g,onSelect:p}),a.setting&&o.setting.update({name:"dash-quality",tooltip:h,html:s,icon:'',width:200,selector:g,onSelect:p})}(o.dash),function(n){const i=n.getTracksFor("audio");if(!i||!i.length)return;const a=e.audio||{},l=a.auto||"Auto",s=a.title||"Audio",r=a.getName||(t=>t.lang||t.id),c=n.getCurrentTrackFor("audio")||i[0],u=c?r(c):l,d=t(i.map(t=>({html:r(t),value:t,default:c===t})),"html"),h=t=>(n.setCurrentTrack(t.value),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-audio",position:"right",html:u,style:{padding:"0 10px"},selector:d,onSelect:h}),a.setting&&o.setting.update({name:"dash-audio",tooltip:u,html:s,icon:'',width:200,selector:d,onSelect:h})}(o.dash)}return o.on("ready",a),o.on("restart",a),{name:"artplayerPluginDashControl",update:a}}}}); diff --git a/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.legacy.js b/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.legacy.js index bb42c1d7b..5f92ccef8 100644 --- a/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.legacy.js +++ b/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.legacy.js @@ -4,4 +4,4 @@ * (c) 2017-2026 Harvey Zhao * Released under the MIT License. */ -!function(t,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"==typeof define&&define.amd?(t.artplayerPluginDashControl=e(),define(function(){return t.artplayerPluginDashControl})):(t="undefined"!==typeof globalThis?globalThis:t||self).artplayerPluginDashControl=e()}(this,function(){"use strict";function t(t,e){const o=new Map;return t.filter(t=>{const n=t[e];return void 0===n||!o.has(n)&&o.set(n,1)})}return function(e={}){return o=>{const{$video:n}=o.template,{errorHandle:i}=o.constructor.utils;function a(){i(o.dash.getVideoElement()===n,'Cannot find instance of DASH from "art.dash"'),function(n){const i=n.getBitrateInfoListFor("video");if(!i||!i.length)return;const a=e.quality||{},l=a.auto||"Auto",s=a.title||"Quality",r=a.getName||(t=>`${t.height}p`),c=n.getQualityFor("video"),u=n.getSettings().streaming.abr.autoSwitchBitrate.video,d=u?l:r(i[c]),h=t(i.map(t=>({html:r(t),value:t.qualityIndex,default:c===t.qualityIndex&&!u})),"html").sort((t,e)=>e.value-t.value);h.push({html:l,value:"auto",default:u});const g=t=>("auto"===t.value?n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!0}}}}):(n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!1}}}}),n.setQualityFor("video",t.value)),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-quality",position:"right",html:d,style:{padding:"0 10px"},selector:h,onSelect:g}),a.setting&&o.setting.update({name:"dash-quality",tooltip:d,html:s,icon:'',width:200,selector:h,onSelect:g})}(o.dash),function(n){const i=n.getTracksFor("audio");if(!i||!i.length)return;const a=e.audio||{},l=a.auto||"Auto",s=a.title||"Audio",r=a.getName||(t=>t.lang||t.id),c=n.getCurrentTrackFor("audio")||i[0],u=c?r(c):l,d=t(i.map(t=>({html:r(t),value:t,default:c===t})),"html"),h=t=>(n.setCurrentTrack(t.value),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-audio",position:"right",html:u,style:{padding:"0 10px"},selector:d,onSelect:h}),a.setting&&o.setting.update({name:"dash-audio",tooltip:u,html:s,icon:'',width:200,selector:d,onSelect:h})}(o.dash)}return o.on("ready",a),o.on("restart",a),{name:"artplayerPluginDashControl",update:a}}}}); +!function(t,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"==typeof define&&define.amd?(t.artplayerPluginDashControl=e(),define(function(){return t.artplayerPluginDashControl})):(t="undefined"!==typeof globalThis?globalThis:t||self).artplayerPluginDashControl=e()}(this,function(){"use strict";function t(t,e){const o=new Map;return t.filter(t=>{const n=t[e];return void 0===n||!o.has(n)&&o.set(n,1)})}return function(e={}){return o=>{const{$video:n}=o.template,{errorHandle:i}=o.constructor.utils;function a(){i(o.dash.getVideoElement()===n,'Cannot find instance of DASH from "art.dash"'),function(n){const i=n.getRepresentationsByType("video");if(!i||!i.length)return;const a=e.quality||{},l=a.auto||"Auto",s=a.title||"Quality",r=a.getName||(t=>`${t.height}p`),c=n.getCurrentRepresentationForType("video"),u=c&&c.id,d=n.getSettings().streaming.abr.autoSwitchBitrate.video,h=!d&&c?r(c):l,g=t(i.map((t,e)=>({html:r(t),value:e,default:!d&&!!u&&t.id===u})),"html").sort((t,e)=>e.value-t.value);g.push({html:l,value:"auto",default:d});const p=t=>("auto"===t.value?n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!0}}}}):(n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!1}}}}),n.setRepresentationForTypeByIndex("video",t.value)),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-quality",position:"right",html:h,style:{padding:"0 10px"},selector:g,onSelect:p}),a.setting&&o.setting.update({name:"dash-quality",tooltip:h,html:s,icon:'',width:200,selector:g,onSelect:p})}(o.dash),function(n){const i=n.getTracksFor("audio");if(!i||!i.length)return;const a=e.audio||{},l=a.auto||"Auto",s=a.title||"Audio",r=a.getName||(t=>t.lang||t.id),c=n.getCurrentTrackFor("audio")||i[0],u=c?r(c):l,d=t(i.map(t=>({html:r(t),value:t,default:c===t})),"html"),h=t=>(n.setCurrentTrack(t.value),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-audio",position:"right",html:u,style:{padding:"0 10px"},selector:d,onSelect:h}),a.setting&&o.setting.update({name:"dash-audio",tooltip:u,html:s,icon:'',width:200,selector:d,onSelect:h})}(o.dash)}return o.on("ready",a),o.on("restart",a),{name:"artplayerPluginDashControl",update:a}}}}); diff --git a/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.mjs b/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.mjs index e2374e353..8e5e16c16 100644 --- a/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.mjs +++ b/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.mjs @@ -21,22 +21,23 @@ function artplayerPluginDashControl(option = {}) { const { $video } = art.template; const { errorHandle } = art.constructor.utils; function updateQuality(dash) { - const qualities = dash.getBitrateInfoListFor("video"); + const qualities = dash.getRepresentationsByType("video"); if (!qualities || !qualities.length) return; const config = option.quality || {}; const auto = config.auto || "Auto"; const title = config.title || "Quality"; const getName = config.getName || ((level) => `${level.height}p`); - const currentQuality = dash.getQualityFor("video"); + const currentRepresentation = dash.getCurrentRepresentationForType("video"); + const currentId = currentRepresentation && currentRepresentation.id; const currentAuto = dash.getSettings().streaming.abr.autoSwitchBitrate.video; - const defaultHtml = currentAuto ? auto : getName(qualities[currentQuality]); + const defaultHtml = !currentAuto && currentRepresentation ? getName(currentRepresentation) : auto; const selector = uniqBy( - qualities.map((item) => { + qualities.map((item, index) => { return { html: getName(item), - value: item.qualityIndex, - default: currentQuality === item.qualityIndex && !currentAuto + value: index, + default: !currentAuto && !!currentId && item.id === currentId }; }), "html" @@ -67,7 +68,7 @@ function artplayerPluginDashControl(option = {}) { } } }); - dash.setQualityFor("video", item.value); + dash.setRepresentationForTypeByIndex("video", item.value); } art.notice.show = `${title}: ${item.html}`; if (config.control) diff --git a/packages/artplayer-plugin-dash-control/src/index.js b/packages/artplayer-plugin-dash-control/src/index.js index d442be7be..73ac79360 100644 --- a/packages/artplayer-plugin-dash-control/src/index.js +++ b/packages/artplayer-plugin-dash-control/src/index.js @@ -18,7 +18,7 @@ export default function artplayerPluginDashControl(option = {}) { const { errorHandle } = art.constructor.utils function updateQuality(dash) { - const qualities = dash.getBitrateInfoListFor('video') + const qualities = dash.getRepresentationsByType('video') if (!qualities || !qualities.length) return @@ -26,16 +26,17 @@ export default function artplayerPluginDashControl(option = {}) { const auto = config.auto || 'Auto' const title = config.title || 'Quality' const getName = config.getName || (level => `${level.height}p`) - const currentQuality = dash.getQualityFor('video') + const currentRepresentation = dash.getCurrentRepresentationForType('video') + const currentId = currentRepresentation && currentRepresentation.id const currentAuto = dash.getSettings().streaming.abr.autoSwitchBitrate.video - const defaultHtml = currentAuto ? auto : getName(qualities[currentQuality]) + const defaultHtml = !currentAuto && currentRepresentation ? getName(currentRepresentation) : auto const selector = uniqBy( - qualities.map((item) => { + qualities.map((item, index) => { return { html: getName(item), - value: item.qualityIndex, - default: currentQuality === item.qualityIndex && !currentAuto, + value: index, + default: !currentAuto && !!currentId && item.id === currentId, } }), 'html', @@ -69,7 +70,7 @@ export default function artplayerPluginDashControl(option = {}) { }, }, }) - dash.setQualityFor('video', item.value) + dash.setRepresentationForTypeByIndex('video', item.value) } art.notice.show = `${title}: ${item.html}` if (config.control) diff --git a/packages/artplayer-vitepress/docs/.vitepress/config.js b/packages/artplayer-vitepress/docs/.vitepress/config.js index e0f5d8da9..9733c112c 100644 --- a/packages/artplayer-vitepress/docs/.vitepress/config.js +++ b/packages/artplayer-vitepress/docs/.vitepress/config.js @@ -69,7 +69,7 @@ const config = { { text: '视频广告', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads' }, { text: 'Iframe 控制', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-tool-iframe/index.js&example=iframe' }, { text: 'HLS 控制', link: 'https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js%0A./uncompiled/artplayer-plugin-hls-control/index.js&example=hls.control' }, - { text: 'DASH 控制', link: 'https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-control/index.js&example=dash.control' }, + { text: 'DASH 控制', link: 'https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-control/index.js&example=dash.control' }, { text: 'VTT 缩略图', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vtt-thumbnail/index.js&example=vtt.thumbnail' }, { text: '多重字幕', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-multiple-subtitles/index.js&example=multiple.subtitles' }, { text: 'ASS 字幕 - JASSUB', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-jassub/index.js&example=jassub' }, @@ -87,7 +87,7 @@ const config = { items: [ { text: 'hls.js', link: 'https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js&example=hls' }, { text: 'flv.js', link: 'https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js&example=flv' }, - { text: 'dash.js', link: 'https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js&example=dash' }, + { text: 'dash.js', link: 'https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js&example=dash' }, { text: 'mpegts.js', link: 'https://artplayer.org/?libs=https://cdn.jsdelivr.net/npm/mpegts.js@1.7.3/dist/mpegts.min.js&example=mpegts' }, { text: 'webtorrent.js', link: 'https://artplayer.org/?libs=https://cdn.jsdelivr.net/npm/webtorrent@1/webtorrent.min.js&example=webtorrent' }, ], @@ -140,7 +140,7 @@ const config = { { text: 'Advertise', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads' }, { text: 'Iframe Control', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-tool-iframe/index.js&example=iframe' }, { text: 'HLS Control', link: 'https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js%0A./uncompiled/artplayer-plugin-hls-control/index.js&example=hls.control' }, - { text: 'DASH Control', link: 'https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-control/index.js&example=dash.control' }, + { text: 'DASH Control', link: 'https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-control/index.js&example=dash.control' }, { text: 'VTT Thumbnail', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vtt-thumbnail/index.js&example=vtt.thumbnail' }, { text: 'Multiple Subtitles', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-multiple-subtitles/index.js&example=multiple.subtitles' }, { text: 'ASS Subtitle - JASSUB', link: 'https://artplayer.org/?libs=./uncompiled/artplayer-plugin-jassub/index.js&example=jassub' }, @@ -158,7 +158,7 @@ const config = { items: [ { text: 'hls.js', link: 'https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js&example=hls' }, { text: 'flv.js', link: 'https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js&example=flv' }, - { text: 'dash.js', link: 'https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/4.5.2/dash.all.min.js&example=dash' }, + { text: 'dash.js', link: 'https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js&example=dash' }, { text: 'mpegts.js', link: 'https://artplayer.org/?libs=https://cdn.jsdelivr.net/npm/mpegts.js@1.7.3/dist/mpegts.min.js&example=mpegts' }, { text: 'webtorrent.js', link: 'https://artplayer.org/?libs=https://cdn.jsdelivr.net/npm/webtorrent@1/webtorrent.min.js&example=webtorrent' }, ], From 59d3c9f50c3b97b8e9576ea06c73f76ad7eb1891 Mon Sep 17 00:00:00 2001 From: Harvey Zhao Date: Thu, 10 Sep 2026 17:17:54 +0800 Subject: [PATCH 2/2] fix(dash-control): select stable representation IDs --- .github/workflows/nodejs.yml | 1 + .../compiled/artplayer-plugin-dash-control.js | 2 +- .../artplayer-plugin-dash-control.legacy.js | 2 +- .../artplayer-plugin-dash-control.mjs | 3 +- .../artplayer-plugin-dash-control/index.js | 3 +- package.json | 1 + .../artplayer-plugin-dash-control/README.md | 2 + .../dist/artplayer-plugin-dash-control.js | 2 +- .../artplayer-plugin-dash-control.legacy.js | 2 +- .../dist/artplayer-plugin-dash-control.mjs | 3 +- .../src/index.js | 3 +- test/dash-control.test.js | 117 ++++++++++++++++++ 12 files changed, 133 insertions(+), 8 deletions(-) create mode 100644 test/dash-control.test.js diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index 9b3c119ba..a5b7e438c 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -25,6 +25,7 @@ jobs: yarn yarn lint yarn build:all + yarn test:dash-control env: CI: true diff --git a/docs/compiled/artplayer-plugin-dash-control.js b/docs/compiled/artplayer-plugin-dash-control.js index 5f92ccef8..97ce60f03 100644 --- a/docs/compiled/artplayer-plugin-dash-control.js +++ b/docs/compiled/artplayer-plugin-dash-control.js @@ -4,4 +4,4 @@ * (c) 2017-2026 Harvey Zhao * Released under the MIT License. */ -!function(t,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"==typeof define&&define.amd?(t.artplayerPluginDashControl=e(),define(function(){return t.artplayerPluginDashControl})):(t="undefined"!==typeof globalThis?globalThis:t||self).artplayerPluginDashControl=e()}(this,function(){"use strict";function t(t,e){const o=new Map;return t.filter(t=>{const n=t[e];return void 0===n||!o.has(n)&&o.set(n,1)})}return function(e={}){return o=>{const{$video:n}=o.template,{errorHandle:i}=o.constructor.utils;function a(){i(o.dash.getVideoElement()===n,'Cannot find instance of DASH from "art.dash"'),function(n){const i=n.getRepresentationsByType("video");if(!i||!i.length)return;const a=e.quality||{},l=a.auto||"Auto",s=a.title||"Quality",r=a.getName||(t=>`${t.height}p`),c=n.getCurrentRepresentationForType("video"),u=c&&c.id,d=n.getSettings().streaming.abr.autoSwitchBitrate.video,h=!d&&c?r(c):l,g=t(i.map((t,e)=>({html:r(t),value:e,default:!d&&!!u&&t.id===u})),"html").sort((t,e)=>e.value-t.value);g.push({html:l,value:"auto",default:d});const p=t=>("auto"===t.value?n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!0}}}}):(n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!1}}}}),n.setRepresentationForTypeByIndex("video",t.value)),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-quality",position:"right",html:h,style:{padding:"0 10px"},selector:g,onSelect:p}),a.setting&&o.setting.update({name:"dash-quality",tooltip:h,html:s,icon:'',width:200,selector:g,onSelect:p})}(o.dash),function(n){const i=n.getTracksFor("audio");if(!i||!i.length)return;const a=e.audio||{},l=a.auto||"Auto",s=a.title||"Audio",r=a.getName||(t=>t.lang||t.id),c=n.getCurrentTrackFor("audio")||i[0],u=c?r(c):l,d=t(i.map(t=>({html:r(t),value:t,default:c===t})),"html"),h=t=>(n.setCurrentTrack(t.value),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-audio",position:"right",html:u,style:{padding:"0 10px"},selector:d,onSelect:h}),a.setting&&o.setting.update({name:"dash-audio",tooltip:u,html:s,icon:'',width:200,selector:d,onSelect:h})}(o.dash)}return o.on("ready",a),o.on("restart",a),{name:"artplayerPluginDashControl",update:a}}}}); +!function(t,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"==typeof define&&define.amd?(t.artplayerPluginDashControl=e(),define(function(){return t.artplayerPluginDashControl})):(t="undefined"!==typeof globalThis?globalThis:t||self).artplayerPluginDashControl=e()}(this,function(){"use strict";function t(t,e){const o=new Map;return t.filter(t=>{const n=t[e];return void 0===n||!o.has(n)&&o.set(n,1)})}return function(e={}){return o=>{const{$video:n}=o.template,{errorHandle:i}=o.constructor.utils;function a(){i(o.dash.getVideoElement()===n,'Cannot find instance of DASH from "art.dash"'),function(n){const i=n.getRepresentationsByType("video");if(!i||!i.length)return;const a=e.quality||{},l=a.auto||"Auto",s=a.title||"Quality",r=a.getName||(t=>`${t.height}p`),c=n.getCurrentRepresentationForType("video"),u=c&&c.id,d=n.getSettings().streaming.abr.autoSwitchBitrate.video,h=!d&&c?r(c):l,g=t(i.map((t,e)=>({html:r(t),value:e,id:t.id,default:!d&&!!u&&t.id===u})),"html").sort((t,e)=>e.value-t.value);g.push({html:l,value:"auto",default:d});const p=t=>("auto"===t.value?n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!0}}}}):(n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!1}}}}),n.setRepresentationForTypeById("video",t.id)),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-quality",position:"right",html:h,style:{padding:"0 10px"},selector:g,onSelect:p}),a.setting&&o.setting.update({name:"dash-quality",tooltip:h,html:s,icon:'',width:200,selector:g,onSelect:p})}(o.dash),function(n){const i=n.getTracksFor("audio");if(!i||!i.length)return;const a=e.audio||{},l=a.auto||"Auto",s=a.title||"Audio",r=a.getName||(t=>t.lang||t.id),c=n.getCurrentTrackFor("audio")||i[0],u=c?r(c):l,d=t(i.map(t=>({html:r(t),value:t,default:c===t})),"html"),h=t=>(n.setCurrentTrack(t.value),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-audio",position:"right",html:u,style:{padding:"0 10px"},selector:d,onSelect:h}),a.setting&&o.setting.update({name:"dash-audio",tooltip:u,html:s,icon:'',width:200,selector:d,onSelect:h})}(o.dash)}return o.on("ready",a),o.on("restart",a),{name:"artplayerPluginDashControl",update:a}}}}); diff --git a/docs/compiled/artplayer-plugin-dash-control.legacy.js b/docs/compiled/artplayer-plugin-dash-control.legacy.js index 5f92ccef8..97ce60f03 100644 --- a/docs/compiled/artplayer-plugin-dash-control.legacy.js +++ b/docs/compiled/artplayer-plugin-dash-control.legacy.js @@ -4,4 +4,4 @@ * (c) 2017-2026 Harvey Zhao * Released under the MIT License. */ -!function(t,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"==typeof define&&define.amd?(t.artplayerPluginDashControl=e(),define(function(){return t.artplayerPluginDashControl})):(t="undefined"!==typeof globalThis?globalThis:t||self).artplayerPluginDashControl=e()}(this,function(){"use strict";function t(t,e){const o=new Map;return t.filter(t=>{const n=t[e];return void 0===n||!o.has(n)&&o.set(n,1)})}return function(e={}){return o=>{const{$video:n}=o.template,{errorHandle:i}=o.constructor.utils;function a(){i(o.dash.getVideoElement()===n,'Cannot find instance of DASH from "art.dash"'),function(n){const i=n.getRepresentationsByType("video");if(!i||!i.length)return;const a=e.quality||{},l=a.auto||"Auto",s=a.title||"Quality",r=a.getName||(t=>`${t.height}p`),c=n.getCurrentRepresentationForType("video"),u=c&&c.id,d=n.getSettings().streaming.abr.autoSwitchBitrate.video,h=!d&&c?r(c):l,g=t(i.map((t,e)=>({html:r(t),value:e,default:!d&&!!u&&t.id===u})),"html").sort((t,e)=>e.value-t.value);g.push({html:l,value:"auto",default:d});const p=t=>("auto"===t.value?n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!0}}}}):(n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!1}}}}),n.setRepresentationForTypeByIndex("video",t.value)),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-quality",position:"right",html:h,style:{padding:"0 10px"},selector:g,onSelect:p}),a.setting&&o.setting.update({name:"dash-quality",tooltip:h,html:s,icon:'',width:200,selector:g,onSelect:p})}(o.dash),function(n){const i=n.getTracksFor("audio");if(!i||!i.length)return;const a=e.audio||{},l=a.auto||"Auto",s=a.title||"Audio",r=a.getName||(t=>t.lang||t.id),c=n.getCurrentTrackFor("audio")||i[0],u=c?r(c):l,d=t(i.map(t=>({html:r(t),value:t,default:c===t})),"html"),h=t=>(n.setCurrentTrack(t.value),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-audio",position:"right",html:u,style:{padding:"0 10px"},selector:d,onSelect:h}),a.setting&&o.setting.update({name:"dash-audio",tooltip:u,html:s,icon:'',width:200,selector:d,onSelect:h})}(o.dash)}return o.on("ready",a),o.on("restart",a),{name:"artplayerPluginDashControl",update:a}}}}); +!function(t,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"==typeof define&&define.amd?(t.artplayerPluginDashControl=e(),define(function(){return t.artplayerPluginDashControl})):(t="undefined"!==typeof globalThis?globalThis:t||self).artplayerPluginDashControl=e()}(this,function(){"use strict";function t(t,e){const o=new Map;return t.filter(t=>{const n=t[e];return void 0===n||!o.has(n)&&o.set(n,1)})}return function(e={}){return o=>{const{$video:n}=o.template,{errorHandle:i}=o.constructor.utils;function a(){i(o.dash.getVideoElement()===n,'Cannot find instance of DASH from "art.dash"'),function(n){const i=n.getRepresentationsByType("video");if(!i||!i.length)return;const a=e.quality||{},l=a.auto||"Auto",s=a.title||"Quality",r=a.getName||(t=>`${t.height}p`),c=n.getCurrentRepresentationForType("video"),u=c&&c.id,d=n.getSettings().streaming.abr.autoSwitchBitrate.video,h=!d&&c?r(c):l,g=t(i.map((t,e)=>({html:r(t),value:e,id:t.id,default:!d&&!!u&&t.id===u})),"html").sort((t,e)=>e.value-t.value);g.push({html:l,value:"auto",default:d});const p=t=>("auto"===t.value?n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!0}}}}):(n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!1}}}}),n.setRepresentationForTypeById("video",t.id)),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-quality",position:"right",html:h,style:{padding:"0 10px"},selector:g,onSelect:p}),a.setting&&o.setting.update({name:"dash-quality",tooltip:h,html:s,icon:'',width:200,selector:g,onSelect:p})}(o.dash),function(n){const i=n.getTracksFor("audio");if(!i||!i.length)return;const a=e.audio||{},l=a.auto||"Auto",s=a.title||"Audio",r=a.getName||(t=>t.lang||t.id),c=n.getCurrentTrackFor("audio")||i[0],u=c?r(c):l,d=t(i.map(t=>({html:r(t),value:t,default:c===t})),"html"),h=t=>(n.setCurrentTrack(t.value),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-audio",position:"right",html:u,style:{padding:"0 10px"},selector:d,onSelect:h}),a.setting&&o.setting.update({name:"dash-audio",tooltip:u,html:s,icon:'',width:200,selector:d,onSelect:h})}(o.dash)}return o.on("ready",a),o.on("restart",a),{name:"artplayerPluginDashControl",update:a}}}}); diff --git a/docs/compiled/artplayer-plugin-dash-control.mjs b/docs/compiled/artplayer-plugin-dash-control.mjs index 8e5e16c16..4ce15acf9 100644 --- a/docs/compiled/artplayer-plugin-dash-control.mjs +++ b/docs/compiled/artplayer-plugin-dash-control.mjs @@ -37,6 +37,7 @@ function artplayerPluginDashControl(option = {}) { return { html: getName(item), value: index, + id: item.id, default: !currentAuto && !!currentId && item.id === currentId }; }), @@ -68,7 +69,7 @@ function artplayerPluginDashControl(option = {}) { } } }); - dash.setRepresentationForTypeByIndex("video", item.value); + dash.setRepresentationForTypeById("video", item.id); } art.notice.show = `${title}: ${item.html}`; if (config.control) diff --git a/docs/uncompiled/artplayer-plugin-dash-control/index.js b/docs/uncompiled/artplayer-plugin-dash-control/index.js index d99cb1f47..54f9a0b21 100644 --- a/docs/uncompiled/artplayer-plugin-dash-control/index.js +++ b/docs/uncompiled/artplayer-plugin-dash-control/index.js @@ -33,6 +33,7 @@ var artplayerPluginDashControl = (function() { return { html: getName(item), value: index, + id: item.id, default: !currentAuto && !!currentId && item.id === currentId }; }), @@ -64,7 +65,7 @@ var artplayerPluginDashControl = (function() { } } }); - dash.setRepresentationForTypeByIndex("video", item.value); + dash.setRepresentationForTypeById("video", item.id); } art.notice.show = `${title}: ${item.html}`; if (config.control) diff --git a/package.json b/package.json index 62a95f68a..535ded096 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "build:test": "node ./scripts/build-test.js", "trans:docs": "node ./scripts/trans-docs.js", "create:plugin": "node ./scripts/plugin/create.js", + "test:dash-control": "node --test test/dash-control.test.js", "dev": "npx cross-env NODE_ENV=development node ./scripts/dev.js", "build": "npx cross-env NODE_ENV=production node ./scripts/build.js", "lint": "npx eslint packages/*/{src,types,package.json} scripts/*.js test/* docs/assets/ts/* --fix", diff --git a/packages/artplayer-plugin-dash-control/README.md b/packages/artplayer-plugin-dash-control/README.md index 90b0e4e76..a7b9176bd 100644 --- a/packages/artplayer-plugin-dash-control/README.md +++ b/packages/artplayer-plugin-dash-control/README.md @@ -2,6 +2,8 @@ Dash control plugin for ArtPlayer +Requires dash.js 5.x. dash.js 4.x is not supported. + ## Demo [https://artplayer.org](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js%0A./uncompiled/artplayer-plugin-dash-control/index.js&example=dash.control) diff --git a/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.js b/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.js index 5f92ccef8..97ce60f03 100644 --- a/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.js +++ b/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.js @@ -4,4 +4,4 @@ * (c) 2017-2026 Harvey Zhao * Released under the MIT License. */ -!function(t,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"==typeof define&&define.amd?(t.artplayerPluginDashControl=e(),define(function(){return t.artplayerPluginDashControl})):(t="undefined"!==typeof globalThis?globalThis:t||self).artplayerPluginDashControl=e()}(this,function(){"use strict";function t(t,e){const o=new Map;return t.filter(t=>{const n=t[e];return void 0===n||!o.has(n)&&o.set(n,1)})}return function(e={}){return o=>{const{$video:n}=o.template,{errorHandle:i}=o.constructor.utils;function a(){i(o.dash.getVideoElement()===n,'Cannot find instance of DASH from "art.dash"'),function(n){const i=n.getRepresentationsByType("video");if(!i||!i.length)return;const a=e.quality||{},l=a.auto||"Auto",s=a.title||"Quality",r=a.getName||(t=>`${t.height}p`),c=n.getCurrentRepresentationForType("video"),u=c&&c.id,d=n.getSettings().streaming.abr.autoSwitchBitrate.video,h=!d&&c?r(c):l,g=t(i.map((t,e)=>({html:r(t),value:e,default:!d&&!!u&&t.id===u})),"html").sort((t,e)=>e.value-t.value);g.push({html:l,value:"auto",default:d});const p=t=>("auto"===t.value?n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!0}}}}):(n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!1}}}}),n.setRepresentationForTypeByIndex("video",t.value)),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-quality",position:"right",html:h,style:{padding:"0 10px"},selector:g,onSelect:p}),a.setting&&o.setting.update({name:"dash-quality",tooltip:h,html:s,icon:'',width:200,selector:g,onSelect:p})}(o.dash),function(n){const i=n.getTracksFor("audio");if(!i||!i.length)return;const a=e.audio||{},l=a.auto||"Auto",s=a.title||"Audio",r=a.getName||(t=>t.lang||t.id),c=n.getCurrentTrackFor("audio")||i[0],u=c?r(c):l,d=t(i.map(t=>({html:r(t),value:t,default:c===t})),"html"),h=t=>(n.setCurrentTrack(t.value),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-audio",position:"right",html:u,style:{padding:"0 10px"},selector:d,onSelect:h}),a.setting&&o.setting.update({name:"dash-audio",tooltip:u,html:s,icon:'',width:200,selector:d,onSelect:h})}(o.dash)}return o.on("ready",a),o.on("restart",a),{name:"artplayerPluginDashControl",update:a}}}}); +!function(t,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"==typeof define&&define.amd?(t.artplayerPluginDashControl=e(),define(function(){return t.artplayerPluginDashControl})):(t="undefined"!==typeof globalThis?globalThis:t||self).artplayerPluginDashControl=e()}(this,function(){"use strict";function t(t,e){const o=new Map;return t.filter(t=>{const n=t[e];return void 0===n||!o.has(n)&&o.set(n,1)})}return function(e={}){return o=>{const{$video:n}=o.template,{errorHandle:i}=o.constructor.utils;function a(){i(o.dash.getVideoElement()===n,'Cannot find instance of DASH from "art.dash"'),function(n){const i=n.getRepresentationsByType("video");if(!i||!i.length)return;const a=e.quality||{},l=a.auto||"Auto",s=a.title||"Quality",r=a.getName||(t=>`${t.height}p`),c=n.getCurrentRepresentationForType("video"),u=c&&c.id,d=n.getSettings().streaming.abr.autoSwitchBitrate.video,h=!d&&c?r(c):l,g=t(i.map((t,e)=>({html:r(t),value:e,id:t.id,default:!d&&!!u&&t.id===u})),"html").sort((t,e)=>e.value-t.value);g.push({html:l,value:"auto",default:d});const p=t=>("auto"===t.value?n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!0}}}}):(n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!1}}}}),n.setRepresentationForTypeById("video",t.id)),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-quality",position:"right",html:h,style:{padding:"0 10px"},selector:g,onSelect:p}),a.setting&&o.setting.update({name:"dash-quality",tooltip:h,html:s,icon:'',width:200,selector:g,onSelect:p})}(o.dash),function(n){const i=n.getTracksFor("audio");if(!i||!i.length)return;const a=e.audio||{},l=a.auto||"Auto",s=a.title||"Audio",r=a.getName||(t=>t.lang||t.id),c=n.getCurrentTrackFor("audio")||i[0],u=c?r(c):l,d=t(i.map(t=>({html:r(t),value:t,default:c===t})),"html"),h=t=>(n.setCurrentTrack(t.value),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-audio",position:"right",html:u,style:{padding:"0 10px"},selector:d,onSelect:h}),a.setting&&o.setting.update({name:"dash-audio",tooltip:u,html:s,icon:'',width:200,selector:d,onSelect:h})}(o.dash)}return o.on("ready",a),o.on("restart",a),{name:"artplayerPluginDashControl",update:a}}}}); diff --git a/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.legacy.js b/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.legacy.js index 5f92ccef8..97ce60f03 100644 --- a/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.legacy.js +++ b/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.legacy.js @@ -4,4 +4,4 @@ * (c) 2017-2026 Harvey Zhao * Released under the MIT License. */ -!function(t,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"==typeof define&&define.amd?(t.artplayerPluginDashControl=e(),define(function(){return t.artplayerPluginDashControl})):(t="undefined"!==typeof globalThis?globalThis:t||self).artplayerPluginDashControl=e()}(this,function(){"use strict";function t(t,e){const o=new Map;return t.filter(t=>{const n=t[e];return void 0===n||!o.has(n)&&o.set(n,1)})}return function(e={}){return o=>{const{$video:n}=o.template,{errorHandle:i}=o.constructor.utils;function a(){i(o.dash.getVideoElement()===n,'Cannot find instance of DASH from "art.dash"'),function(n){const i=n.getRepresentationsByType("video");if(!i||!i.length)return;const a=e.quality||{},l=a.auto||"Auto",s=a.title||"Quality",r=a.getName||(t=>`${t.height}p`),c=n.getCurrentRepresentationForType("video"),u=c&&c.id,d=n.getSettings().streaming.abr.autoSwitchBitrate.video,h=!d&&c?r(c):l,g=t(i.map((t,e)=>({html:r(t),value:e,default:!d&&!!u&&t.id===u})),"html").sort((t,e)=>e.value-t.value);g.push({html:l,value:"auto",default:d});const p=t=>("auto"===t.value?n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!0}}}}):(n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!1}}}}),n.setRepresentationForTypeByIndex("video",t.value)),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-quality",position:"right",html:h,style:{padding:"0 10px"},selector:g,onSelect:p}),a.setting&&o.setting.update({name:"dash-quality",tooltip:h,html:s,icon:'',width:200,selector:g,onSelect:p})}(o.dash),function(n){const i=n.getTracksFor("audio");if(!i||!i.length)return;const a=e.audio||{},l=a.auto||"Auto",s=a.title||"Audio",r=a.getName||(t=>t.lang||t.id),c=n.getCurrentTrackFor("audio")||i[0],u=c?r(c):l,d=t(i.map(t=>({html:r(t),value:t,default:c===t})),"html"),h=t=>(n.setCurrentTrack(t.value),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-audio",position:"right",html:u,style:{padding:"0 10px"},selector:d,onSelect:h}),a.setting&&o.setting.update({name:"dash-audio",tooltip:u,html:s,icon:'',width:200,selector:d,onSelect:h})}(o.dash)}return o.on("ready",a),o.on("restart",a),{name:"artplayerPluginDashControl",update:a}}}}); +!function(t,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"==typeof define&&define.amd?(t.artplayerPluginDashControl=e(),define(function(){return t.artplayerPluginDashControl})):(t="undefined"!==typeof globalThis?globalThis:t||self).artplayerPluginDashControl=e()}(this,function(){"use strict";function t(t,e){const o=new Map;return t.filter(t=>{const n=t[e];return void 0===n||!o.has(n)&&o.set(n,1)})}return function(e={}){return o=>{const{$video:n}=o.template,{errorHandle:i}=o.constructor.utils;function a(){i(o.dash.getVideoElement()===n,'Cannot find instance of DASH from "art.dash"'),function(n){const i=n.getRepresentationsByType("video");if(!i||!i.length)return;const a=e.quality||{},l=a.auto||"Auto",s=a.title||"Quality",r=a.getName||(t=>`${t.height}p`),c=n.getCurrentRepresentationForType("video"),u=c&&c.id,d=n.getSettings().streaming.abr.autoSwitchBitrate.video,h=!d&&c?r(c):l,g=t(i.map((t,e)=>({html:r(t),value:e,id:t.id,default:!d&&!!u&&t.id===u})),"html").sort((t,e)=>e.value-t.value);g.push({html:l,value:"auto",default:d});const p=t=>("auto"===t.value?n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!0}}}}):(n.updateSettings({streaming:{abr:{autoSwitchBitrate:{video:!1}}}}),n.setRepresentationForTypeById("video",t.id)),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-quality",position:"right",html:h,style:{padding:"0 10px"},selector:g,onSelect:p}),a.setting&&o.setting.update({name:"dash-quality",tooltip:h,html:s,icon:'',width:200,selector:g,onSelect:p})}(o.dash),function(n){const i=n.getTracksFor("audio");if(!i||!i.length)return;const a=e.audio||{},l=a.auto||"Auto",s=a.title||"Audio",r=a.getName||(t=>t.lang||t.id),c=n.getCurrentTrackFor("audio")||i[0],u=c?r(c):l,d=t(i.map(t=>({html:r(t),value:t,default:c===t})),"html"),h=t=>(n.setCurrentTrack(t.value),o.notice.show=`${s}: ${t.html}`,a.control&&o.controls.check(t),a.setting&&o.setting.check(t),t.html);a.control&&o.controls.update({name:"dash-audio",position:"right",html:u,style:{padding:"0 10px"},selector:d,onSelect:h}),a.setting&&o.setting.update({name:"dash-audio",tooltip:u,html:s,icon:'',width:200,selector:d,onSelect:h})}(o.dash)}return o.on("ready",a),o.on("restart",a),{name:"artplayerPluginDashControl",update:a}}}}); diff --git a/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.mjs b/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.mjs index 8e5e16c16..4ce15acf9 100644 --- a/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.mjs +++ b/packages/artplayer-plugin-dash-control/dist/artplayer-plugin-dash-control.mjs @@ -37,6 +37,7 @@ function artplayerPluginDashControl(option = {}) { return { html: getName(item), value: index, + id: item.id, default: !currentAuto && !!currentId && item.id === currentId }; }), @@ -68,7 +69,7 @@ function artplayerPluginDashControl(option = {}) { } } }); - dash.setRepresentationForTypeByIndex("video", item.value); + dash.setRepresentationForTypeById("video", item.id); } art.notice.show = `${title}: ${item.html}`; if (config.control) diff --git a/packages/artplayer-plugin-dash-control/src/index.js b/packages/artplayer-plugin-dash-control/src/index.js index 73ac79360..04de6a6d5 100644 --- a/packages/artplayer-plugin-dash-control/src/index.js +++ b/packages/artplayer-plugin-dash-control/src/index.js @@ -36,6 +36,7 @@ export default function artplayerPluginDashControl(option = {}) { return { html: getName(item), value: index, + id: item.id, default: !currentAuto && !!currentId && item.id === currentId, } }), @@ -70,7 +71,7 @@ export default function artplayerPluginDashControl(option = {}) { }, }, }) - dash.setRepresentationForTypeByIndex('video', item.value) + dash.setRepresentationForTypeById('video', item.id) } art.notice.show = `${title}: ${item.html}` if (config.control) diff --git a/test/dash-control.test.js b/test/dash-control.test.js new file mode 100644 index 000000000..2c0df066b --- /dev/null +++ b/test/dash-control.test.js @@ -0,0 +1,117 @@ +import assert from 'node:assert/strict' +import { Buffer } from 'node:buffer' +// eslint-disable-next-line test/no-import-node-test -- Use the built-in runner without adding a test framework. +import { mock, test } from 'node:test' +import { fileURLToPath } from 'node:url' +import { build } from 'vite' +import { getViteBuildConfig } from '../scripts/utils.js' + +const config = getViteBuildConfig({ + entry: fileURLToPath(new URL('../packages/artplayer-plugin-dash-control/src/index.js', import.meta.url)), + name: 'artplayerPluginDashControl', + format: 'es', + fileName: 'index.js', + minify: false, +}) +config.build.write = false +const result = await build(config) +const outputs = (Array.isArray(result) ? result : [result]).flatMap(item => item.output) +const { default: dashControl } = await import( + `data:text/javascript;base64,${Buffer.from(outputs.find(item => item.type === 'chunk').code).toString('base64')}`, +) + +function createPlayer() { + const representations = [ + { id: 'low', height: 288, bitrateInKbit: 395 }, + { id: 'medium', height: 360, bitrateInKbit: 689 }, + { id: 'target', height: 480, bitrateInKbit: 885 }, + { id: 'high', height: 720, bitrateInKbit: 1474 }, + { id: 'highest', height: 1080, bitrateInKbit: 1967 }, + ] + const settings = { streaming: { abr: { minBitrate: { video: -1 }, autoSwitchBitrate: { video: true } } } } + const $video = {} + let current = representations[2] + const dash = { + getVideoElement: () => $video, + getSettings: () => settings, + updateSettings: ({ streaming: { abr } }) => Object.assign(settings.streaming.abr, abr), + getRepresentationsByType: () => representations.filter(item => item.bitrateInKbit >= settings.streaming.abr.minBitrate.video), + getCurrentRepresentationForType: () => current, + setRepresentationForTypeById: mock.fn((type, id) => { + current = representations.find(item => item.id === id) + }), + setRepresentationForTypeByIndex: mock.fn((type, index) => { + current = dash.getRepresentationsByType(type)[index] + }), + getTracksFor: () => [], + } + const controls = new Map() + const setting = new Map() + const art = { + dash, + template: { $video }, + constructor: { utils: { errorHandle: assert.ok } }, + notice: { show: '' }, + on: mock.fn(), + controls: { update: option => controls.set(option.name, option), check: mock.fn() }, + setting: { update: option => setting.set(option.name, option), check: mock.fn() }, + } + const plugin = dashControl({ quality: { control: true, setting: true } })(art) + plugin.update() + return { art, dash, plugin, representations, controls, setting } +} + +for (const surface of ['controls', 'setting']) { + test(`${surface}: bitrate filtering does not change the selected representation`, () => { + const player = createPlayer() + const { dash } = player + const option = player[surface].get('dash-quality') + const target = option.selector.find(item => item.html === '480p') + dash.updateSettings({ streaming: { abr: { minBitrate: { video: 500 } } } }) + assert.equal(dash.getRepresentationsByType('video')[target.value].height, 720) + + option.onSelect(target) + + assert.equal(dash.getCurrentRepresentationForType('video').height, 480) + assert.deepEqual(dash.setRepresentationForTypeById.mock.calls[0].arguments, ['video', 'target']) + assert.equal(dash.setRepresentationForTypeByIndex.mock.callCount(), 0) + assert.equal(dash.getSettings().streaming.abr.autoSwitchBitrate.video, false) + assert.equal(player.art.notice.show, 'Quality: 480p') + assert.equal(player.art.controls.check.mock.calls[0].arguments[0], target) + assert.equal(player.art.setting.check.mock.calls[0].arguments[0], target) + }) +} + +test('quality ordering, automatic selection and return to Auto are preserved', () => { + const { controls, dash } = createPlayer() + const option = controls.get('dash-quality') + assert.deepEqual(option.selector.map(item => item.html), ['1080p', '720p', '480p', '360p', '288p', 'Auto']) + assert.deepEqual(option.selector.filter(item => item.default).map(item => item.value), ['auto']) + option.onSelect(option.selector[0]) + assert.equal(dash.getCurrentRepresentationForType('video').height, 1080) + option.onSelect(option.selector.at(-1)) + assert.equal(dash.getSettings().streaming.abr.autoSwitchBitrate.video, true) + assert.equal(dash.setRepresentationForTypeById.mock.callCount(), 1) +}) + +test('updating a filtered list preserves the manual selection by ID', () => { + const { controls, dash, plugin } = createPlayer() + const option = controls.get('dash-quality') + option.onSelect(option.selector.find(item => item.html === '480p')) + dash.updateSettings({ streaming: { abr: { minBitrate: { video: 500 } } } }) + plugin.update() + const updated = controls.get('dash-quality') + assert.equal(updated.html, '480p') + assert.deepEqual(updated.selector.filter(item => item.default).map(item => item.id), ['target']) +}) + +test('a representation whose ID is auto remains a manual quality option', () => { + const { controls, dash, plugin, representations } = createPlayer() + representations[2].id = 'auto' + plugin.update() + const option = controls.get('dash-quality') + option.onSelect(option.selector.find(item => item.html === '480p')) + assert.equal(dash.getCurrentRepresentationForType('video').height, 480) + assert.equal(dash.getSettings().streaming.abr.autoSwitchBitrate.video, false) + assert.deepEqual(dash.setRepresentationForTypeById.mock.calls[0].arguments, ['video', 'auto']) +})