Safari 无法加载 MP4 视频答案

【问题标题】：Safari fails to load MP4 videosSafari 无法加载 MP4 视频
【发布时间】：2017-10-10 01:36:42
【问题描述】：

最新的 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 的问题。任何线索都非常欢迎。

很容易重现：

在 Safari 中，转到 www.videomail.io
开始录制视频
点击预览，没有视频出现（在 Chrome 上运行良好）

【问题讨论】：

Safari，或者更确切地说，iOS 通常不希望视频的二进制数据作为一个完整文件提供。它希望它的大小更小，因此 Range bytes=0-1。
video.canPlayType("video/mp4") 在console 登录什么？
@guest271314 回复我一个“也许”
@MichaelHeuberger 没有使用 safari 的经验。无法测试代码。 "maybe" 表示媒体应该可以播放。您是否尝试过将<video> 的.src 设置为媒体资源的Blob URL 表示？
似乎是您的 nginx 和 Safari 之间的问题。一旦保存在本地主机上，我就能够加载相同的视频文件。此外，@guest271314 建议的解决方法应该可行：从获取的资源传递 blobURI 时，它运行良好。

标签： javascript safari mp4

【解决方案1】：

----最终解决方案----

通过在 express.js 控制器代码中使用以下内容我自己修复了这个问题：

  res.sendFile(file, {
    lastModified: false,
    acceptRanges: true,
    cacheControl: false
  }, function (err) {
    if (err && err.code !== 'ECONNRESET') {
      next(err)
    }
  })

【讨论】：

我很想知道你的控制器代码在修复之前是什么样子的。我目前无法成功尝试使用fs.createReadStream(filePath).pipe(res)。同样的问题是 Safari v11 不喜欢提供的 mp4。
在修复之前，我只是使用res.sendFile(file, function (err) { ... 没有这三个关键标志。

【解决方案2】：

添加 X-pad: avoid browser bug 响应头为我解决了这个问题。

【讨论】：