webvtt - How to change video subtitles font size in html5? -
my html looks this:
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width"> </head> <body> <video controls="" autoplay="" name="media"> <source src="videopath" type="video/mp4"> <track label="english" kind="subtitles" srclang="en" src="subs.vtt" default> </video> </body> </html>
as subs.vtt subtitles file.
how change subtitles size attached track
element?
i tried creating css file, gave track
id , specified font-size
in css, , of course linked css html, size didn't change.
i tried styling inside .vtt file itself:
webvtt 1 00:00:43.889 --> 00:00:46.949 size:200% <i>introduction...</i>
and didn't change size.
i tried found online:
webvtt <link href="style.css" rel="stylesheet" type="text/css" /> 1 00:00:43.889 --> 00:00:46.949 <c vintro><i>introduction...</i></c>
and in css:
.vintro{ font-size: 5em; }
but didn't change size.
i prefer way without touching .vtt file.
in browsers support shadow dom, can style subtitles. may vary browser browser, in chrome 42 (current of writing), can use css:
video::-webkit-media-text-track-display { font-size: 200%; }
given there's vendor prefix in there, imagine other browsers might require additional rules. again, there aren't many browsers support shadow dom. of writing, it's chrome, opera, , android/chrome-for-android.
Comments
Post a Comment