Unable to pass header through the VHS handler in safari

[lalit-tudip]

Description

I'm trying to add a token header to my player. It worked for Chrome but failed for safari as I'm not able to get the VHS handler for safari which I'm able to access in chrome. Below is the code I'm using which is working in chrome.

if (player.tech(true) && player.tech(true).hls) {
  player.tech(true).hls.xhr.beforeRequest = options => {
    var headers = options.headers || {};
    headers['Authorization'] = `JWT ${testToken.access_token}`;
    options.headers = headers;
    return options
  }
}

Is there any way I can add/attach a header to the player? I'm already using the "@videojs/http-streaming" package in my project.

Reduced test case

NA

Steps to reproduce

As this is a private project, so cannot share any URLs/Creds.

Errors

No response

What version of Video.js are you using?

7.20.1

Video.js plugins used.

"videojs-contrib-dash", "@videojs/http-streaming", "videojs-contrib-eme"

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

Safari 15.6.1

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

Every 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.

[gkatsev]

VHS doesn't run by default on Safari and with native playback on safari you can't provide headers. You can try setting overrideNative, but worth noting it won't work on iPhones.

[lalit-tudip]

I have already tried player.options(true).hls.overrideNative = true; but it is still not working, by the way, I'm checking on safari web. Is there any workaround or any package to achieve the same? I tried using xhook and it's also not working.

[gkatsev]

if you can post a minimal live example page, we can try and help.

Make sure that overrideNative is set before the source is set.

[lalit-tudip]

html5: {
  nativeAudioTracks: false,
  nativeVideoTracks: false,
  hls: {
    debug: true,
    overrideNative: true
  }
}

@gkatsev I'm using this before setting the source but am still not able to access the handler. We have checked other issues that were already raised for the same issue https://github.com/videojs/videojs-contrib-hls/issues/904 & https://github.com/videojs/videojs-contrib-hls/issues/1005.

Safari macOS supports "Media Source Extensions" (https://caniuse.com/mediasource) but the overrideNative is still not working.

[alandrei]

Hello! I know this is an old issue but I believe this is still happening. Here's a minimum example: https://codesandbox.io/p/sandbox/vibrant-swanson-7837kc?file=%2Fsrc%2FPlayer.tsx%3A42%2C7 While in chrome headers are set correctly in mobile safari the headers seem to be absent.

[video-archivist-bot]

Hey! We've detected some video files in a comment on this issue. If you'd like to permanently archive these videos and tie them to this project, a maintainer of the project can reply to this issue with the following commands:

• for https://codesandbox.io/p/sandbox/vibrant-swanson-7837kc?file=%2Fsrc%2FPlayer.ts: say @video-archivist-bot save Wwl1OA