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

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[phloxic]

By default Video.js prefers native HLS playback in Safari.

If you want/need vhs features in Safari, set the vhs overrideNative config option to true.

[vaclavgreif]

@phloxic Awesome, this seems to work great, thanks!

[vaclavgreif]

@phloxic Reopening this one, as it does not seem on mobile Safari. Is there any way to make this work on mobile Safari please?

[phloxic]

See @mister-ben's answer here.

It should work on iPad OS, see the VHS docs.

[vaclavgreif]

@phloxic Thanks. Would you know of any other way to presign the URL on iPhones? Thanks!

[phloxic]

@vaclavgreif - I haven't got a clue ;-) Sorry.