diff --git a/docs/uncompiled/artplayer-plugin-control/index.js b/docs/uncompiled/artplayer-plugin-control/index.js
index b86b78fe4..b9933e253 100644
--- a/docs/uncompiled/artplayer-plugin-control/index.js
+++ b/docs/uncompiled/artplayer-plugin-control/index.js
@@ -148,7 +148,7 @@ parcelHelpers.defineInteropFlag(exports);
var _styleLess = require("bundle-text:./style.less");
var _styleLessDefault = parcelHelpers.interopDefault(_styleLess);
function checkVersion(art) {
- const { version , utils: { errorHandle } } = art.constructor;
+ const { version , utils: { errorHandle } , } = art.constructor;
const arr = version.split(".").map(Number);
const major = arr[0];
const minor = arr[1] / 100;
@@ -157,7 +157,7 @@ function checkVersion(art) {
function artplayerPluginControl() {
return (art)=>{
checkVersion(art);
- const { template: { $bottom , $player } , constructor: { utils: { append , secondToTime , addClass , removeClass , hasClass } } } = art;
+ const { template: { $bottom , $player } , constructor: { utils: { append , secondToTime , addClass , removeClass , hasClass } , } , } = art;
const className = "artplayer-plugin-control";
addClass($player, className);
const $current = append($bottom, ``);
@@ -186,7 +186,7 @@ function artplayerPluginControl() {
exports.default = artplayerPluginControl;
artplayerPluginControl.env = "development";
artplayerPluginControl.version = "1.0.0";
-artplayerPluginControl.build = "2022-12-31 21:46:11";
+artplayerPluginControl.build = "2022-12-31 22:28:14";
if (typeof document !== "undefined") {
if (!document.getElementById("artplayer-plugin-control")) {
const $style = document.createElement("style");
diff --git a/docs/uncompiled/artplayer-plugin-control/index.js.map b/docs/uncompiled/artplayer-plugin-control/index.js.map
index 45a8d0778..66a11b8b9 100644
--- a/docs/uncompiled/artplayer-plugin-control/index.js.map
+++ b/docs/uncompiled/artplayer-plugin-control/index.js.map
@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;;AAEA,SAAS,aAAa,GAAG,EAAE;IACvB,MAAM,EACF,QAAO,EACP,OAAO,EAAE,YAAW,EAAE,CAAA,EACzB,GAAG,IAAI,WAAW;IACnB,MAAM,MAAM,QAAQ,KAAK,CAAC,KAAK,GAAG,CAAC;IACnC,MAAM,QAAQ,GAAG,CAAC,EAAE;IACpB,MAAM,QAAQ,GAAG,CAAC,EAAE,GAAG;IACvB,YACI,QAAQ,SAAS,MACjB,CAAC,aAAa,EAAE,QAAQ,8CAA8C,EAAE,uBAAuB,OAAO,CAAC,gDAAgD,CAAC;AAEhK;AAEe,SAAS,yBAAyB;IAC7C,OAAO,CAAC,MAAQ;QACZ,aAAa;QAEb,MAAM,EACF,UAAU,EAAE,QAAO,EAAE,QAAO,EAAE,CAAA,EAC9B,aAAa,EACT,OAAO,EAAE,OAAM,EAAE,aAAY,EAAE,SAAQ,EAAE,YAAW,EAAE,SAAQ,EAAE,CAAA,EACnE,CAAA,EACJ,GAAG;QAEJ,MAAM,YAAY;QAClB,SAAS,SAAS;QAElB,MAAM,WAAW,OAAO,SAAS,CAAC,uCAAuC,CAAC;QAC1E,MAAM,YAAY,OAAO,SAAS,CAAC,wCAAwC,CAAC;QAE5E,MAAM,SAAS;YAAC;YAAwB;YAAoB;SAAiB;QAE7E,IAAK,IAAI,QAAQ,GAAG,QAAQ,OAAO,MAAM,EAAE,QACvC,IAAI,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,IAAM;YACxB,SAAS,SAAS,GAAG,aAAa,IAAI,WAAW;YACjD,UAAU,SAAS,GAAG,aAAa,IAAI,QAAQ;QACnD;QAGJ,OAAO;YACH,MAAM;YACN,IAAI,UAAS;gBACT,OAAO,SAAS,SAAS;YAC7B;YACA,IAAI,QAAO,MAAO;gBACd,IAAI,OACA,SAAS,SAAS;qBAElB,YAAY,SAAS;YAE7B;QACJ;IACJ;AACJ;kBAxCwB;AA0CxB,uBAAuB,GAAG;AAC1B,uBAAuB,OAAO;AAC9B,uBAAuB,KAAK;AAE5B,IAAI,OAAO,aAAa,aACpB;IAAA,IAAI,CAAC,SAAS,cAAc,CAAC,6BAA6B;QACtD,MAAM,SAAS,SAAS,aAAa,CAAC;QACtC,OAAO,EAAE,GAAG;QACZ,OAAO,WAAW,GAAG,CAAA,GAAA,yBAAK,AAAD;QACzB,SAAS,IAAI,CAAC,WAAW,CAAC;IAC9B,CAAC;AAAD,CACH;AAED,IAAI,OAAO,WAAW,aAClB,MAAM,CAAC,yBAAyB,GAAG;;;ACxEvC,OAAO,OAAO,GAAG;;;ACAjB,QAAQ,cAAc,GAAG,SAAU,CAAC,EAAE;IACpC,OAAO,KAAK,EAAE,UAAU,GAAG,IAAI;QAAC,SAAS;IAAC,CAAC;AAC7C;AAEA,QAAQ,iBAAiB,GAAG,SAAU,CAAC,EAAE;IACvC,OAAO,cAAc,CAAC,GAAG,cAAc;QAAC,OAAO,IAAI;IAAA;AACrD;AAEA,QAAQ,SAAS,GAAG,SAAU,MAAM,EAAE,IAAI,EAAE;IAC1C,OAAO,IAAI,CAAC,QAAQ,OAAO,CAAC,SAAU,GAAG,EAAE;QACzC,IAAI,QAAQ,aAAa,QAAQ,gBAAgB,KAAK,cAAc,CAAC,MACnE;QAGF,OAAO,cAAc,CAAC,MAAM,KAAK;YAC/B,YAAY,IAAI;YAChB,KAAK,WAAY;gBACf,OAAO,MAAM,CAAC,IAAI;YACpB;QACF;IACF;IAEA,OAAO;AACT;AAEA,QAAQ,MAAM,GAAG,SAAU,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE;IAC9C,OAAO,cAAc,CAAC,MAAM,UAAU;QACpC,YAAY,IAAI;QAChB,KAAK;IACP;AACF","sources":["packages/artplayer-plugin-control/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-3b06b37497366e99.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["import style from 'bundle-text:./style.less';\n\nfunction checkVersion(art) {\n const {\n version,\n utils: { errorHandle },\n } = art.constructor;\n const arr = version.split('.').map(Number);\n const major = arr[0];\n const minor = arr[1] / 100;\n errorHandle(\n major + minor >= 4.06,\n `Artplayer.js@${version} is not compatible the artplayerPluginControl@${artplayerPluginControl.version}. Please update it to version Artplayer.js@4.6.x`,\n );\n}\n\nexport default function artplayerPluginControl() {\n return (art) => {\n checkVersion(art);\n\n const {\n template: { $bottom, $player },\n constructor: {\n utils: { append, secondToTime, addClass, removeClass, hasClass },\n },\n } = art;\n\n const className = 'artplayer-plugin-control';\n addClass($player, className);\n\n const $current = append($bottom, ``);\n const $duration = append($bottom, ``);\n\n const events = ['video:loadedmetadata', 'video:timeupdate', 'video:progress'];\n\n for (let index = 0; index < events.length; index++) {\n art.on(events[index], () => {\n $current.innerText = secondToTime(art.currentTime);\n $duration.innerText = secondToTime(art.duration);\n });\n }\n\n return {\n name: 'artplayerPluginControl',\n get enable() {\n return hasClass($player, className);\n },\n set enable(state) {\n if (state) {\n addClass($player, className);\n } else {\n removeClass($player, className);\n }\n },\n };\n };\n}\n\nartplayerPluginControl.env = process.env.NODE_ENV;\nartplayerPluginControl.version = process.env.APP_VER;\nartplayerPluginControl.build = process.env.BUILD_DATE;\n\nif (typeof document !== 'undefined') {\n if (!document.getElementById('artplayer-plugin-control')) {\n const $style = document.createElement('style');\n $style.id = 'artplayer-plugin-control';\n $style.textContent = style;\n document.head.appendChild($style);\n }\n}\n\nif (typeof window !== 'undefined') {\n window['artplayerPluginControl'] = artplayerPluginControl;\n}\n","module.exports = \"18666cb8629c0715\";","exports.interopDefault = function (a) {\n return a && a.__esModule ? a : {default: a};\n};\n\nexports.defineInteropFlag = function (a) {\n Object.defineProperty(a, '__esModule', {value: true});\n};\n\nexports.exportAll = function (source, dest) {\n Object.keys(source).forEach(function (key) {\n if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function () {\n return source[key];\n },\n });\n });\n\n return dest;\n};\n\nexports.export = function (dest, destName, get) {\n Object.defineProperty(dest, destName, {\n enumerable: true,\n get: get,\n });\n};\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../../"}
\ No newline at end of file
+{"mappings":"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","sources":["packages/artplayer-plugin-control/src/index.js","node_modules/@parcel/runtime-js/lib/bundles/runtime-3b06b37497366e99.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["import style from 'bundle-text:./style.less';\n\nfunction checkVersion(art) {\n const {\n version,\n utils: { errorHandle },\n } = art.constructor;\n const arr = version.split('.').map(Number);\n const major = arr[0];\n const minor = arr[1] / 100;\n errorHandle(\n major + minor >= 4.06,\n `Artplayer.js@${version} is not compatible the artplayerPluginControl@${artplayerPluginControl.version}. Please update it to version Artplayer.js@4.6.x`,\n );\n}\n\nexport default function artplayerPluginControl() {\n return (art) => {\n checkVersion(art);\n\n const {\n template: { $bottom, $player },\n constructor: {\n utils: { append, secondToTime, addClass, removeClass, hasClass },\n },\n } = art;\n\n const className = 'artplayer-plugin-control';\n addClass($player, className);\n\n const $current = append($bottom, ``);\n const $duration = append($bottom, ``);\n\n const events = ['video:loadedmetadata', 'video:timeupdate', 'video:progress'];\n\n for (let index = 0; index < events.length; index++) {\n art.on(events[index], () => {\n $current.innerText = secondToTime(art.currentTime);\n $duration.innerText = secondToTime(art.duration);\n });\n }\n\n return {\n name: 'artplayerPluginControl',\n get enable() {\n return hasClass($player, className);\n },\n set enable(state) {\n if (state) {\n addClass($player, className);\n } else {\n removeClass($player, className);\n }\n },\n };\n };\n}\n\nartplayerPluginControl.env = process.env.NODE_ENV;\nartplayerPluginControl.version = process.env.APP_VER;\nartplayerPluginControl.build = process.env.BUILD_DATE;\n\nif (typeof document !== 'undefined') {\n if (!document.getElementById('artplayer-plugin-control')) {\n const $style = document.createElement('style');\n $style.id = 'artplayer-plugin-control';\n $style.textContent = style;\n document.head.appendChild($style);\n }\n}\n\nif (typeof window !== 'undefined') {\n window['artplayerPluginControl'] = artplayerPluginControl;\n}\n","module.exports = \"18666cb8629c0715\";","exports.interopDefault = function (a) {\n return a && a.__esModule ? a : {default: a};\n};\n\nexports.defineInteropFlag = function (a) {\n Object.defineProperty(a, '__esModule', {value: true});\n};\n\nexports.exportAll = function (source, dest) {\n Object.keys(source).forEach(function (key) {\n if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function () {\n return source[key];\n },\n });\n });\n\n return dest;\n};\n\nexports.export = function (dest, destName, get) {\n Object.defineProperty(dest, destName, {\n enumerable: true,\n get: get,\n });\n};\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../../"}
\ No newline at end of file
diff --git a/packages/artplayer-document/docs/en/Plugins/control.mdx b/packages/artplayer-document/docs/en/Plugins/control.mdx
new file mode 100644
index 000000000..3b79769b0
--- /dev/null
+++ b/packages/artplayer-document/docs/en/Plugins/control.mdx
@@ -0,0 +1,55 @@
+---
+title: Control Plugin
+sidebar_position: 5
+---
+
+## Demo
+
+👉 [View Demo](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-control/index.js&example=control)
+
+## Install
+
+### Install from `npm`:
+
+```bash
+$ npm install artplayer-plugin-control
+```
+
+### Install from `yarn`:
+
+```bash
+$ yarn add artplayer-plugin-control
+```
+
+### Install from `script`:
+
+```html
+
+
+
+
+
+
+
+
+```
+
+Then you can access the plugin function through `window.artplayerPluginControl`
+
+## Use
+
+
+ ▶ Run Code
+
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ fullscreen: true,
+ fullscreenWeb: true,
+ plugins: [
+ artplayerPluginControl(),
+ ],
+});
+```
diff --git a/packages/artplayer-document/docs/zh-cn/Plugins/control.mdx b/packages/artplayer-document/docs/zh-cn/Plugins/control.mdx
new file mode 100644
index 000000000..d08e52648
--- /dev/null
+++ b/packages/artplayer-document/docs/zh-cn/Plugins/control.mdx
@@ -0,0 +1,55 @@
+---
+title: 控制栏插件
+sidebar_position: 5
+---
+
+## 演示
+
+👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-control/index.js&example=control)
+
+## 安装
+
+### 通过 `npm` 安装：
+
+```bash
+$ npm install artplayer-plugin-control
+```
+
+### 通过 `yarn` 安装：
+
+```bash
+$ yarn add artplayer-plugin-control
+```
+
+### 通过 `script` 安装：
+
+```html
+
+
+
+
+
+
+
+
+```
+
+然后你可以通过 `window.artplayerPluginControl` 访问到插件函数
+
+## 使用
+
+
+ ▶ Run Code
+
+
+```js
+var art = new Artplayer({
+ container: '.artplayer-app',
+ url: '/assets/sample/video.mp4',
+ fullscreen: true,
+ fullscreenWeb: true,
+ plugins: [
+ artplayerPluginControl(),
+ ],
+});
+```
diff --git a/packages/artplayer-plugin-control/README.md b/packages/artplayer-plugin-control/README.md
index d4e6a7d8c..2ad09dd2f 100644
--- a/packages/artplayer-plugin-control/README.md
+++ b/packages/artplayer-plugin-control/README.md
@@ -6,6 +6,10 @@ Control plugin for ArtPlayer
[https://artplayer.org](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-control/index.js&example=control)
+## Usage
+
+[https://artplayer.org/document/en/Plugins/control](https://artplayer.org/document/en/Plugins/control)
+
## License
MIT © Harvey Zack