Subtitles never loaded with Firefox

dear @CookPete

Spent few hours trying to debug why firefox does not display (load) my subtitles, while chrome was doing it right.I would be grateful if you could confirm or help.

Here’s an example:

https://soluble.io/react-player/demo-bugtracks/

The first video is rendered through <ReactPlayer>, the second with the native <video> tag. Both are set up to display subtitles. In firefox you’ll see the <ReactPlayer> version does not show anything.

(code is available: https://github.com/belgattitude/react-player/blob/demo/bug-tracks-firefox/src/demo/App.js#L112 on my branch)

I’ve been thinking about a firefox bug, but I’m not sure… so I wrote a basic video player and it worked quite well:

https://gist.github.com/belgattitude/26d00cbd33df56567845b5a76f265a0b

Can you help ?

[belgattitude]

FYI, I think the issue is with how react add/remove text tracks… In a prototype I’ve been able to fix the issue by managing tracks through the dom:

If you look to the code below, you’ll see that I’m not relying on render method to add tracks, but do the job in onLoadedMetadata:

    onLoadedMetadata = (e: SyntheticEvent<HTMLVideoElement>) => {
        const video = e.currentTarget;

        // As a workaround for Firefox, let's remove old tracks
        // before adding the new ones. Letting react do
        // the job does not seems to work properly
        const oldTracks = video.querySelectorAll('track');
        oldTracks.forEach((oldTrack) => {
            video.removeChild(oldTrack);
        });

        if (this.props.tracks) {
            this.props.tracks.map((t, trackIdx) => {
                const track = document.createElement('track');
                track.kind = t.kind!;
                track.label = t.label!;
                track.srclang = t.srcLang!;
                track.default = t.default!;
                track.src = t.src!;
                track.addEventListener('error', (e: Event) => {
                    console.warn(`Cannot load track ${t.src!}`)
                });
                track.addEventListener('load', (e: Event) => {
                    const textTrack = e.currentTarget as HTMLTrackElement;
                    if (t.default === true) {
                        textTrack.track.mode = 'showing';
                        video.textTracks[trackIdx].mode = 'showing'; // thanks Firefox
                    } else {
                        textTrack.track.mode = 'hidden';
                        video.textTracks[trackIdx].mode = 'hidden'; // thanks Firefox
                    }
                });
                video.appendChild(track);
            });
        }
    };

    render() {
        const {
            srcs,
            tracks,
            // Just to omit those props
            playbackRate,
            // onEnded,
            ...mediaProps
        } = this.props;

        const key = srcs && srcs.length > 0 ? srcs[0].src : '';

        return (
            <video
                style={{width: '100%', height: '100%'}}
                onLoadedMetadata={this.onLoadedMetadata}
                ref={this.videoRef}
                {...mediaProps}
                {...(this.props.playsInline ? { 'webkit-playsinline': 'webkit-playsinline' } : {})}
            >
                {srcs && srcs.map((s, idx) => <source key={`${s.src}-${idx}`} {...s} />)}
                {/*
                // This would be so easy, but subsequent changes in tracks will
                // be ignored by firefox. See the workaround onLoadedMetaData function
                {tracks && tracks.map((t, idx) => {
                    return null;
                  return (
                      <track id={`${t.src}-${idx}`} key={`${t.src}-${idx}`} {...t}/>
                  );
                })}
                */}
            </video>
        );
    }

@cookpete, I can add this behaviour to react-player. But I’m not sure it’s a nice addition, looks ugly hack and will only be useful for some people. What do you think ?

[cookpete]

This seems like a problem with React and/or Firefox, and not really with ReactPlayer. The workarounds are impressive but not something I really want to include in the library, especially if:

be warned my workaround was not sufficient for all situations.

You can pass through your own onLoadedMetadata via the config.file.attributes prop, so until a fix is found for the root cause of the problem elsewhere, this will have to do.

Is it worth opening a ticket with React and/or Firefox to try and gain some more wisdom?