Having issues with my clients site in the video player specifically in Chrome Desktop.
Using the snippet below in both Chrome and Firefox, the video loads and plays but only in Firefox can I see the subtitles. Extra weird is that I can see the subtitles in Chrome Mobile but not Chrome Desktop.
If I inject the tracks element manually, I see the CC button appear in chrome desktop and it works. but it never loads automatically
<VideoPlayer
thumbnailTime={0}
poster={videoThumbnail}
autoPlay={autoPlay}
onEnded={onVideoEnd}
onPlay={onVideoPlay}
onTimeUpdate={onVideoProgress}
onLoadedMetadata={onPlayerReady}
onPause={onVideoPause}
accentColor="#57b3d9"
metadata={{
video_id: datoVideo?.id,
video_title: datoVideo?.title,
}}
data={{
...datoVideo,
attributes: { ...datoVideo?.attributes, placeholder: null }
}}
crossOrigin="anonymous"
>
</VideoPlayer>
When I add this code
const onPlayerReady = () =>
{
const player = document.querySelector("mux-player") as any;
if (!player) return;
const tracks = player.textTracks;
const isManualTrackMissing = !Array.from(tracks).some((t: any) => t.kind === "subtitles");
if (isManualTrackMissing) {
console.log("subtiles missing")
}
}
only on chrome Desktop do I ever see “subtitles missing” printed. Even though they both seem to grab the correct manifest (when I check in network tab)
utterly baffled? can only assume its a CORS or CORB issue but I cant see that kind of error in the network tab.
its a “create-react” app but i have see the same problem in my (on branch) remix version so im fairly sure its a bug in the react datocms video player specifically
import { VideoPlayer } from “react-datocms”;
