我正在尝试在我的角度应用程序中播放视频，它似乎适用于所有浏览器，除了 Safari ：
<video controls autoplay muted class="media">
<source src="https://my-site/files/video.mp4" type="video/mp4" />
</video>
我已经看到了这个问题：HTML5视频标签在Safari，iPhone和iPad中不起作用，它不能解决我的问题。
起初，我遇到了字节范围的问题，我修复了它，但它仍然不起作用。
如果我将视频标签放在一个空的 html 网页中，视频会播放，但在我的 angular 应用程序中它仍然没有。
我使用提琴手来获取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
这次没有范围标头，所以我的服务器发送整个文件。而且它不播放。
我不知道是什么会导致这种差异。视频的网址是相同的(尽管 html 网页位于不同的域中(。
您是否尝试过添加playsinline属性？
<video controls autoplay playsinline muted class="media">
<source src="https://my-site/files/video.mp4" type="video/mp4" />
</video>
请尝试<iframe>
例：
<iframe title="vimeo-player" src="https://player.vimeo.com/video/336853299" width="640" height="360" frameborder="0" allowfullscreen></iframe>
您的 Mp4 可能需要使用 h264 编解码器进行转换。Mp4 有不同类型的编解码器，而 Safari 不支持所有这些编解码器，因为我认为许可证问题。 要在 nodejs 中转换的代码
const ffmpeg = require('fluent-ffmpeg');
const ffmpegPath = require('@ffmpeg-installer/ffmpeg').path;
ffmpeg.setFfmpegPath(ffmpegPath);
function convertFile(input, output, size) {
return new Promise((resolve, reject) => {
console.log("Entering converting file: " + size);
ffmpeg(input)
.format("mp4")
.videoCodec("libx264")
.size(size)
.on('error', (err) => {
console.log("Error in converting file");
reject(err);
})
.on('end', () => {
console.log("Success in converting file");
resolve(output);
}).saveToFile(output);
});
}
我遇到的问题是因为它在 assets 文件夹中，所有其他浏览器都可以通过 assets 正常工作，但无论出于何种原因，Safari 不喜欢它，所以我不得不将视频文件托管在其他地方，在我的例子中是 Azure 存储。
所以现在代码看起来像这样
<video class="px-5" controls autoplay="autoplay" loop>
<source src="azure-link/video.m4v" type="video/mp4">
Your browser does not support the videos.
</video>