player.tech().vhs is undefined on Safari

[vaclavgreif]

Description

I'm using Amazon S3 as a storage for my videos, and because the medias are not public, I need to presign the URLs to get access to the files. I'm using the following on the onReady hook:

const handlePlayerReady = (player) => {
		playerRef.current = player;

		const playerXhrRequestHook = (options) => {
			const file = options.uri.replace(/^[^:]+:\/\/[^/?#]+\//, '')

			const result = synchronousRequest(addQueryArgs(window.wpify_protected_video.sign_url, {file, bucket}));
			options.uri = JSON.parse(result).uri;
			return options;
		};

		if (playerRef.current.tech().vhs) {
			playerRef.current.tech().vhs.xhr.onRequest(playerXhrRequestHook);
		}
	};

This works great everywhere except on Safari, where I get player.tech().vhs is undefined.

When I set the media to public, the video plays fine even on Safari, but I need to handle the presigning. Is there a way to make this work on Safari?

Reduced test case

https://zitlehce.cz/protected-video/trailer-rosta-vaclavek/

Steps to reproduce

1. Check the video playing fine on Chrome or Firefox
2. Check it on Safari and see the JS error.

Errors

TypeError: undefined is not an object (evaluating 'g.current.tech().vhs.xhr')

What version of Video.js are you using?

8.10.2

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Safari

What OS(es) and version(s) does this occur with?

MacOS