Iphone browsers Safari and Chrome not sending custom headers

[xoraingroup]

What do you want to do with Clappr?
I am trying to set custom headers on an hls stream using demo.

What have you tried so far?
I can see custom headers are being received from android devices while playing it in browser and also desktop browsers including linux, Mac and windows. Some how when using same demo from iphone browsers, it does not send those custom headers.

Setting custom headers as following:

hlsjsConfig: {
            xhrSetup: function (xhr, url) {
                xhr.setRequestHeader("key1", "value1")
                xhr.setRequestHeader("key2", "value2")
            }
        }

Can body help in this? Thank you

[kslimani]

I think it is because, on iphone, the native html5 video element is used as playback instead of HLSJS one.

[xoraingroup]

@kslimani thank you for information. I know about this. But Is there any way to handle custom headers using clappr player? Or that would be sending query params in link to compensate for header behaviour in iphone?

[kslimani]

AFAIK, there is no mechanism in Clappr player which allow you to set custom headers.
Sending key values using query parameters seems the easier approach.

[xoraingroup]

Right, the first issue is ok now. I am passing parameter in url for hls and it works ok.

How do I add query parameter to ts segment url when browser is trying to download them and feeding it to the player?

Basically what I am trying to do is routing based on either header or query param to send request to proper origin. For hls playlist file its ok now, but the segment is not getting routed, because our caching server dont know where to route the request without header or query information.

Does clappr player have some option to append query parameter to each request it send for hls playlist and ts segments?

[Mrhallah]

Je vous suggère de vérifier si la démo que vous prenez en charge les en-têtes personnalisés sur les navigateurs iPhone. Si ce n'est pas le cas, vous pouvez essayer d'utiliser une autre démo qui prend en charge les en-têtes personnalisés sur les navigateurs iPhone.

Si la démo prend en charge les en-têtes personnalisés sur les navigateurs iPhone, vous pouvez essayer de définir les en-têtes personnalisés d'une manière différente. Par exemple, vous pouvez essayer d'utiliser la méthode setRequestHeaderdirectement sur l'objet XMLHttpRequest. Voici un exemple de code :

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/playlist.m3u8', true);
xhr.setRequestHeader('key1', 'value1');
xhr.setRequestHeader('key2', 'value2');
xhr.send();