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的简单配置不支持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

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

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

npm install http-server -g

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

http-server -p 8000

Answer 2

如果您等待的是canplaythrough而不是loadeddata，那就可以了。

请参阅this codepen example。

Answer 3

如果无法修改服务器代码，请变通解决。对您的视频进行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);
      });

Answer 4

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

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

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

E.g。 src =“data / video1.mp4”type =“video / mp4”

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

Answer 5

我有类似的问题。我正在监听视频上的结束事件，并将currentTime设置为视频中间以连续循环播放。它无法在Safari或Chrome中运行。

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

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

首先尝试开始播放，然后运行您的功能以确定它是否适用于Safari Chrome。

使用Chrome浏览HTML5视频

5 个答案: