使用 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

您有 3 种可能的视频标签：MP4、OGG、WebM。

并非所有格式都适用于所有浏览器。

在这里，我认为 WebM 在 Firefox 中有效，但在 Chrome 中无效，因此您应该为 MP4 和 WebM 文件提供两种替代格式，包括引用 MP4 文件的 2nd Source 标签。

例如源="data/video1.mp4"类型="video/mp4"

相关版本将由浏览器自动选择。

Answer 2

我遇到了类似的问题。我正在收听视频的结束事件，并将 currentTime 设置为视频的中间以连续循环播放。它在 Safari 或 Chrome.

中不起作用

我认为 Safari/Chrome 中可能存在错误，除非媒体当前正在播放，否则播放头位置属性不可用。

我的解决方法是在视频结束前开始循环，而不是让它真正结束。

先开始播放然后运行尝试测试你的功能，看看它是否在 Safari 中工作 Chrome。

Answer 3

如果您等待 canplaythrough 而不是 loadeddata，它会起作用。

参见this codepen example。

Answer 4

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

原来是服务器端的问题。我正在使用 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

这应该return代码206。如果它 returns 代码 200，Chrome 将无法搜索视频，但由于浏览器中的解决方法，Firefox 可以。

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

npm install http-server -g

并且运行它用于本地文件夹：

http-server -p 8000

Answer 5

如果修改服务器代码不可行，请解决此问题。为您的视频发出 API 调用，然后将 blob 加载到 URL.createObjectURL 并将其馈送到视频 html 标签的 src 属性中。这将加载整个文件，然后 chrome 将知道允许搜索功能工作的文件大小。

 axios.get(`${url}`, {
      responseType: "blob"
    })
      .then(function(response) {
        setVideo(URL.createObjectURL(response.data));
      })
      .catch(function(error) {
        // handle error
        console.log(error);
      });

使用 Chrome 在 HTML5 视频中搜索

Seeking in HTML5 video with Chrome

html

javascript

video

google-chrome

html5-video