加快 HTML5 视频搜索速度？

Question

嘿，我想知道你们是否知道一些可以帮助我的技巧。我实现的是一个滑块，它通过 currentTime 属性控制 HTML5 视频的搜索位置。我希望发生的是当用户拖动视频实时更新的滑块时。

我有什么工作，但视频播放器图像在我设置当前时间时不会更新到每一帧。有什么想法吗？

slide: function(e, ui){
    seeksliding = true;
    $gVideo[0].currentTime = ui.value;
},

Answer 1

现代浏览器通常非常擅长快速搜索，甚至可以达到synchronize two or more videos using Javascript 的程度，具有与您描述的功能相同的功能。 （版本 4-5 左右的 Firefox 会多花几毫秒并失去同步，但现在好多了。）

只要ui.value 介于零和视频持续时间之间，您拥有的代码应该可以工作。但是如果 a) 视频未加载或 b) 编码的视频文件有问题，您可能会遇到问题。

首先，确保浏览器可以在没有任何 Javascript 控件的情况下播放视频和搜索。只需尝试在浏览器中打开文件，首先直接关闭硬盘驱动器，然后关闭网络。如果您无法使用本机控件进行搜索，则无法使用 Javascript 进行搜索。我有时会看到通过重新编码没有B-Frames 的视频来解决寻找错误。

接下来，查看在您尝试搜索时是否已加载视频。您可以通过将preload 属性添加到视频标签来加快速度。并通过将滑块代码放入loadedmetadata 事件中，确保在浏览器有视频的持续时间之前不会启用滑块事件。