Question

我希望能够使用HTML5视频标记播放特定时间的视频（目前只需要担心Chrome）。这可以通过设置视频元素的currentTime属性来实现。使用来自html5rocks.com的视频在Chrome中运行良好，但在从我自己的本地网络服务器加载同一文件时会被忽略。

使用http://playground.html5rocks.com/#video_tag中的示例代码，我得到了以下HTML：

<!DOCTYPE html>
<html>
<body>
<video id="video1" width="320" height="240" volume=".7" controls preload=true autobuffer>
    <source src="http://playground.html5rocks.com/samples/html5_misc/chrome_japan.webm" type='video/webm; codecs="vp8, vorbis"'/>
    </video>
<input type=button onclick="play()" value="play">
<input type=button onclick="setTime()" value="setTime">
<input type=button onclick="pause()" value="pause">
<script>
    var play=function() {
        document.getElementById("video1").play();
    }
    var setTime=function() {
        document.getElementById("video1").currentTime=2;
    }
    var pause=function() {
        document.getElementById("video1").pause();
    }
</script>
</body>
</html>

使用Chrome，如果您

等待视频下载一点点（直到进度条为约10％）
按setTime - 你应该注意时间跳到2 秒
按播放

...视频将在2秒内开始。

但如果我将源src中的webm文件下载到我的本地网络服务器，并将src更改为本地点：

<source src="chrome_japan.webm" type='video/webm; codecs="vp8, vorbis"'/>

...然后设置currentTime完全被忽略。开发人员工具控制台中没有显示任何错误。

现在，我的网络服务器正在使用mime类型“video / webm”来提供服务，但它将像任何旧文件一样提供 - 而不是流式传输。

我是否需要以某种特定方式流式传输的网络服务器？还有什么可能是错的？

注意：网络服务器是一个专有平台，不会有任何与Tomcat或其他常用网络服务器相同的设置或控制，尽管可能有其他方法可以达到同样的效果。

Answer 1

确保您的Web服务器能够使用字节范围提供文档。谷歌浏览器要求这样做。没有它，搜索将被禁用，设置currentTime将无效。

要测试您的Web服务器是否执行此操作，请使用以下命令：

curl --dump-header - -r0-0 http://theurl

响应状态必须为206 Partial Content，您应该只接收资源的第一个字节而不是整个资源。

-Phil

Chrome中的HTML5视频标记 - 为什么从我的网络服务器下载视频时会忽略currentTime？

1 个答案: