add subtitle outline style

docs/assets/example/index.js

@@ -96,7 +96,6 @@ var art = new Artplayer({
         style: {
             color: '#fe9200',
             fontSize: '20px',
-            textShadow: 'rgb(0 0 0) 1px 1px 1px',
         },
         encoding: 'utf-8',
     },

docs/uncompiled/artplayer.js

@@ -444,6 +444,14 @@
       return line.trim();
     }).join('\n\n'));
   }
+  function outline() {
+    var outlineColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#000';
+    var outlineSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    var blurSize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+    return [[outlineSize, 0], [0, outlineSize], [-outlineSize, 0], [0, -outlineSize], [outlineSize, outlineSize], [-outlineSize, -outlineSize], [outlineSize, -outlineSize], [-outlineSize, outlineSize]].map(function (item) {
+      return "".concat(outlineColor, " ").concat(item[0], "px ").concat(item[1], "px ").concat(blurSize, "px");
+    }).join(',');
+  }
 
   function getExt(url) {
     if (url.includes('?')) {
@@ -644,6 +652,7 @@
     srtToVtt: srtToVtt,
     vttToBlob: vttToBlob,
     assToVtt: assToVtt,
+    outline: outline,
     getExt: getExt,
     download: download,
     def: def,
@@ -1421,210 +1430,176 @@
     });
   }
 
-  var screenfull$1 = {exports: {}};
+  /* eslint-disable promise/prefer-await-to-then */
 
-  /*!
+  const methodMap = [
-  * screenfull
+  	[
-  * v5.2.0 - 2021-11-03
+  		'requestFullscreen',
-  * (c) Sindre Sorhus; MIT License
+  		'exitFullscreen',
-  */
+  		'fullscreenElement',
+  		'fullscreenEnabled',
+  		'fullscreenchange',
+  		'fullscreenerror',
+  	],
+  	// New WebKit
+  	[
+  		'webkitRequestFullscreen',
+  		'webkitExitFullscreen',
+  		'webkitFullscreenElement',
+  		'webkitFullscreenEnabled',
+  		'webkitfullscreenchange',
+  		'webkitfullscreenerror',
 
-  (function (module) {
+  	],
-  (function () {
+  	// Old WebKit
+  	[
+  		'webkitRequestFullScreen',
+  		'webkitCancelFullScreen',
+  		'webkitCurrentFullScreenElement',
+  		'webkitCancelFullScreen',
+  		'webkitfullscreenchange',
+  		'webkitfullscreenerror',
 
-  	var document = typeof window !== 'undefined' && typeof window.document !== 'undefined' ? window.document : {};
+  	],
-  	var isCommonjs = module.exports;
+  	[
+  		'mozRequestFullScreen',
+  		'mozCancelFullScreen',
+  		'mozFullScreenElement',
+  		'mozFullScreenEnabled',
+  		'mozfullscreenchange',
+  		'mozfullscreenerror',
+  	],
+  	[
+  		'msRequestFullscreen',
+  		'msExitFullscreen',
+  		'msFullscreenElement',
+  		'msFullscreenEnabled',
+  		'MSFullscreenChange',
+  		'MSFullscreenError',
+  	],
+  ];
 
-  	var fn = (function () {
+  const nativeAPI = (() => {
-  		var val;
+  	const unprefixedMethods = methodMap[0];
+  	const returnValue = {};
 
-  		var fnMap = [
+  	for (const methodList of methodMap) {
-  			[
+  		const exitFullscreenMethod = methodList?.[1];
-  				'requestFullscreen',
+  		if (exitFullscreenMethod in document) {
-  				'exitFullscreen',
+  			for (const [index, method] of methodList.entries()) {
-  				'fullscreenElement',
+  				returnValue[unprefixedMethods[index]] = method;
-  				'fullscreenEnabled',
-  				'fullscreenchange',
-  				'fullscreenerror'
-  			],
-  			// New WebKit
-  			[
-  				'webkitRequestFullscreen',
-  				'webkitExitFullscreen',
-  				'webkitFullscreenElement',
-  				'webkitFullscreenEnabled',
-  				'webkitfullscreenchange',
-  				'webkitfullscreenerror'
-
-  			],
-  			// Old WebKit
-  			[
-  				'webkitRequestFullScreen',
-  				'webkitCancelFullScreen',
-  				'webkitCurrentFullScreenElement',
-  				'webkitCancelFullScreen',
-  				'webkitfullscreenchange',
-  				'webkitfullscreenerror'
-
-  			],
-  			[
-  				'mozRequestFullScreen',
-  				'mozCancelFullScreen',
-  				'mozFullScreenElement',
-  				'mozFullScreenEnabled',
-  				'mozfullscreenchange',
-  				'mozfullscreenerror'
-  			],
-  			[
-  				'msRequestFullscreen',
-  				'msExitFullscreen',
-  				'msFullscreenElement',
-  				'msFullscreenEnabled',
-  				'MSFullscreenChange',
-  				'MSFullscreenError'
-  			]
-  		];
-
-  		var i = 0;
-  		var l = fnMap.length;
-  		var ret = {};
-
-  		for (; i < l; i++) {
-  			val = fnMap[i];
-  			if (val && val[1] in document) {
-  				for (i = 0; i < val.length; i++) {
-  					ret[fnMap[0][i]] = val[i];
-  				}
-  				return ret;
   			}
+
+  			return returnValue;
   		}
-
-  		return false;
-  	})();
-
-  	var eventNameMap = {
-  		change: fn.fullscreenchange,
-  		error: fn.fullscreenerror
-  	};
-
-  	var screenfull = {
-  		request: function (element, options) {
-  			return new Promise(function (resolve, reject) {
-  				var onFullScreenEntered = function () {
-  					this.off('change', onFullScreenEntered);
-  					resolve();
-  				}.bind(this);
-
-  				this.on('change', onFullScreenEntered);
-
-  				element = element || document.documentElement;
-
-  				var returnPromise = element[fn.requestFullscreen](options);
-
-  				if (returnPromise instanceof Promise) {
-  					returnPromise.then(onFullScreenEntered).catch(reject);
-  				}
-  			}.bind(this));
-  		},
-  		exit: function () {
-  			return new Promise(function (resolve, reject) {
-  				if (!this.isFullscreen) {
-  					resolve();
-  					return;
-  				}
-
-  				var onFullScreenExit = function () {
-  					this.off('change', onFullScreenExit);
-  					resolve();
-  				}.bind(this);
-
-  				this.on('change', onFullScreenExit);
-
-  				var returnPromise = document[fn.exitFullscreen]();
-
-  				if (returnPromise instanceof Promise) {
-  					returnPromise.then(onFullScreenExit).catch(reject);
-  				}
-  			}.bind(this));
-  		},
-  		toggle: function (element, options) {
-  			return this.isFullscreen ? this.exit() : this.request(element, options);
-  		},
-  		onchange: function (callback) {
-  			this.on('change', callback);
-  		},
-  		onerror: function (callback) {
-  			this.on('error', callback);
-  		},
-  		on: function (event, callback) {
-  			var eventName = eventNameMap[event];
-  			if (eventName) {
-  				document.addEventListener(eventName, callback, false);
-  			}
-  		},
-  		off: function (event, callback) {
-  			var eventName = eventNameMap[event];
-  			if (eventName) {
-  				document.removeEventListener(eventName, callback, false);
-  			}
-  		},
-  		raw: fn
-  	};
-
-  	if (!fn) {
-  		if (isCommonjs) {
-  			module.exports = {isEnabled: false};
-  		} else {
-  			window.screenfull = {isEnabled: false};
-  		}
-
-  		return;
   	}
 
-  	Object.defineProperties(screenfull, {
+  	return false;
-  		isFullscreen: {
-  			get: function () {
-  				return Boolean(document[fn.fullscreenElement]);
-  			}
-  		},
-  		element: {
-  			enumerable: true,
-  			get: function () {
-  				return document[fn.fullscreenElement];
-  			}
-  		},
-  		isEnabled: {
-  			enumerable: true,
-  			get: function () {
-  				// Coerce to boolean in case of old WebKit
-  				return Boolean(document[fn.fullscreenEnabled]);
-  			}
-  		}
-  	});
-
-  	if (isCommonjs) {
-  		module.exports = screenfull;
-  	} else {
-  		window.screenfull = screenfull;
-  	}
   })();
-  }(screenfull$1));
 
-  var screenfull = screenfull$1.exports;
+  const eventNameMap = {
+  	change: nativeAPI.fullscreenchange,
+  	error: nativeAPI.fullscreenerror,
+  };
+
+  // eslint-disable-next-line import/no-mutable-exports
+  let screenfull = {
+  	// eslint-disable-next-line default-param-last
+  	request(element = document.documentElement, options) {
+  		return new Promise((resolve, reject) => {
+  			const onFullScreenEntered = () => {
+  				screenfull.off('change', onFullScreenEntered);
+  				resolve();
+  			};
+
+  			screenfull.on('change', onFullScreenEntered);
+
+  			const returnPromise = element[nativeAPI.requestFullscreen](options);
+
+  			if (returnPromise instanceof Promise) {
+  				returnPromise.then(onFullScreenEntered).catch(reject);
+  			}
+  		});
+  	},
+  	exit() {
+  		return new Promise((resolve, reject) => {
+  			if (!screenfull.isFullscreen) {
+  				resolve();
+  				return;
+  			}
+
+  			const onFullScreenExit = () => {
+  				screenfull.off('change', onFullScreenExit);
+  				resolve();
+  			};
+
+  			screenfull.on('change', onFullScreenExit);
+
+  			const returnPromise = document[nativeAPI.exitFullscreen]();
+
+  			if (returnPromise instanceof Promise) {
+  				returnPromise.then(onFullScreenExit).catch(reject);
+  			}
+  		});
+  	},
+  	toggle(element, options) {
+  		return screenfull.isFullscreen ? screenfull.exit() : screenfull.request(element, options);
+  	},
+  	onchange(callback) {
+  		screenfull.on('change', callback);
+  	},
+  	onerror(callback) {
+  		screenfull.on('error', callback);
+  	},
+  	on(event, callback) {
+  		const eventName = eventNameMap[event];
+  		if (eventName) {
+  			document.addEventListener(eventName, callback, false);
+  		}
+  	},
+  	off(event, callback) {
+  		const eventName = eventNameMap[event];
+  		if (eventName) {
+  			document.removeEventListener(eventName, callback, false);
+  		}
+  	},
+  	raw: nativeAPI,
+  };
+
+  Object.defineProperties(screenfull, {
+  	isFullscreen: {
+  		get: () => Boolean(document[nativeAPI.fullscreenElement]),
+  	},
+  	element: {
+  		enumerable: true,
+  		get: () => document[nativeAPI.fullscreenElement] ?? undefined,
+  	},
+  	isEnabled: {
+  		enumerable: true,
+  		// Coerce to boolean in case of old WebKit.
+  		get: () => Boolean(document[nativeAPI.fullscreenEnabled]),
+  	},
+  });
+
+  if (!nativeAPI) {
+  	screenfull = {isEnabled: false};
+  }
+
+  var screenfull$1 = screenfull;
 
   var nativeScreenfull = function nativeScreenfull(art) {
     var notice = art.notice,
         $player = art.template.$player;
-    screenfull.on('change', function () {
+    screenfull$1.on('change', function () {
-      return art.emit('fullscreen', screenfull.isFullscreen);
+      return art.emit('fullscreen', screenfull$1.isFullscreen);
     });
     def(art, 'fullscreen', {
       get: function get() {
-        return screenfull.isFullscreen;
+        return screenfull$1.isFullscreen;
       },
       set: function set(value) {
         if (value) {
-          screenfull.request($player).then(function () {
+          screenfull$1.request($player).then(function () {
             addClass($player, 'art-fullscreen');
             art.aspectRatioReset = true;
             art.autoSize = false;
@@ -1633,7 +1608,7 @@
             notice.show = '';
           });
         } else {
-          screenfull.exit().then(function () {
+          screenfull$1.exit().then(function () {
             removeClass($player, 'art-fullscreen');
             art.aspectRatioReset = true;
             art.autoSize = art.option.autoSize;
@@ -1672,7 +1647,7 @@
         notice = art.notice,
         $video = art.template.$video;
     art.once('video:loadedmetadata', function () {
-      if (screenfull.isEnabled) {
+      if (screenfull$1.isEnabled) {
         nativeScreenfull(art);
       } else if (document.fullscreenEnabled || $video.webkitSupportsFullscreen) {
         webkitScreenfull(art);
@@ -3762,7 +3737,9 @@
           proxy(this.textTrack, 'cuechange', this.update.bind(this));
         }
 
-        this.style(subtitleOption.style);
+        this.style(_objectSpread$1({
+          'text-shadow': outline()
+        }, subtitleOption.style));
         errorHandle(window.fetch, 'fetch not support');
         return fetch(subtitleOption.url).then(function (response) {
           return response.arrayBuffer();
@@ -5096,7 +5073,7 @@
     }, {
       key: "build",
       get: function get() {
-        return '1650675682437';
+        return '1650704462815';
       }
     }, {
       key: "config",

docs/uncompiled/artplayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.17.2@@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.17.2@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.17.2@@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.17.2@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.17.2@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.17.2@@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.17.2@@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/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.17.2@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.17.2@@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/vLine truncated
+{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.17.9@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.17.9@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.17.9@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.17.9@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.17.9@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.17.9@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.17.9@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.17.9@@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.17.9@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.17.9@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.17.9@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.17.9@@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.17.9@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.17.9@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.17.9@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.17.9@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.17.9@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.17.9@@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.17.9@@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@6.0.1@screenfull/index.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/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.17.9@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.17.9@@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/cLine truncated

packages/artplayer/src/subtitle.js

@@ -1,4 +1,4 @@
-import { setStyle, setStyles, srtToVtt, vttToBlob, getExt, assToVtt, escape, errorHandle } from './utils';
+import { setStyle, setStyles, srtToVtt, vttToBlob, getExt, assToVtt, escape, errorHandle, outline } from './utils';
 import Component from './utils/component';
 import validator from 'option-validator';
 import scheme from './scheme';
@@ -80,7 +80,10 @@ export default class Subtitle extends Component {
             proxy(this.textTrack, 'cuechange', this.update.bind(this));
         }
 
-        this.style(subtitleOption.style);
+        this.style({
+            'text-shadow': outline(),
+            ...subtitleOption.style,
+        });
 
         errorHandle(window.fetch, 'fetch not support');
         return fetch(subtitleOption.url)

packages/artplayer/src/utils/subtitle.js

@@ -55,7 +55,7 @@ export function assToVtt(ass) {
 
     return `WEBVTT\n\n${ass
         .split(/\r?\n/)
-        .map(line => {
+        .map((line) => {
             const m = line.match(reAss);
             if (!m) return null;
             return {
@@ -66,17 +66,32 @@ export function assToVtt(ass) {
                     .replace(/(\\N)/g, '\n')
                     .trim()
                     .split(/\r?\n/)
-                    .map(item => item.trim())
+                    .map((item) => item.trim())
                     .join('\n'),
             };
         })
-        .filter(line => line)
+        .filter((line) => line)
         .map((line, index) => {
             if (line) {
                 return `${index + 1}\n${line.start} --> ${line.end}\n${line.text}`;
             }
             return '';
         })
-        .filter(line => line.trim())
+        .filter((line) => line.trim())
         .join('\n\n')}`;
 }
+
+export function outline(outlineColor = '#000', outlineSize = 1, blurSize = 1) {
+    return [
+        [outlineSize, 0],
+        [0, outlineSize],
+        [-outlineSize, 0],
+        [0, -outlineSize],
+        [outlineSize, outlineSize],
+        [-outlineSize, -outlineSize],
+        [outlineSize, -outlineSize],
+        [-outlineSize, outlineSize],
+    ]
+        .map((item) => `${outlineColor} ${item[0]}px ${item[1]}px ${blurSize}px`)
+        .join(',');
+}