How to use octopus subtiles in m3u8 files #57

RawRipper · 2024-03-24T08:49:16Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use octopus subtiles in m3u8 files #57

How to use octopus subtiles in m3u8 files #57

RawRipper commented Mar 24, 2024

How to use octopus subtiles in m3u8 files #57

How to use octopus subtiles in m3u8 files #57

Comments

RawRipper commented Mar 24, 2024