最新的 Safari v11.0 无法播放通过 JavaScript 动态设置的 MP4 视频。但这在 Chrome、Edge 和 FF 上运行良好。
我的代码设置
src
元素指向 MP4 资源,如下所示:
<video class="replay" autoplay="true" autostart="true" autobuffer="true" playsinline="true" webkit-playsinline="webkit-playsinline" controls="controls" style="" preload="auto" muted="true">
<source src="https://videomail.io/videomail/11e7-ad5a-4b14b680-a354-934ec5b49c33/preview/type/mp4/x-videomail-site-name/videomail.io/videomail.mp4?1507598907103" type="video/mp4">
</video>
问题是 Safari 在“网络”选项卡下以红色突出显示此内容:
在“请求和响应”(右侧)下,它显示已取消。为什么?
加上在请求标头下我看到:
Range bytes=0-1
。看起来很奇怪。虽然我卷曲了该资源,看起来不错,但可以完全下载。
尝试了很多不同的改变,都失败了。不确定这是 Nginx 问题、我的 JS 代码中的错误还是 Safari 的问题。
非常容易重现:
---- 最终解决方案 ----
通过在express.js控制器代码中使用以下内容自行修复了此问题:
res.sendFile(file, {
lastModified: false,
acceptRanges: true,
cacheControl: false
}, function (err) {
if (err && err.code !== 'ECONNRESET') {
next(err)
}
})
添加
X-pad: avoid browser bug
响应标头解决了我的问题。