添加字幕插件

docs/lab/css/artplayer-plugin-subtitle.css

@@ -0,0 +1 @@
+.artplayerPluginDanmu{display:flex}

docs/lab/css/artplayer.css

@@ -1,4 +1,4 @@
-.artplayer-video-player{position:relative;width:100%;height:100%;overflow:hidden;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{box-sizing:border-box}.artplayer-video-player .art-icon{display:inline-block;line-height:1.5}.artplayer-video-player .art-icon svg{fill:#fff}.artplayer-video-player .art-hide{display:none!important}
+.artplayer-video-player{position:relative;width:100%;height:100%;overflow:hidden;outline:0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#eee;text-align:left;direction:ltr;font-size:14px;line-height:1.3;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:manipulation;-ms-high-contrast-adjust:none}.artplayer-video-player *{box-sizing:border-box}.artplayer-video-player .art-icon{display:inline-block;line-height:1.5}.artplayer-video-player .art-icon svg{fill:#fff}
 .artplayer-video-player .artplayer-video{position:absolute;z-index:10;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color:#000;outline:0;cursor:pointer}
 .artplayer-video-player .artplayer-subtitle{position:absolute;z-index:20;bottom:40px;width:100%;padding:0 20px;text-align:center;color:#fff;text-shadow:.5px .5px .5px rgba(0,0,0,.5);font-size:20px;pointer-events:none}.artplayer-video-player .artplayer-subtitle p{margin:5px 0}
 .artplayer-video-player .artplayer-layers{position:absolute;z-index:30;left:0;top:0;right:0;bottom:0;width:100%;height:100%;pointer-events:none}.artplayer-video-player .artplayer-layers .art-layer{pointer-events:all}

docs/lab/index.html

@@ -41,6 +41,7 @@
     <script src="./plugins/codemirror.js"></script>
     <script src="./plugins/javascript.js"></script>
     <script src="./js/artplayer.js"></script>
+    <script src="./js/artplayer-plugin-subtitle.js"></script>
     <script src="./js/common.js"></script>
     <script>
         var _hmt = _hmt || [];

docs/lab/js/artplayer-plugin-subtitle.js

@@ -0,0 +1,68 @@
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+	typeof define === 'function' && define.amd ? define(['exports'], factory) :
+	(factory((global['artplayer-plugin-subtitle'] = {})));
+}(this, (function (exports) { 'use strict';
+
+	function createCommonjsModule(fn, module) {
+		return module = { exports: {} }, fn(module, module.exports), module.exports;
+	}
+
+	var _typeof_1 = createCommonjsModule(function (module) {
+	function _typeof2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof2(obj); }
+
+	function _typeof(obj) {
+	  if (typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol") {
+	    module.exports = _typeof = function _typeof(obj) {
+	      return _typeof2(obj);
+	    };
+	  } else {
+	    module.exports = _typeof = function _typeof(obj) {
+	      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : _typeof2(obj);
+	    };
+	  }
+
+	  return _typeof(obj);
+	}
+
+	module.exports = _typeof;
+	});
+
+	function artplayerPluginSubtitle(option) {
+	  return function (art) {
+	    var _art$constructor$util = art.constructor.utils,
+	        errorHandle = _art$constructor$util.errorHandle,
+	        clamp = _art$constructor$util.clamp,
+	        sleep = _art$constructor$util.sleep;
+	    errorHandle(option && typeof option.time === 'number', "The plugin 'artplayerPluginSubtitle': 'option.time' require 'number' type, but got '".concat(_typeof_1(option.time), "'"));
+	    var retry = 0;
+	    var maxRetry = 10;
+	    var time = clamp(option.time, -10, 10);
+
+	    function adjust() {
+	      errorHandle(retry < maxRetry, 'It seems that something wrong for reading subtitle');
+	      retry += 1;
+	      var cues = Array.from(art.refs.$track.track.cues);
+
+	      if (cues.length === 0) {
+	        sleep(100).then(adjust);
+	      } else {
+	        cues.forEach(function (cue) {
+	          cue.startTime += time;
+	          cue.endTime += time;
+	        });
+	      }
+	    }
+
+	    art.on('subtitle:load', adjust);
+	  };
+	}
+
+	window.artplayerPluginSubtitle = artplayerPluginSubtitle;
+
+	exports.default = artplayerPluginSubtitle;
+
+	Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=artplayer-plugin-subtitle.js.map

docs/lab/js/artplayer-plugin-subtitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"artplayer-plugin-subtitle.js","sources":["../../../packages/artplayer-plugin-subtitle/node_modules/@babel/runtime/helpers/typeof.js","../../../packages/artplayer-plugin-subtitle/src/index.js"],"sourcesContent":["function _typeof2(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n  if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n    module.exports = _typeof = function _typeof(obj) {\n      return _typeof2(obj);\n    };\n  } else {\n    module.exports = _typeof = function _typeof(obj) {\n      return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n    };\n  }\n\n  return _typeof(obj);\n}\n\nmodule.exports = _typeof;","function artplayerPluginSubtitle(option) {\n    return art => {\n        const { errorHandle, clamp, sleep } = art.constructor.utils;\n\n        errorHandle(\n            option && typeof option.time === 'number',\n            `The plugin 'artplayerPluginSubtitle': 'option.time' require 'number' type, but got '${typeof option.time}'`,\n        );\n\n        let retry = 0;\n        const maxRetry = 10;\n        const time = clamp(option.time, -10, 10);\n\n        function adjust() {\n            errorHandle(retry < maxRetry, 'It seems that something wrong for reading subtitle');\n            retry += 1;\n            const cues = Array.from(art.refs.$track.track.cues);\n            if (cues.length === 0) {\n                sleep(100).then(adjust);\n            } else {\n                cues.forEach(cue => {\n                    cue.startTime += time;\n                    cue.endTime += time;\n                });\n            }\n        }\n\n        art.on('subtitle:load', adjust);\n    };\n}\n\nwindow.artplayerPluginSubtitle = artplayerPluginSubtitle;\nexport default artplayerPluginSubtitle;\n"],"names":["artplayerPluginSubtitle","option","art","constructor","utils","errorHandle","clamp","sleep","time","retry","maxRetry","adjust","cues","Array","from","refs","$track","track","length","then","forEach","cue","startTime","endTime","on","window"],"mappings":";;;;;;;;;;;CAAA,SAAS,QAAQ,CAAC,GAAG,EAAE,EAAE,IAAI,OAAO,MAAM,KAAK,UAAU,IAAI,OAAO,MAAM,CAAC,QAAQ,KAAK,QAAQ,EAAE,EAAE,QAAQ,GAAG,SAAS,QAAQ,CAAC,GAAG,EAAE,EAAE,OAAO,OAAO,GAAG,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,QAAQ,GAAG,SAAS,QAAQ,CAAC,GAAG,EAAE,EAAE,OAAO,GAAG,IAAI,OAAO,MAAM,KAAK,UAAU,IAAI,GAAG,CAAC,WAAW,KAAK,MAAM,IAAI,GAAG,KAAK,MAAM,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE;;CAErW,SAAS,OAAO,CAAC,GAAG,EAAE;GACpB,IAAI,OAAO,MAAM,KAAK,UAAU,IAAI,QAAQ,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,QAAQ,EAAE;KAC1E,cAAc,GAAG,OAAO,GAAG,SAAS,OAAO,CAAC,GAAG,EAAE;OAC/C,OAAO,QAAQ,CAAC,GAAG,CAAC,CAAC;MACtB,CAAC;IACH,MAAM;KACL,cAAc,GAAG,OAAO,GAAG,SAAS,OAAO,CAAC,GAAG,EAAE;OAC/C,OAAO,GAAG,IAAI,OAAO,MAAM,KAAK,UAAU,IAAI,GAAG,CAAC,WAAW,KAAK,MAAM,IAAI,GAAG,KAAK,MAAM,CAAC,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;MACjI,CAAC;IACH;;GAED,OAAO,OAAO,CAAC,GAAG,CAAC,CAAC;EACrB;;CAED,cAAc,GAAG,OAAO;;;CChBxB,SAASA,uBAAT,CAAiCC,MAAjC,EAAyC;CACrC,SAAO,UAAAC,GAAG,EAAI;CAAA,gCAC4BA,GAAG,CAACC,WAAJ,CAAgBC,KAD5C;CAAA,QACFC,WADE,yBACFA,WADE;CAAA,QACWC,KADX,yBACWA,KADX;CAAA,QACkBC,KADlB,yBACkBA,KADlB;CAGVF,IAAAA,WAAW,CACPJ,MAAM,IAAI,OAAOA,MAAM,CAACO,IAAd,KAAuB,QAD1B,0GAEuFP,MAAM,CAACO,IAF9F,QAAX;CAKA,QAAIC,KAAK,GAAG,CAAZ;CACA,QAAMC,QAAQ,GAAG,EAAjB;CACA,QAAMF,IAAI,GAAGF,KAAK,CAACL,MAAM,CAACO,IAAR,EAAc,CAAC,EAAf,EAAmB,EAAnB,CAAlB;;CAEA,aAASG,MAAT,GAAkB;CACdN,MAAAA,WAAW,CAACI,KAAK,GAAGC,QAAT,EAAmB,oDAAnB,CAAX;CACAD,MAAAA,KAAK,IAAI,CAAT;CACA,UAAMG,IAAI,GAAGC,KAAK,CAACC,IAAN,CAAWZ,GAAG,CAACa,IAAJ,CAASC,MAAT,CAAgBC,KAAhB,CAAsBL,IAAjC,CAAb;;CACA,UAAIA,IAAI,CAACM,MAAL,KAAgB,CAApB,EAAuB;CACnBX,QAAAA,KAAK,CAAC,GAAD,CAAL,CAAWY,IAAX,CAAgBR,MAAhB;CACH,OAFD,MAEO;CACHC,QAAAA,IAAI,CAACQ,OAAL,CAAa,UAAAC,GAAG,EAAI;CAChBA,UAAAA,GAAG,CAACC,SAAJ,IAAiBd,IAAjB;CACAa,UAAAA,GAAG,CAACE,OAAJ,IAAef,IAAf;CACH,SAHD;CAIH;CACJ;;CAEDN,IAAAA,GAAG,CAACsB,EAAJ,CAAO,eAAP,EAAwBb,MAAxB;CACH,GA3BD;CA4BH;;CAEDc,MAAM,CAACzB,uBAAP,GAAiCA,uBAAjC;;;;;;;;;;;;"}

docs/lab/js/artplayer.js

@@ -4,36 +4,6 @@
   (factory((global.artplayer = {})));
 }(this, (function (exports) { 'use strict';
 
-  function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) {
-      for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {
-        arr2[i] = arr[i];
-      }
-
-      return arr2;
-    }
-  }
-
-  var arrayWithoutHoles = _arrayWithoutHoles;
-
-  function _iterableToArray(iter) {
-    if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
-  }
-
-  var iterableToArray = _iterableToArray;
-
-  function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance");
-  }
-
-  var nonIterableSpread = _nonIterableSpread;
-
-  function _toConsumableArray(arr) {
-    return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread();
-  }
-
-  var toConsumableArray = _toConsumableArray;
-
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
       throw new TypeError("Cannot call a class as a function");
@@ -615,6 +585,12 @@
     mutex: 'boolean',
     fullscreen: 'boolean',
     fullscreenWeb: 'boolean',
+    plugins: {
+      type: 'array',
+      child: {
+        type: 'function'
+      }
+    },
     layers: {
       type: 'array',
       child: {
@@ -4292,7 +4268,6 @@
 
       this.art = art;
       this.state = true;
-      this.vttText = '';
       var url = this.art.option.subtitle.url;
 
       if (url) {
@@ -4315,10 +4290,12 @@
         var $track = document.createElement('track');
         $track.default = true;
         $track.kind = 'metadata';
-        this.load(subtitle.url).then(function (data) {
-          $track.src = data;
-          $video.appendChild($track);
-          _this.art.refs.$track = $track;
+        $video.appendChild($track);
+        this.art.refs.$track = $track;
+        this.load(subtitle.url).then(function (vttText) {
+          $track.src = vttToBlob(vttText);
+
+          _this.art.emit('subtitle:load', vttText);
 
           if ($video.textTracks && $video.textTracks[0]) {
             var _$video$textTracks = slicedToArray($video.textTracks, 1),
@@ -4346,21 +4323,21 @@
     }, {
       key: "load",
       value: function load(url) {
-        var _this2 = this;
-
         var notice = this.art.notice;
         var type;
         return fetch(url).then(function (response) {
           type = response.headers.get('Content-Type');
           return response.text();
         }).then(function (text) {
+          var vttText = '';
+
           if (/x-subrip/gi.test(type)) {
-            _this2.vttText = srtToVtt(text);
+            vttText = srtToVtt(text);
           } else {
-            _this2.vttText = text;
+            vttText = text;
           }
 
-          return vttToBlob(_this2.vttText);
+          return vttText;
         }).catch(function (err) {
           notice.show(err);
           console.warn(err);
@@ -4403,14 +4380,16 @@
     }, {
       key: "switch",
       value: function _switch(url) {
-        var _this3 = this;
+        var _this2 = this;
 
         var $track = this.art.refs.$track;
         errorHandle($track, 'You need to initialize the subtitle option first.');
-        this.load(url).then(function (data) {
-          $track.src = data;
+        this.load(url).then(function (vttText) {
+          $track.src = vttToBlob(vttText);
 
-          _this3.art.emit('subtitle:switch', url);
+          _this2.art.emit('subtitle:load', vttText);
+
+          _this2.art.emit('subtitle:switch', url);
         });
       }
     }]);
@@ -5257,6 +5236,21 @@
         id += 1;
         this.id = id;
         Artplayer.instances.push(this);
+        this.plugins = [];
+        this.option.plugins.forEach(function (plugin, index) {
+          var resule = plugin(_this2);
+          var pluginName = '';
+
+          if (resule && resule.name) {
+            pluginName = resule.name;
+          } else if (plugin.name) {
+            pluginName = plugin.name;
+          } else {
+            pluginName = "plugin".concat(index);
+          }
+
+          _this2.plugins[pluginName] = resule;
+        });
       }
     }, {
       key: "destroy",
@@ -5274,25 +5268,6 @@
         this.emit('destroy');
       }
     }], [{
-      key: "use",
-      value: function use() {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-
-        var plugin = args[0];
-        var installedPlugins = this.plugins || (this.plugins = []);
-
-        if (installedPlugins.indexOf === -1) {
-          installedPlugins.push(plugin);
-          args.unshift(this);
-          plugin.apply(void 0, toConsumableArray(args.slice(1)));
-          this.prototype.emit('use', plugin);
-        }
-
-        return this;
-      }
-    }, {
       key: "version",
       get: function get() {
         return '1.0.3';
@@ -5337,6 +5312,7 @@
           quality: [],
           controls: [],
           highlight: [],
+          plugins: [],
           thumbnails: {
             url: '',
             number: 60,

docs/lab/js/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/toConsumableArray.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../../packages/artplayer/node_modules/tiny-emitter/index.js","../../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../../packages/artplayer/node_modules/deepmerge/dist/es.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../../packages/artplayer/src/utils/error.js","../../../packages/artplayer/src/utils/dom.js","../../../packages/artplayer/src/utils/subtitle.js","../../../packages/artplayer/src/utils/index.js","../../../packages/artplayer/src/scheme/validElement.js","../../../packages/artplayer/src/scheme/validStringEmpty.js","../../../packages/artplayer/src/scheme/index.js","../../../packages/artplayer/src/config/mimeCodec.js","../../../packages/artplayer/src/config/mse.js","../../../packages/artplayer/src/config/video.js","../../../packages/artplayer/src/config/index.js","../../../packages/artplayer/src/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/mountUrlMix.js","../../../packages/artplayer/src/player/attrInit.js","../../../packages/artplayer/src/player/eventInit.js","../../../packages/artplayer/src/player/playMix.js","../../../packages/artplayer/src/player/pauseMin.js","../../../packages/artplayer/src/player/toggleMix.js","../../../packages/artplayer/src/player/seekMix.js","../../../packages/artplayer/src/player/volumeMix.js","../../../packages/artplayer/src/player/currentTimeMix.js","../../../packages/artplayer/src/player/durationMix.js","../../../packages/artplayer/src/player/switchQualityMix.js","../../../packages/artplayer/src/player/playbackRateMix.js","../../../packages/artplayer/src/player/aspectRatioMix.js","../../../packages/artplayer/src/player/screenshotMix.js","../../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../../packages/artplayer/src/player/fullscreenMix.js","../../../packages/artplayer/src/player/fullscreenWebMix.js","../../../packages/artplayer/node_modules/get-size/get-size.js","../../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../../packages/artplayer/node_modules/unipointer/unipointer.js","../../../packages/artplayer/node_modules/unidragger/unidragger.js","../../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../../packages/artplayer/src/player/pipMix.js","../../../packages/artplayer/src/player/loadedMix.js","../../../packages/artplayer/src/player/playedMix.js","../../../packages/artplayer/src/player/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/src/utils/component.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../../packages/artplayer/src/icons/index.js","../../../packages/artplayer/src/controls/fullscreen.js","../../../packages/artplayer/src/controls/fullscreenWeb.js","../../../packages/artplayer/src/controls/pip.js","../../../packages/artplayer/src/controls/playAndPause.js","../../../packages/artplayer/src/controls/progress.js","../../../packages/artplayer/src/controls/subtitle.js","../../../packages/artplayer/src/controls/time.js","../../../packages/artplayer/src/controls/volume.js","../../../packages/artplayer/src/controls/setting.js","../../../packages/artplayer/src/controls/thumbnails.js","../../../packages/artplayLine truncated
+{"version":3,"file":"artplayer.js","sources":["../../../packages/artplayer/node_modules/@babel/runtime/helpers/classCallCheck.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/createClass.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/typeof.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/inherits.js","../../../packages/artplayer/node_modules/tiny-emitter/index.js","../../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../../packages/artplayer/node_modules/deepmerge/dist/es.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/isNativeFunction.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/construct.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../../packages/artplayer/src/utils/error.js","../../../packages/artplayer/src/utils/dom.js","../../../packages/artplayer/src/utils/subtitle.js","../../../packages/artplayer/src/utils/index.js","../../../packages/artplayer/src/scheme/validElement.js","../../../packages/artplayer/src/scheme/validStringEmpty.js","../../../packages/artplayer/src/scheme/index.js","../../../packages/artplayer/src/config/mimeCodec.js","../../../packages/artplayer/src/config/mse.js","../../../packages/artplayer/src/config/video.js","../../../packages/artplayer/src/config/index.js","../../../packages/artplayer/src/template.js","../../../packages/artplayer/src/i18n.js","../../../packages/artplayer/src/player/mountUrlMix.js","../../../packages/artplayer/src/player/attrInit.js","../../../packages/artplayer/src/player/eventInit.js","../../../packages/artplayer/src/player/playMix.js","../../../packages/artplayer/src/player/pauseMin.js","../../../packages/artplayer/src/player/toggleMix.js","../../../packages/artplayer/src/player/seekMix.js","../../../packages/artplayer/src/player/volumeMix.js","../../../packages/artplayer/src/player/currentTimeMix.js","../../../packages/artplayer/src/player/durationMix.js","../../../packages/artplayer/src/player/switchQualityMix.js","../../../packages/artplayer/src/player/playbackRateMix.js","../../../packages/artplayer/src/player/aspectRatioMix.js","../../../packages/artplayer/src/player/screenshotMix.js","../../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../../packages/artplayer/src/player/fullscreenMix.js","../../../packages/artplayer/src/player/fullscreenWebMix.js","../../../packages/artplayer/node_modules/get-size/get-size.js","../../../packages/artplayer/node_modules/ev-emitter/ev-emitter.js","../../../packages/artplayer/node_modules/unipointer/unipointer.js","../../../packages/artplayer/node_modules/unidragger/unidragger.js","../../../packages/artplayer/node_modules/draggabilly/draggabilly.js","../../../packages/artplayer/src/player/pipMix.js","../../../packages/artplayer/src/player/loadedMix.js","../../../packages/artplayer/src/player/playedMix.js","../../../packages/artplayer/src/player/autoSizeMix.js","../../../packages/artplayer/src/player/flipMix.js","../../../packages/artplayer/src/player/index.js","../../../packages/artplayer/src/utils/component.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/defineProperty.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/objectSpread.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/nonIterableRest.js","../../../packages/artplayer/node_modules/@babel/runtime/helpers/slicedToArray.js","../../../packages/artplayer/src/icons/index.js","../../../packages/artplayer/src/controls/fullscreen.js","../../../packages/artplayer/src/controls/fullscreenWeb.js","../../../packages/artplayer/src/controls/pip.js","../../../packages/artplayer/src/controls/playAndPause.js","../../../packages/artplayer/src/controls/progress.js","../../../packages/artplayer/src/controls/subtitle.js","../../../packages/artplayer/src/controls/time.js","../../../packages/artplayer/src/controls/volume.js","../../../packages/artplayer/src/controls/setting.js","../../../packages/artplayer/src/controls/thumbnails.js","../../../packages/artplayer/src/controls/screenshot.js","../../../packages/artplayer/src/controls/quality.js","../../../packages/artplayer/src/controls/index.js","../../../packages/artplayer/src/contextmenu/playbackRate.js","../../../packages/artplayer/src/contextmenu/aspectRatio.js","../../../packages/artplayer/src/contextmenu/info.js","../../../packages/artplayer/srcLine truncated

docs/lab/js/index.js

@@ -1,130 +1,134 @@
 var url = 'https://blog.zhw-island.com/assets-cdn';
 var art = new Artplayer({
-  container: '.artplayer-app',
-  url: url + '/video/one-more-time-one-more-chance-480p.mp4',
-  title: '【新海诚动画】『秒速5センチメートル』',
-  poster: url + '/image/one-more-time-one-more-chance-poster.jpg',
-  volume: 0.5,
-  muted: false,
-  autoplay: false,
-  pip: true,
-  autoSize: true,
-  screenshot: true,
-  setting: true,
-  loop: true,
-  playbackRate: true,
-  aspectRatio: true,
-  fullscreen: true,
-  fullscreenWeb: true,
-  mutex: true,
-  theme: '#ffad00',
-  lang: 'zh-cn',
-  moreVideoAttr: {
-    'webkit-playsinline': true,
-    'playsinline': true
-  },
-  contextmenu: [
-      {
-          html: '自定义菜单 - 天亮请关灯 Σ(っ °Д °;)っ',
-          click: function() {
-            document.querySelector('.video-wrap').classList.toggle('dark');
-            this.hide();
-          }
-      }
-  ],
-  layers: [
-    {
-      html: `<img style="width: 100px" src="${url}/image/your-name.png">`,
-      click: function () {
-        art.destroy(true);
-        art = new Artplayer({
-            autoplay: true,
-            container: '.artplayer-app',
-            url: url + '/video/you-name.mp4'
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    title: '【新海诚动画】『秒速5センチメートル』',
+    poster: url + '/image/one-more-time-one-more-chance-poster.jpg',
+    volume: 0.5,
+    muted: false,
+    autoplay: false,
+    pip: true,
+    autoSize: true,
+    screenshot: true,
+    setting: true,
+    loop: true,
+    playbackRate: true,
+    aspectRatio: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    mutex: true,
+    theme: '#ffad00',
+    lang: 'zh-cn',
+    moreVideoAttr: {
+        'webkit-playsinline': true,
+        playsinline: true,
+    },
+    contextmenu: [
+        {
+            html: '自定义菜单 - 天亮请关灯 Σ(っ °Д °;)っ',
+            click: function() {
+                document.querySelector('.video-wrap').classList.toggle('dark');
+                this.hide();
+            },
+        },
+    ],
+    layers: [
+        {
+            html: `<img style="width: 100px" src="${url}/image/your-name.png">`,
+            click: function() {
+                art.destroy(true);
+                art = new Artplayer({
+                    autoplay: true,
+                    container: '.artplayer-app',
+                    url: url + '/video/you-name.mp4',
+                });
+            },
+            style: {
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+                opacity: '.9',
+            },
+        },
+    ],
+    quality: [
+        {
+            default: true,
+            name: '标清 480P',
+            url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+        },
+        {
+            name: '高清 720P',
+            url: url + '/video/one-more-time-one-more-chance-720p.mp4',
+        },
+    ],
+    thumbnails: {
+        url: url + '/image/one-more-time-one-more-chance-thumbnails.png',
+        width: 190,
+        height: 107,
+    },
+    subtitle: {
+        url: url + '/subtitle/one-more-time-one-more-chance.srt',
+        style: {
+            color: '#03A9F4',
+        },
+    },
+    highlight: [
+        {
+            time: 60,
+            text: 'One more chance',
+        },
+        {
+            time: 120,
+            text: '谁でもいいはずなのに',
+        },
+        {
+            time: 180,
+            text: '夏の想い出がまわる',
+        },
+        {
+            time: 240,
+            text: 'こんなとこにあるはずもないのに',
+        },
+        {
+            time: 300,
+            text: '－－终わり－－',
+        },
+    ],
+    controls: [
+        {
+            name: 'myController',
+            position: 'right',
+            index: 1,
+            html: 'myController',
+            click: function() {
+                console.log('click myController');
+            },
+        },
+    ],
+    plugins: [
+        artplayerPluginSubtitle({
+            time: 4
         })
-      },
-      style: {
-          'position': 'absolute',
-          'top': '20px',
-          'right': '20px',
-          'opacity': '.9'
-      }
-    }
-  ],
-  quality: [
-    {
-      default: true,
-      name: '标清 480P',
-      url: url + '/video/one-more-time-one-more-chance-480p.mp4'
-    },
-    {
-      name: '高清 720P',
-      url: url + '/video/one-more-time-one-more-chance-720p.mp4'
-    }
-  ],
-  thumbnails: {
-    url: url + '/image/one-more-time-one-more-chance-thumbnails.png',
-    width: 190,
-    height: 107
-  },
-  subtitle: {
-    url: url + '/subtitle/one-more-time-one-more-chance.srt',
-    style: {
-      color: '#03A9F4'
-    }
-  },
-  highlight: [
-    {
-      time: 60,
-      text: 'One more chance'
-    },
-    {
-      time: 120,
-      text: '谁でもいいはずなのに'
-    },
-    {
-      time: 180,
-      text: '夏の想い出がまわる'
-    },
-    {
-      time: 240,
-      text: 'こんなとこにあるはずもないのに'
-    },
-    {
-      time: 300,
-      text: '－－终わり－－'
-    }
-  ],
-  controls: [
-    {
-      name: 'myController',
-      position: 'right',
-      index: 1,
-      html: 'myController',
-      click: function() {
-        console.log('click myController');
-      }
-    }
-  ]
+    ]
 });
 
-
 art.on('firstCanplay', () => {
-  art.on('resize', $player => {
-    art.controls.quality.show();
-    art.controls.setting.show();
-    art.controls.subtitle.show();
-    art.controls.pip.show();
-  
-    var playerWidth = $player.clientWidth;
-    if (playerWidth < 480) {
-      art.controls.quality.hide();
-      art.controls.setting.hide();
-    } 
-    
-    if (playerWidth < 360) {
-      art.controls.subtitle.hide();
-      art.controls.pip.hide();
-    }
-  });
-});
+    art.on('resize', $player => {
+        art.controls.quality.show();
+        art.controls.setting.show();
+        art.controls.subtitle.show();
+        art.controls.pip.show();
+
+        var playerWidth = $player.clientWidth;
+        if (playerWidth < 480) {
+            art.controls.quality.hide();
+            art.controls.setting.hide();
+        }
+
+        if (playerWidth < 360) {
+            art.controls.subtitle.hide();
+            art.controls.pip.hide();
+        }
+    });
+});