Need help styling subtitles on html5 using the track element

Question

<body>
<video width="500" height="375" controls class="playr_video">
    <source type="video/mp4" src="testvideo.mp4" />
    <track kind="subtitles" src="testvideo.vtt" srclang="en" />
</video>
</body>
</html>

I have this working but the subtitles have a black background, I would like to remove that and make the subtitles have a small black outline without any background. Any help is appreciated, thanks!

Possible duplicate of [How to style text tracks in HTML5 video via CSS?](http://stackoverflow.com/questions/32252337/how-to-style-text-tracks-in-html5-video-via-css) — Josh Sanger, Dec 24 '16 at 21:45
I am looking for specific help to remove the background and put an outline. — Kastel, Dec 24 '16 at 21:47

score 1 · Accepted Answer · answered Jul 13 '17 at 17:48

As stated here: enter link description here

The only cross-browser solution I have found to date is: Hide the video’s text tracks and use your own.

This will allow you to create your own text nodes, with classes, id’s etc. which can then be styled simply via css.

In order to do so, you would utilize the onenter and onexit methods of the text cues in order to implement your own text nodes.

var video   = document.querySelector(‘YOUR_VIDEO_SELECTOR’)
    tracks  = video.textTracks[0],
    tracks.mode = 'hidden', // must occur before cues is retrieved
    cues    = tracks.cues;

  var replaceText = function(text) {
        $('WHERE_TEXT_GETS_INSERTED').html(text);
      },

      showText = function() {
        $('WHERE_TEXT_GETS_INSERTED').show();
      },

      hideText = function() {
        $('WHERE_TEXT_GETS_INSERTED').hide();
      },

      cueEnter = function() {
        replaceText(this.text);
        showText();
      },

      cueExit = function() {
        hideText();
      },

      videoLoaded = function(e) {
        for (var i in cues) {
          var cue = cues[i];
          cue.onenter = cueEnter;
          cue.onexit = cueExit;
        }
      },

      playVideo = function(e) {
        video.play();
      };


  video.addEventListener('loadedmetadata', videoLoaded);
  video.addEventLister('load', playVideo);
  video.load();

score 0 · Answer 2 · answered Dec 24 '16 at 21:52

0

Not sure which element this is suppose to target for track**

.{
color: rgba(0,0,0,0) !important;
 -webkit-text-fill-color: white; /* Will override color (regardless of order) */
   -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: black;
}

answered Dec 24 '16 at 21:52

Fabian

25
8

Where exactly do I place that? – Kastel Dec 24 '16 at 21:54
Put this in the header. read this: http://www.w3schools.com/html/html_css.asp – Fabian Dec 24 '16 at 22:07
for yours it may be: track{ // with my code here } – Fabian Dec 24 '16 at 22:28

score 0 · Answer 3 · answered Feb 06 '18 at 22:00

I set out to style my captions to have a black background and be positioned below the video for Safari and Chrome. I have achieved success with the following code combined with editing the .vtt file with the following styles. Note you must add the styles to the .vtt file or else in safari your captions will jump around when the video controls (even if they're hidden) would appear:

4
00:00:09.980 --> 00:00:12.640 line:13 position:50% align:middle 
size:100%
for just the summer but I ended up staying here.

Styles for chrome and safari captions:

Chrome uses the video::cue background-color and opacity.

video::cue {
  opacity: 1;
  background-color: black;
  font-size: 20px !important;
}

Safari uses -webkit-media-text-track-display-backdrop for it's background color. Note the !important which overrides Safari's inherent styling.

video::-webkit-media-text-track-display-backdrop {
  background-color: black !important;
  overflow: visible !important;
}

The following webkit-media-text-track-display overflow is allow for more padding around Chrome's caption text:

video::-webkit-media-text-track-display {
  overflow: visible !important;
}

Overflow visible is important on the following code for Safari and I'm setting the captions below the video with the transform, which is reliant on a fixed font-size:

video::-webkit-media-text-track-container {
 overflow: visible !important;
 transform: translateY(30%) !important;
}

score 0 · Answer 4 · answered Oct 24 '20 at 14:55

0

As answered in the duplicate question, use this css:

video::cue {
    background-color: transparent;
    text-shadow: #000 1px 1px 3px;
}

answered Oct 24 '20 at 14:55

Klesun

12,280
5
59
52

Need help styling subtitles on html5 using the track element

4 Answers4

Linked