添加字幕本地预览

docs/assets/example/index.js

@@ -20,7 +20,8 @@ var art = new Artplayer({
     fullscreenWeb: true,
     subtitleOffset: true,
     miniProgressBar: true,
-    localPreview: true,
+    localVideo: true,
+    localSubtitle: true,
     networkMonitor: false,
     autoPip: true,
     mutex: true,
@@ -105,11 +106,21 @@ var art = new Artplayer({
     ],
     controls: [
         {
-            name: 'preview',
+            name: 'localVideo',
             position: 'right',
-            html: 'OPEN',
+            html: 'VIDEO',
+            tooltip: 'Open Local Video',
             mounted: $preview => {
-                art.plugins.localPreview.attach($preview);
+                art.plugins.localVideo.attach($preview);
+            },
+        },
+        {
+            name: 'localSubtitle',
+            position: 'right',
+            html: 'SUBTITLE',
+            tooltip: 'Open Local Subtitle',
+            mounted: $preview => {
+                art.plugins.localSubtitle.attach($preview);
             },
         },
     ],

docs/document/README.md

@@ -571,12 +571,12 @@ var art = new Artplayer({
 });
 ```
 
-## localPreview
+## localVideo
 
 -   Type: `Boolean`
 -   Default: `false`
 
-Local Preview plugin
+Local video preview plugin
 
 [Run Code](/)
 
@@ -585,14 +585,42 @@ var url = 'https://zhw2590582.github.io/assets-cdn';
 var art = new Artplayer({
     container: '.artplayer-app',
     url: url + '/video/one-more-time-one-more-chance-480p.mp4',
-    localPreview: true,
+    localVideo: true,
     controls: [
         {
             name: 'preview',
             position: 'right',
-            html: 'OPEN',
+            html: 'OPEN VIDEO',
             mounted: $preview => {
-                art.plugins.localPreview.attach($preview);
+                art.plugins.localVideo.attach($preview);
+            },
+        },
+    ],
+});
+```
+
+## localSubtitle
+
+-   Type: `Boolean`
+-   Default: `false`
+
+Local subtitle preview plugin
+
+[Run Code](/)
+
+```js
+var url = 'https://zhw2590582.github.io/assets-cdn';
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+    localSubtitle: true,
+    controls: [
+        {
+            name: 'preview',
+            position: 'right',
+            html: 'OPEN SUBTITLE',
+            mounted: $preview => {
+                art.plugins.localSubtitle.attach($preview);
             },
         },
     ],
@@ -826,6 +854,7 @@ Custom layer, The type of layer is an object or function
 | `style`   | `Object`            | The style object                              |
 | `click`   | `Function`          | Click event                                   |
 | `mounted` | `Function`          | Callback after mounted                        |
+| `tooltip` | `String`            | Tooltip text                                  |
 
 [Run Code](/)
 
@@ -864,6 +893,7 @@ Custom contextmenu, The type of layer is an object or function
 | `style`   | `Object`            | The style object                              |
 | `click`   | `Function`          | Click event                                   |
 | `mounted` | `Function`          | Callback after mounted                        |
+| `tooltip` | `String`            | Tooltip text                                  |
 
 [Run Code](/)
 
@@ -901,6 +931,7 @@ Custom controls, The type of controls is an object or function
 | `click`    | `Function`          | Click event                                                       |
 | `mounted`  | `Function`          | Callback after mounted                                            |
 | `position` | `String`            | The position where the controller appears: `top`, `left`, `right` |
+| `tooltip`  | `String`            | Tooltip text                                                      |
 
 [Run Code](/)
 
@@ -916,6 +947,7 @@ var art = new Artplayer({
                 position: 'right',
                 index: 10,
                 html: 'myController',
+                tooltip: 'This is my controller',
                 click: function() {
                     console.log('myController');
                 },
@@ -1018,6 +1050,7 @@ Player core function
 | `toggle`              | `Boolean`  | Toggle play and pause                                                                             |
 | `volume`              | `Number`   | `Getter` and `Setter` of the current volume                                                       |
 | `muted`               | `Boolean`  | `Getter` and `Setter` of the muted                                                                |
+| `url`                 | `String`   | `Getter` of the video url                                                                         |
 
 [Run Code](/)
 
@@ -1268,7 +1301,7 @@ var art = new Artplayer({
                 index: 10,
                 html: 'subtitle1',
                 click: function() {
-                    art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.srt');
+                    art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.srt', 'srt subtitle name');
                 },
             };
         },
@@ -1278,7 +1311,7 @@ var art = new Artplayer({
                 index: 20,
                 html: 'subtitle2',
                 click: function() {
-                    art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.vtt');
+                    art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.vtt', 'vtt subtitle name');
                 },
             };
         },

docs/uncompiled/artplayer.js

@@ -651,7 +651,8 @@
     fullscreenWeb: 'boolean',
     subtitleOffset: 'boolean',
     miniProgressBar: 'boolean',
-    localPreview: 'boolean',
+    localVideo: 'boolean',
+    localSubtitle: 'boolean',
     autoPip: 'boolean',
     networkMonitor: 'boolean',
     plugins: ['function'],
@@ -663,7 +664,8 @@
       html: validElement,
       style: 'object|undefined',
       click: 'function|undefined',
-      mounted: 'function|undefined'
+      mounted: 'function|undefined',
+      tooltip: 'string|undefined'
     }],
     contextmenu: [{
       disable: 'boolean|undefined',
@@ -672,7 +674,8 @@
       html: validElement,
       style: 'object|undefined',
       click: 'function|undefined',
-      mounted: 'function|undefined'
+      mounted: 'function|undefined',
+      tooltip: 'string|undefined'
     }],
     quality: [{
       default: 'boolean|undefined',
@@ -687,6 +690,7 @@
       style: 'object|undefined',
       click: 'function|undefined',
       mounted: 'function|undefined',
+      tooltip: 'string|undefined',
       position: function position(value, type, paths) {
         var position = ['top', 'left', 'right'];
         return errorHandle(position.includes(value), "".concat(paths.join('.'), " only accept ").concat(position.toString(), " as parameters"));
@@ -880,7 +884,7 @@
   	"Web fullscreen": "网页全屏",
   	"Exit web fullscreen": "退出网页全屏",
   	"Mini player": "迷你播放器",
-  	"This does not seem to support full screen functionality": "似乎不支持全屏功能"
+  	"Does not support fullscreen": "不支持全屏"
   };
 
   var Close$1 = "關閉";
@@ -929,7 +933,7 @@
   	"Web fullscreen": "網頁全屏",
   	"Exit web fullscreen": "退出網頁全屏",
   	"Mini player": "迷你播放器",
-  	"This does not seem to support full screen functionality": "似乎不支持全屏功能"
+  	"Does not support fullscreen": "不支持全屏"
   };
 
   var I18n =
@@ -1288,6 +1292,7 @@
         var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'unknown';
 
         if (url !== template.$video.src) {
+          URL.revokeObjectURL(template.$video.src);
           var currentTime = player.currentTime,
               playing = player.playing;
           return player.attachUrl(url).then(function () {
@@ -1315,6 +1320,7 @@
         var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'unknown';
 
         if (url !== template.$video.src) {
+          URL.revokeObjectURL(template.$video.src);
           var playing = player.playing;
           return player.attachUrl(url).then(function () {
             option.url = url;
@@ -1683,7 +1689,7 @@
     };
 
     var screenfullError = function screenfullError() {
-      notice.show(i18n.get('This does not seem to support full screen functionality'));
+      notice.show(i18n.get('Does not support fullscreen'));
     };
 
     if (player.fullscreenIsEnabled) {
@@ -2090,6 +2096,10 @@
       setStyles($element, option.style);
     }
 
+    if (option.tooltip) {
+      tooltip($element, option.tooltip);
+    }
+
     var childs = Array.from(target.children);
     $element.dataset.index = option.index || componentID;
     var nextChild = childs.find(function (item) {
@@ -3297,11 +3307,12 @@
     createClass(Subtitle, [{
       key: "switch",
       value: function _switch(url) {
+        var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'unknown';
         var _this$art = this.art,
             i18n = _this$art.i18n,
             notice = _this$art.notice;
         return this.init(url).then(function (blobUrl) {
-          notice.show(i18n.get('Switch subtitle'));
+          notice.show("".concat(i18n.get('Switch subtitle'), ": ").concat(name));
           return blobUrl;
         });
       }
@@ -4225,47 +4236,28 @@
     };
   }
 
-  function localPreview(art) {
+  function localVideo(art) {
-    var _art$constructor$util = art.constructor.utils,
-        append = _art$constructor$util.append,
-        setStyle = _art$constructor$util.setStyle,
-        setStyles = _art$constructor$util.setStyles,
-        sleep = _art$constructor$util.sleep,
-        errorHandle = _art$constructor$util.errorHandle;
     var proxy = art.events.proxy,
-        option = art.option,
         notice = art.notice,
         i18n = art.i18n,
         template = art.template,
         player = art.player;
+    var notSupport = 'Playback of this file format is not supported';
     i18n.update({
-      'zh-cn': {
+      'zh-cn': defineProperty({}, notSupport, '不支持播放该文件格式'),
-        'Playback of this file format is not supported': '不支持播放该文件格式',
+      'zh-tw': defineProperty({}, notSupport, '不支持播放該文件格式')
-        'Load local video successfully': '加载本地视频成功'
-      },
-      'zh-tw': {
-        'Playback of this file format is not supported': '不支持播放該文件格式',
-        'Load local video successfully': '加載本地視頻成功'
-      }
     });
 
     function loadVideo(file) {
       if (file) {
+        var type = getExt(file.name);
         var canPlayType = template.$video.canPlayType(file.type);
 
         if (canPlayType === 'maybe' || canPlayType === 'probably') {
           var url = URL.createObjectURL(file);
-          player.playbackRate = false;
+          player.switchUrl(url, file.name);
-          player.aspectRatio = false;
-          template.$video.src = url;
-          sleep(1000).then(function () {
-            player.currentTime = 0;
-          });
-          option.url = url;
-          art.emit('switch', url);
-          notice.show(i18n.get('Load local video successfully'));
         } else {
-          var tip = "".concat(i18n.get('Playback of this file format is not supported'), ": ").concat(file.type);
+          var tip = "".concat(i18n.get(notSupport), ": ").concat(file.type || type);
           notice.show(tip, true, 3000);
           errorHandle(false, tip);
         }
@@ -4274,7 +4266,6 @@
 
     proxy(template.$player, 'dragover', function (e) {
       e.preventDefault();
-      notice.show(i18n.get('Load local video successfully'));
     });
     proxy(template.$player, 'drop', function (e) {
       e.preventDefault();
@@ -4282,7 +4273,7 @@
       loadVideo(file);
     });
     return {
-      name: 'localPreview',
+      name: 'localVideo',
       attach: function attach(target) {
         var $input = append(target, '<input type="file">');
         setStyle(target, 'position', 'relative');
@@ -4302,6 +4293,81 @@
     };
   }
 
+  function localSubtitle(art) {
+    var proxy = art.events.proxy,
+        notice = art.notice,
+        i18n = art.i18n,
+        subtitle = art.subtitle;
+    var notSupport = 'Only supports subtitle files in .ass, .vtt and .srt format';
+    i18n.update({
+      'zh-cn': defineProperty({}, notSupport, '只支持 .ass、.vtt 和 .srt 格式的字幕文件'),
+      'zh-tw': defineProperty({}, notSupport, '只支持 .ass、.vtt 和 .srt 格式的字幕文件')
+    });
+
+    function loadSubtitle(file) {
+      if (file) {
+        var type = getExt(file.name);
+
+        if (['ass', 'vtt', 'srt'].includes(type)) {
+          var reader = new FileReader();
+          proxy(reader, 'load', function (event) {
+            var text = event.target.result;
+
+            switch (type) {
+              case 'srt':
+                {
+                  var url = vttToBlob(srtToVtt(text));
+                  subtitle.switch(url, file.name);
+                  break;
+                }
+
+              case 'ass':
+                {
+                  var _url = vttToBlob(assToVtt(text));
+
+                  subtitle.switch(_url, file.name);
+                  break;
+                }
+
+              case 'vtt':
+                {
+                  var _url2 = vttToBlob(text);
+
+                  subtitle.switch(_url2, file.name);
+                  break;
+                }
+            }
+          });
+          reader.readAsText(file);
+        } else {
+          var tip = i18n.get(notSupport);
+          notice.show(tip, true, 3000);
+          errorHandle(false, tip);
+        }
+      }
+    }
+
+    return {
+      name: 'localSubtitle',
+      attach: function attach(target) {
+        var $input = append(target, '<input type="file">');
+        setStyle(target, 'position', 'relative');
+        setStyles($input, {
+          position: 'absolute',
+          width: '100%',
+          height: '100%',
+          left: '0',
+          top: '0',
+          opacity: '0'
+        });
+        proxy($input, 'change', function () {
+          var file = $input.files[0];
+          loadSubtitle(file);
+        });
+      }
+    };
+  }
+
   function miniProgressBar(art) {
     var layers = art.layers,
         player = art.player,
@@ -4437,8 +4503,12 @@
         this.add(miniProgressBar);
       }
 
-      if (option.localPreview) {
+      if (option.localVideo) {
-        this.add(localPreview);
+        this.add(localVideo);
+      }
+
+      if (option.localSubtitle) {
+        this.add(localSubtitle);
       }
 
       if (option.networkMonitor) {
@@ -4652,7 +4722,8 @@
           fullscreenWeb: false,
           subtitleOffset: false,
           miniProgressBar: false,
-          localPreview: false,
+          localVideo: false,
+          localSubtitle: false,
           autoPip: false,
           networkMonitor: false,
           layers: [],

docs/uncompiled/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/emitter.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/attachUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.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/switchMix.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/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/src/utils/component.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/defineProperty.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/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/nonIterableRest.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/eventsLine truncated
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/classCallCheck.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/createClass.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/typeof.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/emitter.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/isNativeFunction.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/construct.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/iterableToArray.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/video.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/attachUrlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.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/switchMix.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/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/index.js","../../packages/artplayer/src/utils/component.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/defineProperty.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/src/contextmenu/version.js","../../packages/artplayer/src/contextmenu/close.js","../../packages/artplayer/src/contextmenu/index.js","../../packages/artplayer/src/info.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/nonIterableRest.js","../../node_modules/_@babel_runtime@7.7.2@@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/eventsLine truncated

packages/artplayer/src/i18n/zh-cn.json

@@ -30,5 +30,5 @@
     "Web fullscreen": "网页全屏",
     "Exit web fullscreen": "退出网页全屏",
     "Mini player": "迷你播放器",
-    "This does not seem to support full screen functionality": "似乎不支持全屏功能"
+    "Does not support fullscreen": "不支持全屏"
-}
+}

packages/artplayer/src/i18n/zh-tw.json

@@ -30,5 +30,5 @@
     "Web fullscreen": "網頁全屏",
     "Exit web fullscreen": "退出網頁全屏",
     "Mini player": "迷你播放器",
-    "This does not seem to support full screen functionality": "似乎不支持全屏功能"
+    "Does not support fullscreen": "不支持全屏"
 }

packages/artplayer/src/index.js

@@ -123,7 +123,8 @@ class Artplayer extends Emitter {
             fullscreenWeb: false,
             subtitleOffset: false,
             miniProgressBar: false,
-            localPreview: false,
+            localVideo: false,
+            localSubtitle: false,
             autoPip: false,
             networkMonitor: false,
             layers: [],

packages/artplayer/src/player/fullscreenMix.js

@@ -14,7 +14,7 @@ export default function fullscreenMix(art, player) {
     };
 
     const screenfullError = () => {
-        notice.show(i18n.get('This does not seem to support full screen functionality'));
+        notice.show(i18n.get('Does not support fullscreen'));
     };
 
     if (player.fullscreenIsEnabled) {

packages/artplayer/src/player/switchMix.js

@@ -4,6 +4,7 @@ export default function switchMix(art, player) {
     Object.defineProperty(player, 'switchQuality', {
         value: (url, name = 'unknown') => {
             if (url !== template.$video.src) {
+                URL.revokeObjectURL(template.$video.src);
                 const { currentTime, playing } = player;
                 return player.attachUrl(url).then(() => {
                     option.url = url;
@@ -26,6 +27,7 @@ export default function switchMix(art, player) {
     Object.defineProperty(player, 'switchUrl', {
         value: (url, name = 'unknown') => {
             if (url !== template.$video.src) {
+                URL.revokeObjectURL(template.$video.src);
                 const { playing } = player;
                 return player.attachUrl(url).then(() => {
                     option.url = url;

packages/artplayer/src/plugins/index.js

@@ -1,6 +1,7 @@
 import { errorHandle, hasOwnProperty } from '../utils';
 import subtitleOffset from './subtitleOffset';
-import localPreview from './localPreview';
+import localVideo from './localVideo';
+import localSubtitle from './localSubtitle';
 import miniProgressBar from './miniProgressBar';
 import networkMonitor from './networkMonitor';
 import autoPip from './autoPip';
@@ -20,8 +21,12 @@ export default class Plugins {
             this.add(miniProgressBar);
         }
 
-        if (option.localPreview) {
+        if (option.localVideo) {
-            this.add(localPreview);
+            this.add(localVideo);
+        }
+
+        if (option.localSubtitle) {
+            this.add(localSubtitle);
         }
 
         if (option.networkMonitor) {

packages/artplayer/src/plugins/localSubtitle.js

@@ -0,0 +1,76 @@
+import { append, setStyle, setStyles, errorHandle, getExt, vttToBlob, srtToVtt, assToVtt } from '../utils';
+
+export default function localSubtitle(art) {
+    const {
+        events: { proxy },
+        notice,
+        i18n,
+        subtitle,
+    } = art;
+
+    const notSupport = 'Only supports subtitle files in .ass, .vtt and .srt format';
+    i18n.update({
+        'zh-cn': {
+            [notSupport]: '只支持 .ass、.vtt 和 .srt 格式的字幕文件',
+        },
+        'zh-tw': {
+            [notSupport]: '只支持 .ass、.vtt 和 .srt 格式的字幕文件',
+        },
+    });
+
+    function loadSubtitle(file) {
+        if (file) {
+            const type = getExt(file.name);
+            if (['ass', 'vtt', 'srt'].includes(type)) {
+                const reader = new FileReader();
+                proxy(reader, 'load', event => {
+                    const text = event.target.result;
+                    switch (type) {
+                        case 'srt': {
+                            const url = vttToBlob(srtToVtt(text));
+                            subtitle.switch(url, file.name);
+                            break;
+                        }
+                        case 'ass': {
+                            const url = vttToBlob(assToVtt(text));
+                            subtitle.switch(url, file.name);
+                            break;
+                        }
+                        case 'vtt': {
+                            const url = vttToBlob(text);
+                            subtitle.switch(url, file.name);
+                            break;
+                        }
+                        default:
+                            break;
+                    }
+                });
+                reader.readAsText(file);
+            } else {
+                const tip = i18n.get(notSupport);
+                notice.show(tip, true, 3000);
+                errorHandle(false, tip);
+            }
+        }
+    }
+
+    return {
+        name: 'localSubtitle',
+        attach(target) {
+            const $input = append(target, '<input type="file">');
+            setStyle(target, 'position', 'relative');
+            setStyles($input, {
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                left: '0',
+                top: '0',
+                opacity: '0',
+            });
+            proxy($input, 'change', () => {
+                const file = $input.files[0];
+                loadSubtitle(file);
+            });
+        },
+    };
+}

packages/artplayer/src/plugins/localVideo.js

@@ -1,41 +1,33 @@
-export default function localPreview(art) {
+import { append, setStyle, setStyles, errorHandle, getExt } from '../utils';
-    const { append, setStyle, setStyles, sleep, errorHandle } = art.constructor.utils;
+
+export default function localVideo(art) {
     const {
         events: { proxy },
-        option,
         notice,
         i18n,
         template,
         player,
     } = art;
 
+    const notSupport = 'Playback of this file format is not supported';
     i18n.update({
         'zh-cn': {
-            'Playback of this file format is not supported': '不支持播放该文件格式',
+            [notSupport]: '不支持播放该文件格式',
-            'Load local video successfully': '加载本地视频成功',
         },
         'zh-tw': {
-            'Playback of this file format is not supported': '不支持播放該文件格式',
+            [notSupport]: '不支持播放該文件格式',
-            'Load local video successfully': '加載本地視頻成功',
         },
     });
 
     function loadVideo(file) {
         if (file) {
+            const type = getExt(file.name);
             const canPlayType = template.$video.canPlayType(file.type);
             if (canPlayType === 'maybe' || canPlayType === 'probably') {
                 const url = URL.createObjectURL(file);
-                player.playbackRate = false;
+                player.switchUrl(url, file.name);
-                player.aspectRatio = false;
-                template.$video.src = url;
-                sleep(1000).then(() => {
-                    player.currentTime = 0;
-                });
-                option.url = url;
-                art.emit('switch', url);
-                notice.show(i18n.get('Load local video successfully'));
             } else {
-                const tip = `${i18n.get('Playback of this file format is not supported')}: ${file.type}`;
+                const tip = `${i18n.get(notSupport)}: ${file.type || type}`;
                 notice.show(tip, true, 3000);
                 errorHandle(false, tip);
             }
@@ -44,7 +36,6 @@ export default function localPreview(art) {
 
     proxy(template.$player, 'dragover', e => {
         e.preventDefault();
-        notice.show(i18n.get('Load local video successfully'));
     });
 
     proxy(template.$player, 'drop', e => {
@@ -54,7 +45,7 @@ export default function localPreview(art) {
     });
 
     return {
-        name: 'localPreview',
+        name: 'localVideo',
         attach(target) {
             const $input = append(target, '<input type="file">');
             setStyle(target, 'position', 'relative');

packages/artplayer/src/scheme/index.js

@@ -32,7 +32,8 @@ export default {
     fullscreenWeb: 'boolean',
     subtitleOffset: 'boolean',
     miniProgressBar: 'boolean',
-    localPreview: 'boolean',
+    localVideo: 'boolean',
+    localSubtitle: 'boolean',
     autoPip: 'boolean',
     networkMonitor: 'boolean',
     plugins: ['function'],
@@ -46,6 +47,7 @@ export default {
             style: 'object|undefined',
             click: 'function|undefined',
             mounted: 'function|undefined',
+            tooltip: 'string|undefined',
         },
     ],
     contextmenu: [
@@ -57,6 +59,7 @@ export default {
             style: 'object|undefined',
             click: 'function|undefined',
             mounted: 'function|undefined',
+            tooltip: 'string|undefined',
         },
     ],
     quality: [
@@ -75,6 +78,7 @@ export default {
             style: 'object|undefined',
             click: 'function|undefined',
             mounted: 'function|undefined',
+            tooltip: 'string|undefined',
             position: (value, type, paths) => {
                 const position = ['top', 'left', 'right'];
                 return errorHandle(

packages/artplayer/src/subtitle.js

@@ -19,10 +19,10 @@ export default class Subtitle {
         return '';
     }
 
-    switch(url) {
+    switch(url, name = 'unknown') {
         const { i18n, notice } = this.art;
         return this.init(url).then(blobUrl => {
-            notice.show(i18n.get('Switch subtitle'));
+            notice.show(`${i18n.get('Switch subtitle')}: ${name}`);
             return blobUrl;
         });
     }

packages/artplayer/src/utils/component.js

@@ -1,4 +1,4 @@
-import { append, setStyles, setStyle, remove, errorHandle, hasOwnProperty } from './index';
+import { append, setStyles, setStyle, remove, errorHandle, hasOwnProperty, tooltip } from './index';
 
 export default function component(art, parent, target, getOption, callback, title) {
     const option = typeof getOption === 'function' ? getOption(art) : getOption;
@@ -20,6 +20,10 @@ export default function component(art, parent, target, getOption, callback, titl
         setStyles($element, option.style);
     }
 
+    if (option.tooltip) {
+        tooltip($element, option.tooltip);
+    }
+
     const childs = Array.from(target.children);
     $element.dataset.index = option.index || componentID;
     const nextChild = childs.find(item => Number(item.dataset.index) >= Number($element.dataset.index));