提取共用方法

dist/artplayer.js

@@ -5,4 +5,4 @@
  * Released under the MIT License.
  */
 
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Artplayer=e()}(this,function(){"use strict";var a=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function r(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var i=function(t,e,n){return e&&r(t.prototype,e),n&&r(t,n),t};"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function t(t,e){return t(e={exports:{}},e.exports),e.exports}var c=t(function(e){function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?e.exports=r=function(t){return n(t)}:e.exports=r=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":n(t)},r(t)}e.exports=r});var o=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t};var s=function(t,e){return!e||"object"!==c(e)&&"function"!=typeof e?o(t):e},l=t(function(e){function n(t){return e.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},n(t)}e.exports=n}),u=t(function(n){function r(t,e){return n.exports=r=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},r(t,e)}n.exports=r});var e=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&u(t,e)},f=t(function(t,e){function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t){return t.constructor?t.constructor.name:null}function s(t,e){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:["option"];return l(t,e,n),u(t,e,n),function(o,a,c){var t=f(a),e=f(o);if("object"===t){if("object"!==e)throw new Error("[Type Error]: '".concat(c.join("."),"' require 'object' type, but got '").concat(e,"'"));Object.keys(a).forEach(function(t){var e=o[t],n=a[t],r=c.slice();r.push(t),l(e,n,r),u(e,n,r),s(e,n,r)})}if("array"===t){if("array"!==e)throw new Error("[Type Error]: '".concat(c.join("."),"' require 'array' type, but got '").concat(e,"'"));o.forEach(function(t,e){var n=o[e],r=a[e]||a[0],i=c.slice();i.push(e),l(n,r,i),u(n,r,i),s(n,r,i)})}}(t,e,n),t}function l(t,e,n){if("string"===f(e)){var r=f(t);if(!(-1<e.indexOf("|")?e.split("|").map(function(t){return t.toLowerCase().trim()}).filter(Boolean).some(function(t){return r===t}):e.toLowerCase().trim()===r))throw new Error("[Type Error]: '".concat(n.join("."),"' require '").concat(e,"' type, but got '").concat(r,"'"))}}function u(t,e,n){if("function"===f(e)){var r=e(t,f(t),n);if(!0!==r){var i=f(r);throw"string"===i?new Error(r):"error"===i?r:new Error("[Validator Error]: The scheme for '".concat(n.join("."),"' validator require return true, but got '").concat(r,"'"))}}}var i,f;t.exports=(i=Object.prototype.toString,s.kindOf=f=function(t){if(void 0===t)return"undefined";if(null===t)return"null";var e=n(t);if("boolean"===e)return"boolean";if("string"===e)return"string";if("number"===e)return"number";if("symbol"===e)return"symbol";if("function"===e)return function(t){return"GeneratorFunction"===r(t)}(t)?"generatorfunction":"function";if(function(t){return Array.isArray?Array.isArray(t):t instanceof Array}(t))return"array";if(function(t){return!(!t.constructor||"function"!=typeof t.constructor.isBuffer)&&t.constructor.isBuffer(t)}(t))return"buffer";if(function(t){try{if("number"==typeof t.length&&"function"==typeof t.callee)return!0}catch(t){if(-1!==t.message.indexOf("callee"))return!0}return!1}(t))return"arguments";if(function(t){return t instanceof Date||"function"==typeof t.toDateString&&"function"==typeof t.getDate&&"function"==typeof t.setDate}(t))return"date";if(function(t){return t instanceof Error||"string"==typeof t.message&&t.constructor&&"number"==typeof t.constructor.stackTraceLimit}(t))return"error";if(function(t){return t instanceof RegExp||"string"==typeof t.flags&&"boolean"==typeof t.ignoreCase&&"boolean"==typeof t.multiline&&"boolean"==typeof t.global}(t))return"regexp";switch(r(t)){case"Symbol":return"symbol";case"Promise":return"promise";case"WeakMap":return"weakmap";case"WeakSet":return"weakset";case"Map":return"map";case"Set":return"set";case"Int8Array":return"int8array";case"Uint8Array":return"uint8array";case"Uint8ClampedArray":return"uiLine truncated
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Artplayer=e()}(this,function(){"use strict";var a=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function r(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var i=function(t,e,n){return e&&r(t.prototype,e),n&&r(t,n),t};"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function t(t,e){return t(e={exports:{}},e.exports),e.exports}var c=t(function(e){function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?e.exports=r=function(t){return n(t)}:e.exports=r=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":n(t)},r(t)}e.exports=r});var o=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t};var s=function(t,e){return!e||"object"!==c(e)&&"function"!=typeof e?o(t):e},u=t(function(e){function n(t){return e.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},n(t)}e.exports=n}),l=t(function(n){function r(t,e){return n.exports=r=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},r(t,e)}n.exports=r});var e=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&l(t,e)},f=t(function(t,e){function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t){return t.constructor?t.constructor.name:null}function s(t,e){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:["option"];return u(t,e,n),l(t,e,n),function(o,a,c){var t=f(a),e=f(o);if("object"===t){if("object"!==e)throw new Error("[Type Error]: '".concat(c.join("."),"' require 'object' type, but got '").concat(e,"'"));Object.keys(a).forEach(function(t){var e=o[t],n=a[t],r=c.slice();r.push(t),u(e,n,r),l(e,n,r),s(e,n,r)})}if("array"===t){if("array"!==e)throw new Error("[Type Error]: '".concat(c.join("."),"' require 'array' type, but got '").concat(e,"'"));o.forEach(function(t,e){var n=o[e],r=a[e]||a[0],i=c.slice();i.push(e),u(n,r,i),l(n,r,i),s(n,r,i)})}}(t,e,n),t}function u(t,e,n){if("string"===f(e)){var r=f(t);if(!(-1<e.indexOf("|")?e.split("|").map(function(t){return t.toLowerCase().trim()}).filter(Boolean).some(function(t){return r===t}):e.toLowerCase().trim()===r))throw new Error("[Type Error]: '".concat(n.join("."),"' require '").concat(e,"' type, but got '").concat(r,"'"))}}function l(t,e,n){if("function"===f(e)){var r=e(t,f(t),n);if(!0!==r){var i=f(r);throw"string"===i?new Error(r):"error"===i?r:new Error("[Validator Error]: The scheme for '".concat(n.join("."),"' validator require return true, but got '").concat(r,"'"))}}}var i,f;t.exports=(i=Object.prototype.toString,s.kindOf=f=function(t){if(void 0===t)return"undefined";if(null===t)return"null";var e=n(t);if("boolean"===e)return"boolean";if("string"===e)return"string";if("number"===e)return"number";if("symbol"===e)return"symbol";if("function"===e)return function(t){return"GeneratorFunction"===r(t)}(t)?"generatorfunction":"function";if(function(t){return Array.isArray?Array.isArray(t):t instanceof Array}(t))return"array";if(function(t){return!(!t.constructor||"function"!=typeof t.constructor.isBuffer)&&t.constructor.isBuffer(t)}(t))return"buffer";if(function(t){try{if("number"==typeof t.length&&"function"==typeof t.callee)return!0}catch(t){if(-1!==t.message.indexOf("callee"))return!0}return!1}(t))return"arguments";if(function(t){return t instanceof Date||"function"==typeof t.toDateString&&"function"==typeof t.getDate&&"function"==typeof t.setDate}(t))return"date";if(function(t){return t instanceof Error||"string"==typeof t.message&&t.constructor&&"number"==typeof t.constructor.stackTraceLimit}(t))return"error";if(function(t){return t instanceof RegExp||"string"==typeof t.flags&&"boolean"==typeof t.ignoreCase&&"boolean"==typeof t.multiline&&"boolean"==typeof t.global}(t))return"regexp";switch(r(t)){case"Symbol":return"symbol";case"Promise":return"promise";case"WeakMap":return"weakmap";case"WeakSet":return"weakset";case"Map":return"map";case"Set":return"set";case"Int8Array":return"int8array";case"Uint8Array":return"uint8array";case"Uint8ClampedArray":return"uiLine truncated

packages/artplayer/dist/artplayer.js

@@ -5,4 +5,4 @@
  * Released under the MIT License.
  */
 
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Artplayer=e()}(this,function(){"use strict";var a=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function r(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var i=function(t,e,n){return e&&r(t.prototype,e),n&&r(t,n),t};"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function t(t,e){return t(e={exports:{}},e.exports),e.exports}var c=t(function(e){function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?e.exports=r=function(t){return n(t)}:e.exports=r=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":n(t)},r(t)}e.exports=r});var o=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t};var s=function(t,e){return!e||"object"!==c(e)&&"function"!=typeof e?o(t):e},l=t(function(e){function n(t){return e.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},n(t)}e.exports=n}),u=t(function(n){function r(t,e){return n.exports=r=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},r(t,e)}n.exports=r});var e=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&u(t,e)},f=t(function(t,e){function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t){return t.constructor?t.constructor.name:null}function s(t,e){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:["option"];return l(t,e,n),u(t,e,n),function(o,a,c){var t=f(a),e=f(o);if("object"===t){if("object"!==e)throw new Error("[Type Error]: '".concat(c.join("."),"' require 'object' type, but got '").concat(e,"'"));Object.keys(a).forEach(function(t){var e=o[t],n=a[t],r=c.slice();r.push(t),l(e,n,r),u(e,n,r),s(e,n,r)})}if("array"===t){if("array"!==e)throw new Error("[Type Error]: '".concat(c.join("."),"' require 'array' type, but got '").concat(e,"'"));o.forEach(function(t,e){var n=o[e],r=a[e]||a[0],i=c.slice();i.push(e),l(n,r,i),u(n,r,i),s(n,r,i)})}}(t,e,n),t}function l(t,e,n){if("string"===f(e)){var r=f(t);if(!(-1<e.indexOf("|")?e.split("|").map(function(t){return t.toLowerCase().trim()}).filter(Boolean).some(function(t){return r===t}):e.toLowerCase().trim()===r))throw new Error("[Type Error]: '".concat(n.join("."),"' require '").concat(e,"' type, but got '").concat(r,"'"))}}function u(t,e,n){if("function"===f(e)){var r=e(t,f(t),n);if(!0!==r){var i=f(r);throw"string"===i?new Error(r):"error"===i?r:new Error("[Validator Error]: The scheme for '".concat(n.join("."),"' validator require return true, but got '").concat(r,"'"))}}}var i,f;t.exports=(i=Object.prototype.toString,s.kindOf=f=function(t){if(void 0===t)return"undefined";if(null===t)return"null";var e=n(t);if("boolean"===e)return"boolean";if("string"===e)return"string";if("number"===e)return"number";if("symbol"===e)return"symbol";if("function"===e)return function(t){return"GeneratorFunction"===r(t)}(t)?"generatorfunction":"function";if(function(t){return Array.isArray?Array.isArray(t):t instanceof Array}(t))return"array";if(function(t){return!(!t.constructor||"function"!=typeof t.constructor.isBuffer)&&t.constructor.isBuffer(t)}(t))return"buffer";if(function(t){try{if("number"==typeof t.length&&"function"==typeof t.callee)return!0}catch(t){if(-1!==t.message.indexOf("callee"))return!0}return!1}(t))return"arguments";if(function(t){return t instanceof Date||"function"==typeof t.toDateString&&"function"==typeof t.getDate&&"function"==typeof t.setDate}(t))return"date";if(function(t){return t instanceof Error||"string"==typeof t.message&&t.constructor&&"number"==typeof t.constructor.stackTraceLimit}(t))return"error";if(function(t){return t instanceof RegExp||"string"==typeof t.flags&&"boolean"==typeof t.ignoreCase&&"boolean"==typeof t.multiline&&"boolean"==typeof t.global}(t))return"regexp";switch(r(t)){case"Symbol":return"symbol";case"Promise":return"promise";case"WeakMap":return"weakmap";case"WeakSet":return"weakset";case"Map":return"map";case"Set":return"set";case"Int8Array":return"int8array";case"Uint8Array":return"uint8array";case"Uint8ClampedArray":return"uiLine truncated
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t=t||self).Artplayer=e()}(this,function(){"use strict";var a=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")};function r(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var i=function(t,e,n){return e&&r(t.prototype,e),n&&r(t,n),t};"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function t(t,e){return t(e={exports:{}},e.exports),e.exports}var c=t(function(e){function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?e.exports=r=function(t){return n(t)}:e.exports=r=function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":n(t)},r(t)}e.exports=r});var o=function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t};var s=function(t,e){return!e||"object"!==c(e)&&"function"!=typeof e?o(t):e},u=t(function(e){function n(t){return e.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)},n(t)}e.exports=n}),l=t(function(n){function r(t,e){return n.exports=r=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t},r(t,e)}n.exports=r});var e=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&l(t,e)},f=t(function(t,e){function n(t){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t){return t.constructor?t.constructor.name:null}function s(t,e){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:["option"];return u(t,e,n),l(t,e,n),function(o,a,c){var t=f(a),e=f(o);if("object"===t){if("object"!==e)throw new Error("[Type Error]: '".concat(c.join("."),"' require 'object' type, but got '").concat(e,"'"));Object.keys(a).forEach(function(t){var e=o[t],n=a[t],r=c.slice();r.push(t),u(e,n,r),l(e,n,r),s(e,n,r)})}if("array"===t){if("array"!==e)throw new Error("[Type Error]: '".concat(c.join("."),"' require 'array' type, but got '").concat(e,"'"));o.forEach(function(t,e){var n=o[e],r=a[e]||a[0],i=c.slice();i.push(e),u(n,r,i),l(n,r,i),s(n,r,i)})}}(t,e,n),t}function u(t,e,n){if("string"===f(e)){var r=f(t);if(!(-1<e.indexOf("|")?e.split("|").map(function(t){return t.toLowerCase().trim()}).filter(Boolean).some(function(t){return r===t}):e.toLowerCase().trim()===r))throw new Error("[Type Error]: '".concat(n.join("."),"' require '").concat(e,"' type, but got '").concat(r,"'"))}}function l(t,e,n){if("function"===f(e)){var r=e(t,f(t),n);if(!0!==r){var i=f(r);throw"string"===i?new Error(r):"error"===i?r:new Error("[Validator Error]: The scheme for '".concat(n.join("."),"' validator require return true, but got '").concat(r,"'"))}}}var i,f;t.exports=(i=Object.prototype.toString,s.kindOf=f=function(t){if(void 0===t)return"undefined";if(null===t)return"null";var e=n(t);if("boolean"===e)return"boolean";if("string"===e)return"string";if("number"===e)return"number";if("symbol"===e)return"symbol";if("function"===e)return function(t){return"GeneratorFunction"===r(t)}(t)?"generatorfunction":"function";if(function(t){return Array.isArray?Array.isArray(t):t instanceof Array}(t))return"array";if(function(t){return!(!t.constructor||"function"!=typeof t.constructor.isBuffer)&&t.constructor.isBuffer(t)}(t))return"buffer";if(function(t){try{if("number"==typeof t.length&&"function"==typeof t.callee)return!0}catch(t){if(-1!==t.message.indexOf("callee"))return!0}return!1}(t))return"arguments";if(function(t){return t instanceof Date||"function"==typeof t.toDateString&&"function"==typeof t.getDate&&"function"==typeof t.setDate}(t))return"date";if(function(t){return t instanceof Error||"string"==typeof t.message&&t.constructor&&"number"==typeof t.constructor.stackTraceLimit}(t))return"error";if(function(t){return t instanceof RegExp||"string"==typeof t.flags&&"boolean"==typeof t.ignoreCase&&"boolean"==typeof t.multiline&&"boolean"==typeof t.global}(t))return"regexp";switch(r(t)){case"Symbol":return"symbol";case"Promise":return"promise";case"WeakMap":return"weakmap";case"WeakSet":return"weakset";case"Map":return"map";case"Set":return"set";case"Int8Array":return"int8array";case"Uint8Array":return"uint8array";case"Uint8ClampedArray":return"uiLine truncated

packages/artplayer/src/config/index.js

@@ -1,9 +1,5 @@
-import mimeCodec from './mimeCodec';
-import mse from './mse';
 import video from './video';
 
 export default {
-    mimeCodec,
-    mse,
     video,
 };

packages/artplayer/src/config/mimeCodec.js

@@ -1,5 +0,0 @@
-export default {
-    mp4: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
-    webm: 'video/webm; codecs="vorbis, vp8"',
-    ts: 'video/mp2t; codecs="avc1.42E01E, mp4a.40.2"',
-};

packages/artplayer/src/config/mse.js

@@ -1,33 +0,0 @@
-export default {
-    mediaSource: {
-        propertys: ['activeSourceBuffers', 'duration', 'readyState', 'sourceBuffers'],
-        methods: [
-            'addSourceBuffer',
-            'endOfStream',
-            'removeSourceBuffer',
-            'clearLiveSeekableRange',
-            'setLiveSeekableRange',
-        ],
-        events: ['sourceclose', 'sourceended', 'sourceopen'],
-    },
-    sourceBuffer: {
-        propertys: [
-            'mode',
-            'updating',
-            'buffered',
-            'timestampOffset',
-            'audioTracks',
-            'videoTracks',
-            'textTracks',
-            'appendWindowStart',
-            'appendWindowEnd',
-            'trackDefaults',
-        ],
-        methods: ['appendBuffer', 'appendStream', 'abort', 'remove'],
-        events: ['abort', 'error', 'update', 'updateend', 'updatestart'],
-    },
-    sourceBufferList: {
-        propertys: ['length'],
-        events: ['addsourcebuffer', 'removesourcebuffer'],
-    },
-};

packages/artplayer/src/config/video.js

@@ -30,7 +30,13 @@ export default {
         'videoTracks',
         'volume',
     ],
-    methods: ['addTextTrack', 'canPlayType', 'load', 'play', 'pause'],
+    methods: [
+        'addTextTrack',
+        'canPlayType',
+        'load',
+        'play',
+        'pause'
+    ],
     events: [
         'abort',
         'canplay',

packages/artplayer/src/contextmenu/aspectRatio.js

@@ -1,10 +1,10 @@
-import { inverseClass } from '../utils';
+import { inverseClass, queryAll } from '../utils';
 
-export default function aspectRatio(menuOption) {
+export default function aspectRatio(option) {
     return art => {
         const { i18n, player } = art;
         return {
-            ...menuOption,
+            ...option,
             html: `
                 ${i18n.get('Aspect ratio')}:
                 <span data-ratio="default" class="default current">${i18n.get('Default')}</span>
@@ -12,8 +12,7 @@ export default function aspectRatio(menuOption) {
                 <span data-ratio="16:9">16:9</span>
             `,
             click: (contextmenu, event) => {
-                const { target } = event;
+                const { ratio } = event.target.dataset;
-                const { ratio } = target.dataset;
                 if (ratio) {
                     player.aspectRatio = ratio;
                     contextmenu.show = false;
@@ -21,10 +20,10 @@ export default function aspectRatio(menuOption) {
             },
             mounted: $menu => {
                 art.on('aspectRatioChange', ratio => {
-                    const $current = Array.from($menu.querySelectorAll('span')).find(
+                    const $current = queryAll('span', $menu).find(item => item.dataset.ratio === ratio);
-                        item => item.dataset.ratio === ratio,
+                    if ($current) {
-                    );
+                        inverseClass($current, 'current');
-                    inverseClass($current, 'current');
+                    }
                 });
             },
         };

packages/artplayer/src/contextmenu/close.js

@@ -1,6 +1,6 @@
-export default function close(menuOption) {
+export default function close(option) {
     return art => ({
-        ...menuOption,
+        ...option,
         html: art.i18n.get('Close'),
         click: contextmenu => {
             contextmenu.show = false;

packages/artplayer/src/contextmenu/index.js

@@ -1,4 +1,4 @@
-import { setStyle } from '../utils';
+import { setStyle, addClass, removeClass } from '../utils';
 import component from '../utils/component';
 import playbackRate from './playbackRate';
 import aspectRatio from './aspectRatio';
@@ -26,35 +26,45 @@ export default class Contextmenu {
             events: { proxy },
         } = this.art;
 
-        this.add(playbackRate({
+        this.add(
-            disable: !option.playbackRate,
+            playbackRate({
-            name: 'playbackRate',
+                disable: !option.playbackRate,
-            index: 10,
+                name: 'playbackRate',
-        }));
+                index: 10,
+            }),
+        );
 
-        this.add(aspectRatio({
+        this.add(
-            disable: !option.aspectRatio,
+            aspectRatio({
-            name: 'aspectRatio',
+                disable: !option.aspectRatio,
-            index: 20,
+                name: 'aspectRatio',
-        }));
+                index: 20,
+            }),
+        );
 
-        this.add(info({
+        this.add(
-            disable: false,
+            info({
-            name: 'info',
+                disable: false,
-            index: 30,
+                name: 'info',
-        }));
+                index: 30,
+            }),
+        );
 
-        this.add(version({
+        this.add(
-            disable: false,
+            version({
-            name: 'version',
+                disable: false,
-            index: 40,
+                name: 'version',
-        }));
+                index: 40,
+            }),
+        );
 
-        this.add(close({
+        this.add(
-            disable: false,
+            close({
-            name: 'close',
+                disable: false,
-            index: 50,
+                name: 'close',
-        }));
+                index: 50,
+            }),
+        );
 
         option.contextmenu.forEach(item => {
             this.add(item);
@@ -104,11 +114,11 @@ export default class Contextmenu {
         const { $player } = this.art.template;
         if (value) {
             this.state = true;
-            $player.classList.add('artplayer-contextmenu-show');
+            addClass($player, 'artplayer-contextmenu-show');
             this.art.emit('contextmenu:show');
         } else {
             this.state = false;
-            $player.classList.remove('artplayer-contextmenu-show');
+            removeClass($player, 'artplayer-contextmenu-show');
             this.art.emit('contextmenu:hide');
         }
     }

packages/artplayer/src/contextmenu/info.js

@@ -1,6 +1,6 @@
-export default function info(menuOption) {
+export default function info(option) {
     return art => ({
-        ...menuOption,
+        ...option,
         html: art.i18n.get('Video info'),
         click: contextmenu => {
             art.info.show = true;

packages/artplayer/src/contextmenu/playbackRate.js

@@ -1,10 +1,10 @@
-import { inverseClass } from '../utils';
+import { inverseClass, queryAll } from '../utils';
 
-export default function playbackRate(menuOption) {
+export default function playbackRate(option) {
     return art => {
         const { i18n, player } = art;
         return {
-            ...menuOption,
+            ...option,
             html: `
                 ${i18n.get('Play speed')}:
                 <span data-rate="0.5">0.5</span>
@@ -15,8 +15,7 @@ export default function playbackRate(menuOption) {
                 <span data-rate="2.0">2.0</span>
             `,
             click: (contextmenu, event) => {
-                const { target } = event;
+                const { rate } = event.target.dataset;
-                const { rate } = target.dataset;
                 if (rate) {
                     player.playbackRate = Number(rate);
                     contextmenu.show = false;
@@ -24,9 +23,7 @@ export default function playbackRate(menuOption) {
             },
             mounted: $menu => {
                 art.on('playbackRateChange', rate => {
-                    const $current = Array.from($menu.querySelectorAll('span')).find(
+                    const $current = queryAll('span', $menu).find(item => Number(item.dataset.rate) === rate);
-                        item => Number(item.dataset.rate) === rate,
-                    );
                     if ($current) {
                         inverseClass($current, 'current');
                     }

packages/artplayer/src/contextmenu/version.js

@@ -1,6 +1,6 @@
-export default function version(menuOption) {
+export default function version(option) {
     return {
-        ...menuOption,
+        ...option,
         html: '<a href="https://artplayer.org" target="_blank">ArtPlayer __VERSION__</a>',
     };
 }

packages/artplayer/src/controls/fullscreen.js

@@ -1,8 +1,8 @@
 import { append, tooltip, setStyle } from '../utils';
 
-export default function fullscreen(controlOption) {
+export default function fullscreen(option) {
     return art => ({
-        ...controlOption,
+        ...option,
         mounted: $control => {
             const {
                 events: { proxy },

packages/artplayer/src/controls/fullscreenWeb.js

@@ -1,8 +1,8 @@
 import { append, tooltip, setStyle } from '../utils';
 
-export default function fullscreenWeb(controlOption) {
+export default function fullscreenWeb(option) {
     return art => ({
-        ...controlOption,
+        ...option,
         mounted: $control => {
             const {
                 events: { proxy },
@@ -10,7 +10,7 @@ export default function fullscreenWeb(controlOption) {
                 i18n,
                 player,
             } = art;
-            
+
             const $fullscreenWeb = append($control, icons.fullscreenWeb);
             tooltip($fullscreenWeb, i18n.get('Web fullscreen'));
 

packages/artplayer/src/controls/index.js

@@ -1,4 +1,4 @@
-import { errorHandle } from '../utils';
+import { errorHandle, addClass, removeClass } from '../utils';
 import component from '../utils/component';
 import fullscreen from './fullscreen';
 import fullscreenWeb from './fullscreenWeb';
@@ -156,15 +156,15 @@ export default class Controls {
                 break;
         }
 
-        errorHandle(parent, 'Controls option.position can not be empty');
         this.id += 1;
+        errorHandle(option.position, 'Controls option.position can not be empty');
         const control = component(this.art, this, parent, option, callback, 'control');
         if (
             !option.disable &&
             option.position !== 'top' &&
             !(control.$ref.firstElementChild && control.$ref.firstElementChild.tagName === 'I')
         ) {
-            control.$ref.classList.add('art-control-onlyText');
+            addClass(control.$ref, 'art-control-onlyText');
         }
         return control;
     }
@@ -173,11 +173,11 @@ export default class Controls {
         const { $player } = this.art.template;
         if (value) {
             this.state = true;
-            $player.classList.add('artplayer-controls-show');
+            addClass($player, 'artplayer-controls-show');
             this.art.emit('controls:show');
         } else {
             this.state = false;
-            $player.classList.remove('artplayer-controls-show');
+            removeClass($player, 'artplayer-controls-show');
             this.art.emit('controls:hide');
         }
     }

packages/artplayer/src/controls/pip.js

@@ -1,8 +1,8 @@
 import { append, tooltip } from '../utils';
 
-export default function pip(controlOption) {
+export default function pip(option) {
     return art => ({
-        ...controlOption,
+        ...option,
         mounted: $control => {
             const {
                 events: { proxy },

packages/artplayer/src/controls/playAndPause.js

@@ -1,8 +1,8 @@
 import { append, tooltip, setStyle } from '../utils';
 
-export default function playAndPause(controlOption) {
+export default function playAndPause(option) {
     return art => ({
-        ...controlOption,
+        ...option,
         mounted: $control => {
             const {
                 events: { proxy },

packages/artplayer/src/controls/progress.js

@@ -1,11 +1,11 @@
-import { append, clamp, secondToTime, setStyle, getStyle } from '../utils';
+import { append, clamp, secondToTime, setStyle, getStyle, query, addClass, removeClass } from '../utils';
 
 export function getPosFromEvent(art, event) {
     const {
         template: { $progress },
         player,
     } = art;
-    
+
     const { left } = $progress.getBoundingClientRect();
     const width = clamp(event.pageX - left, 0, $progress.clientWidth);
     const second = (width / $progress.clientWidth) * player.duration;
@@ -14,7 +14,7 @@ export function getPosFromEvent(art, event) {
     return { second, time, width, percentage };
 }
 
-export default function progress(controlOption) {
+export default function progress(option) {
     return art => {
         const {
             option: { highlight, theme },
@@ -22,7 +22,7 @@ export default function progress(controlOption) {
             player,
         } = art;
         return {
-            ...controlOption,
+            ...option,
             html: `
                 <div class="art-control-progress-inner">
                     <div class="art-progress-loaded"></div>
@@ -34,11 +34,11 @@ export default function progress(controlOption) {
             `,
             mounted: $control => {
                 let isDroging = false;
-                const $loaded = $control.querySelector('.art-progress-loaded');
+                const $loaded = query('.art-progress-loaded', $control);
-                const $played = $control.querySelector('.art-progress-played');
+                const $played = query('.art-progress-played', $control);
-                const $highlight = $control.querySelector('.art-progress-highlight');
+                const $highlight = query('.art-progress-highlight', $control);
-                const $indicator = $control.querySelector('.art-progress-indicator');
+                const $indicator = query('.art-progress-indicator', $control);
-                const $tip = $control.querySelector('.art-progress-tip');
+                const $tip = query('.art-progress-tip', $control);
 
                 function showHighlight(event) {
                     const { width } = getPosFromEvent(art, event);
@@ -132,7 +132,7 @@ export default function progress(controlOption) {
                 proxy(document, 'mousemove', event => {
                     if (isDroging) {
                         const { second, percentage } = getPosFromEvent(art, event);
-                        $indicator.classList.add('art-show-indicator');
+                        addClass($indicator, 'art-show-indicator');
                         setBar('played', percentage);
                         player.seek = second;
                     }
@@ -141,7 +141,7 @@ export default function progress(controlOption) {
                 proxy(document, 'mouseup', () => {
                     if (isDroging) {
                         isDroging = false;
-                        $indicator.classList.remove('art-show-indicator');
+                        removeClass($indicator, 'art-show-indicator');
                     }
                 });
             },

packages/artplayer/src/controls/quality.js

@@ -1,20 +1,20 @@
 import { append, getStyle } from '../utils';
 
-export default function quality(controlOption) {
+export default function quality(option) {
     return art => ({
-        ...controlOption,
+        ...option,
         mounted: $control => {
             const {
-                option,
+                option: { quality },
                 events: { proxy, hover },
                 player,
             } = art;
-            
+
             let playIndex = -1;
-            const defaultQuality = option.quality.find(item => item.default) || option.quality[0];
+            const defaultQuality = quality.find(item => item.default) || quality[0];
-            playIndex = option.quality.indexOf(defaultQuality);
+            playIndex = quality.indexOf(defaultQuality);
             const $qualityName = append($control, `<div class="art-quality-name">${defaultQuality.name}</div>`);
-            const qualityList = option.quality
+            const qualityList = quality
                 .map((item, index) => `<div class="art-quality-item" data-index="${index}">${item.name}</div>`)
                 .join('');
             const $qualitys = append($control, `<div class="art-qualitys">${qualityList}</div>`);
@@ -25,7 +25,7 @@ export default function quality(controlOption) {
 
             proxy($qualitys, 'click', event => {
                 const index = Number(event.target.dataset.index);
-                const { url, name } = option.quality[index];
+                const { url, name } = quality[index];
                 if (url && name && playIndex !== index) {
                     player.switchQuality(url, name);
                     $qualityName.innerHTML = name;

packages/artplayer/src/controls/screenshot.js

@@ -1,8 +1,8 @@
 import { append, tooltip } from '../utils';
 
-export default function screenshot(controlOption) {
+export default function screenshot(option) {
     return art => ({
-        ...controlOption,
+        ...option,
         mounted: $control => {
             const {
                 events: { proxy },
@@ -10,7 +10,7 @@ export default function screenshot(controlOption) {
                 i18n,
                 player,
             } = art;
-            
+
             const $screenshot = append($control, icons.screenshot);
             tooltip($screenshot, i18n.get('Screenshot'));
             proxy($screenshot, 'click', () => {

packages/artplayer/src/controls/setting.js

@@ -1,8 +1,8 @@
 import { append, tooltip, setStyle } from '../utils';
 
-export default function setting(controlOption) {
+export default function setting(option) {
     return art => ({
-        ...controlOption,
+        ...option,
         mounted: $control => {
             const {
                 events: { proxy },
@@ -10,7 +10,7 @@ export default function setting(controlOption) {
                 i18n,
                 setting,
             } = art;
-            
+
             const $setting = append($control, icons.setting);
             tooltip($setting, i18n.get('Show setting'));
 

packages/artplayer/src/controls/subtitle.js

@@ -1,8 +1,8 @@
 import { append, tooltip, setStyle } from '../utils';
 
-export default function subtitle(controlOption) {
+export default function subtitle(option) {
     return art => ({
-        ...controlOption,
+        ...option,
         mounted: $control => {
             const {
                 events: { proxy },
@@ -10,7 +10,7 @@ export default function subtitle(controlOption) {
                 i18n,
                 subtitle,
             } = art;
-            
+
             const $subtitle = append($control, icons.subtitle);
             tooltip($subtitle, i18n.get('Hide subtitle'));
 

packages/artplayer/src/controls/thumbnails.js

@@ -1,21 +1,22 @@
 import { setStyle } from '../utils';
 import { getPosFromEvent } from './progress';
 
-export default function thumbnails(controlOption) {
+export default function thumbnails(option) {
     return art => ({
-        ...controlOption,
+        ...option,
         mounted: $control => {
             const {
+                option: { thumbnails },
                 template: { $progress },
                 events: { proxy, loadImg },
             } = art;
-            
+
             let loading = false;
             let isLoad = false;
 
             function showThumbnails(event) {
                 const { width: posWidth } = getPosFromEvent(art, event);
-                const { url, height, width, number, column } = art.option.thumbnails;
+                const { url, height, width, number, column } = thumbnails;
                 const perWidth = $progress.clientWidth / number;
                 const perIndex = Math.floor(posWidth / perWidth);
                 const yIndex = Math.ceil(perIndex / column) - 1;
@@ -36,7 +37,7 @@ export default function thumbnails(controlOption) {
             proxy($progress, 'mousemove', event => {
                 if (!loading) {
                     loading = true;
-                    loadImg(art.option.thumbnails.url).then(() => {
+                    loadImg(thumbnails.url).then(() => {
                         isLoad = true;
                     });
                 }

packages/artplayer/src/controls/time.js

@@ -1,8 +1,8 @@
 import { secondToTime } from '../utils';
 
-export default function time(controlOption) {
+export default function time(option) {
     return art => ({
-        ...controlOption,
+        ...option,
         mounted: $control => {
             function getTime() {
                 const newTime = `${secondToTime(art.player.currentTime)} / ${secondToTime(art.player.duration)}`;

packages/artplayer/src/controls/volume.js

@@ -1,8 +1,8 @@
 import { append, clamp, tooltip, setStyle, getStyle } from '../utils';
 
-export default function volume(controlOption) {
+export default function volume(option) {
     return art => ({
-        ...controlOption,
+        ...option,
         mounted: $control => {
             const {
                 events: { proxy },
@@ -10,7 +10,7 @@ export default function volume(controlOption) {
                 player,
                 i18n,
             } = art;
-            
+
             let isDroging = false;
             const $volume = append($control, icons.volume);
             const $volumeClose = append($control, icons.volumeClose);

packages/artplayer/src/events/hoverInit.js

@@ -1,3 +1,5 @@
+import { addClass, removeClass } from '../utils';
+
 export default function hoverInit(art, events) {
     const {
         template: { $player },
@@ -5,11 +7,11 @@ export default function hoverInit(art, events) {
     events.hover(
         $player,
         () => {
-            $player.classList.add('artplayer-hover');
+            addClass($player, 'artplayer-hover');
             art.emit('hoverenter');
         },
         () => {
-            $player.classList.remove('artplayer-hover');
+            removeClass($player, 'artplayer-hover');
             art.emit('hoverleave');
         },
     );

packages/artplayer/src/events/mousemoveInit.js

@@ -1,4 +1,4 @@
-import { debounce } from '../utils';
+import { debounce, addClass, removeClass } from '../utils';
 
 export default function mousemoveInitInit(art, events) {
     const {
@@ -7,8 +7,8 @@ export default function mousemoveInitInit(art, events) {
     } = art;
 
     const autoHide = debounce(() => {
-        $player.classList.add('artplayer-hide-cursor');
+        addClass($player, 'artplayer-hide-cursor');
-        $player.classList.remove('artplayer-hover');
+        removeClass($player, 'artplayer-hover');
         art.controls.show = false;
     }, 3000);
 
@@ -20,7 +20,7 @@ export default function mousemoveInitInit(art, events) {
 
     events.proxy($player, 'mousemove', event => {
         autoHide.clearTimeout();
-        $player.classList.remove('artplayer-hide-cursor');
+        removeClass($player, 'artplayer-hide-cursor');
         art.controls.show = true;
         if (!art.player.pip && player.playing && event.target === $video) {
             autoHide();

packages/artplayer/src/info.js

@@ -1,4 +1,4 @@
-import { append } from './utils';
+import { append, addClass, removeClass, queryAll } from './utils';
 
 export default class Info {
     constructor(art) {
@@ -73,7 +73,7 @@ export default class Info {
 
     readInfo() {
         const { $infoPanel, $video } = this.art.template;
-        const types = Array.from($infoPanel.querySelectorAll('[data-video]'));
+        const types = queryAll('[data-video]', $infoPanel);
         types.forEach(item => {
             const value = $video[item.dataset.video];
             if (value !== undefined) {
@@ -96,7 +96,7 @@ export default class Info {
         const { $player, $infoPanel } = this.art.template;
         if (value) {
             this.state = true;
-            $player.classList.add('artplayer-info-show');
+            addClass($player, 'artplayer-info-show');
             if (!$infoPanel.innerHTML) {
                 append($infoPanel, this.creatInfo());
             }
@@ -105,7 +105,7 @@ export default class Info {
             this.art.emit('info:show');
         } else {
             this.state = false;
-            $player.classList.remove('artplayer-info-show');
+            removeClass($player, 'artplayer-info-show');
             clearTimeout(this.timer);
             this.art.emit('info:hide');
         }

packages/artplayer/src/layers.js

@@ -1,3 +1,4 @@
+import { addClass, removeClass } from './utils';
 import component from './utils/component';
 
 export default class Layers {
@@ -22,11 +23,11 @@ export default class Layers {
         const { $player } = this.art.template;
         if (value) {
             this.state = true;
-            $player.classList.remove('artplayer-layers-hide');
+            removeClass($player, 'artplayer-layers-hide');
             this.art.emit('layers:show');
         } else {
             this.state = false;
-            $player.classList.add('artplayer-layers-hide');
+            addClass($player, 'artplayer-layers-hide');
             this.art.emit('layers:hide');
         }
     }

packages/artplayer/src/loading.js

@@ -1,4 +1,4 @@
-import { append } from './utils';
+import { append, addClass, removeClass } from './utils';
 
 export default class Loading {
     constructor(art) {
@@ -11,11 +11,11 @@ export default class Loading {
         const { $player } = this.art.template;
         if (value) {
             this.state = true;
-            $player.classList.add('artplayer-loading-show');
+            addClass($player, 'artplayer-loading-show');
             this.art.emit('loading:show');
         } else {
             this.state = false;
-            $player.classList.remove('artplayer-loading-show');
+            removeClass($player, 'artplayer-loading-show');
             this.art.emit('loading:hide');
         }
     }

packages/artplayer/src/mask.js

@@ -1,4 +1,4 @@
-import { append } from './utils';
+import { append, addClass, removeClass } from './utils';
 
 export default class Mask {
     constructor(art) {
@@ -12,11 +12,11 @@ export default class Mask {
         const { $player } = this.art.template;
         if (value) {
             this.state = true;
-            $player.classList.add('artplayer-mask-show');
+            addClass($player, 'artplayer-mask-show');
             this.art.emit('mask:show');
         } else {
             this.state = false;
-            $player.classList.remove('artplayer-mask-show');
+            removeClass($player, 'artplayer-mask-show');
             this.art.emit('mask:hide');
         }
     }

packages/artplayer/src/notice.js

@@ -1,3 +1,5 @@
+import { addClass, removeClass } from './utils';
+
 export default class Notice {
     constructor(art) {
         this.art = art;
@@ -7,7 +9,7 @@ export default class Notice {
     show(msg, autoHide = true, time = 1000) {
         const { $player, $noticeInner } = this.art.template;
         this.state = true;
-        $player.classList.add('artplayer-notice-show');
+        addClass($player, 'artplayer-notice-show');
         $noticeInner.innerHTML = msg instanceof Error ? msg.message.trim() : msg;
         clearTimeout(this.timer);
         if (autoHide) {
@@ -21,7 +23,7 @@ export default class Notice {
     hide() {
         const { $player } = this.art.template;
         this.state = false;
-        $player.classList.remove('artplayer-notice-show');
+        removeClass($player, 'artplayer-notice-show');
         this.art.emit('notice:hide');
     }
 }

packages/artplayer/src/player/fullscreenMix.js

@@ -1,4 +1,5 @@
 import screenfull from 'screenfull';
+import { addClass, removeClass } from '../utils';
 
 export default function fullscreenMix(art, player) {
     const {
@@ -41,7 +42,7 @@ export default function fullscreenMix(art, player) {
                 }
 
                 screenfull.request($player).then(() => {
-                    $player.classList.add('artplayer-fullscreen');
+                    addClass($player, 'artplayer-fullscreen');
                     player.aspectRatioReset = true;
                     art.emit('fullscreen:enabled');
                 });
@@ -51,7 +52,7 @@ export default function fullscreenMix(art, player) {
                 }
 
                 screenfull.exit().then(() => {
-                    $player.classList.remove('artplayer-fullscreen');
+                    removeClass($player, 'artplayer-fullscreen');
                     player.aspectRatioReset = true;
                     art.emit('fullscreen:exit');
                 });

packages/artplayer/src/player/fullscreenWebMix.js

@@ -1,3 +1,5 @@
+import { addClass, removeClass, hasClass } from '../utils';
+
 export default function fullscreenWebMix(art, player) {
     const {
         template: { $player },
@@ -5,21 +7,21 @@ export default function fullscreenWebMix(art, player) {
 
     Object.defineProperty(player, 'fullscreenWeb', {
         get() {
-            return $player.classList.contains('artplayer-web-fullscreen');
+            return hasClass($player, 'artplayer-web-fullscreen');
         },
         set(value) {
             if (value) {
                 if (player.fullscreen) {
                     player.fullscreen = false;
                 }
-                $player.classList.add('artplayer-web-fullscreen');
+                addClass($player, 'artplayer-web-fullscreen');
                 player.aspectRatioReset = true;
                 art.emit('fullscreenWeb:enabled');
             } else {
                 if (player.fullscreen) {
                     player.fullscreen = false;
                 }
-                $player.classList.remove('artplayer-web-fullscreen');
+                removeClass($player, 'artplayer-web-fullscreen');
                 player.aspectRatioReset = true;
                 art.emit('fullscreenWeb:exit');
             }

packages/artplayer/src/player/pipMix.js

@@ -1,4 +1,4 @@
-import { append, setStyle } from '../utils';
+import { append, setStyle, addClass, removeClass, hasClass } from '../utils';
 
 function nativePip(art, player) {
     const {
@@ -89,7 +89,7 @@ function customPip(art, player) {
 
     proxy($pipHeader, 'mousemove', event => {
         if (isDroging) {
-            $player.classList.add('is-dragging');
+            addClass($player, 'is-dragging');
             setStyle($player, 'left', `${lastPlayerLeft + event.pageX - lastPageX}px`);
             setStyle($player, 'top', `${lastPlayerTop + event.pageY - lastPageY}px`);
         }
@@ -97,20 +97,20 @@ function customPip(art, player) {
 
     proxy(document, 'mouseup', () => {
         isDroging = false;
-        $player.classList.remove('is-dragging');
+        removeClass($player, 'is-dragging');
     });
 
     proxy($pipClose, 'click', () => {
         player.pip = false;
         isDroging = false;
-        $player.classList.remove('is-dragging');
+        removeClass($player, 'is-dragging');
     });
 
     append($pipTitle, option.title || i18n.get('Mini player'));
 
     const property = {
         get() {
-            return $player.classList.contains('artplayer-pip');
+            return hasClass($player, 'artplayer-pip');
         },
         set(value) {
             if (value) {

packages/artplayer/src/player/switchMix.js

@@ -9,7 +9,7 @@ export default function switchMix(art, player) {
                     option.url = url;
                     player.playbackRate = false;
                     player.aspectRatio = false;
-                    art.once('video:canplay', () => {
+                    art.on('ready', () => {
                         player.currentTime = currentTime;
                     });
                     if (playing) {
@@ -31,7 +31,7 @@ export default function switchMix(art, player) {
                     option.url = url;
                     player.playbackRate = false;
                     player.aspectRatio = false;
-                    art.once('video:canplay', () => {
+                    art.on('ready', () => {
                         player.currentTime = 0;
                     });
                     if (playing) {

packages/artplayer/src/plugins/subtitleOffset.js

@@ -1,3 +1,5 @@
+import { query } from '../utils';
+
 function settingMix(art) {
     const {
         i18n,
@@ -17,8 +19,8 @@ function settingMix(art) {
             </div>
         `,
         mounted: $setting => {
-            const $range = $setting.querySelector('.art-setting-range input');
+            const $range = query('.art-setting-range input', $setting);
-            const $value = $setting.querySelector('.art-subtitle-value');
+            const $value = query('.art-subtitle-value', $setting);
             proxy($range, 'change', () => {
                 const { value } = $range;
                 $value.innerText = value;

packages/artplayer/src/setting/aspectRatio.js

@@ -1,10 +1,10 @@
-import { inverseClass } from '../utils';
+import { inverseClass, queryAll } from '../utils';
 
-export default function aspectRatio(settingOption) {
+export default function aspectRatio(option) {
     return art => {
         const { i18n, player } = art;
         return {
-            ...settingOption,
+            ...option,
             html: `
                 <div class="art-setting-header">${i18n.get('Aspect ratio')}</div>
                 <div class="art-setting-radio">
@@ -27,10 +27,10 @@ export default function aspectRatio(settingOption) {
             },
             mounted: $setting => {
                 art.on('aspectRatioChange', ratio => {
-                    const $current = Array.from($setting.querySelectorAll('button')).find(
+                    const $current = queryAll('button', $setting).find(item => item.dataset.value === ratio);
-                        item => item.dataset.value === ratio,
+                    if ($current) {
-                    );
+                        inverseClass($current.parentElement, 'current');
-                    inverseClass($current.parentElement, 'current');
+                    }
                 });
             },
         };

packages/artplayer/src/setting/flip.js

@@ -1,10 +1,10 @@
-import { inverseClass } from '../utils';
+import { inverseClass, queryAll } from '../utils';
 
-export default function flip(settingOption) {
+export default function flip(option) {
     return art => {
         const { i18n, player } = art;
         return {
-            ...settingOption,
+            ...option,
             html: `
                 <div class="art-setting-header">${i18n.get('Flip')}</div>
                 <div class="art-setting-radio">
@@ -27,10 +27,10 @@ export default function flip(settingOption) {
             },
             mounted: $setting => {
                 art.on('flipChange', flip => {
-                    const $current = Array.from($setting.querySelectorAll('button')).find(
+                    const $current = queryAll('button', $setting).find(item => item.dataset.value === flip);
-                        item => item.dataset.value === flip,
+                    if ($current) {
-                    );
+                        inverseClass($current.parentElement, 'current');
-                    inverseClass($current.parentElement, 'current');
+                    }
                 });
             },
         };

packages/artplayer/src/setting/index.js

@@ -1,3 +1,4 @@
+import { addClass, removeClass } from '../utils';
 import component from '../utils/component';
 import flip from './flip';
 import aspectRatio from './aspectRatio';
@@ -64,11 +65,11 @@ export default class Setting {
         const { $player } = this.art.template;
         if (value) {
             this.state = true;
-            $player.classList.add('artplayer-setting-show');
+            addClass($player, 'artplayer-setting-show');
             this.art.emit('setting:show');
         } else {
             this.state = false;
-            $player.classList.remove('artplayer-setting-show');
+            removeClass($player, 'artplayer-setting-show');
             this.art.emit('setting:hide');
         }
     }

packages/artplayer/src/setting/playbackRate.js

@@ -1,4 +1,6 @@
-export default function playbackRate(settingOption) {
+import { query } from '../utils';
+
+export default function playbackRate(option) {
     return art => {
         const {
             i18n,
@@ -6,7 +8,7 @@ export default function playbackRate(settingOption) {
             events: { proxy },
         } = art;
         return {
-            ...settingOption,
+            ...option,
             html: `
                 <div class="art-setting-header">
                     ${i18n.get('Play speed')}: <span class="art-subtitle-value">1.0</span>x
@@ -16,8 +18,8 @@ export default function playbackRate(settingOption) {
                 </div>
             `,
             mounted: $setting => {
-                const $range = $setting.querySelector('.art-setting-range input');
+                const $range = query('.art-setting-range input', $setting);
-                const $value = $setting.querySelector('.art-subtitle-value');
+                const $value = query('.art-subtitle-value', $setting);
                 proxy($range, 'change', () => {
                     const { value } = $range;
                     $value.innerText = value;

packages/artplayer/src/subtitle.js

@@ -1,4 +1,4 @@
-import { setStyles, srtToVtt, vttToBlob, getExt } from './utils';
+import { setStyles, srtToVtt, vttToBlob, getExt, addClass, removeClass } from './utils';
 import assToVtt from './utils/assToVtt';
 
 export default class Subtitle {
@@ -110,11 +110,11 @@ export default class Subtitle {
         const { $player } = this.art.template;
         if (value) {
             this.state = true;
-            $player.classList.remove('artplayer-subtitle-hide');
+            removeClass($player, 'artplayer-subtitle-hide');
             this.art.emit('subtitle:show');
         } else {
             this.state = false;
-            $player.classList.add('artplayer-subtitle-hide');
+            addClass($player, 'artplayer-subtitle-hide');
             this.art.emit('subtitle:hide');
         }
     }

packages/artplayer/src/template.js

@@ -1,4 +1,4 @@
-import { errorHandle } from './utils';
+import { errorHandle, query, addClass } from './utils';
 
 export default class Template {
     constructor(art) {
@@ -6,7 +6,7 @@ export default class Template {
         if (art.option.container instanceof Element) {
             this.$container = art.option.container;
         } else {
-            this.$container = document.querySelector(art.option.container);
+            this.$container = query(art.option.container);
             errorHandle(this.$container, `No container element found by ${art.option.container}`);
         }
 
@@ -25,6 +25,8 @@ export default class Template {
         } else {
             this.initMobile();
         }
+
+        this.query = className => query(className, this.$container);
     }
 
     initDesktop() {
@@ -62,30 +64,30 @@ export default class Template {
             <div class="artplayer-contextmenu artplayer-backdrop-filter"></div>
           </div>
         `;
-        this.$player = this.$container.querySelector('.artplayer-video-player');
+        this.$player = this.query('.artplayer-video-player');
-        this.$video = this.$container.querySelector('.artplayer-video');
+        this.$video = this.query('.artplayer-video');
-        this.$subtitle = this.$container.querySelector('.artplayer-subtitle');
+        this.$subtitle = this.query('.artplayer-subtitle');
-        this.$danmuku = this.$container.querySelector('.artplayer-danmuku');
+        this.$danmuku = this.query('.artplayer-danmuku');
-        this.$bottom = this.$container.querySelector('.artplayer-bottom');
+        this.$bottom = this.query('.artplayer-bottom');
-        this.$progress = this.$container.querySelector('.artplayer-progress');
+        this.$progress = this.query('.artplayer-progress');
-        this.$controls = this.$container.querySelector('.artplayer-controls');
+        this.$controls = this.query('.artplayer-controls');
-        this.$controlsLeft = this.$container.querySelector('.artplayer-controls-left');
+        this.$controlsLeft = this.query('.artplayer-controls-left');
-        this.$controlsRight = this.$container.querySelector('.artplayer-controls-right');
+        this.$controlsRight = this.query('.artplayer-controls-right');
-        this.$layers = this.$container.querySelector('.artplayer-layers');
+        this.$layers = this.query('.artplayer-layers');
-        this.$loading = this.$container.querySelector('.artplayer-loading');
+        this.$loading = this.query('.artplayer-loading');
-        this.$notice = this.$container.querySelector('.artplayer-notice');
+        this.$notice = this.query('.artplayer-notice');
-        this.$noticeInner = this.$container.querySelector('.artplayer-notice-inner');
+        this.$noticeInner = this.query('.artplayer-notice-inner');
-        this.$mask = this.$container.querySelector('.artplayer-mask');
+        this.$mask = this.query('.artplayer-mask');
-        this.$setting = this.$container.querySelector('.artplayer-setting');
+        this.$setting = this.query('.artplayer-setting');
-        this.$settingInner = this.$container.querySelector('.artplayer-setting-inner');
+        this.$settingInner = this.query('.artplayer-setting-inner');
-        this.$settingBody = this.$container.querySelector('.artplayer-setting-body');
+        this.$settingBody = this.query('.artplayer-setting-body');
-        this.$info = this.$container.querySelector('.artplayer-info');
+        this.$info = this.query('.artplayer-info');
-        this.$infoPanel = this.$container.querySelector('.artplayer-info-panel');
+        this.$infoPanel = this.query('.artplayer-info-panel');
-        this.$infoClose = this.$container.querySelector('.artplayer-info-close');
+        this.$infoClose = this.query('.artplayer-info-close');
-        this.$pipHeader = this.$container.querySelector('.artplayer-pip-header');
+        this.$pipHeader = this.query('.artplayer-pip-header');
-        this.$pipTitle = this.$container.querySelector('.artplayer-pip-title');
+        this.$pipTitle = this.query('.artplayer-pip-title');
-        this.$pipClose = this.$container.querySelector('.artplayer-pip-close');
+        this.$pipClose = this.query('.artplayer-pip-close');
-        this.$contextmenu = this.$container.querySelector('.artplayer-contextmenu');
+        this.$contextmenu = this.query('.artplayer-contextmenu');
     }
 
     initMobile() {
@@ -94,15 +96,15 @@ export default class Template {
             <video class="artplayer-video"></video>
           </div>
         `;
-        this.$player = this.$container.querySelector('.artplayer-video-player');
+        this.$player = this.query('.artplayer-video-player');
-        this.$video = this.$container.querySelector('.artplayer-video');
+        this.$video = this.query('.artplayer-video');
     }
 
     destroy(removeHtml) {
         if (removeHtml) {
             this.$container.innerHTML = '';
         } else {
-            this.$player.classList.add('artplayer-destroy');
+            addClass(this.$player, 'artplayer-destroy');
         }
     }
 }

packages/artplayer/src/utils/analysis.js

@@ -1,21 +0,0 @@
-export default function analysis() {
-    const w = window;
-    const n = w.navigator;
-    const d = w.document;
-
-    if (!w || w.HELP_IMPROVE_ARTPLAYER === false) return;
-    if (n && n.doNotTrack && n.doNotTrack === '1') return;
-    if (n && n.msDoNotTrack && n.msDoNotTrack === '1') return;
-    if (w.doNotTrack && w.doNotTrack === '1') return;
-    if (Math.random() > 0.1) return;
-
-    const url = new URL('https://hm.baidu.com/hm.gif');
-    url.searchParams.append('v', '1.2.61');
-    url.searchParams.append('tt', d.title);
-    url.searchParams.append('su', d.referrer);
-    url.searchParams.append('rnd', String(Date.now()).slice(-10));
-    url.searchParams.append('si', 'b6c9b8bafbf5fe7225160101dafbbc7d');
-    url.searchParams.append('ds', `${w.screen.availWidth}x${w.screen.availHeight}`);
-    url.searchParams.append('ln', (n.language || n.userLanguage || '').toLowerCase());
-    new Image().src = url.href;
-}

packages/artplayer/src/utils/index.js

@@ -11,6 +11,26 @@ export function hasOwnProperty(obj, name) {
     return Object.prototype.hasOwnProperty.call(obj, name);
 }
 
+export function query(selector, parent = document) {
+    return parent.querySelector(selector);
+}
+
+export function queryAll(selector, parent = document) {
+    return Array.from(parent.querySelectorAll(selector));
+}
+
+export function addClass(target, className) {
+    return target.classList.add(className);
+}
+
+export function removeClass(target, className) {
+    return target.classList.remove(className);
+}
+
+export function hasClass(target, className) {
+    return target.classList.contains(className);
+}
+
 export function clamp(num, a, b) {
     return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b));
 }
@@ -139,8 +159,8 @@ export function sublings(target) {
 }
 
 export function inverseClass(target, className) {
-    sublings(target).forEach(item => item.classList.remove(className));
+    sublings(target).forEach(item => removeClass(item, className));
-    target.classList.add(className);
+    addClass(target, className);
 }
 
 export function tooltip(target, msg, pos = 'up') {