update

docs/uncompiled/artplayer.js

@@ -982,7 +982,7 @@
   	"Fullscreen not supported": "不支持全屏模式",
   	"Local Subtitle": "本地字幕",
   	"Local Video": "本地视频",
-  	"Subtitle offset time": "字幕偏移时间",
+  	"Subtitle offset time": "字幕偏移",
   	"No subtitles found": "未发现字幕"
   };
 
@@ -1041,7 +1041,7 @@
   	"Fullscreen not supported": "不支持全屏模式",
   	"Local Subtitle": "本地字幕",
   	"Local Video": "本地視頻",
-  	"Subtitle offset time": "字幕偏移時間",
+  	"Subtitle offset time": "字幕偏移",
   	"No subtitles found": "未發現字幕"
   };
 
@@ -2269,6 +2269,47 @@
     });
   }
 
+  function subtitleOffsetMix(art) {
+    var clamp = art.constructor.utils.clamp;
+    var notice = art.notice,
+        template = art.template,
+        i18n = art.i18n,
+        subtitle = art.subtitle;
+    var cuesCache = [];
+    art.on('subtitle:switch', function () {
+      cuesCache = [];
+    });
+    def(art, 'subtitleOffset', {
+      set: function set(value) {
+        if (template.$track && template.$track.track) {
+          var cues = Array.from(template.$track.track.cues);
+          var time = clamp(value, -5, 5);
+
+          for (var index = 0; index < cues.length; index++) {
+            var cue = cues[index];
+
+            if (!cuesCache[index]) {
+              cuesCache[index] = {
+                startTime: cue.startTime,
+                endTime: cue.endTime
+              };
+            }
+
+            cue.startTime = clamp(cuesCache[index].startTime + time, 0, art.duration);
+            cue.endTime = clamp(cuesCache[index].endTime + time, 0, art.duration);
+          }
+
+          subtitle.update();
+          notice.show = "".concat(i18n.get('Subtitle offset time'), ": ").concat(value, "s");
+          art.emit('subtitleOffset', value);
+        } else {
+          notice.show = "".concat(i18n.get('No subtitles found'));
+          art.emit('subtitleOffset', 0);
+        }
+      }
+    });
+  }
+
   function attrInit(art) {
     var option = art.option,
         storage = art.storage,
@@ -2464,6 +2505,7 @@
     themeMix(art);
     titleMix(art);
     exclusiveMix(art);
+    subtitleOffsetMix(art);
     eventInit(art);
     attrInit(art);
   };
@@ -4372,6 +4414,23 @@
     };
   }
 
+  function subtitleOffset(art) {
+    var i18n = art.i18n;
+    return {
+      width: 150,
+      html: i18n.get('Subtitle offset time'),
+      items: [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5].map(function (item) {
+        return {
+          html: item === 0 ? i18n.get('Normal') : item,
+          current: item === 0,
+          click: function click() {
+            art.subtitleOffset = item;
+          }
+        };
+      })
+    };
+  }
+
   function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
   function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -4430,6 +4489,10 @@
           _this.option.push(playbackRate(art));
         }
 
+        if (option.subtitleOffset) {
+          _this.option.push(subtitleOffset(art));
+        }
+
         _this.option = makeRecursion(_this.option);
         art.once('ready', function () {
           _this.init(_this.option);
@@ -4507,6 +4570,7 @@
     }, {
       key: "add",
       value: function add(callback) {
+        console.log(callback);
         this.option.push(callback(this.art));
         this.option = makeRecursion(this.option);
         this.init(this.option);
@@ -4586,81 +4650,6 @@
     return Storage;
   }();
 
-  function settingMix(art) {
-    var i18n = art.i18n,
-        subtitle = art.subtitle,
-        proxy = art.events.proxy;
-    return {
-      title: 'Subtitle',
-      name: 'subtitleOffset',
-      index: 20,
-      html: "\n            <div class=\"art-setting-header\">\n                ".concat(i18n.get('Subtitle offset time'), ": <span class=\"art-subtitle-value\">0</span>s\n            </div>\n            <div class=\"art-setting-range\">\n                <input class=\"art-subtitle-range\" value=\"0\" type=\"range\" min=\"-5\" max=\"5\" step=\"0.5\">\n            </div>\n        "),
-      mounted: function mounted($setting) {
-        var $range = query('.art-setting-range input', $setting);
-        var $value = query('.art-subtitle-value', $setting);
-        proxy($range, 'change', function () {
-          var value = $range.value;
-          $value.innerText = value;
-          art.plugins.subtitleOffset.offset(Number(value));
-        });
-        art.on('subtitle:switch', function () {
-          $range.value = 0;
-          $value.innerText = 0;
-        });
-        art.on('subtitleOffset', function (value) {
-          subtitle.update();
-
-          if ($range.value !== value) {
-            $range.value = value;
-            $value.innerText = value;
-          }
-        });
-      }
-    };
-  }
-
-  function subtitleOffset(art) {
-    var clamp = art.constructor.utils.clamp;
-    var setting = art.setting,
-        notice = art.notice,
-        template = art.template,
-        i18n = art.i18n;
-    setting.add(settingMix);
-    var cuesCache = [];
-    art.on('subtitle:switch', function () {
-      cuesCache = [];
-    });
-    return {
-      name: 'subtitleOffset',
-      offset: function offset(value) {
-        if (template.$track && template.$track.track) {
-          var cues = Array.from(template.$track.track.cues);
-          var time = clamp(value, -5, 5);
-
-          for (var index = 0; index < cues.length; index++) {
-            var cue = cues[index];
-
-            if (!cuesCache[index]) {
-              cuesCache[index] = {
-                startTime: cue.startTime,
-                endTime: cue.endTime
-              };
-            }
-
-            cue.startTime = clamp(cuesCache[index].startTime + time, 0, art.duration);
-            cue.endTime = clamp(cuesCache[index].endTime + time, 0, art.duration);
-          }
-
-          notice.show = "".concat(i18n.get('Subtitle offset time'), ": ").concat(value, "s");
-          art.emit('subtitleOffset', value);
-        } else {
-          notice.show = "".concat(i18n.get('No subtitles found'));
-          art.emit('subtitleOffset', 0);
-        }
-      }
-    };
-  }
-
   function localVideo(art) {
     var proxy = art.events.proxy,
         _art$template = art.template,
@@ -4834,10 +4823,6 @@
       this.id = 0;
       var option = art.option;
 
-      if (option.subtitle.url && option.subtitleOffset) {
-        this.add(subtitleOffset);
-      }
-
       if (!option.isLive && option.miniProgressBar) {
         this.add(miniProgressBar);
       }

docs/uncompiled/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/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.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.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/urlMix.js","../../packages/artplayer/src/player/attrMix.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/miniMix.js","../../packages/artplayer/src/player/loopMix.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/autoHeightMix.js","../../packages/artplayer/src/player/themeMix.js","../../packages/artplayer/src/player/titleMix.js","../../packages/artplayer/src/player/exclusiveMix.js","../../packages/artplayer/src/player/optionInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.jsLine truncated
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/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.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.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/urlMix.js","../../packages/artplayer/src/player/attrMix.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/miniMix.js","../../packages/artplayer/src/player/loopMix.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/autoHeightMix.js","../../packages/artplayer/src/player/themeMix.js","../../packages/artplayer/src/player/titleMix.js","../../packages/artplayer/src/player/exclusiveMix.js","../../packages/artplayer/src/player/subtitleOffsetMix.js","../../packages/artplayer/src/player/optionInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/contrLine truncated

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

@@ -37,6 +37,6 @@
     "Fullscreen not supported": "不支持全屏模式",
     "Local Subtitle": "本地字幕",
     "Local Video": "本地视频",
-    "Subtitle offset time": "字幕偏移时间",
+    "Subtitle offset time": "字幕偏移",
     "No subtitles found": "未发现字幕"
 }

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

@@ -37,6 +37,6 @@
     "Fullscreen not supported": "不支持全屏模式",
     "Local Subtitle": "本地字幕",
     "Local Video": "本地視頻",
-    "Subtitle offset time": "字幕偏移時間",
+    "Subtitle offset time": "字幕偏移",
     "No subtitles found": "未發現字幕"
 }

packages/artplayer/src/player/index.js

@@ -28,6 +28,7 @@ import autoHeightMix from './autoHeightMix';
 import themeMix from './themeMix';
 import titleMix from './titleMix';
 import exclusiveMix from './exclusiveMix';
+import subtitleOffsetMix from './subtitleOffsetMix';
 import optionInit from './optionInit';
 import eventInit from './eventInit';
 
@@ -63,6 +64,7 @@ export default class Player {
         themeMix(art);
         titleMix(art);
         exclusiveMix(art);
+        subtitleOffsetMix(art);
         eventInit(art);
         optionInit(art);
     }

packages/artplayer/src/player/subtitleOffsetMix.js

@@ -0,0 +1,39 @@
+import { def } from '../utils';
+
+export default function subtitleOffsetMix(art) {
+    const { clamp } = art.constructor.utils;
+    const { notice, template, i18n, subtitle } = art;
+
+    let cuesCache = [];
+    art.on('subtitle:switch', () => {
+        cuesCache = [];
+    });
+
+    def(art, 'subtitleOffset', {
+        set(value) {
+            if (template.$track && template.$track.track) {
+                const cues = Array.from(template.$track.track.cues);
+                const time = clamp(value, -5, 5);
+
+                for (let index = 0; index < cues.length; index++) {
+                    const cue = cues[index];
+                    if (!cuesCache[index]) {
+                        cuesCache[index] = {
+                            startTime: cue.startTime,
+                            endTime: cue.endTime,
+                        };
+                    }
+                    cue.startTime = clamp(cuesCache[index].startTime + time, 0, art.duration);
+                    cue.endTime = clamp(cuesCache[index].endTime + time, 0, art.duration);
+                }
+
+                subtitle.update();
+                notice.show = `${i18n.get('Subtitle offset time')}: ${value}s`;
+                art.emit('subtitleOffset', value);
+            } else {
+                notice.show = `${i18n.get('No subtitles found')}`;
+                art.emit('subtitleOffset', 0);
+            }
+        },
+    });
+}

packages/artplayer/src/plugins/index.js

@@ -1,5 +1,4 @@
 import { errorHandle, has, def } from '../utils';
-import subtitleOffset from './subtitleOffset';
 import localVideo from './localVideo';
 import localSubtitle from './localSubtitle';
 import miniProgressBar from './miniProgressBar';
@@ -11,10 +10,6 @@ export default class Plugins {
 
         const { option } = art;
 
-        if (option.subtitle.url && option.subtitleOffset) {
-            this.add(subtitleOffset);
-        }
-
         if (!option.isLive && option.miniProgressBar) {
             this.add(miniProgressBar);
         }

packages/artplayer/src/plugins/subtitleOffset.js

@@ -1,84 +0,0 @@
-import { query } from '../utils';
-
-function settingMix(art) {
-    const {
-        i18n,
-        subtitle,
-        events: { proxy },
-    } = art;
-
-    return {
-        title: 'Subtitle',
-        name: 'subtitleOffset',
-        index: 20,
-        html: `
-            <div class="art-setting-header">
-                ${i18n.get('Subtitle offset time')}: <span class="art-subtitle-value">0</span>s
-            </div>
-            <div class="art-setting-range">
-                <input class="art-subtitle-range" value="0" type="range" min="-5" max="5" step="0.5">
-            </div>
-        `,
-        mounted: ($setting) => {
-            const $range = query('.art-setting-range input', $setting);
-            const $value = query('.art-subtitle-value', $setting);
-            proxy($range, 'change', () => {
-                const { value } = $range;
-                $value.innerText = value;
-                art.plugins.subtitleOffset.offset(Number(value));
-            });
-
-            art.on('subtitle:switch', () => {
-                $range.value = 0;
-                $value.innerText = 0;
-            });
-
-            art.on('subtitleOffset', (value) => {
-                subtitle.update();
-                if ($range.value !== value) {
-                    $range.value = value;
-                    $value.innerText = value;
-                }
-            });
-        },
-    };
-}
-
-export default function subtitleOffset(art) {
-    const { clamp } = art.constructor.utils;
-    const { setting, notice, template, i18n } = art;
-
-    setting.add(settingMix);
-    let cuesCache = [];
-    art.on('subtitle:switch', () => {
-        cuesCache = [];
-    });
-
-    return {
-        name: 'subtitleOffset',
-        offset(value) {
-            if (template.$track && template.$track.track) {
-                const cues = Array.from(template.$track.track.cues);
-                const time = clamp(value, -5, 5);
-
-                for (let index = 0; index < cues.length; index++) {
-                    const cue = cues[index];
-                    if (!cuesCache[index]) {
-                        cuesCache[index] = {
-                            startTime: cue.startTime,
-                            endTime: cue.endTime,
-                        };
-                    }
-                    cue.startTime = clamp(cuesCache[index].startTime + time, 0, art.duration);
-                    cue.endTime = clamp(cuesCache[index].endTime + time, 0, art.duration);
-                }
-
-                notice.show = `${i18n.get('Subtitle offset time')}: ${value}s`;
-                art.emit('subtitleOffset', value);
-            } else {
-                notice.show = `${i18n.get('No subtitles found')}`;
-                art.emit('subtitleOffset', 0);
-            }
-        },
-    };
-}

packages/artplayer/src/setting/index.js

@@ -3,6 +3,7 @@ import { append, addClass, setStyle, inverseClass } from '../utils/dom';
 import playbackRate from './playbackRate';
 import aspectRatio from './aspectRatio';
 import flip from './flip';
+import subtitleOffset from './subtitleOffset';
 
 function makeRecursion(option) {
     if (!option) return option;
@@ -50,6 +51,10 @@ export default class Setting extends Component {
                 this.option.push(flip(art));
             }
 
+            if (option.subtitleOffset) {
+                this.option.push(subtitleOffset(art));
+            }
+
             this.option = makeRecursion(this.option);
 
             art.once('ready', () => {
@@ -119,6 +124,7 @@ export default class Setting extends Component {
     }
 
     add(callback) {
+        console.log(callback);
         this.option.push(callback(this.art));
         this.option = makeRecursion(this.option);
         this.init(this.option);

packages/artplayer/src/setting/subtitleOffset.js

@@ -0,0 +1,17 @@
+export default function subtitleOffset(art) {
+    const { i18n } = art;
+
+    return {
+        width: 150,
+        html: i18n.get('Subtitle offset time'),
+        items: [-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5].map((item) => {
+            return {
+                html: item === 0 ? i18n.get('Normal') : item,
+                current: item === 0,
+                click() {
+                    art.subtitleOffset = item;
+                },
+            };
+        }),
+    };
+}