Html video tag doesn't play in Safari within my Angular app

Question

I am trying to play a video in my angular app, and it seems to work in every browser except with Safari :

<video controls autoplay muted class="media">
    <source src="https://my-site/files/video.mp4" type="video/mp4" />
</video>

I have seen this questions : HTML5 Video tag not working in Safari , iPhone and iPad, and it doesn't solve my problem.

At first, I had the problem with the byte range, I fixed it, and it still doesn't work.

If I put the video tag in an empty html webpage, the video plays, but in my angular app it still doesn't.

I used fiddler to get the http traces, and there are differences I don't understand.

When I have the tag in an empty web page, I have the following request :

GET https://my-site/files/video.mp4 HTTP/1.1
Host: (my-site)
Accept-Encoding: identity
X-Playback-Session-Id: 14692D0E-A88B-4253-8B8A-BC580AB82174
Accept-Language: fr-fr
Range: bytes=0-1
Accept: */*
User-Agent: Mozilla/5.0 (iPod touch; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1
Referer: (http://my-site/)
DNT: 1
Connection: keep-alive

I can see several requests with different ranges, and the video plays.

But when I try to play the video from my Angular app, the request is different :

GET https://my-site/files/video.mp4 HTTP/1.1
Host: (my-site)
Connection: keep-alive
Accept: */*
User-Agent: Mozilla/5.0 (iPod touch; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1
Accept-Language: fr-fr
Referer: (http://my-site/)
Accept-Encoding: br, gzip, deflate

This time there is no range header, so my server sends the whole file. And it doesnt play.

I have no idea what can cause this difference. The url of the video is the same (although the html webpage is on a different domain).

Answer 1

Have you tried adding playsinline attribute?

<video controls autoplay playsinline muted class="media">
    <source src="https://my-site/files/video.mp4" type="video/mp4" />
</video>