I'm trying to play an .m3u8 video hosted on an online site, but the subtitles aren't rendered on it for some reason, perhaps because it's an unconventional video format that has to be constantly downloaded.
Json with the information
{
"video": {
"title": "Toaru Kagaku No Railgun S Opening 1",
"source": "https://g4fv.biananset.net/_v7/353be47eb659c93cd22d634417ee5717966c620728652a12f5926cd2c222d3ce65dd074984c139acf13e3444efe340e2ddcfaf1976d7ef7b3908f3ecfb8e9562ad4ed797b7df3b3231fa06805e7118fb95ff3748530150c17fd169c25122e970f8b972eadcc1d30b4a07363f2b4d92dbfb35bb22cf60fd8c5494a6b1cacccbc8/index-f1-v1-a1.m3u8",
"type": "application/x-mpegURL",
"poster": "img.jpg",
"tracks": [
{
"src": "./subtitles/jojo1.ass",
"srclang": "en",
"label": "English",
"kind": "subtitles",
"type": "application/x-ass"
},
{
"src": "./subtitles/test.ass",
"srclang": "jp",
"label": "Test Lang",
"kind": "subtitles",
"type": "application/x-ass"
}
],
"fonts": [
{
"name": "Cabin Condensed",
"url": "/fonts/CabinCondensed-Regular.ttf"
},
{
"name": "Source Sans Pro",
"url": "/fonts/SourceSansPro-SemiBold.ttf"
}
]
}
}
My HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="referrer" content="no-referrer" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="./assets/js/subtitles-octopus.js"></script>
<script src="./assets/js/main.js"></script>
</head>
<body>
<div id="video-container"></div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.12/mediaelementplayer.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.12/mediaelement-and-player.min.js"></script>
<script>
$(document).ready(function() {
$.getJSON("dados.json", function(data) {
var video = data.video;
var videoElement = '<video id="player-demo" width="800" height="480" controls="controls" preload="none" oncontextmenu="return false;" poster="' + video.poster + '">';
videoElement += '<source type="' + video.type + '" src="' + video.source + '" />';
$.each(video.tracks, function(index, track) {
videoElement += '<track src="' + track.src + '" srclang="' + track.srclang + '" label="' + track.label + '" kind="' + track.kind + '" type="' + track.type + '">';
});
videoElement += '</video>';
$('#video-container').append(videoElement);
var baseUrl = getBaseUrl();
mejs.i18n.language('en');
$('video').mediaelementplayer({
success: function(player, node) {
var video = node;
player.addEventListener('captionschange', function(e) {
console.log('Charging Track ' + e.detail.caption);
if (e.detail.caption !== null) {
var subUrl = e.detail.caption.src.replace(/^\.\//, baseUrl + '/');
if (window.octopusInstance) {
window.octopusInstance.setTrackByUrl(subUrl);
} else if (SubtitlesOctopus) {
var options = {
video: video,
subUrl: subUrl,
fonts: [baseUrl + '/fonts/CabinCondensed-Regular.ttf', baseUrl + '/fonts/SourceSansPro-SemiBold.ttf'],
//onReady: onReadyFunction,
debug: true,
workerUrl: baseUrl + '/assets/js/subtitles-octopus-worker.js',
legacyWorkerUrl: baseUrl + '/assets/js/subtitles-octopus-worker-legacy.js'
};
window.octopusInstance = new SubtitlesOctopus(options);
}
} else {
if (SubtitlesOctopus || window.octopusInstance) {
console.log('Disable Track ' + e.detail.caption);
window.octopusInstance.freeTrack();
}
}
});
$(player).closest('.mejs__container').attr('lang', mejs.i18n.language());
$('html').attr('lang', mejs.i18n.language());
}
});
});
});
</script>
</body>
</html>
Photo of inspecting elements while the video was running and the subtitles were selected
Screenshot: https://github.com/jellyfin/JavascriptSubtitlesOctopus/issues/57
Well, I don't know how to solve this problem, so I hope someone knows about it