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.

[Arpit-jain4]

iOS doesn't support MSE, only native hls

The short answer is that no, this isn't available on iOS. The slightly longer answer is that on iPads only you could enable VHS, however, we don't recommend doing so because we haven't been testing extensively with Safari compared to Chrome and Firefox.

you can refer to the same issue here.

https://github.com/videojs/http-streaming/issues/1102

[vaclavgreif]

Thanks. Is there any way than to pre-sign the urls on iOS to be able to play protected content?

[Arpit-jain4]

Yes, you can use service worker for the same.

[vaclavgreif]

Oh, is there any example / documentation on how to do that?

[Arpit-jain4]

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
        console.log('Service Worker registered with scope:', registration.scope);
    }).catch(function(error) {
        console.log('Service Worker registration failed:', error);
    });
}

self.addEventListener('fetch', function(event) {
    event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
    const url = new URL(request.url);

    // Append query parameters
    url.searchParams.append('key1', 'value1');
    url.searchParams.append('key2', 'value2');

    // Create a new request with the modified URL
    const modifiedRequest = new Request(url, {
        method: request.method,
        headers: request.headers,
        body: request.method !== 'GET' && request.method !== 'HEAD' ? request.body : null,
        mode: request.mode,
        credentials: request.credentials,
        cache: request.cache,
        redirect: request.redirect,
        referrer: request.referrer,
        integrity: request.integrity,
    });

    // Fetch the modified request
    return fetch(modifiedRequest);
}
self.addEventListener('fetch', function(event) {
    event.respondWith(handleRequest(event.request));
});

this must help

[SouthernPL]

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.

VHS relies on browser support for MSE. Currently, only macOS Safari and iPad Safari are supported IOS Safari is not supported. https://caniuse.com/?search=MSE