在 Safari 中强制播放 HTML5 短视频

Question

我一直在使用 Safari 和 <video> 元素与较短的高质量视频相结合时遇到问题。对于展示网站，我使用 <source> 元素将 12-15 秒 .mp4 和 .webm 文件加载到 <video> 容器中。当尝试在 Chrome 中播放视频时，它可以完美运行并且视频几乎可以立即开始播放，但 Safari 似乎想要在开始播放之前完全加载视频。

我已经研究过通过<video> 的src 属性直接加载视频，并且还添加了preload="auto" 属性以尝试强制立即播放。

我使用我们在网站上使用的一个视频设置了一个示例，该视频大约 8 MB 和 12 秒长：https://jsfiddle.net/n1eac46v/

var video = document.getElementById('video');
var source = document.createElement('source');

source.src = "foo.mp4";
source.type = "video/mp4";

video.appendChild(source);
video.on("canplay canplaythrough", video.play);

如您所见，我也在监听 canplay 和 canplaythrough 事件，但即使这样似乎也无济于事。我已经连续几天到处寻找，但现在已经没有选择了。

Answer 1

我不是 OS X 用户，所以我没有使用 Safari 的经验，但是我有机会在 Chrome 中调试 mp4 播放。 Chrome 有一个缓冲窗口，它会尝试填充它，直到它开始实际播放。 Safari 可能有更大的窗口。此外，由于在正常情况下，所有包含样本位置、持续时间等的表格都位于文件浏览器的末尾，因此可能需要读取它们以开始播放。智能浏览器可以发送带有字节范围标头的读取以仅获取文件的末尾，然后查找实际的视频数据，但我还是不知道 safari 做了什么。

您可以尝试在视频文件上使用MP4Box 将元数据和所有表格移到开头，这可能会有所帮助。

正如 OP 在 cmets 中提到的，使用带有 -movflags faststart 的 FFmpeg（参见 FFmpeg MP4 options）也可用于实现此目的。