firefox - HTML5 视频卡顿/运行不流畅/缓冲和预加载

Question

我的主页上正在播放视频。我的 html 看起来像这样:

<video id="player" style="display: inline;">
   <source id="src1" type="video/webm" src="uploads/tx_frmovieportfolio/film_05.webm">
   <source id="src2" type="video/ogg" src="uploads/tx_frmovieportfolio/film_05.ogv">
   <source id="src3" type="video/mp4" src="uploads/tx_frmovieportfolio/film_05.mp4">
   Your Browser does not support HTML5 video.
</video>

我正在通过 jQuery 通过单击链接更改源。我还构建了自己的控制栏。非常适合它。但:

在 Chrome 中，视频加载速度非常快，并且播放得很好，没有任何问题。
在 Firefox 24 和 Opera 12.16 中，视频加载很慢并且一直在暂停。我认为它正在加载新框架。这需要很多时间。我也用 autobuffer 和 preload="true"试过了，即使第二个已经过时了。但它不会改变任何东西。

有什么解决方法，我可以做些什么让它在所有实际浏览器中快速工作？否则使用视频标签是没有意义的。

获得一些想法或完美的解决方案会很棒。 :) 。

福克

Answer 1

在您提出问题七年后，我遇到了同样的问题。手头的问题是您的浏览器正在尝试缓冲非常大的视频文件，并且某些浏览器比其他浏览器处理得更好。最重要的是，您受制于他们的互联网连接速度和可用内存。
解决方案是将您的视频转码为 Apple's HTTP Live Streaming (HLS)格式。这是 most widely supported format从 2020 年开始，它的工作原理是将您的视频拆分为 H.264/H.265 编码的短片段，每个片段的持续时间只有几秒钟，并存储为单独的文件。生成的 list (.m3u8) 充当索引，您的视频播放器读取该索引以仅下载您需要的片段。
以下是如何使用 FFMPEG 将 MPEG2 视频转码为 HLS VOD 格式的示例:

ffmpeg -i InputVideo.mpg -vf scale=w=352:h=240:force_original_aspect_ratio=decrease -c:a aac -ar 44100 -b:a 64k -c:v h264 -profile:v main -crf 20 -g 48 -keyint_min 48 -sc_threshold 0 -b:v 700k -maxrate 900k -bufsize 1400k -hls_time 4 -hls_playlist_type vod -hls_segment_filename hls/%03d.ts hls/OutputVideo.m3u8

随着 Chrome Android > v70、Android 浏览器和 Safari >= 6 都原生支持 HLS，对 HLS 的原始浏览器支持越来越好。您可以通过使用 JWPlayer 来实现几乎通用的兼容性。或 Video.js而不是 HTML5 视频对象。