diff --git a/src/HTMLVideo/HTMLVideo.js b/src/HTMLVideo/HTMLVideo.js index 2ee6a79..b05050d 100644 --- a/src/HTMLVideo/HTMLVideo.js +++ b/src/HTMLVideo/HTMLVideo.js @@ -449,7 +449,19 @@ function HTMLVideo(options) { case 'subtitlesOutlineColor': { if (typeof propValue === 'string') { try { - styleElement.sheet.cssRules[0].style.textShadow = Color(propValue).rgb().string() + ' 1px 1px 0.1em'; + var color = Color(propValue).rgb().string(); + var shadows = [ + color + ' 2px 0px 0', + color + ' -2px 0px 0', + color + ' 0px 2px 0', + color + ' 0px -2px 0', + color + ' 2px 2px 0', + color + ' -2px -2px 0', + color + ' 2px -2px 0', + color + ' -2px 2px 0' + ]; + + styleElement.sheet.cssRules[0].style.textShadow = shadows.join(', '); } catch (error) { // eslint-disable-next-line no-console console.error('HTMLVideo', error); diff --git a/src/withHTMLSubtitles/withHTMLSubtitles.js b/src/withHTMLSubtitles/withHTMLSubtitles.js index 4bdcaf1..3af0b7d 100644 --- a/src/withHTMLSubtitles/withHTMLSubtitles.js +++ b/src/withHTMLSubtitles/withHTMLSubtitles.js @@ -74,13 +74,25 @@ function withHTMLSubtitles(Video) { } subtitlesElement.style.bottom = offset + '%'; + var color = outlineColor; + var shadows = [ + color + ' 2px 0px 0', + color + ' -2px 0px 0', + color + ' 0px 2px 0', + color + ' 0px -2px 0', + color + ' 2px 2px 0', + color + ' -2px -2px 0', + color + ' 2px -2px 0', + color + ' -2px 2px 0' + ]; + subtitlesRenderer.render(cuesByTime, videoState.time + delay).forEach(function(cueNode) { cueNode.style.display = 'inline-block'; cueNode.style.padding = '0.2em'; cueNode.style.fontSize = Math.floor(size / 25) + 'vmin'; cueNode.style.color = textColor; cueNode.style.backgroundColor = backgroundColor; - cueNode.style.textShadow = '1px 1px 0.1em ' + outlineColor; + cueNode.style.textShadow = shadows.join(', '); subtitlesElement.appendChild(cueNode); subtitlesElement.appendChild(document.createElement('br')); });