Tag Archives: Mange

Flowplayer and Captions (Subtitles)

javascript, web development, , , , ,

Actually I couldn’t mange to make it work with a non-javascript approach, but however with the .js help it works. I’ll paste here this code, hopefully this will help.

Note that you’ve to change plugins/javascripts/videos/captions path!

<html>
<body>
<div id="player" style="width:480px;height:360px"></div>
<script src="Flowplayer.Captions/flowplayer-3.2.2.min.js"></script>
<script>
 
$f("player", "Flowplayer.Captions/flowplayer-3.1.5.swf", {
    clip : {
        url : "Flowplayer.Captions/bach.flv",
        captionUrl : 'Flowplayer.Captions/bachen.srt'
    },
    plugins:  {
        captions: {
            url: 'Flowplayer.Captions/flowplayer.captions-3.2.1.swf',
            captionTarget: 'content'
        },
        content: {
            url : 'Flowplayer.Captions/flowplayer.content-3.2.0.swf',
            bottom: 5,
            height: 50,
            backgroundColor: 'transparent',
            backgroundGradient: 'none',
            border: 0,
            textDecoration: 'outline',
            style: {
                body: {
                    fontSize: 15,
                    fontFamily: 'Arial',
                    textAlign: 'center',
                    color: '#ffffff'
                }
            }
        },
        controls: {
            url : 'Flowplayer.Captions/flowplayer.controls-3.1.5.swf'
        }
    }
});
 
setTimeout(function() {
    $f('player').getPlugin('captions').loadCaptions(0, 'Flowplayer.Captions/bachbg.srt');
}, 3000);
 
</script>
</body>
</html>