cgiffard / Captionator

HTML5 polyfill for closed captioning with the <track> element, and implements the WHATWG Timed Text Track specification.
captionatorjs.com
300 stars 66 forks source link

Javascript Captionator: font size will not adjust #45

Open joereddington opened 9 years ago

joereddington commented 9 years ago

This issue originally appeared as a stackoverflow question (http://stackoverflow.com/q/28901277/170243) - reposting here as problem still exists...

My use case is that I want the captions playing EXTREMELY LARGE over a blank video.

So I've been trying to increase the size of the subtitles according to the documentation using the minimumFontSize directive and a few other attempts, but am finding the font stays stubbornly the same size.

I've boiled the demo video down to the essentials for this question and remain mystified. What am I doing wrong? My code is below and I've put it at (http://projectgrin.org/cap/) so you can see the live thing.

<!DOCTYPE html>
<html> <head> <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" media="screen" href="css/captions.css"/>
    </head>
    <body>
        <video controls autobuffer id="videoTest" width="1010" height="364" >
            <source src="video/arduino.m4v" type="video/mp4" />
            <track kind="subtitles" src="video/arduino-en.vtt" type="text/vtt" srclang="en" label="English Subtitles" default />

        </video>
        <!-- Include Captionator -->
        <script type="text/javascript" src="js/captionator.js"></script>

        <!-- Example Usage -->
        <script type="text/javascript" src="js/captionator-example-api.js"></script>
        <script type="text/javascript">
            window.addEventListener("load",function() {
                    captionator.captionify(null,null,{
minimumFontSize:110, controlHeight:120
});

                var videoObject = document.getElementsByTagName("video")[0];
                videoObject.volume = 0;
                document.body.appendChild(generateMediaControls(videoObject));
            },false);
        </script>
    </body>
</html>
revolunet commented 9 years ago

looks like you can tweak native caption style with CSS : http://stackoverflow.com/questions/14782627/chrome-html5-video-subtitles-styling