使用Chrome浏览HTML5视频

Question

我在浏览视频时遇到了问题.

出于某种原因,无论我做什么,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的简单配置不支持字节服务.

Firefox和Chrome之间的区别在于Firefox将下载整个视频文件,以便您可以通过它进行搜索,即使服务器不支持http代码206(部分内容).另一方面,Chrome拒绝下载整个文件(除非它真的很小,比如大约2-3mb).

因此,currentTime要使html5视频的参数在Chrome中运行,您需要一台支持http代码206的服务器.

对于有此问题的其他人,您可以使用curl仔细检查您的服务器配置:

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

这应该返回代码206.如果它返回代码200,则Chrome将无法搜索该视频,但由于浏览器中的解决方法,Firefox将会搜索该视频.

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

npm install http-server -g

并运行它来提供本地文件夹:

http-server -p 8000