在Chrome浏览器的HTML5视频中寻找

问题描述：

我在使用Chrome浏览器的视频中遇到问题。在Chrome浏览器的HTML5视频中寻找

出于某种原因，不管我做什么，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的简单配置不支持byte serving。

Firefox和Chrome的区别在于Firefox会下载整个视频文件，以便您可以通过它进行搜索，即使服务器不支持http code 206 (partial content)。另一方面，Chrome拒绝下载整个文件（除非它非常小，例如2-3mb左右）。

因此，要获得HTML5视频的currentTime参数在Chrome是工作，你需要一个支持HTTP代码206

其他任何人有这个问题的服务器，你可以双击，卷曲检查服务器的配置：

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

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

而且最后提示：您可以使用NPM HTTP服务器来得到一个简单的HTTP服务器，以支持部分内容的本地文件夹：

npm install http-server -g

并运行它服务于本地文件夹：

http-server -p 8000

我有类似的问题，但只在Mac上。 Chrome拒绝寻求，但Firefox的作品。我在我的机器上运行一个兼容http206的服务器，我可以在网络日志中看到206个请求。也许我应该就这个问题提出一个新的问题。 –

你是说我们只需要发送返回码为206就可以在Chrome中使用seek功能？ – vbNewbie

不，我是说206是一种检查可以从服务器检索部分内容的方法。如果您正在编写自己的服务器，则必须符合该协议。 Chrome使用这些信息在流式传输前无需下载整个视频。它很有效率。 – Tovi7

答

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

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

在这里，我想WebM在Firefox中工作，但不是Chrome，所以你应该提供MP4和WebM文件的替代格式，通过包含一个指向MP4文件的2nd Source标签。

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

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

正如问题中提到的，我实际上尝试在chrome中使用mp4，并没有什么区别。另外，它让我感到惊讶，因为Google是整个格式背后的主要推动力，所以webm在Chrome中不起作用。 – Tovi7

对不起 - 你们两个都对 - 我应该先阅读这个问题 - 是的，Chrome肯定会处理WebM。它看起来像伊恩德夫林有正确的答案。作为一个快速抛开，我有问题与H264格式不是MP4文件... –

答

我有类似的问题。我正在监听视频中的结束事件，并将currentTime设置为视频的中间部分以连续循环播放。它不适用于Safari或Chrome。

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

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

尝试通过先开始播放来测试你的功能，然后运行你的功能以查看它是否在Safari浏览器中正常工作。

这是一个很好的建议，但不幸的是它并没有帮助我的特定问题。虽然谢谢！ – Tovi7

答

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

请参阅this codepen example。

我试过了，我甚至都没有意识到这个属性。伟大的建议，但不幸的是它并没有解决我的情况。尽管我确实设法解决了这个问题，但事实证明这是一个服务器端问题...我提高了你的答案，尽管因为我学到了一些新的东西:-) – Tovi7

你是否已经设置了上述的码头配置，因为使用你的建议不适合我 – vbNewbie

在Chrome浏览器的HTML5视频中寻找

相关推荐