HTML 5 视频，流式传输/缓冲较长视频的特定部分

Posted 2023-02-25

【中文标题】HTML 5 视频，流式传输/缓冲较长视频的特定部分

【英文标题】：HTML 5 Video, Streaming / Buffering only a certain portion of a longer video

【发布时间】：2012-03-13 11:42:44

【问题描述】：

我们有一段很长的视频，最长可达 1 小时。 我们希望向用户展示该视频的 30 秒小片段。 视频在任何时候都必须不卡顿。

用户不能然后跳过视频的其余部分，他们只能看到 30 秒的块。

例如，一场足球比赛，整场比赛都在视频中，但点击另一个页面中的按钮会加载完整视频并只播放一个进球。

html5 视频可以做到这一点吗？ 它与TimeRanges有什么关系吗？ 视频是否必须通过纯流媒体协议提供服务？ 我们可以在播放前缓冲完整的 30 秒块吗？

我们的目标是减少剪切所有小片段所需的工作流程（以及将这些片段转码为所有不同的 HTML 5 视频格式的时间），我们可以只扔出一段转码的片段并发送用户观看该片段的一部分。

非常欢迎您的想法和意见，谢谢！

【问题讨论】：

keeno, video.buffered.length-1 可以解决问题。 (0) 不起作用

【参考方案1】：

此时，HTML5 视频是一个真正的 PITA——我们没有真正的 API 来控制浏览器缓冲，因此它们往往会在较慢的连接上卡顿，因为浏览器会尝试智能地缓冲，但通常情况恰恰相反.

此外，如果您只希望您的用户观看一段特定的 30 秒视频（我认为这将是您强制用户注册观看完整视频的方式），那么 HTML5 不是正确的选择——它滥用你的系统是非常简单的。

在这种情况下，您真正​​需要的是一个体面的 Flash Player 和后端的媒体服务器 -- 这就是您拥有完全控制权的时候。

【讨论】：

好吧，这就是我的想法。我们只想玩 30 秒并没有什么险恶的。可能有几个 30 秒的剪辑我们不会从相同的 1 小时镜头中显示。我们只需要 100% 确保他们不会跳，因为重要的是用户可以看到剪辑没有任何抖动。 Flash 的问题在于 iPad！

【参考方案2】：

你可以做一些这样的事情，但是你会受到浏览器自己的缓冲的影响。 （您也无法阻止它缓冲超过 X 秒） 最好的说法是，您可以轻松地使用自定义搜索控件来限制范围并在达到 30 秒块时停止视频。

另外，缓冲不是你可以控制的，告诉浏览器不要这样做。其余部分是自动的，并且已从规范中删除了强制使用完整缓冲区的支持。

无论如何，只是让您知道这是一种糟糕的做法，并且可以做到，但您可能会遇到很多问题。您也可以随时使用 Zencoder 之类的服务来帮助处理转码。另一种选择是在服务器上安装 ffmpeg 或其他软件来处理剪辑和转码。

【讨论】：

播放，我们发现在大多数浏览器（非移动）中，我们可以通过调用 play 然后暂停来强制使用完整的缓冲区。问题是我们不能停止缓冲。无法直接控制缓冲是一个巨大的痛苦。

就像我说的，我建议在服务器上设置转码来避免这种情况。最终由你决定，但不要忘记 HTML5 仍处于工作草案中，你想做的很多事情都没有得到官方支持，我也看不到它很快就会实现。我也非常怀疑您是否找到了一个确定的完整缓冲区，老实说浏览器缓冲区的数量可能会有所不同。我试过这种暂停方法，发现一些浏览器会在当前帧之前的某个点停止缓冲。

【参考方案3】：

您可以使用 javascript（视频的 currentTime 属性）设置时间。

如果您想要自定义搜索栏，您可以执行以下操作：

<input type="range" step="any" id="seekbar">

var seekbar = document.getElementById('seekbar');
function setupSeekbar() 
seekbar.max = video.duration;

video.ondurationchange = setupSeekbar;
function seekVideo() 
  video.currentTime = seekbar.value;

function updateUI() 
  seekbar.value = video.currentTime;

seekbar.onchange = seekVideo;
video.ontimeupdate = updateUI;

function setupSeekbar() 
  seekbar.min = video.startTime;
  seekbar.max = video.startTime + video.duration;

如果视频正在流式传输，您将需要“计算”“结束”时间。

var lastBuffered = video.buffered.end(video.buffered.length-1);
function updateUI() 
  var lastBuffered = video.buffered.end(video.buffered.length-1);
  seekbar.min = video.startTime;
  seekbar.max = lastBuffered;
  seekbar.value = video.currentTime;

【讨论】：

传入 video.buffered.end() 的参数是什么？我已经看到一些示例只使用 0，这就是您的示例的效果。

@BigBalli video.buffered.length-1 您的代码是时间更新和实例时间更改的理想解决方案。当当前时间大于缓冲时间时，它设置从新时间开始缓冲。谢谢你，干得好