Subtitles in the HTML5 player

[NerosTie]

Is it possible for the HTML5 player to read the subtitles in the same folder of the movie? Same question for a subtitle inside a .mkv file.

Thanks!

[jez500]

This would not be easy, We'll need to wait for the Kodi API to support it and even then, there will likely be issues due to web players using WebVTT rather than SRT. Ideally we would want transcoding and the subtitles burned into the video before streaming.

So it will likely be a long wait for this feature.

[NerosTie]

No sound (with AC3 and DTS) and no subtitles, it will be, indeed, a long wait! A little bit sad because the video in the html5 player is very good in Chorus2! Also, I think the vlc webplayer and the xvid webplayer options are obsoletes.

[ghost]

Absolutely signed. html5 player is a awsome feature but has no sound for 90% of the videos.

[jez500]

@derdigge - No sound is because of AC3 and DTS codecs, which chrome have flagged as Wont fix https://bugs.chromium.org/p/chromium/issues/detail?id=243861

Support Kodi transcoding!

[NerosTie]

@derdigge I don't understand why they don't implement the codecs. If VLC and Kodi can, why not chrome/chromium? By the way, can it works with Firefox?

[petterreinholdtsen]

In my case, the subtitles are embedded in the video themselves, not external files. I believe there are JavaScript based HTML5 video players that can show these. Perhaps the player in Chorus can be replaced with one of these?

[bzp2010]

Usually, external subtitles are used to avoid irreversible changes to the video ontology. It will be very complicated to decode video in browser with JavaScript. I think the best solution is to transcode the video in Kodi software and directly transmit the standard video stream to the browser for playback.

[petterreinholdtsen]

The Chromium mechanism described in https://jitsi.org/news/e2ee/ ie thes Insertable Streams, allowing javascript to hook into the video while it is being decoded and displayed, might perhaps help? Or perhaps it only apply to WebRTC?

[bzp2010]

I think it's probably a video decoder running in JavaScript. WebRTC is only used to transmit the encoded video stream. If you want to realize the subtitle of the web page, you should use JavaScript to decode and render the subtitle file, such as srt or ass, instead of changing it in the video stream.

[YoyoBesser]

Hi, any updates regarding the possibility of this? Seems like such a shame this issue has gone stale...

[P4R54]

I used this method to solve this problem I will talk about windows but it should be same on another OS

edit this file ‪C:\Program Files\Kodi\addons\webinterface.default\videoPlayer.html and add these lines on html5 if condition

                $player.append($('<track>', {
                    "kind": "captions",
                    "src": subtitle,
                    "srclang": "Farsi",
                    "default": "true"
                }));

so it would be :

            if(player == 'html5'){
                $player = $('<video>', {
                    "id": id,
                    "class": "video-js vjs-default-skin",
                    "controls": "controls",
                    "preload": "auto",
                    "autoplay": "autoplay",
                    "data-setup": JSON.stringify({}),
                    "poster": getBaseURL() + bg
                });
                $player.append($('<source>', {
                    "type": 'video/mp4',
                    "src": getBaseURL() + src
                }));

                $player.append($('<track>', {
                    "kind": "captions",
                    "src": subtitle,
                    "srclang": "Farsi",
                    "default": "true"
                }));

                $player.attr('width', width).attr('height', height);
            }

in "src" variable we have current playing file path, convert your srt sutitle file to vtt and save with same name of your video file on video file directory

so we should have vtt file path like this var subtitle = getBaseURL() + src.replace(".mkv", ".vtt").replace(".avi", ".vtt").replace(".mp4", ".vtt")

it should be work . its a temproray fix the CC icon should be appear at the right bottom side of the page

[YoyoBesser]

Awesome, thanks for answering!

[neroxyr]

I've looking for this! Thanks. I paste those lines

$player.append($('', { "kind": "captions", "src": getBaseURL() + src.replace(".mkv", ".vtt").replace(".avi", ".vtt").replace(".mp4", ".vtt"), "srclang": "Español", "default": "true" }));

but when I open the browser. The CC option appears but no subtitle. Converted to vtt and renamed it with the same video file name.

[P4R54]

its working for me. manually check if your vtt file is accessible from browser and also check your video file extension because i've only added mkv, avi and mp4 to this code

[petterreinholdtsen]

What about reading the subtitles from the mkv file? All my movies have the subtitles included in the video file.

-- Happy hacking Petter Reinholdtsen

[P4R54]

What about reading the subtitles from the mkv file? All my movies have the subtitles included in the video file. … -- Happy hacking Petter Reinholdtsen

dont have any idea, as i know if html5 player support this feature we can add to kodi

[RubenTeixeira]

Hi.

You can convert srt file on the fly by adding these functions:

    function getVTT(link, callB) {
            var client = new XMLHttpRequest();
            client.open('GET', link);
            client.onreadystatechange = function() {
                    if(client.readyState === XMLHttpRequest.DONE && client.status === 200) {
                            var blobVTT = convertSRT(client.responseText)
                            callB(blobVTT);
                    }
            }
            client.send();
    }

    function convertSRT(content) {
            content = content.replace(/(\d+:\d+:\d+)+,(\d+)/g, '$1.$2');
            content = "WEBVTT\r\n\r\n" + content;
            var blob = new Blob([content], {type: 'text/vtt'});
            return window.URL.createObjectURL(blob);
    }

Then, on the HTML5 part of the code would become:

        // Make the html5 player
        if(player == 'html5'){
            $player = $('<video>', {
                "id": id,
                "class": "video-js vjs-default-skin",
                "controls": "controls",
                "preload": "auto",
                "autoplay": "autoplay",
                "data-setup": JSON.stringify({}),
                "poster": getBaseURL() + bg,
            });
            $player.append($('<source>', {
                "type": 'video/mp4',
                "src": getBaseURL() + src
            }));
            var subtitleLink = (getBaseURL() + src).slice(0, -3) + "srt"; // Subtitle with same name as video on the same folder
            getVTT(subtitleLink, function(blobVTT){
                    var vid = videojs(id);
                    vid.addRemoteTextTrack({
                            "kind": 'subtitle',
                            "src": blobVTT,
                            "srclang": 'en_US',
                            "label": 'MyLabel',
                            "default": 'true',
                    }, false);
                    var tracks = vid.remoteTextTracks();
                    // Replace with for loop if more than one subtitle added
                    tracks[0].mode = 'showing';
            });
            $player.attr('width', width).attr('height', height);
        }