JSFiddle - React, Tailwind, and code Playground

by musicreader

HTML

<video crossorigin="anonymous" playsinline="" preload="auto" src="https://s3.amazonaws.com/s3-assets.mercuryanalytics.com/talaria/instructions/no-buttons.mp4" controls height="400px"><track default  kind="subtitles" label="Subtitles" src="https://s3.amazonaws.com/s3-assets.mercuryanalytics.com/talaria/instructions/subtitles/video-no-buttons.es.vtt" srclang="es" /></video>

CSS

video::cue {
  letter-spacing: +4px;
  opacity: 1;
  background-color: transparent;
   color:#000000;
   text-shadow:
    -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white;
}

JavaScript

var video = document.querySelector('video');
var subtitle = document.getElementById('subtitle');
var track = video.addTextTrack('subtitles', "english1", "en");
track.mode = "showing";
var cues = [];
var cue = new TextTrackCue(0, 12, 'Cool text to be displayed');
cues.push(cue);
track.addCue(cues);