javascript - 使用 Chrome 在 HTML5 视频中搜索

Question

我在使用 Chrome 浏览视频时遇到问题。

出于某种原因，无论我做什么，video.seekable.end(0) 始终为 0。

当我调用 video.currentTime = 5，然后调用 console.log(video.currentTime) 时，我看到它始终为 0，这似乎重置了视频.

我已经尝试过基于 MP4 和 VP9 的 webm 格式，但都给出了相同的结果。

更烦人的是 Firefox 运行一切都很完美。 Chrome 有什么特别之处我应该了解吗？

这是我的代码(仅适用于 Firefox):

      <div class="myvideo">
        <video width="500" height="300" id="video1" preload="auto">
          <source src="data/video1.webm" type="video/webm"/>
          Your browser does not support videos.
        </video>
      </div>

这是 javascript:

var videoDiv = $(".myvideo").children().get(0)
videoDiv.load();
  videoDiv.addEventListener("loadeddata", function(){
    console.log("loaded");
    console.log(videoDiv.seekable.end(0)); //Why is this always 0 in Chrome, but not Firefox?
    videoDiv.currentTime = 5;
    console.log(videoDiv.currentTime); //Why is this also always 0 in Chrome, but not Firefox?
  });

请注意，只需调用 videoDiv.play() 即可在两种浏览器中正确播放视频。

此外，在电影文件完全加载后，videoDiv.buffered.end(0) 也会在两种浏览器中给出正确的值。

Answer 1

我花了一段时间才弄明白...

原来是服务端的问题。我正在使用 Jetty 的一个版本来提供我所有的视频文件。 Jetty简单配置不支持byte serving .

Firefox 和 Chrome 的不同之处在于 Firefox 会下载整个视频文件以便您可以搜索它，即使服务器不支持 http code 206 (partial content) 也是如此。 .另一方面，Chrome 拒绝下载整个文件(除非它真的很小，比如大约 2-3mb)。

因此，要让 html5 视频的 currentTime 参数在 Chrome 中正常工作，您需要一个支持 http 代码 206 的服务器。

对于遇到此问题的任何其他人，您可以使用 curl 仔细检查您的服务器配置:

curl -H Range:bytes=16- -I http://localhost:8080/GOPR0001.mp4

这应该返回代码 206。如果它返回代码 200，Chrome 将无法搜索视频，但 Firefox 可以，因为浏览器中有解决方法。

最后一个提示:您可以使用 npm http-server 为支持部分内容的本地文件夹获取一个简单的 http-server:

npm install http-server -g

并运行它为本地文件夹提供服务:

http-server -p 8000