diff --git a/CHANGELOG.md b/CHANGELOG.md index 885a64a20..41201918a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -265,7 +265,7 @@ const option = { - Add `art.type` property to get/set video type - Add `art.video` property to get video element -- Add `artplayer-plugin-iframe` plugin to control player inside iframe +- Add `artplayer-tool-iframe` plugin to control player inside iframe - Add `artplayer-plugin-hls-quality` plugin for adding Hls quality list - Add `Artplayer.PLAYBACK_RATE` for default playback rates `[0.5, 0.75, 1, 1.25, 1.5, 2]` - Add `Artplayer.ASPECT_RATIO` for default ratios `['default','4:3','16:9']` diff --git a/README.md b/README.md index 6510eb39d..06d44df34 100644 --- a/README.md +++ b/README.md @@ -103,7 +103,7 @@ let art = new Artplayer({ | Name | Describe | State | | :--- | :--- | :--- | | [artplayer-plugin-danmuku](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku) | Danmuku (bullet comment) system |
| -| [artplayer-plugin-iframe](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&example=iframe) | Control player via iframe |
| +| [artplayer-tool-iframe](https://artplayer.org/?libs=./uncompiled/artplayer-tool-iframe/index.js&example=iframe) | Control player via iframe |
| | [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-vtt-thumbnail](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-vtt-thumbnail/index.js&example=vtt.thumbnail) | VTT thumbnail preview |
| diff --git a/docs/assets/example/iframe.js b/docs/assets/example/iframe.js index 165369436..4843e6040 100644 --- a/docs/assets/example/iframe.js +++ b/docs/assets/example/iframe.js @@ -1,5 +1,5 @@ -// npm i artplayer-plugin-iframe -// import ArtplayerPluginIframe from 'artplayer-plugin-iframe'; +// npm i artplayer-tool-iframe +// import ArtplayerToolIframe from 'artplayer-tool-iframe'; const $iframe = document.createElement('iframe') $iframe.allowFullscreen = true @@ -10,7 +10,7 @@ const $container = document.querySelector('.artplayer-app') $container.innerHTML = '' $container.appendChild($iframe) -const iframe = new ArtplayerPluginIframe({ +const iframe = new ArtplayerToolIframe({ iframe: $iframe, url: '/iframe.html', }) @@ -39,7 +39,7 @@ iframe.commit(() => { }) art.on('fullscreenWeb', (state) => { - ArtplayerPluginIframe.postMessage({ + ArtplayerToolIframe.postMessage({ type: 'fullscreenWeb', data: state, }) diff --git a/docs/assets/js/common.js b/docs/assets/js/common.js index 55486716f..075a4515d 100644 --- a/docs/assets/js/common.js +++ b/docs/assets/js/common.js @@ -63,7 +63,6 @@ './assets/ts/artplayer-plugin-dash-control.d.ts', './assets/ts/artplayer-plugin-document-pip.d.ts', './assets/ts/artplayer-plugin-hls-control.d.ts', - './assets/ts/artplayer-plugin-iframe.d.ts', './assets/ts/artplayer-plugin-jassub.d.ts', './assets/ts/artplayer-plugin-multiple-subtitles.d.ts', './assets/ts/artplayer-plugin-vast.d.ts', @@ -71,6 +70,7 @@ './assets/ts/artplayer-plugin-websr.d.ts', './assets/ts/artplayer-proxy-canvas.d.ts', './assets/ts/artplayer-proxy-mediabunny.d.ts', + './assets/ts/artplayer-tool-iframe.d.ts', './assets/ts/artplayer.d.ts', ] diff --git a/docs/assets/ts/artplayer-plugin-iframe.d.ts b/docs/assets/ts/artplayer-tool-iframe.d.ts similarity index 84% rename from docs/assets/ts/artplayer-plugin-iframe.d.ts rename to docs/assets/ts/artplayer-tool-iframe.d.ts index 88cfd5bad..8484624a0 100644 --- a/docs/assets/ts/artplayer-plugin-iframe.d.ts +++ b/docs/assets/ts/artplayer-tool-iframe.d.ts @@ -4,7 +4,7 @@ interface Message { id?: number } -declare class ArtplayerPluginIframe { +declare class ArtplayerToolIframe { constructor(option: { iframe: HTMLIFrameElement, url: string }) static iframe: boolean @@ -26,7 +26,7 @@ declare class ArtplayerPluginIframe { destroy(): void } -export default ArtplayerPluginIframe +export default ArtplayerToolIframe -export = artplayerPluginIframe -export as namespace artplayerPluginIframe; +export = artplayerToolIframe +export as namespace artplayerToolIframe; diff --git a/docs/compiled/artplayer-plugin-iframe.js b/docs/compiled/artplayer-plugin-iframe.js index 15c068c20..e980f0a60 100644 --- a/docs/compiled/artplayer-plugin-iframe.js +++ b/docs/compiled/artplayer-plugin-iframe.js @@ -1,7 +1,7 @@ /*! - * artplayer-plugin-iframe.js v1.0.1 + * artplayer-tool-iframe.js v1.0.1 * Github: https://github.com/zhw2590582/ArtPlayer * (c) 2017-2026 Harvey Zhao * Released under the MIT License. */ -!function(e,t){"object"===typeof exports&&"undefined"!==typeof module?module.exports=t():"function"==typeof define&&define.amd?(t.artplayerPluginIframe=t(),define(function(){return t.artplayerPluginIframe})):(e="undefined"!==typeof globalThis?globalThis:e||self).artplayerPluginIframe=t()}(this,function(){"use strict";class e{static get iframe(){return window.top!==window}static postMessage({type:t,data:s,id:i=0}){if(!e.iframe)throw new Error('The "ArtplayerPluginIframe.postMessage" method can only be used in iframe');window.parent.postMessage({type:t,data:s,id:i},"*")}static async onMessage(t){if(!e.iframe)throw new Error('The "ArtplayerPluginIframe.onMessage" method can only be used in iframe');const{type:s,data:i,id:n}=t.data;if("commit"===s)try{if(i.match(/\bresolve\((.*?)\)/)){const t=`return new Promise(function(resolve){\n${i}\n})`,s=await new Function(t)();e.postMessage({type:"response",data:s,id:n})}else{const t=new Function(i)();e.postMessage({type:"response",data:t,id:n})}}catch(o){throw e.postMessage({type:"error",data:o.message,id:n}),o}}static inject(){if(!e.iframe)throw new Error('The "ArtplayerPluginIframe.inject" method can only be used in iframe');e.postMessage({type:"inject"}),window.addEventListener("message",e.onMessage)}constructor({iframe:e,url:t}){if(e instanceof HTMLIFrameElement===!1)throw new TypeError('"option.iframe" needs to be a HTMLIFrameElement');if("string"!==typeof t)throw new TypeError('"option.url" needs to be a string');this.url=t,this.$iframe=e,this.promises={},this.injected=!1,this.destroyed=!1,this.messageCallback=()=>null,this.onMessage=this.onMessage.bind(this),window.addEventListener("message",this.onMessage),this.$iframe.src=this.url}onMessage(e){const{type:t,data:s,id:i}=e.data;if("inject"===t)this.injected=!0;this.promises[i]&&("error"===t?this.promises[i].reject(new Error(s)):this.promises[i].resove(s),delete this.promises[i]),this.messageCallback&&this.messageCallback({type:t,data:s})}postMessage({type:e,data:t}){return new Promise((s,i)=>{(function n(){if(this.destroyed)i(new Error("The instance has been destroyed"));else if(this.injected){const n=Date.now();this.promises[n]={resove:s,reject:i},this.$iframe.contentWindow.postMessage({type:e,data:t,id:n},"*")}else setTimeout(n.bind(this),200)}).call(this)})}commit(e){if("function"!==typeof e)throw new TypeError('"commit.callback" needs to be a function');const t=e.toString(),s=t.substring(t.indexOf("{")+1,t.lastIndexOf("}"));return this.postMessage({type:"commit",data:s})}message(e){if("function"!==typeof e)throw new TypeError('"message.callback" needs to be a function');this.messageCallback=e}destroy(){this.destroyed=!0,window.removeEventListener("message",this.onMessage)}}return e}); +!function(e,t){"object"===typeof exports&&"undefined"!==typeof module?module.exports=t():"function"==typeof define&&define.amd?(t.artplayerPluginIframe=t(),define(function(){return t.artplayerPluginIframe})):(e="undefined"!==typeof globalThis?globalThis:e||self).artplayerPluginIframe=t()}(this,function(){"use strict";class e{static get iframe(){return window.top!==window}static postMessage({type:t,data:s,id:i=0}){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.postMessage" method can only be used in iframe');window.parent.postMessage({type:t,data:s,id:i},"*")}static async onMessage(t){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.onMessage" method can only be used in iframe');const{type:s,data:i,id:n}=t.data;if("commit"===s)try{if(i.match(/\bresolve\((.*?)\)/)){const t=`return new Promise(function(resolve){\n${i}\n})`,s=await new Function(t)();e.postMessage({type:"response",data:s,id:n})}else{const t=new Function(i)();e.postMessage({type:"response",data:t,id:n})}}catch(o){throw e.postMessage({type:"error",data:o.message,id:n}),o}}static inject(){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.inject" method can only be used in iframe');e.postMessage({type:"inject"}),window.addEventListener("message",e.onMessage)}constructor({iframe:e,url:t}){if(e instanceof HTMLIFrameElement===!1)throw new TypeError('"option.iframe" needs to be a HTMLIFrameElement');if("string"!==typeof t)throw new TypeError('"option.url" needs to be a string');this.url=t,this.$iframe=e,this.promises={},this.injected=!1,this.destroyed=!1,this.messageCallback=()=>null,this.onMessage=this.onMessage.bind(this),window.addEventListener("message",this.onMessage),this.$iframe.src=this.url}onMessage(e){const{type:t,data:s,id:i}=e.data;if("inject"===t)this.injected=!0;this.promises[i]&&("error"===t?this.promises[i].reject(new Error(s)):this.promises[i].resove(s),delete this.promises[i]),this.messageCallback&&this.messageCallback({type:t,data:s})}postMessage({type:e,data:t}){return new Promise((s,i)=>{(function n(){if(this.destroyed)i(new Error("The instance has been destroyed"));else if(this.injected){const n=Date.now();this.promises[n]={resove:s,reject:i},this.$iframe.contentWindow.postMessage({type:e,data:t,id:n},"*")}else setTimeout(n.bind(this),200)}).call(this)})}commit(e){if("function"!==typeof e)throw new TypeError('"commit.callback" needs to be a function');const t=e.toString(),s=t.substring(t.indexOf("{")+1,t.lastIndexOf("}"));return this.postMessage({type:"commit",data:s})}message(e){if("function"!==typeof e)throw new TypeError('"message.callback" needs to be a function');this.messageCallback=e}destroy(){this.destroyed=!0,window.removeEventListener("message",this.onMessage)}}return e}); diff --git a/docs/compiled/artplayer-plugin-iframe.legacy.js b/docs/compiled/artplayer-plugin-iframe.legacy.js index 291f1bb65..461ba7225 100644 --- a/docs/compiled/artplayer-plugin-iframe.legacy.js +++ b/docs/compiled/artplayer-plugin-iframe.legacy.js @@ -1,7 +1,7 @@ /*! - * artplayer-plugin-iframe.js v1.0.1 + * artplayer-tool-iframe.js v1.0.1 * Github: https://github.com/zhw2590582/ArtPlayer * (c) 2017-2026 Harvey Zhao * Released under the MIT License. */ -!function(e,t){"object"===typeof exports&&"undefined"!==typeof module?module.exports=t():"function"==typeof define&&define.amd?(t.artplayerPluginIframe=t(),define(function(){return t.artplayerPluginIframe})):(e="undefined"!==typeof globalThis?globalThis:e||self).artplayerPluginIframe=t()}(this,function(){"use strict";class e{static get iframe(){return window.top!==window}static postMessage({type:t,data:s,id:i=0}){if(!e.iframe)throw new Error('The "ArtplayerPluginIframe.postMessage" method can only be used in iframe');window.parent.postMessage({type:t,data:s,id:i},"*")}static onMessage(t){return s=this,i=null,n=function*(){if(!e.iframe)throw new Error('The "ArtplayerPluginIframe.onMessage" method can only be used in iframe');const{type:s,data:i,id:n}=t.data;if("commit"===s)try{if(i.match(/\bresolve\((.*?)\)/)){const t=`return new Promise(function(resolve){\n${i}\n})`,s=yield new Function(t)();e.postMessage({type:"response",data:s,id:n})}else{const t=new Function(i)();e.postMessage({type:"response",data:t,id:n})}}catch(r){throw e.postMessage({type:"error",data:r.message,id:n}),r}},new Promise((e,t)=>{var r=e=>{try{a(n.next(e))}catch(s){t(s)}},o=e=>{try{a(n.throw(e))}catch(s){t(s)}},a=t=>t.done?e(t.value):Promise.resolve(t.value).then(r,o);a((n=n.apply(s,i)).next())});var s,i,n}static inject(){if(!e.iframe)throw new Error('The "ArtplayerPluginIframe.inject" method can only be used in iframe');e.postMessage({type:"inject"}),window.addEventListener("message",e.onMessage)}constructor({iframe:e,url:t}){if(e instanceof HTMLIFrameElement===!1)throw new TypeError('"option.iframe" needs to be a HTMLIFrameElement');if("string"!==typeof t)throw new TypeError('"option.url" needs to be a string');this.url=t,this.$iframe=e,this.promises={},this.injected=!1,this.destroyed=!1,this.messageCallback=()=>null,this.onMessage=this.onMessage.bind(this),window.addEventListener("message",this.onMessage),this.$iframe.src=this.url}onMessage(e){const{type:t,data:s,id:i}=e.data;if("inject"===t)this.injected=!0;this.promises[i]&&("error"===t?this.promises[i].reject(new Error(s)):this.promises[i].resove(s),delete this.promises[i]),this.messageCallback&&this.messageCallback({type:t,data:s})}postMessage({type:e,data:t}){return new Promise((s,i)=>{(function n(){if(this.destroyed)i(new Error("The instance has been destroyed"));else if(this.injected){const n=Date.now();this.promises[n]={resove:s,reject:i},this.$iframe.contentWindow.postMessage({type:e,data:t,id:n},"*")}else setTimeout(n.bind(this),200)}).call(this)})}commit(e){if("function"!==typeof e)throw new TypeError('"commit.callback" needs to be a function');const t=e.toString(),s=t.substring(t.indexOf("{")+1,t.lastIndexOf("}"));return this.postMessage({type:"commit",data:s})}message(e){if("function"!==typeof e)throw new TypeError('"message.callback" needs to be a function');this.messageCallback=e}destroy(){this.destroyed=!0,window.removeEventListener("message",this.onMessage)}}return e}); +!function(e,t){"object"===typeof exports&&"undefined"!==typeof module?module.exports=t():"function"==typeof define&&define.amd?(t.artplayerPluginIframe=t(),define(function(){return t.artplayerPluginIframe})):(e="undefined"!==typeof globalThis?globalThis:e||self).artplayerPluginIframe=t()}(this,function(){"use strict";class e{static get iframe(){return window.top!==window}static postMessage({type:t,data:s,id:i=0}){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.postMessage" method can only be used in iframe');window.parent.postMessage({type:t,data:s,id:i},"*")}static onMessage(t){return s=this,i=null,n=function*(){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.onMessage" method can only be used in iframe');const{type:s,data:i,id:n}=t.data;if("commit"===s)try{if(i.match(/\bresolve\((.*?)\)/)){const t=`return new Promise(function(resolve){\n${i}\n})`,s=yield new Function(t)();e.postMessage({type:"response",data:s,id:n})}else{const t=new Function(i)();e.postMessage({type:"response",data:t,id:n})}}catch(r){throw e.postMessage({type:"error",data:r.message,id:n}),r}},new Promise((e,t)=>{var r=e=>{try{a(n.next(e))}catch(s){t(s)}},o=e=>{try{a(n.throw(e))}catch(s){t(s)}},a=t=>t.done?e(t.value):Promise.resolve(t.value).then(r,o);a((n=n.apply(s,i)).next())});var s,i,n}static inject(){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.inject" method can only be used in iframe');e.postMessage({type:"inject"}),window.addEventListener("message",e.onMessage)}constructor({iframe:e,url:t}){if(e instanceof HTMLIFrameElement===!1)throw new TypeError('"option.iframe" needs to be a HTMLIFrameElement');if("string"!==typeof t)throw new TypeError('"option.url" needs to be a string');this.url=t,this.$iframe=e,this.promises={},this.injected=!1,this.destroyed=!1,this.messageCallback=()=>null,this.onMessage=this.onMessage.bind(this),window.addEventListener("message",this.onMessage),this.$iframe.src=this.url}onMessage(e){const{type:t,data:s,id:i}=e.data;if("inject"===t)this.injected=!0;this.promises[i]&&("error"===t?this.promises[i].reject(new Error(s)):this.promises[i].resove(s),delete this.promises[i]),this.messageCallback&&this.messageCallback({type:t,data:s})}postMessage({type:e,data:t}){return new Promise((s,i)=>{(function n(){if(this.destroyed)i(new Error("The instance has been destroyed"));else if(this.injected){const n=Date.now();this.promises[n]={resove:s,reject:i},this.$iframe.contentWindow.postMessage({type:e,data:t,id:n},"*")}else setTimeout(n.bind(this),200)}).call(this)})}commit(e){if("function"!==typeof e)throw new TypeError('"commit.callback" needs to be a function');const t=e.toString(),s=t.substring(t.indexOf("{")+1,t.lastIndexOf("}"));return this.postMessage({type:"commit",data:s})}message(e){if("function"!==typeof e)throw new TypeError('"message.callback" needs to be a function');this.messageCallback=e}destroy(){this.destroyed=!0,window.removeEventListener("message",this.onMessage)}}return e}); diff --git a/docs/compiled/artplayer-plugin-iframe.mjs b/docs/compiled/artplayer-plugin-iframe.mjs index 4ee041fbd..6e0677a20 100644 --- a/docs/compiled/artplayer-plugin-iframe.mjs +++ b/docs/compiled/artplayer-plugin-iframe.mjs @@ -1,7 +1,7 @@ /*! - * artplayer-plugin-iframe.js v1.0.1 + * artplayer-tool-iframe.js v1.0.1 * Github: https://github.com/zhw2590582/ArtPlayer * (c) 2017-2026 Harvey Zhao * Released under the MIT License. */ -class e{static get iframe(){return window.top!==window}static postMessage({type:t,data:s,id:i=0}){if(!e.iframe)throw new Error('The "ArtplayerPluginIframe.postMessage" method can only be used in iframe');window.parent.postMessage({type:t,data:s,id:i},"*")}static async onMessage(t){if(!e.iframe)throw new Error('The "ArtplayerPluginIframe.onMessage" method can only be used in iframe');const{type:s,data:i,id:a}=t.data;if("commit"===s)try{if(i.match(/\bresolve\((.*?)\)/)){const t=`return new Promise(function(resolve){\n${i}\n})`,s=await new Function(t)();e.postMessage({type:"response",data:s,id:a})}else{const t=new Function(i)();e.postMessage({type:"response",data:t,id:a})}}catch(n){throw e.postMessage({type:"error",data:n.message,id:a}),n}}static inject(){if(!e.iframe)throw new Error('The "ArtplayerPluginIframe.inject" method can only be used in iframe');e.postMessage({type:"inject"}),window.addEventListener("message",e.onMessage)}constructor({iframe:e,url:t}){if(e instanceof HTMLIFrameElement===!1)throw new TypeError('"option.iframe" needs to be a HTMLIFrameElement');if("string"!==typeof t)throw new TypeError('"option.url" needs to be a string');this.url=t,this.$iframe=e,this.promises={},this.injected=!1,this.destroyed=!1,this.messageCallback=()=>null,this.onMessage=this.onMessage.bind(this),window.addEventListener("message",this.onMessage),this.$iframe.src=this.url}onMessage(e){const{type:t,data:s,id:i}=e.data;if("inject"===t)this.injected=!0;this.promises[i]&&("error"===t?this.promises[i].reject(new Error(s)):this.promises[i].resove(s),delete this.promises[i]),this.messageCallback&&this.messageCallback({type:t,data:s})}postMessage({type:e,data:t}){return new Promise((s,i)=>{(function a(){if(this.destroyed)i(new Error("The instance has been destroyed"));else if(this.injected){const a=Date.now();this.promises[a]={resove:s,reject:i},this.$iframe.contentWindow.postMessage({type:e,data:t,id:a},"*")}else setTimeout(a.bind(this),200)}).call(this)})}commit(e){if("function"!==typeof e)throw new TypeError('"commit.callback" needs to be a function');const t=e.toString(),s=t.substring(t.indexOf("{")+1,t.lastIndexOf("}"));return this.postMessage({type:"commit",data:s})}message(e){if("function"!==typeof e)throw new TypeError('"message.callback" needs to be a function');this.messageCallback=e}destroy(){this.destroyed=!0,window.removeEventListener("message",this.onMessage)}}export{e as default}; +class e{static get iframe(){return window.top!==window}static postMessage({type:t,data:s,id:i=0}){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.postMessage" method can only be used in iframe');window.parent.postMessage({type:t,data:s,id:i},"*")}static async onMessage(t){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.onMessage" method can only be used in iframe');const{type:s,data:i,id:a}=t.data;if("commit"===s)try{if(i.match(/\bresolve\((.*?)\)/)){const t=`return new Promise(function(resolve){\n${i}\n})`,s=await new Function(t)();e.postMessage({type:"response",data:s,id:a})}else{const t=new Function(i)();e.postMessage({type:"response",data:t,id:a})}}catch(n){throw e.postMessage({type:"error",data:n.message,id:a}),n}}static inject(){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.inject" method can only be used in iframe');e.postMessage({type:"inject"}),window.addEventListener("message",e.onMessage)}constructor({iframe:e,url:t}){if(e instanceof HTMLIFrameElement===!1)throw new TypeError('"option.iframe" needs to be a HTMLIFrameElement');if("string"!==typeof t)throw new TypeError('"option.url" needs to be a string');this.url=t,this.$iframe=e,this.promises={},this.injected=!1,this.destroyed=!1,this.messageCallback=()=>null,this.onMessage=this.onMessage.bind(this),window.addEventListener("message",this.onMessage),this.$iframe.src=this.url}onMessage(e){const{type:t,data:s,id:i}=e.data;if("inject"===t)this.injected=!0;this.promises[i]&&("error"===t?this.promises[i].reject(new Error(s)):this.promises[i].resove(s),delete this.promises[i]),this.messageCallback&&this.messageCallback({type:t,data:s})}postMessage({type:e,data:t}){return new Promise((s,i)=>{(function a(){if(this.destroyed)i(new Error("The instance has been destroyed"));else if(this.injected){const a=Date.now();this.promises[a]={resove:s,reject:i},this.$iframe.contentWindow.postMessage({type:e,data:t,id:a},"*")}else setTimeout(a.bind(this),200)}).call(this)})}commit(e){if("function"!==typeof e)throw new TypeError('"commit.callback" needs to be a function');const t=e.toString(),s=t.substring(t.indexOf("{")+1,t.lastIndexOf("}"));return this.postMessage({type:"commit",data:s})}message(e){if("function"!==typeof e)throw new TypeError('"message.callback" needs to be a function');this.messageCallback=e}destroy(){this.destroyed=!0,window.removeEventListener("message",this.onMessage)}}export{e as default}; diff --git a/docs/compiled/artplayer-tool-iframe.js b/docs/compiled/artplayer-tool-iframe.js new file mode 100644 index 000000000..646b56b94 --- /dev/null +++ b/docs/compiled/artplayer-tool-iframe.js @@ -0,0 +1,7 @@ +/*! + * artplayer-tool-iframe.js v1.0.1 + * Github: https://github.com/zhw2590582/ArtPlayer + * (c) 2017-2026 Harvey Zhao + * Released under the MIT License. + */ +!function(e,t){"object"===typeof exports&&"undefined"!==typeof module?module.exports=t():"function"==typeof define&&define.amd?(t.ArtplayerToolIframe=t(),define(function(){return t.ArtplayerToolIframe})):(e="undefined"!==typeof globalThis?globalThis:e||self).ArtplayerToolIframe=t()}(this,function(){"use strict";class e{static get iframe(){return window.top!==window}static postMessage({type:t,data:s,id:i=0}){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.postMessage" method can only be used in iframe');window.parent.postMessage({type:t,data:s,id:i},"*")}static async onMessage(t){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.onMessage" method can only be used in iframe');const{type:s,data:i,id:o}=t.data;if("commit"===s)try{if(i.match(/\bresolve\((.*?)\)/)){const t=`return new Promise(function(resolve){\n${i}\n})`,s=await new Function(t)();e.postMessage({type:"response",data:s,id:o})}else{const t=new Function(i)();e.postMessage({type:"response",data:t,id:o})}}catch(n){throw e.postMessage({type:"error",data:n.message,id:o}),n}}static inject(){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.inject" method can only be used in iframe');e.postMessage({type:"inject"}),window.addEventListener("message",e.onMessage)}constructor({iframe:e,url:t}){if(e instanceof HTMLIFrameElement===!1)throw new TypeError('"option.iframe" needs to be a HTMLIFrameElement');if("string"!==typeof t)throw new TypeError('"option.url" needs to be a string');this.url=t,this.$iframe=e,this.promises={},this.injected=!1,this.destroyed=!1,this.messageCallback=()=>null,this.onMessage=this.onMessage.bind(this),window.addEventListener("message",this.onMessage),this.$iframe.src=this.url}onMessage(e){const{type:t,data:s,id:i}=e.data;if("inject"===t)this.injected=!0;this.promises[i]&&("error"===t?this.promises[i].reject(new Error(s)):this.promises[i].resove(s),delete this.promises[i]),this.messageCallback&&this.messageCallback({type:t,data:s})}postMessage({type:e,data:t}){return new Promise((s,i)=>{(function o(){if(this.destroyed)i(new Error("The instance has been destroyed"));else if(this.injected){const o=Date.now();this.promises[o]={resove:s,reject:i},this.$iframe.contentWindow.postMessage({type:e,data:t,id:o},"*")}else setTimeout(o.bind(this),200)}).call(this)})}commit(e){if("function"!==typeof e)throw new TypeError('"commit.callback" needs to be a function');const t=e.toString(),s=t.substring(t.indexOf("{")+1,t.lastIndexOf("}"));return this.postMessage({type:"commit",data:s})}message(e){if("function"!==typeof e)throw new TypeError('"message.callback" needs to be a function');this.messageCallback=e}destroy(){this.destroyed=!0,window.removeEventListener("message",this.onMessage)}}return e}); diff --git a/docs/compiled/artplayer-tool-iframe.legacy.js b/docs/compiled/artplayer-tool-iframe.legacy.js new file mode 100644 index 000000000..d3c550a40 --- /dev/null +++ b/docs/compiled/artplayer-tool-iframe.legacy.js @@ -0,0 +1,7 @@ +/*! + * artplayer-tool-iframe.js v1.0.1 + * Github: https://github.com/zhw2590582/ArtPlayer + * (c) 2017-2026 Harvey Zhao + * Released under the MIT License. + */ +!function(e,t){"object"===typeof exports&&"undefined"!==typeof module?module.exports=t():"function"==typeof define&&define.amd?(t.ArtplayerToolIframe=t(),define(function(){return t.ArtplayerToolIframe})):(e="undefined"!==typeof globalThis?globalThis:e||self).ArtplayerToolIframe=t()}(this,function(){"use strict";class e{static get iframe(){return window.top!==window}static postMessage({type:t,data:s,id:o=0}){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.postMessage" method can only be used in iframe');window.parent.postMessage({type:t,data:s,id:o},"*")}static onMessage(t){return s=this,o=null,i=function*(){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.onMessage" method can only be used in iframe');const{type:s,data:o,id:i}=t.data;if("commit"===s)try{if(o.match(/\bresolve\((.*?)\)/)){const t=`return new Promise(function(resolve){\n${o}\n})`,s=yield new Function(t)();e.postMessage({type:"response",data:s,id:i})}else{const t=new Function(o)();e.postMessage({type:"response",data:t,id:i})}}catch(n){throw e.postMessage({type:"error",data:n.message,id:i}),n}},new Promise((e,t)=>{var n=e=>{try{a(i.next(e))}catch(s){t(s)}},r=e=>{try{a(i.throw(e))}catch(s){t(s)}},a=t=>t.done?e(t.value):Promise.resolve(t.value).then(n,r);a((i=i.apply(s,o)).next())});var s,o,i}static inject(){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.inject" method can only be used in iframe');e.postMessage({type:"inject"}),window.addEventListener("message",e.onMessage)}constructor({iframe:e,url:t}){if(e instanceof HTMLIFrameElement===!1)throw new TypeError('"option.iframe" needs to be a HTMLIFrameElement');if("string"!==typeof t)throw new TypeError('"option.url" needs to be a string');this.url=t,this.$iframe=e,this.promises={},this.injected=!1,this.destroyed=!1,this.messageCallback=()=>null,this.onMessage=this.onMessage.bind(this),window.addEventListener("message",this.onMessage),this.$iframe.src=this.url}onMessage(e){const{type:t,data:s,id:o}=e.data;if("inject"===t)this.injected=!0;this.promises[o]&&("error"===t?this.promises[o].reject(new Error(s)):this.promises[o].resove(s),delete this.promises[o]),this.messageCallback&&this.messageCallback({type:t,data:s})}postMessage({type:e,data:t}){return new Promise((s,o)=>{(function i(){if(this.destroyed)o(new Error("The instance has been destroyed"));else if(this.injected){const i=Date.now();this.promises[i]={resove:s,reject:o},this.$iframe.contentWindow.postMessage({type:e,data:t,id:i},"*")}else setTimeout(i.bind(this),200)}).call(this)})}commit(e){if("function"!==typeof e)throw new TypeError('"commit.callback" needs to be a function');const t=e.toString(),s=t.substring(t.indexOf("{")+1,t.lastIndexOf("}"));return this.postMessage({type:"commit",data:s})}message(e){if("function"!==typeof e)throw new TypeError('"message.callback" needs to be a function');this.messageCallback=e}destroy(){this.destroyed=!0,window.removeEventListener("message",this.onMessage)}}return e}); diff --git a/docs/compiled/artplayer-tool-iframe.mjs b/docs/compiled/artplayer-tool-iframe.mjs new file mode 100644 index 000000000..2793a2630 --- /dev/null +++ b/docs/compiled/artplayer-tool-iframe.mjs @@ -0,0 +1,7 @@ +/*! + * artplayer-tool-iframe.js v1.0.1 + * Github: https://github.com/zhw2590582/ArtPlayer + * (c) 2017-2026 Harvey Zhao + * Released under the MIT License. + */ +class e{static get iframe(){return window.top!==window}static postMessage({type:t,data:s,id:i=0}){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.postMessage" method can only be used in iframe');window.parent.postMessage({type:t,data:s,id:i},"*")}static async onMessage(t){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.onMessage" method can only be used in iframe');const{type:s,data:i,id:a}=t.data;if("commit"===s)try{if(i.match(/\bresolve\((.*?)\)/)){const t=`return new Promise(function(resolve){\n${i}\n})`,s=await new Function(t)();e.postMessage({type:"response",data:s,id:a})}else{const t=new Function(i)();e.postMessage({type:"response",data:t,id:a})}}catch(o){throw e.postMessage({type:"error",data:o.message,id:a}),o}}static inject(){if(!e.iframe)throw new Error('The "ArtplayerToolIframe.inject" method can only be used in iframe');e.postMessage({type:"inject"}),window.addEventListener("message",e.onMessage)}constructor({iframe:e,url:t}){if(e instanceof HTMLIFrameElement===!1)throw new TypeError('"option.iframe" needs to be a HTMLIFrameElement');if("string"!==typeof t)throw new TypeError('"option.url" needs to be a string');this.url=t,this.$iframe=e,this.promises={},this.injected=!1,this.destroyed=!1,this.messageCallback=()=>null,this.onMessage=this.onMessage.bind(this),window.addEventListener("message",this.onMessage),this.$iframe.src=this.url}onMessage(e){const{type:t,data:s,id:i}=e.data;if("inject"===t)this.injected=!0;this.promises[i]&&("error"===t?this.promises[i].reject(new Error(s)):this.promises[i].resove(s),delete this.promises[i]),this.messageCallback&&this.messageCallback({type:t,data:s})}postMessage({type:e,data:t}){return new Promise((s,i)=>{(function a(){if(this.destroyed)i(new Error("The instance has been destroyed"));else if(this.injected){const a=Date.now();this.promises[a]={resove:s,reject:i},this.$iframe.contentWindow.postMessage({type:e,data:t,id:a},"*")}else setTimeout(a.bind(this),200)}).call(this)})}commit(e){if("function"!==typeof e)throw new TypeError('"commit.callback" needs to be a function');const t=e.toString(),s=t.substring(t.indexOf("{")+1,t.lastIndexOf("}"));return this.postMessage({type:"commit",data:s})}message(e){if("function"!==typeof e)throw new TypeError('"message.callback" needs to be a function');this.messageCallback=e}destroy(){this.destroyed=!0,window.removeEventListener("message",this.onMessage)}}export{e as default}; diff --git a/docs/document/404.html b/docs/document/404.html index 3b7770e7d..7337b1712 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 38b5139cb..be5595f88 100644 --- a/docs/document/advanced/built-in.html +++ b/docs/document/advanced/built-in.html @@ -23,7 +23,7 @@ -
Artplayer.js

Appearance

高级属性 ​

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

option ​

播放器的选项

▶ Run Code
js
var art = new Artplayer({
+    
Artplayer.js
Appearance
高级属性 ​
这里的 高级属性 是指挂载在 实例 的 二级属性，比较少用
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 f8c0f9bcc..97119d9a5 100644
--- a/docs/document/advanced/class.html
+++ b/docs/document/advanced/class.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
静态属性 ​
这里的 静态属性 是指挂载在 构造函数 的 一级属性，非常少使用
instances ​
返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性
▶ Run Code
js
console.info([...Artplayer.instances]);
+    
Artplayer.js
Appearance
静态属性 ​
这里的 静态属性 是指挂载在 构造函数 的 一级属性，非常少使用
instances ​
返回全部播放器实例的数组，假如你想同时管理多个播放器的时候，可以用到该属性
▶ Run Code
js
console.info([...Artplayer.instances]);
 
 var art = new Artplayer({
     container: '.artplayer-app',
@@ -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 03556f697..0faacee1d 100644
--- a/docs/document/advanced/event.html
+++ b/docs/document/advanced/event.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
实例事件 ​
播放器的事件分为两种，一种视频的 原生事件 (前缀 video:)，另外一种是 自定义事件
监听事件：
▶ Run Code
js
var art = new Artplayer({
+    
Artplayer.js
Appearance
实例事件 ​
播放器的事件分为两种，一种视频的 原生事件 (前缀 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 8e7763d8e..b0a3198da 100644
--- a/docs/document/advanced/global.html
+++ b/docs/document/advanced/global.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
全局属性 ​
这里的 全局属性 也是指挂载在 构造函数 的 一级属性，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到
DEBUG ​
是否开始 debug 模式，可以打印出视频全部的内置事件，默认关闭
▶ Run Code
js
Artplayer.DEBUG = true;
+    
Artplayer.js
Appearance
全局属性 ​
这里的 全局属性 也是指挂载在 构造函数 的 一级属性，属性名字全部都是大写的形式，未来容易发生变动，基本上用不到
DEBUG ​
是否开始 debug 模式，可以打印出视频全部的内置事件，默认关闭
▶ Run Code
js
Artplayer.DEBUG = true;
 
 var art = new Artplayer({
     container: '.artplayer-app',
@@ -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 833fa0d9b..c7d68eba0 100644
--- a/docs/document/advanced/plugin.html
+++ b/docs/document/advanced/plugin.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
编写插件 ​
但你已经知道播放器的属性, 方法和事件后，再编写插件是非常简单的事
可以在实例化的时候加载插件的函数
▶ Run Code
js
function myPlugin(art) {
+    
Artplayer.js
Appearance
编写插件 ​
但你已经知道播放器的属性, 方法和事件后，再编写插件是非常简单的事
可以在实例化的时候加载插件的函数
▶ 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 da1dab3ee..ef9558e00 100644
--- a/docs/document/advanced/property.html
+++ b/docs/document/advanced/property.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
实例属性 ​
这里的 实例属性 是指挂载在 实例 的 一级属性，比较常用
play ​
  • Type: Function
播放视频
▶ Run Code
js
var art = new Artplayer({
+    
Artplayer.js
Appearance
实例属性 ​
这里的 实例属性 是指挂载在 实例 的 一级属性，比较常用
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/component/contextmenu.html b/docs/document/component/contextmenu.html
index 9b1d85e01..f401bc896 100644
--- a/docs/document/component/contextmenu.html
+++ b/docs/document/component/contextmenu.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
右键菜单 ​
配置 ​
属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
创建 ​
▶ Run Code
js
var art = new Artplayer({
+    
Artplayer.js
Appearance
右键菜单 ​
配置 ​
属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
创建 ​
▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     contextmenu: [
@@ -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 19086c923..e4efdc278 100644
--- a/docs/document/component/controls.html
+++ b/docs/document/component/controls.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
控制器 ​
配置 ​
属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
positionStringleft 和 right 控制控制器出现的左右位置
selectorArray选择列表的对象数组
onSelectFunction选择列表的元素被点击时触发的函数
创建 ​
▶ Run Code
js
var art = new Artplayer({
+    
Artplayer.js
Appearance
控制器 ​
配置 ​
属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
positionStringleft 和 right 控制控制器出现的左右位置
selectorArray选择列表的对象数组
onSelectFunction选择列表的元素被点击时触发的函数
创建 ​
▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     controls: [
@@ -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 495e340f9..73a6db878 100644
--- a/docs/document/component/layers.html
+++ b/docs/document/component/layers.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
业务层 ​
配置 ​
属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
创建 ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
+    
Artplayer.js
Appearance
业务层 ​
配置 ​
属性类型描述
disableBoolean是否禁用组件
nameString组件唯一名称，用于标记类名
indexNumber组件索引，用于显示的优先级
htmlString, Element组件的 DOM 元素
styleObject组件样式对象
clickFunction组件点击事件
mountedFunction组件挂载后触发
tooltipString组件的提示文本
创建 ​
▶ Run Code
js
var img = '/assets/sample/layer.png';
 var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
@@ -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 4498bdb3b..979efa294 100644
--- a/docs/document/component/setting.html
+++ b/docs/document/component/setting.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
设置面板 ​
内置 ​
须先打开设置面板，然后自带四个内置项：flip, playbackRate, aspectRatio, subtitleOffset
▶ Run Code
js
var art = new Artplayer({
+    
Artplayer.js
Appearance
设置面板 ​
内置 ​
须先打开设置面板，然后自带四个内置项：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 8a86835de..91c828bec 100644
--- a/docs/document/en/advanced/built-in.html
+++ b/docs/document/en/advanced/built-in.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
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({
+    
Artplayer.js
Appearance
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 e7350b96b..48429ad87 100644
--- a/docs/document/en/advanced/class.html
+++ b/docs/document/en/advanced/class.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
Static Properties ​
Here, Static Properties refer to the top-level properties mounted on the constructor function, which are very rarely used.
instances ​
Returns an array of all player instances. This property can be useful when you need to manage multiple player instances simultaneously.
▶ Run Code
js
console.info([...Artplayer.instances]);
+    
Artplayer.js
Appearance
Static Properties ​
Here, Static Properties refer to the top-level properties mounted on the constructor function, which are very rarely used.
instances ​
Returns an array of all player instances. This property can be useful when you need to manage multiple player instances 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 time 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 function for 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 utility function for type detection.
▶ 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 for 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 ba88de401..09c802d20 100644
--- a/docs/document/en/advanced/event.html
+++ b/docs/document/en/advanced/event.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
Instance Events ​
Player events are divided into two types: native events (prefixed with video:) and custom events.
Listen to an event:
▶ Run Code
js
var art = new Artplayer({
+    
Artplayer.js
Appearance
Instance Events ​
Player events are divided into two types: native events (prefixed with video:) and custom events.
Listen to an event:
▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
 });
@@ -412,7 +412,7 @@
 art.on('keydown', (event) => {
     console.log(event.code);
 });
video:canplay ​
The browser can start playing the media, but estimates there isn't enough data to play through to the end without having to stop for further buffering
video:canplaythrough ​
The browser estimates it can play the media through to the end without stopping to buffer content
video:complete ​
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 point
video:error ​
An error occurred while fetching media data, or the resource type is not a supported media format
video:loadeddata ​
The first frame of the media has finished loading
video:loadedmetadata ​
Metadata has been loaded
video:pause ​
Playback has been paused
video:play ​
Playback has begun
video:playing ​
Playback is ready to start after having been paused or delayed due to lack of data
video:progress ​
Periodically triggered while the browser is loading 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 attribute has been updated
video:volumechange ​
The volume has changed
video:waiting ​
Playback has stopped due to 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 24768eea6..90518c431 100644
--- a/docs/document/en/advanced/global.html
+++ b/docs/document/en/advanced/global.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
Global Properties ​
These global properties refer to the top-level properties mounted on the constructor. The property names are all in uppercase. They are subject to change in the future and are generally not used.
DEBUG ​
Whether to enable debug mode, which can print all built-in events of the video. Default is off.
▶ Run Code
js
Artplayer.DEBUG = true;
+    
Artplayer.js
Appearance
Global Properties ​
These global properties refer to the top-level properties mounted on the constructor. The property names are all in uppercase. They are subject to change in the future and are generally not used.
DEBUG ​
Whether to enable debug mode, which can print all built-in events of the video. Default is off.
▶ Run Code
js
Artplayer.DEBUG = true;
 
 var art = new Artplayer({
     container: '.artplayer-app',
@@ -266,7 +266,7 @@
 
 // Only destroys the UI, does not actively clear 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 53a8549c5..4fced4e90 100644
--- a/docs/document/en/advanced/plugin.html
+++ b/docs/document/en/advanced/plugin.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
Writing Plugins ​
Once you are familiar with the player's properties, methods, and events, writing plugins becomes very straightforward.
You can load plugin functions during instantiation:
▶ Run Code
js
function myPlugin(art) {
+    
Artplayer.js
Appearance
Writing Plugins ​
Once you are familiar with the player's properties, methods, and events, writing plugins becomes very straightforward.
You can load plugin functions 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 84581024d..00239fbc9 100644
--- a/docs/document/en/advanced/property.html
+++ b/docs/document/en/advanced/property.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
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({
+    
Artplayer.js
Appearance
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,
@@ -487,7 +487,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 da550d0a3..d24deb974 100644
--- a/docs/document/en/component/contextmenu.html
+++ b/docs/document/en/component/contextmenu.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
Context Menu ​
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 art = new Artplayer({
+    
Artplayer.js
Appearance
Context Menu ​
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 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 c0ad8f289..532ff88c3 100644
--- a/docs/document/en/component/controls.html
+++ b/docs/document/en/component/controls.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
Controls ​
Configuration ​
PropertyTypeDescription
disableBooleanWhether to disable the control
nameStringUnique control name for CSS class identification
indexNumberControl index for display priority
htmlString, ElementControl's DOM element
styleObjectControl style object
clickFunctionControl click event handler
mountedFunctionTriggered after control is mounted
tooltipStringControl tooltip text
positionStringleft or right - controls display position
selectorArrayArray of selector list objects
onSelectFunctionFunction triggered when selector item is clicked
Creation ​
▶ Run Code
js
var art = new Artplayer({
+    
Artplayer.js
Appearance
Controls ​
Configuration ​
PropertyTypeDescription
disableBooleanWhether to disable the control
nameStringUnique control name for CSS class identification
indexNumberControl index for display priority
htmlString, ElementControl's DOM element
styleObjectControl style object
clickFunctionControl click event handler
mountedFunctionTriggered after control is mounted
tooltipStringControl tooltip text
positionStringleft or right - controls display position
selectorArrayArray of selector list objects
onSelectFunctionFunction triggered when selector 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 e26ea5bcb..e6102a63e 100644
--- a/docs/document/en/component/layers.html
+++ b/docs/document/en/component/layers.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
Layer ​
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';
+    
Artplayer.js
Appearance
Layer ​
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 8ffa289be..565dbe01a 100644
--- a/docs/document/en/component/setting.html
+++ b/docs/document/en/component/setting.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
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({
+    
Artplayer.js
Appearance
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,
@@ -260,7 +260,7 @@
         });
     }, 3000);
 });

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/document/en/index.html b/docs/document/en/index.html
index 5abdf9368..297e64ade 100644
--- a/docs/document/en/index.html
+++ b/docs/document/en/index.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
Installation & Usage ​
Installation ​
bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js
Usage ​
html
<html>
+    
Artplayer.js
Appearance
Installation & Usage ​
Installation ​
bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js
Usage ​
html
<html>
     <head>
         <title>ArtPlayer Demo</title>
         <meta charset="UTF-8" />
@@ -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 c5bac1210..66aa8cb01 100644
--- a/docs/document/en/start/i18n.html
+++ b/docs/document/en/start/i18n.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
Language Settings ​
DANGER
Due to the increasing number of bundled multilingual resources, starting from version 5.1.0, the core artplayer.js code will only include Simplified Chinese and English. Other languages are no longer bundled by default and must be imported manually as needed.
WARNING
When a language cannot be matched, English will be displayed by default. For i18n implementation 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({
+    
Artplayer.js
Appearance
Language Settings ​
DANGER
Due to the increasing number of bundled multilingual resources, starting from version 5.1.0, the core artplayer.js code will only include Simplified Chinese and English. Other languages are no longer bundled by default and must be imported manually as needed.
WARNING
When a language cannot be matched, English will be displayed by default. For i18n implementation 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'
@@ -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 a331560ba..ec29b0dc3 100644
--- a/docs/document/en/start/option.html
+++ b/docs/document/en/start/option.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
Basic Options ​
container ​
  • Type: String, Element
  • Default: #artplayer
The DOM container where the player is mounted.
▶ Run Code
js
var art = new Artplayer({
+    
Artplayer.js
Appearance
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',
@@ -475,7 +475,7 @@
     url: '/assets/sample/video.mp4',
     proxy: () => document.createElement('video')
 });

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/document/index.html b/docs/document/index.html
index 19a40f950..3682768e8 100644
--- a/docs/document/index.html
+++ b/docs/document/index.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
安装使用 ​
安装 ​
bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js
使用 ​
html
<html>
+    
Artplayer.js
Appearance
安装使用 ​
安装 ​
bash
npm install artplayer
bash
yarn add artplayer
bash
pnpm add artplayer
html
<script src="path/to/artplayer.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js
bash
https://unpkg.com/artplayer/dist/artplayer.js
使用 ​
html
<html>
     <head>
         <title>ArtPlayer Demo</title>
         <meta charset="UTF-8" />
@@ -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 b65afa6be..9975d7ac0 100644
--- a/docs/document/plugin/danmuku.html
+++ b/docs/document/plugin/danmuku.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
弹幕库 ​
演示 ​
👉 查看完整演示
安装 ​
bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
弹幕结构 ​
每一个弹幕是一个对象，多个弹幕组成的数组就是弹幕库，通常只需要text就可以发送一个弹幕，其余都是非必要参数
js
{
+    
Artplayer.js
Appearance
弹幕库 ​
演示 ​
👉 查看完整演示
安装 ​
bash
npm install artplayer-plugin-danmuku
bash
yarn add artplayer-plugin-danmuku
bash
pnpm add artplayer-plugin-danmuku
html
<script src="path/to/artplayer-plugin-danmuku.js"></script>
CDN ​
bash
https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
bash
https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
弹幕结构 ​
每一个弹幕是一个对象，多个弹幕组成的数组就是弹幕库，通常只需要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 358c5a0a1..3f49cecc0 100644
--- a/docs/document/start/i18n.html
+++ b/docs/document/start/i18n.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
语言设置 ​
DANGER
鉴于捆绑的多国语言越来越多, 从 5.1.0 版本开始, artplayer.js 核心代码除了包含 简体中文 和 英文 外, 不再捆绑其它多国语言, 需要自行导入需要的语言。
WARNING
当无法匹配到语言时, 会默认显示英文, i18n 写法参考: artplayer/types/i18n.d.ts
默认语言 ​
默认语言有: en, zh-cn, 无需手动导入
js
var art = new Artplayer({
+    
Artplayer.js
Appearance
语言设置 ​
DANGER
鉴于捆绑的多国语言越来越多, 从 5.1.0 版本开始, artplayer.js 核心代码除了包含 简体中文 和 英文 外, 不再捆绑其它多国语言, 需要自行导入需要的语言。
WARNING
当无法匹配到语言时, 会默认显示英文, i18n 写法参考: artplayer/types/i18n.d.ts
默认语言 ​
默认语言有: en, zh-cn, 无需手动导入
js
var art = new Artplayer({
     container: '.artplayer-app',
     url: '/assets/sample/video.mp4',
     lang: 'zh-cn', // or 'en'
@@ -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 92c674c96..0a7e22962 100644
--- a/docs/document/start/option.html
+++ b/docs/document/start/option.html
@@ -23,7 +23,7 @@
     
   
   
-    
Artplayer.js
Appearance
基础选项 ​
container ​
  • Type: String, Element
  • Default: #artplayer
播放器挂载的 DOM 容器
▶ Run Code
js
var art = new Artplayer({
+    
Artplayer.js
Appearance
基础选项 ​
container ​
  • Type: String, Element
  • Default: #artplayer
播放器挂载的 DOM 容器
▶ Run Code
js
var art = new Artplayer({
     container: '.artplayer-app', 
     // container: document.querySelector('.artplayer-app'),
     url: '/assets/sample/video.mp4',
@@ -415,7 +415,7 @@
     url: '/assets/sample/video.mp4',
     proxy: () => document.createElement('video')
 });

-    
+    
     
   
 
\ No newline at end of file
diff --git a/docs/iframe.html b/docs/iframe.html
index d48e92445..74cfd7346 100644
--- a/docs/iframe.html
+++ b/docs/iframe.html
@@ -5,7 +5,7 @@
     
     
     
-    artplayer-plugin-iframe.js
+    artplayer-tool-iframe.js