subtitles issue on iphone

[rafal-zelek]

I tried to play something with subtitles on the iphone safari and chrome browsers. The problem is that the video plays only when it's full screen (without fullscreen it pauses). But when it is in the full screen mode the subtitles doesn't show over the video.

The only workaround is to use miniplayer mode so the video stays in half of the screen and beneath it there is a page with blank video, but the subtitles are visible.

[pauloo27]

(edit: i've found the withHTMLSubtitles player after writing the comment...).

It's possible to add the subtitle track to the iOS player.

Here's a example (and it's code)

I did a simple Proof of Concept of it applied to the stremio-web player (please focus on WHAT is done instead of the HOW it's done because the how is a mess):

In the src/routes/Player/Video/Video.js, change thevideoRef.current.on('extraSubtitlesTrackLoaded' to something like this:

            videoRef.current.on('extraSubtitlesTrackLoaded', (track) => {
                const trackEl = document.createElement('track');
                trackEl.kind = 'subtitles';
                trackEl.label = track.lang;
                trackEl.srclang = track.lang;
                trackEl.src = track.url;

                const video = videoElementRef.current.querySelector('video');
                video.appendChild(trackEl);

                if (typeof onExtraSubtitlesTrackLoadedRef.current === 'function') {
                    onExtraSubtitlesTrackLoadedRef.current(track);
                }
            });

That will add the subtitle track in the Safari player. It will be very small because of a CSS rule in the stremio-video HTML player (node_modules/@stremio/stremio-video/src/HTMLVideo/HTMLVideo.js):

    styleElement.sheet.insertRule('video::cue { font-size: 4vmin; color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0); text-shadow: rgb(34, 34, 34) 1px 1px 0.1em; }');

With this line commented, the style of the subtitle will respect the system's configuration (since I was just testing that was good enough).

If the the "what was done" is ok, I can try to do a better "how" and open a PR.