使用Chrome寻找HTML5视频 [英] Seeking in HTML5 video with Chrome

问题描述

我在使用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 =500height =300id =video1preload =auto> 
< source src =data / video1.webmtype =video / webm/> 
您的浏览器不支持视频。 
< / 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在Chrome浏览器中，这总是0，但不是Firefox？
 videoDiv.currentTime = 5; 
 console.log（videoDiv.currentTime）; //为什么在Chrome浏览器中它总是0，而不是Firefox？ b $ b}）; 
  

请注意，只需调用 videoDiv.play（）实际上在两个浏览器中都能正确播放视频。

此外，在电影文件完全加载后， videoDiv.buffered.end（0 ）在两个浏览器中也给出了正确的值。

解决方案

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

问题原来是服务器端。我使用Jetty的一个版本来为我的所有视频文件提供服务。 Jetty的简单配置不支持字节服务。

Firefox和Chrome之间的区别在于Firefox会下载整个视频文件，以便您可以查找整个视频文件，即使服务器不支持 http code 206（部分内容）。另一方面，Chrome拒绝下载整个文件（除非它非常小，例如2-3mb左右）。

因此，要获取

对于有此问题的其他人，您需要一个支持http代码206的服务器。你可以用curl来检查你的服务器配置：

  curl -H范围：bytes = 16- -I http：// localhost ：8080 / GOPR0001.mp4 
  

这应该返回 code 206 。如果它返回 code 200 ，Chrome将无法搜索视频，但由于浏览器中的解决方法，Firefox将会继续。

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

  npm install http-server -g 
  

运行它以提供本地文件夹：

  http-server -p 8000 
  

I'm having issues seeking in video's using Chrome.

For some reason, no matter what I do, video.seekable.end(0) is always 0.

When I call video.currentTime = 5, followed by console.log(video.currentTime), I see it is always 0, which seems to reset the video.

I've tried both MP4 and VP9-based webm formats, but both gave the same results.

What's more annoying is that Firefox runs everything perfectly. Is there something special about Chrome that I should know about?

Here's my code (which only works in 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>

And here's the 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?
  });

Note that simply calling videoDiv.play() does actually correctly play the video in both browsers.

Also, after the movie file is fully loaded, the videoDiv.buffered.end(0) also gives correct values in both browsers.

解决方案

It took me a while to figure it out...

The problem turned out to be server-side. I was using a version of Jetty to serve all my video-files. The simple configuration of Jetty did not support byte serving.

The difference between Firefox and Chrome is that Firefox will download the entire video file so that you can seek through it, even if the server does not support http code 206 (partial content). Chrome on the other hand refuses to download the entire file (unless it is really small, like around 2-3mb).

So to get the currentTime parameter of html5 video to be working in Chrome, you need a server that supports http code 206.

For anyone else having this problem, you can double check your server config with curl:

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

This should return code 206. If it returns code 200, Chrome will not be able to seek the video, but Firefox will, due to a workaround in the browser.

And a final tip: You can use npm http-server to get a simple http-server for a local folder that supports partial content:

npm install http-server -g

And run it to serve a local folder:

http-server -p 8000

这篇关于使用Chrome寻找HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！