在 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 有一个缓冲区 window，它会尝试填充该缓冲区，直到它开始实际播放。 Safari 可能有更大的 window。此外，由于在正常情况下，所有包含样本位置、持续时间等的表格都位于文件浏览器的末尾，因此可能需要读取它们以开始播放。智能浏览器可以发送字节范围为 header 的读取以仅获取文件末尾，然后查找实际的视频数据，但我还是不知道 safari 做了什么。

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

正如 OP 在使用带 -movflags faststart 的 FFmpeg 的评论中提到的那样（参见 FFmpeg MP4 options）也可以用来实现这一点。

在 Safari 中强制播放 HTML5 短视频

Forcing playback with short HTML5 videos in Safari

javascript

safari

video

webkit

html5-video