diff --git a/docs/lab/js/artplayer-plugin-subtitle.js b/docs/lab/js/artplayer-plugin-subtitle.js
index fcfcf7ded..0233f16b8 100644
--- a/docs/lab/js/artplayer-plugin-subtitle.js
+++ b/docs/lab/js/artplayer-plugin-subtitle.js
@@ -22,7 +22,7 @@
title: 'Subtitle',
name: 'subtitle',
index: 20,
- html: "\n \n \n \n
\n "),
+ html: "\n \n \n \n
\n "),
mounted: function mounted($setting) {
var $range = $setting.querySelector('.art-subtitle-range');
var $value = $setting.querySelector('.art-subtitle-value');
diff --git a/docs/lab/js/artplayer-plugin-subtitle.js.map b/docs/lab/js/artplayer-plugin-subtitle.js.map
index f448ffe14..7532cb922 100644
--- a/docs/lab/js/artplayer-plugin-subtitle.js.map
+++ b/docs/lab/js/artplayer-plugin-subtitle.js.map
@@ -1 +1 @@
-{"version":3,"file":"artplayer-plugin-subtitle.js","sources":["../../../packages/artplayer-plugin-subtitle/src/index.js"],"sourcesContent":["function i18nMix(i18n) {\n i18n.update({\n 'zh-cn': {\n 'Subtitle offset time': '字幕偏移时间',\n },\n 'zh-tw': {\n 'Subtitle offset time': '字幕偏移時間',\n },\n });\n}\n\nfunction settingMix(art) {\n const {\n i18n,\n events: { proxy },\n } = art;\n return {\n title: 'Subtitle',\n name: 'subtitle',\n index: 20,\n html: `\n \n \n \n
\n `,\n mounted: $setting => {\n const $range = $setting.querySelector('.art-subtitle-range');\n const $value = $setting.querySelector('.art-subtitle-value');\n proxy($range, 'change', () => {\n const { value } = $range;\n $value.innerText = value;\n art.plugins.artplayerPluginSubtitle.set(Number(value));\n });\n },\n };\n}\n\nfunction artplayerPluginSubtitle(art) {\n const { setting, notice, refs, i18n } = art;\n const cuesCache = [];\n i18nMix(i18n);\n setting.add(settingMix);\n const { clamp } = art.constructor.utils;\n return {\n set(value) {\n const cues = Array.from(refs.$track.track.cues);\n const time = clamp(value, -5, 5);\n cues.forEach((cue, index) => {\n if (!cuesCache[index]) {\n cuesCache[index] = {\n startTime: cue.startTime,\n endTime: cue.endTime,\n };\n }\n cue.startTime = cuesCache[index].startTime + time;\n cue.endTime = cuesCache[index].endTime + time;\n });\n notice.show(`${i18n.get('Subtitle offset time')}: ${value}s`);\n art.emit('subtitle:offset', value);\n },\n };\n}\n\nwindow.artplayerPluginSubtitle = artplayerPluginSubtitle;\nexport default artplayerPluginSubtitle;\n"],"names":["i18nMix","i18n","update","settingMix","art","proxy","events","title","name","index","html","get","mounted","$setting","$range","querySelector","$value","value","innerText","plugins","artplayerPluginSubtitle","set","Number","setting","notice","refs","cuesCache","add","clamp","constructor","utils","cues","Array","from","$track","track","time","forEach","cue","startTime","endTime","show","emit","window"],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"artplayer-plugin-subtitle.js","sources":["../../../packages/artplayer-plugin-subtitle/src/index.js"],"sourcesContent":["function i18nMix(i18n) {\n i18n.update({\n 'zh-cn': {\n 'Subtitle offset time': '字幕偏移时间',\n },\n 'zh-tw': {\n 'Subtitle offset time': '字幕偏移時間',\n },\n });\n}\n\nfunction settingMix(art) {\n const {\n i18n,\n events: { proxy },\n } = art;\n return {\n title: 'Subtitle',\n name: 'subtitle',\n index: 20,\n html: `\n \n \n \n
\n `,\n mounted: $setting => {\n const $range = $setting.querySelector('.art-subtitle-range');\n const $value = $setting.querySelector('.art-subtitle-value');\n proxy($range, 'change', () => {\n const { value } = $range;\n $value.innerText = value;\n art.plugins.artplayerPluginSubtitle.set(Number(value));\n });\n },\n };\n}\n\nfunction artplayerPluginSubtitle(art) {\n const { setting, notice, refs, i18n } = art;\n const cuesCache = [];\n i18nMix(i18n);\n setting.add(settingMix);\n const { clamp } = art.constructor.utils;\n return {\n set(value) {\n const cues = Array.from(refs.$track.track.cues);\n const time = clamp(value, -5, 5);\n cues.forEach((cue, index) => {\n if (!cuesCache[index]) {\n cuesCache[index] = {\n startTime: cue.startTime,\n endTime: cue.endTime,\n };\n }\n cue.startTime = cuesCache[index].startTime + time;\n cue.endTime = cuesCache[index].endTime + time;\n });\n notice.show(`${i18n.get('Subtitle offset time')}: ${value}s`);\n art.emit('subtitle:offset', value);\n },\n };\n}\n\nwindow.artplayerPluginSubtitle = artplayerPluginSubtitle;\nexport default artplayerPluginSubtitle;\n"],"names":["i18nMix","i18n","update","settingMix","art","proxy","events","title","name","index","html","get","mounted","$setting","$range","querySelector","$value","value","innerText","plugins","artplayerPluginSubtitle","set","Number","setting","notice","refs","cuesCache","add","clamp","constructor","utils","cues","Array","from","$track","track","time","forEach","cue","startTime","endTime","show","emit","window"],"mappings":"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"}
\ No newline at end of file
diff --git a/packages/artplayer-plugin-subtitle/src/index.js b/packages/artplayer-plugin-subtitle/src/index.js
index 65a6a78e6..f27d99896 100644
--- a/packages/artplayer-plugin-subtitle/src/index.js
+++ b/packages/artplayer-plugin-subtitle/src/index.js
@@ -23,7 +23,22 @@ function settingMix(art) {
${i18n.get('Subtitle offset time')}: 0s
-
+
`,
mounted: $setting => {