优化字幕切换

docs/document/README.md

@@ -1244,11 +1244,12 @@ art.contextmenu.yourContextmenu.show = false;
 
 -   Type: `Object`
 
-| propertie | type       | Description     |
-| --------- | ---------- | --------------- |
-| `init`    | `Function` | Init subtitle   |
-| `show`    | `setter`   | Show or hide    |
-| `url`     | `setter`   | Switch subtitle |
+| propertie | type       | Description      |
+| --------- | ---------- | ---------------- |
+| `init`    | `Function` | Init subtitle    |
+| `show`    | `setter`   | Show or hide     |
+| `switch`  | `Function` | Switch subtitle  |
+| `url`     | `getter`   | get subtitle url |
 
 [Run Code](/)
 
@@ -1267,7 +1268,7 @@ var art = new Artplayer({
                 index: 10,
                 html: 'subtitle1',
                 click: function() {
-                    art.subtitle.url = url + '/subtitle/one-more-time-one-more-chance.srt';
+                    art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.srt');
                 },
             };
         },
@@ -1277,7 +1278,7 @@ var art = new Artplayer({
                 index: 20,
                 html: 'subtitle2',
                 click: function() {
-                    art.subtitle.url = url + '/subtitle/one-more-time-one-more-chance.vtt';
+                    art.subtitle.switch(url + '/subtitle/one-more-time-one-more-chance.vtt');
                 },
             };
         },

docs/uncompiled/artplayer.js

@@ -3299,63 +3299,77 @@
     }
 
     createClass(Subtitle, [{
+      key: "switch",
+      value: function _switch(url) {
+        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'));
+          return blobUrl;
+        });
+      }
+    }, {
       key: "init",
       value: function init(url) {
         var _this = this;
 
-        var _this$art = this.art,
-            proxy = _this$art.events.proxy,
-            subtitle = _this$art.option.subtitle,
-            _this$art$template = _this$art.template,
-            $video = _this$art$template.$video,
-            $subtitle = _this$art$template.$subtitle,
-            $track = _this$art$template.$track;
-        setStyles($subtitle, subtitle.style || {});
+        return new Promise(function (resolve) {
+          var _this$art2 = _this.art,
+              proxy = _this$art2.events.proxy,
+              subtitle = _this$art2.option.subtitle,
+              _this$art2$template = _this$art2.template,
+              $video = _this$art2$template.$video,
+              $subtitle = _this$art2$template.$subtitle,
+              $track = _this$art2$template.$track;
+          setStyles($subtitle, subtitle.style || {});
 
-        if (!$track) {
-          var $newTrack = document.createElement('track');
-          $newTrack.default = true;
-          $newTrack.kind = 'metadata';
-          $video.appendChild($newTrack);
-          this.art.template.$track = $newTrack;
-        }
+          if (!$track) {
+            var $newTrack = document.createElement('track');
+            $newTrack.default = true;
+            $newTrack.kind = 'metadata';
+            $video.appendChild($newTrack);
+            _this.art.template.$track = $newTrack;
+          }
 
-        this.load(url).then(function (url) {
-          $subtitle.innerHTML = '';
-          var lastUrl = _this.art.template.$track.src;
-          if (lastUrl === url) return;
-          URL.revokeObjectURL(lastUrl);
-          _this.art.template.$track.src = url;
+          _this.load(url).then(function (blobUrl) {
+            $subtitle.innerHTML = '';
+            var $track = _this.art.template.$track;
+            var lastUrl = $track.src;
+            if (lastUrl === blobUrl) return;
+            URL.revokeObjectURL(lastUrl);
+            $track.src = blobUrl;
 
-          _this.art.emit('subtitle:load', url);
+            if ($video.textTracks && $video.textTracks[0]) {
+              // eslint-disable-next-line no-inner-declarations
+              var updateSubtitle = function updateSubtitle() {
+                var _track$activeCues = slicedToArray(track.activeCues, 1),
+                    cue = _track$activeCues[0];
 
-          if ($video.textTracks && $video.textTracks[0]) {
-            // eslint-disable-next-line no-inner-declarations
-            var updateSubtitle = function updateSubtitle() {
-              var _track$activeCues = slicedToArray(track.activeCues, 1),
-                  cue = _track$activeCues[0];
+                $subtitle.innerHTML = '';
 
-              $subtitle.innerHTML = '';
+                if (cue) {
+                  $subtitle.innerHTML = cue.text.split(/\r?\n/).map(function (item) {
+                    return "<p>".concat(item, "</p>");
+                  }).join('');
+                }
 
-              if (cue) {
-                $subtitle.innerHTML = cue.text.split(/\r?\n/).map(function (item) {
-                  return "<p>".concat(item, "</p>");
-                }).join('');
+                this.art.emit('subtitle:update', $subtitle);
+              };
+
+              var _$video$textTracks = slicedToArray($video.textTracks, 1),
+                  track = _$video$textTracks[0];
+
+              if (!_this.isInit) {
+                _this.isInit = true;
+                proxy(track, 'cuechange', updateSubtitle.bind(_this));
               }
 
-              this.art.emit('subtitle:update', $subtitle);
-            };
-
-            var _$video$textTracks = slicedToArray($video.textTracks, 1),
-                track = _$video$textTracks[0];
-
-            if (!_this.isInit) {
-              _this.isInit = true;
-              proxy(track, 'cuechange', updateSubtitle.bind(_this));
+              _this.art.on('artplayerPluginSubtitleOffset', updateSubtitle.bind(_this));
             }
 
-            _this.art.on('artplayerPluginSubtitle:set', updateSubtitle.bind(_this));
-          }
+            resolve(blobUrl);
+          });
         });
       }
     }, {
@@ -3366,6 +3380,7 @@
           return response.text();
         }).then(function (text) {
           var type = getExt(url);
+          errorHandle(['srt', 'ass', 'vtt'].includes(type), "Unsupported subtitle format: ".concat(type));
           var formatText = text.replace(/{[\s\S]*?}/g, '');
 
           if (type === 'srt') {
@@ -3376,7 +3391,7 @@
             return vttToBlob(assToVtt(formatText));
           }
 
-          return url;
+          return vttToBlob(formatText);
         }).catch(function (err) {
           notice.show(err);
           throw err;
@@ -3397,9 +3412,6 @@
         }
 
         return '';
-      },
-      set: function set(url) {
-        this.init(url);
       }
     }, {
       key: "show",

docs/uncompiled/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/emitter.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/ArtPlayerError.js","../../packages/artplayer/src/utils/index.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/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/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/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer/src/utils/assToVtt.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/index.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layers.js","../../packages/artplayer/src/loading.js","../../packages/artplayer/src/notice.js","../../packages/artplayer/src/mask.js","../../packages/artplayer/src/icons/index.js","../../packages/artplayer/src/setting/flip.js","../../packages/artplayer/src/setting/aspectRatio.js"Line truncated
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../packages/artplayer/node_modules/option-validator/dist/option-validator.js","../../packages/artplayer/src/emitter.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../packages/artplayer/src/utils/ArtPlayerError.js","../../packages/artplayer/src/utils/index.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/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/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/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../packages/artplayer/src/utils/assToVtt.js","../../packages/artplayer/src/subtitle.js","../../packages/artplayer/src/events/clickInit.js","../../packages/artplayer/src/events/hoverInit.js","../../packages/artplayer/src/events/mousemoveInit.js","../../packages/artplayer/src/events/resizeInit.js","../../packages/artplayer/src/events/index.js","../../packages/artplayer/src/hotkey.js","../../packages/artplayer/src/layers.js","../../packages/artplayer/src/loading.js","../../packages/artplayer/src/notice.js","../../packages/artplayer/src/mask.js","../../packages/artplayer/src/icons/index.js","../../packages/artplayer/src/setting/flip.js","../../packages/artplayer/src/setting/aspectRatio.js"Line truncated

packages/artplayer/src/subtitle.js

@@ -1,4 +1,4 @@
-import { setStyles, srtToVtt, vttToBlob, getExt } from './utils';
+import { setStyles, srtToVtt, vttToBlob, getExt, errorHandle } from './utils';
 import assToVtt from './utils/assToVtt';
 
 export default class Subtitle {
@@ -20,57 +20,65 @@ export default class Subtitle {
         return '';
     }
 
-    set url(url) {
-        this.init(url);
+    switch(url) {
+        const { i18n, notice } = this.art;
+        return this.init(url).then(blobUrl => {
+            notice.show(i18n.get('Switch subtitle'));
+            return blobUrl;
+        });
     }
 
     init(url) {
-        const {
-            events: { proxy },
-            option: { subtitle },
-            template: { $video, $subtitle, $track },
-        } = this.art;
+        return new Promise(resolve => {
+            const {
+                events: { proxy },
+                option: { subtitle },
+                template: { $video, $subtitle, $track },
+            } = this.art;
 
-        setStyles($subtitle, subtitle.style || {});
+            setStyles($subtitle, subtitle.style || {});
 
-        if (!$track) {
-            const $newTrack = document.createElement('track');
-            $newTrack.default = true;
-            $newTrack.kind = 'metadata';
-            $video.appendChild($newTrack);
-            this.art.template.$track = $newTrack;
-        }
-
-        this.load(url).then(url => {
-            $subtitle.innerHTML = '';
-            const lastUrl = this.art.template.$track.src;
-            if (lastUrl === url) return;
-            URL.revokeObjectURL(lastUrl);
-            this.art.template.$track.src = url;
-            this.art.emit('subtitle:load', url);
-
-            if ($video.textTracks && $video.textTracks[0]) {
-                const [track] = $video.textTracks;
-                // eslint-disable-next-line no-inner-declarations
-                function updateSubtitle() {
-                    const [cue] = track.activeCues;
-                    $subtitle.innerHTML = '';
-                    if (cue) {
-                        $subtitle.innerHTML = cue.text
-                            .split(/\r?\n/)
-                            .map(item => `<p>${item}</p>`)
-                            .join('');
-                    }
-                    this.art.emit('subtitle:update', $subtitle);
-                }
-
-                if (!this.isInit) {
-                    this.isInit = true;
-                    proxy(track, 'cuechange', updateSubtitle.bind(this));
-                }
-
-                this.art.on('artplayerPluginSubtitle:set', updateSubtitle.bind(this));
+            if (!$track) {
+                const $newTrack = document.createElement('track');
+                $newTrack.default = true;
+                $newTrack.kind = 'metadata';
+                $video.appendChild($newTrack);
+                this.art.template.$track = $newTrack;
             }
+
+            this.load(url).then(blobUrl => {
+                $subtitle.innerHTML = '';
+                const { $track } = this.art.template;
+                const lastUrl = $track.src;
+                if (lastUrl === blobUrl) return;
+                URL.revokeObjectURL(lastUrl);
+                $track.src = blobUrl;
+
+                if ($video.textTracks && $video.textTracks[0]) {
+                    const [track] = $video.textTracks;
+                    // eslint-disable-next-line no-inner-declarations
+                    function updateSubtitle() {
+                        const [cue] = track.activeCues;
+                        $subtitle.innerHTML = '';
+                        if (cue) {
+                            $subtitle.innerHTML = cue.text
+                                .split(/\r?\n/)
+                                .map(item => `<p>${item}</p>`)
+                                .join('');
+                        }
+                        this.art.emit('subtitle:update', $subtitle);
+                    }
+
+                    if (!this.isInit) {
+                        this.isInit = true;
+                        proxy(track, 'cuechange', updateSubtitle.bind(this));
+                    }
+
+                    this.art.on('artplayerPluginSubtitleOffset', updateSubtitle.bind(this));
+                }
+
+                resolve(blobUrl);
+            });
         });
     }
 
@@ -82,14 +90,18 @@ export default class Subtitle {
             })
             .then(text => {
                 const type = getExt(url);
+                errorHandle(['srt', 'ass', 'vtt'].includes(type), `Unsupported subtitle format: ${type}`);
                 const formatText = text.replace(/{[\s\S]*?}/g, '');
+
                 if (type === 'srt') {
                     return vttToBlob(srtToVtt(formatText));
                 }
+
                 if (type === 'ass') {
                     return vttToBlob(assToVtt(formatText));
                 }
-                return url;
+
+                return vttToBlob(formatText);
             })
             .catch(err => {
                 notice.show(err);