More SRT subtitles by more videos
You can provide more SRT subtitles to let the users select the one they need.
<iframe id="video" width="100%" height="400" src="https://www.youtube.com/embed/fGPPfZIvtCw" frameborder="0" allowfullscreen="true"></iframe>
<select id="languages">
<option value="en">English</option>
<option value="hu">Hungarian</option>
</select>
<iframe id="video2" width="100%" height="400" src="https://www.youtube.com/embed/6ZfuNTqbHE8" frameborder="0" allowfullscreen="true"></iframe>
<select id="languages2">
<option value="en">English</option>
<option value="hu">Hungarian</option>
<option value="de">German</option>
</select>
<script src="static/vendor/youtube.external.subtitle/youtube.external.subtitle.js"></script>
<script src="static/vendor/subtitles-parser/subtitles.parser.js"></script>
<script>
var loadSRT = function(url, callback) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
var subtitles = parser.fromSrt(httpRequest.responseText, true);
for (var i in subtitles) {
subtitles[i] = {
start : subtitles[i].startTime / 1000,
end : subtitles[i].endTime / 1000,
text : subtitles[i].text
};
}
callback(subtitles);
}
};
httpRequest.open('GET', url, true);
httpRequest.send(null);
};
var loadMultipleSRT = function(urls, cb) {
var result = {};
Object.keys(urls).forEach(function(language) {
loadSRT(urls[language], function(subtitles) {
result[language] = subtitles;
if (Object.keys(result).length === Object.keys(urls).length) {
cb(result);
}
});
});
};
loadMultipleSRT({
en: 'static/srt/kung_fu_panda_3_trailer.srt',
hu: 'static/srt/kung_fu_panda_3_trailer_hu.srt'
}, function(subtitles) {
var youtubeExternalSubtitle = new YoutubeExternalSubtitle.Subtitle(document.getElementById('video'), subtitles.en);
document.getElementById('languages').addEventListener('change', function(e) {
var language = this.value;
youtubeExternalSubtitle.load(subtitles[language]);
});
});
loadMultipleSRT({
en: 'static/srt/avengers_infinity_war_trailer.srt',
hu: 'static/srt/avengers_infinity_war_trailer_hu.srt',
de: 'static/srt/avengers_infinity_war_trailer_de.srt'
}, function(subtitles) {
var youtubeExternalSubtitle = new YoutubeExternalSubtitle.Subtitle(document.getElementById('video2'), subtitles.en);
document.getElementById('languages2').addEventListener('change', function(e) {
var language = this.value;
youtubeExternalSubtitle.load(subtitles[language]);
});
});
</script>