Javascript 使用Chrome在HTML5视频中搜索

我在使用Chrome的视频中遇到问题

出于某种原因，无论我做什么，

video.seakable.end（0）

始终为0

当我调用

video.currentTime=5

，后跟

console.log（video.currentTime）

时，我看到它总是0，这似乎重置了视频

我尝试过基于MP4和VP9的webm格式，但都得到了相同的结果

更令人恼火的是Firefox运行一切都很完美。Chrome有什么特别的地方我应该知道吗

以下是我的代码（仅适用于Firefox）：

请注意，只需调用

videoDiv.play（）

即可在两种浏览器中正确播放视频

---

另外，在电影文件完全加载后，

videoDiv.buffered.end（0）

也会在两种浏览器中给出正确的值。

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

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

在这里，我认为WebM可以在Firefox中工作，但不能在Chrome中工作，因此您应该为MP4和WebM文件提供两种可选格式，包括引用MP4文件的第二个源标记

例如，src=“data/video1.mp4”type=“video/mp4”

---

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

我也遇到类似问题。我正在听一个视频的结束事件，并将currentTime设置到视频的中间，以连续循环。它在Safari或Chrome中不起作用

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

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

---

先开始播放，然后运行你的功能，看看它在Safari Chrome中是否起作用。如果你等待

canplaythrough

而不是

loadeddata

，它会起作用

---

看。

我花了一段时间才弄明白

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

Firefox和Chrome的区别在于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服务器：

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);
      });

---

正如问题中提到的，我实际上试过在chrome中使用mp4，但没有什么不同。另外，我也很惊讶webm不会在Chrome上运行，因为谷歌是整个格式背后的主要驱动力。对不起——你在这两方面都是对的——我应该先读一下这个问题——是的，Chrome肯定应该处理webm。看起来伊恩·德夫林的答案是正确的。顺便说一句，我对不是H264格式的MP4文件有问题……这是一个很好的建议，但不幸的是，它对我的特殊问题没有帮助。谢谢你！我试过这个，但我甚至不知道它的属性。很好的建议，但不幸的是它并没有解决我的问题。虽然我成功地解决了这个问题，但结果却是服务器端的问题。。。我对你的答案投了赞成票，因为我学到了一些新的东西：-）你是否已经像上面那样设置了jetty配置，因为使用你的建议对meI不起作用。meI有类似的问题，但只在Mac上。Chrome拒绝搜索，但Firefox可以工作。我正在我的机器上运行一个兼容http 206的服务器，我可以在网络日志中看到206个请求。也许我应该问一个新问题。你是说我们只需要发送返回码206，seek功能就可以在Chrome中工作吗？不，我是说206是一种检查部分内容是否可以从服务器检索的方法。如果您正在编写自己的服务器，则必须遵守协议。Chrome使用这些信息，不必在流媒体播放之前下载整个视频。这很有效率。谢谢你，请原谅我这里的其他问题。我们有一个Jetty服务器，它处理视频文件，目前在响应中提供完整的流。当然，就像您的情况一样，seek功能不起作用。因此，如果我理解正确，即使我一次发送部分字节的流，它也不会根据运行的服务器类型工作？是否有支持字节服务的Jetty升级版本？我没有什么经验，所以我只是想了解一下。这可能与我这里关于音频文件的

内容范围

问题有关-

http-server -p 8000

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