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>
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.
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;
}
}
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:
demo.captions.vtt subtitles. neededdemo.html neededfont folder used with CSSlang language folder. not really neededvideo-js.css edit thid file. neededvideo-js.less collapsed CSS. not neededvideo-js.min.css collapsed CSS. not neededvideo-js.swf flash fallback for older browsers. optionalvideo.dev.js the expanded JS. replace video.js with this if you want. needed if not using #10video.js collapsed JS. the HTML page uses this. replace it with video.dev.js. needed if not using #9video.novtt.dev.js not neededvideo.novtt.js not needed
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
According to HTML5 Video Caption Cue Settings in WebVTT article, you can Styling Cues.
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.
