5

So I ran into problem while writing my own customized HTML5 video player. Can any CSS rules be applied to <track> element? Any nasty hacks? I want to control position of <track> and font-size.

<div id="movie-01">
<video id="video" controls preload="metadata">
   <source src="files/movie-01/movie.mp4" type="video/mp4">
   <track label="Chinese Traditional" kind="subtitles" srclang="cht" src="files/movie-01/cht.vtt" default>
</video>
</div>
<style>
    track{
      color: #FAFAFA;
      font-size: 1em;
    }
</style>
Pancake_M0nster
  • 267
  • 5
  • 18

6 Answers6

11

According to the WebVTT, The <track> element cannot be rendered with css, thus there is no way to add css to it. You can change traits and the given cue, but nothing beyond that. Here's a nice tutorial for creative use of these. The closest you can get to styling it is surrouding it with a div and applying the style to the div itself. Sorry, no nasty hax. :/

EDIT: There is one forbidden nasty trick, but it's highly dangerous for the mortal. Beware, for the worst bugs and demons you've ever seen if you ever get close to these technics.

Protect the track

A given track element can be embeded inside an Audio element, protected by it, since they both share the unliked race of HTML5 media players. The mozilla docs have a nice scroll which may help you in your quest; it includes the following:

<audio src="foo.ogg">
  <track kind="captions" src="foo.en.vtt" srclang="en" label="English">
  <track kind="captions" src="foo.sv.vtt" srclang="sv" label="Svenska">
</audio>

Listen to no rules

As a forbidden prophecy once mentioned, there's no implemented audio player which uses CSS - however, the chosen one could make their own. He or she shall leave the controls attribute off, and implement the controls from the scratch using javascript. They might get a few followers to assist them in the form of existing audio players partial implementation, such as your childhood friend.

Attack from the inside out

Once the chosen one has mastered the various arts of styling controls with js, they may use the secret inner-trait-css-styling-non-justu and add styling to the inner elements from the audio controls - one of which, is the track.

Good luck, adventurer. You'll be the first to ever come back alive, if you will. And if you will, please tell us the tale of your mighty battles.

Community
  • 1
  • 1
A. Abramov
  • 1,823
  • 17
  • 45
9

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;
  -webkit-transform: translateY(20%) !important;
  transform: translateY(20%) !important;
  position: absolute;
}

EDIT

With some tweaking I ended up using this for my project:

Important: Delete all inline styling from your .VTT file.

Determine if the user is using chrome or safari.

const rootElement = document.getElementById('root');
const M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];

rootElement.className += "web";
if(M[1] === 'chrome'){
  rootElement.className += " chrome";
} else {
  rootElement.className += " safari";
}

Then in a SASS .scss file use the following styles. NOTE: If you're not using SASS you can simply create a class for the video element and nest the corresponding styles. 

.chrome {
  video::cue {
    font-size: 24px;
    opacity: 1;
    background-color: black;
    -webkit-transform: translateY(10%) !important;
    transform: translateY(10%) !important;
  }

  video::-webkit-media-text-track-display {
    overflow: visible !important;
    -webkit-box-sizing: border-box;
    background: black;
    padding: 8px;
    border-radius: 16px;
  }


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

.safari {
   video::cue {
     font-size: 24px;
     opacity: 1;
     background-color: black;
   }

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

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

   video::-webkit-media-text-track-container {
     overflow: visible !important;
     -webkit-transform: translateY(20%) !important;
     transform: translateY(20%) !important;
     position: absolute;
   }
}
Kieran
  • 231
  • 3
  • 5
  • 1
    This was super useful for me trying to make a custom video player that works with Electron and Cordova as wrappers. I had to remove the `position: absolute` line for Electron though. – ben May 08 '18 at 20:19
3

While normally you can't style the track with just plain old CSS, you can use VideoJS to do it. The JavaScript and CSS used for the VideoJS video player allows the track to be styled. You will want to tryout everything using FireFox because (currently) Chrome doesn't allow the track to be shown unless it's already on a server. And I assume you're working offline with your HTML files.

Head over to http://www.videojs.com/ and download the files. Extract the files from the .zip and open video-js.css. Go down to the bottom into the REQUIRED STYLES (be careful overriding) section and find /* Text Track Styles */. A little below you will find .vjs-caption-settings. In the middle of this CSS you will see color: #FFF; and font-size: 12px;. Have fun switching up the colors.

I hope you, and everybody else, will find this useful.

Map of the VideoJS files:

  1. demo.captions.vtt subtitles. needed
  2. demo.html needed
  3. font folder used with CSS
  4. lang language folder. not really needed
  5. video-js.css edit thid file. needed
  6. video-js.less collapsed CSS. not needed
  7. video-js.min.css collapsed CSS. not needed
  8. video-js.swf flash fallback for older browsers. optional
  9. video.dev.js the expanded JS. replace video.js with this if you want. needed if not using #10
  10. video.js collapsed JS. the HTML page uses this. replace it with video.dev.js. needed if not using #9
  11. video.novtt.dev.js not needed
  12. video.novtt.js not needed
CDM
  • 141
  • 10
  • Good answer - I had problems understanding VideoJS, however Google Chrome allows VTT files if you run it as so `chrome.exe --disable-web-security`, dangerous, but acceptable when testing, or install that plugin https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en – Pancake_M0nster Aug 14 '15 at 21:21
  • 2
    It's true, you learn something new everyday. VideoJS isn't really that hard to understand. Just add all the subtitles and chapter track files you want and then change the different font and background colors to show where each bit of CSS goes. That's what I did when I started using VideoJS about 1 and a half years ago. – CDM Aug 14 '15 at 21:26
  • There, newborn. Have 10 gold coins for your rebellious attitude, may the spark stay with you. – A. Abramov Aug 15 '15 at 10:03
2

You can apply your css styles using 

video::-webkit-media-text-track-display {
      color: #FAFAFA;
      font-size: 1em;
}

I've got it to work with font-size and font-family. There's more details on this site http://www.samdutton.com/track/shadowDOM.html

russ87
  • 21
  • 2
1

According to HTML5 Video Caption Cue Settings in WebVTT article, you can Styling Cues.

brcebn
  • 1,571
  • 1
  • 23
  • 46
1

There are many good options here, but maybe my solution will help someone.

On a past project for which I had to implement FCC-compliant options for styling subtitles, I ended up using VTT.js, which renders the cues in a <div/> or a <span/> over the <video/>. Add a css rule that reaches this node, and you have full CSS control over it.

vgrafe
  • 1,300
  • 1
  • 12
  • 13