Using Youtube data API captions feeds. Flowplayer subtitling feature can be generated for each video and selectable with the settings menu.
This will disable the default captions display in the Youtube player and the subtitle display is controlled and styled by Flowplayer.
Some videos might have a long list of languages so a language filter config can be used to reduce the list.
This example uses the settings menu. This can be disabled to use the built in Flowplayer 7 subtitles menu.
<div class="flex w-full">
<div id="subtitles" class="is-splash is-settings">
<a class="fp-prev">prev</a>
<a class="fp-next">next</a>
</div>
</div>
<script type="text/javascript">
var player = flowplayer("#subtitles", {
"playlist": [
{
"sources": [
{
"src": "http://www.youtube.com/watch?v=QRS8MkLhQmM",
"type": "video/youtube"
}
]
},
{
"sources": [
{
"src": "http://www.youtube.com/watch?v=eRsGyueVLvQ",
"type": "video/youtube"
}
]
}
],
"share": false,
"youtube": {
"ccLangList": [
"en",
"es",
"de"
],
"subtitles": 1
}
});
</script>