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

Posted 2023-05-08

【中文标题】HTML5 视频卡顿/运行不流畅/缓冲和预加载

【英文标题】：HTML5 Video stuttering/not running fluently / Buffer and preloading

【发布时间】：2014-02-08 00:38:19

【问题描述】：

我的主页上正在播放一个视频。我的 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" 尝试过，即使第二个已经过时了。但它并没有改变任何东西。

是否有任何解决方法，我可以做些什么来使其在所有实际浏览器中快速运行？否则使用视频标签是没有意义的。

如果能得到一些想法或者完美的解决方案，那就太好了。 :) 。

法尔克

【问题讨论】：

尝试 preload="auto"。还尝试更改 webm 和 ogg 源链接的顺序。视频有什么尺寸（wxh）？

我试过 preload auto 和 true，也改变了源的顺序。问题还是一样。该视频的尺寸为 1280x720 像素。但它是在大约 400x230px 的容器中播放的。播放器的大小设置为最大 100%。所以视频看起来更小。现在我试着让视频以原始大小播放。但这也不能解决我的问题。有时它会冻结近 1 分钟。

如果将视频文件直接从文件系统拖放到 Opera/Firefox 的空白选项卡中，视频格式是否可以正常播放？ 如果它们播放得很好，您能否发布更多您拥有的 HTML（以及与视频相关的 JS）。

现在好多了。我做了什么： 1.）一个错误是预加载属性。 .我真的看不到这一点，但问号不是正确的。它们看起来有点不同，浏览器解释错了。 :/ 2.) 我再次更改了来源的顺序。现在我首先有 ogv for firefox，然后是 mp4 for opera，然后 webm for ..i forgot。这是几乎没有冻结的最佳订单。 Chrome 完全没有问题。其他两个都是。而且我不知道它在 IE 中是如何工作的，我没有使用这个浏览器。我必须稍后检查。谢谢你的想法。

【参考方案1】：

在您提出问题七年后，我遇到了同样的问题。手头的问题是您的浏览器正在尝试缓冲非常大的视频文件，并且某些浏览器比其他浏览器处理得更好。除此之外，您还受制于他们的互联网连接速度和可用内存。

解决方案是将您的视频转码为Apple's HTTP Live Streaming (HLS) 格式。它是 2020 年的 most widely supported format，它通过将您的视频分割成短的 H.264/H.265 编码剪辑来工作，每个剪辑的持续时间只有几秒钟，并存储为单独的文件。生成的清单 (.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 视频对象来实现近乎通用的兼容性。

【讨论】：

我同意 HLS 是可行的方法，但您确实需要基于 javascript 的播放器，此响应中列出的浏览器支持不正确。只有 Safari 原生支持 HLS。 （参考caniuse）

谢谢，我已经更新了支持的浏览器列表。 Safari 并不是唯一支持 HLS 的浏览器，但许多最常见的移动浏览器都支持它，包括 Chrome Android。遗憾的是，根据 [bugs.chromium.org/p/chromium/issues/… bug tracker) 中的帖子，Chrome 桌面似乎永远不会支持 HLS。