我们有一段很长的视频，最长可达 1 小时。 我们希望向用户展示该视频的 30 秒小片段。 视频在任何时候都必须不卡顿。
用户不能然后跳过视频的其余部分，他们只能看到 30 秒的块。
例如，一场足球比赛，整场比赛都在视频中，但点击另一个页面中的按钮会加载完整视频并只播放一个进球。
HTML5 视频可以做到这一点吗？ 它与TimeRanges有什么关系吗？ 视频是否必须通过纯流媒体协议提供服务？ 我们可以在播放前缓冲完整的 30 秒块吗？
我们的目标是减少剪切所有小片段所需的工作流程（以及将这些片段转码为所有不同的 HTML 5 视频格式的时间），我们可以只扔出一段转码的片段并发送用户观看该片段的一部分。
非常欢迎您的想法和意见，谢谢！
【问题讨论】：
标签： javascript html video
此时，HTML5 视频是一个真正的 PITA——我们没有真正的 API 来控制浏览器缓冲，因此它们往往会在较慢的连接上卡顿，因为浏览器会尝试智能地缓冲，但通常情况恰恰相反.
此外，如果您只希望您的用户观看一段特定的 30 秒视频（我认为这将是您强制用户注册观看完整视频的方式），那么 HTML5 不是正确的选择——它滥用你的系统是非常简单的。
在这种情况下，您真正需要的是一个体面的 Flash Player 和后端的媒体服务器 -- 这就是您拥有完全控制权的时候。
【讨论】：
你可以做一些这样的事情，但是你会受到浏览器自己的缓冲的影响。 （您也无法阻止它缓冲超过 X 秒） 最好的说法是，您可以轻松地使用自定义搜索控件来限制范围并在达到 30 秒块时停止视频。
另外，缓冲不是你可以控制的，告诉浏览器不要这样做。其余部分是自动的，并且已从规范中删除了强制使用完整缓冲区的支持。
无论如何，只是让您知道这是一种糟糕的做法，并且可以做到，但您可能会遇到很多问题。您也可以随时使用 Zencoder 之类的服务来帮助处理转码。另一种选择是在服务器上安装 ffmpeg 或其他软件来处理剪辑和转码。
【讨论】：
您可以使用 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;
}
【讨论】：