Html 视频标签无法在我的 Angular 应用程序中的 Safari 中播放

Question

我正在尝试在我的 angular 应用程序中播放视频，它似乎适用于除 Safari 之外的所有浏览器：

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

我见过这样的问题：HTML5 Video tag not working in Safari , iPhone and iPad，它没有解决我的问题。

起初，我遇到了字节范围的问题，我修复了它，但它仍然不起作用。

如果我将视频标签放在一个空的 html 网页中，视频会播放，但在我的 angular 应用程序中它仍然没有。

我使用 fiddler 来获取 http 跟踪，并且有我不明白的差异。

当我在空网页中有标签时，我有以下请求：

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

我可以看到多个不同范围的请求，并且视频正在播放。

但是当我尝试从我的 Angular 应用程序播放视频时，请求是不同的：

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

这次没有范围标头，所以我的服务器发送了整个文件。而且它不玩。

我不知道是什么导致了这种差异。视频的 url 是相同的（尽管 html 网页在不同的域中）。

Answer 1

您是否尝试过添加playsinline属性？

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