对 HTML5 中的流式视频感到困惑答案

【问题标题】：Confused about streaming video in HTML5对 HTML5 中的流式视频感到困惑
【发布时间】：2015-03-31 23:07:49
【问题描述】：

从 Amazon Cloudfront 发行版即时播放 HTML5 视频的最佳方式是什么？

我对该主题进行了大量研究，但似乎无法找到最好的方法。

我目前正在使用 popcorn.js，并且也尝试过使用 video.js。视频工作正常，只是不能在所有浏览器上立即播放。在 IE 中，它似乎首先下载整个文件。

目前在 Amazon Cloudfront 发行版上使用 MP4 的 HTML5 视频最简单的解决方案是什么？

【问题讨论】：

【解决方案1】：

如果您提供的是 mp4，那么“即时”可能总是会有一些延迟 - 客户端需要下载足够的视频才能在没有缓冲的情况下播放（CloudFront 等会有所帮助，因为它们会缓存在离用户更近的地方）

您需要确保优化您的 mp4 文件以实现最佳交付...您需要尝试一些设置，但我建议确保 MOOV 元素位于文件开头以提供帮助浏览器可以快速获取足够的元数据。

我使用 ffmpeg 来优化内容，通常是这样的

./ffmpeg -y -i SourceFile.mp4 -s 1280x720 -c:v libx264 -b 3M -strict -2 -movflags faststart DestFile.mp4

您将需要使用帧大小（-s 参数）和目标比特率（-b）来获得大小和质量的适当平衡，以满足您所需的速度。

请查看preparing mp4 file for html 5 以获得稍长的答案

【讨论】：