如何（伪）流式传输 H.264 视频 - 以跨浏览器和 html5 方式？

Posted 2023-03-05

【中文标题】如何（伪）流式传输 H.264 视频 - 以跨浏览器和 html5 方式？

【英文标题】：How to (pseudo) stream H.264 video - in a cross browser and html5 way?

【发布时间】：2011-10-04 09:29:46

【问题描述】：

我希望嵌入 MP4 视频 (H.264) 的方式应该可以跨浏览器工作，但如果可用，则使用 html5 以获得更好的性能。只要我不提供 WebM 版本，Firefox 就应该回退到 Flash。

问题：

Firefox 会在开始播放之前下载整个视频，而 Chrome 和其他浏览器在继续下载的同时播放。

我就是这么做的：

<video poster="poster.jpg" preload="auto" autobuffer autoplay loop >
  <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>

为了实现 Flash 后备，我使用了 jMediaElement：

jQuery(function()
  jQuery('video').jmeEmbed();
);

我尝试了一些 jMediaElement 的替代品，但在隐藏控件和在 Flash 播放器中使用自动播放/循环时遇到了问题。 jMediaElement 使用 JWplayer 作为后备，所有这些东西只要在视频标签中声明就可以工作。

开发版目前在：http://acn.lws-service.de/

视频按照应有的 MIME 类型“video/mp4”交付。问题可能与 JWplayer/jMediaElement 有关 - 或者可能是视频（编码）本身？

jMediaElement 的替代方案仍然允许视频自动播放、循环和隐藏控件，我们也将不胜感激。

【参考方案1】：

问题在于您的视频。您的视频没有 atom moov 数据，因此必须完全下载才能使用 flash 播放（无渐进式下载）。有一个简单的解决方案。有一个 Adob​​e Air 应用程序，它应该在文件开头添加您的 moov 数据。

您可以下载它here。您可以找到更多信息here。

关于您对标记所做的更改。您应该始终添加类型属性。关于自动缓冲和预加载。 autobuffer 确实不是 HTML5 兼容的，并且已更改为预加载。 FF3.6 确实支持自动缓冲，但不支持预加载，幸运的是 jMediaElement 会检测到这一点并自动将自动缓冲设置为 true，如果附加了 preload=""/preload="auto"。但是如果您使用自动播放，您会自动设置播放器的行为以尽快下载视频。循环也被 jMediaElement 标准化，所以这里没有问题。您的 HTML 代码应如下所示：

<video poster="poster.jpg" autoplay loop >
  <source src="video.mp4" type="video/mp4" />
</video>

或者更短一点：

<video poster="poster.jpg" src="video.mp4" type="video/mp4" autoplay loop ></video>

【讨论】：

谢谢！在我用这个 AIR 应用程序 (QTIndexSwapper2) 处理视频后，一切正常。非常感谢对 html 部分的澄清和简化 - 毕竟（以及使用 jme）html5 视频并不那么复杂。

我什至找到了那个 AIR 应用程序的 php 版本，但是虽然 AIR 应用程序可以很好地处理我的视频，但 PHP 脚本只是告诉我“moov-atom 不在该文件，该文件已准备好进行渐进式下载，或者它是无效文件。” - 所以我们似乎必须坚持使用 AIR 应用程序或使用有此选项的编码软件...

【参考方案2】：

autobuffer 不再是有效属性，已被preload 替换（设置​​为none、metadata 和auto）

loop 目前不受 Firefox 支持。

尝试在source 中省略编解码器声明，看看它是如何工作的？

【讨论】：

我删除了编解码器声明 - 和 autobuffer 参数 - 仍然是同样的问题。我认为，jwPlayer 是罪魁祸首...