使用 Chrome 在 HTML5 视频中搜索

Seeking in HTML5 video with Chrome

本文关键字：搜索 视频 HTML5 Chrome 使用      更新时间：2023-09-26

我在使用 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)还会在两个浏览器中给出正确的值。

我花了一段时间才弄清楚...

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

Firefox

和 Chrome 的区别在于，即使服务器不支持 http 代码 206（部分内容），Firefox 也会下载整个视频文件，以便您可以通过它进行搜索。另一方面，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

如果修改服务器代码不可行，请变通办法。对视频进行 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);
      });

如果您等待canplaythrough而不是loadeddata，它可以工作。

请参阅此代码笔示例。

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

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

在这里，我认为 WebM 适用于 Firefox 但不适用于 Chrome，因此您应该为 MP4 和 WebM 文件提供两种替代格式，方法是包含引用 MP4 文件的第二个源标签。

例如 src="data/video1.mp4" type="video/mp4"

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

我也有类似的问题。我正在收听视频上的结束事件，并将当前时间设置为视频中间以连续循环播放。它在Safari或Chrome中不起作用。

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

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

尝试先开始播放来测试你的功能，然后运行你的功能，看看它是否适用于 Safari Chrome。

相关文章：