Chrome中的HTML5视频标签-从我的网络服务器下载视频时,为什么会忽略currentTime? [英] HTML5 Video Tag in Chrome - Why is currentTime ignored when video downloaded from my webserver?

查看:70
本文介绍了Chrome中的HTML5视频标签-从我的网络服务器下载视频时,为什么会忽略currentTime?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我希望能够使用HTML5视频标签在特定时间播放视频(目前只需要担心Chrome).这可以通过设置视频元素的currentTime属性来实现.在Chrome中使用来自html5rocks.com的视频时,效果很好,但是当从我自己的本地网络服务器加载相同文件时,该视频将被忽略.

I want to be able to play back video from a specific time using the HTML5 video tag (and currently only need to worry about Chrome). This is possible by setting the currentTime property of a video element. That works fine in Chrome with a video sourced from html5rocks.com, but is ignored when the same file is loaded from my own local webserver.

使用 http://playground.html5rocks.com/#video_tag 中的示例代码已到达以下HTML:

Using the sample code from http://playground.html5rocks.com/#video_tag, I have arrived at the following 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

Using Chrome, if you

  1. 等待视频下载有点(直到进度条是约10%)
  2. 按setTime-您应该注意时间跳到2秒
  3. 按播放

...视频将在2秒后开始播放.

...the video will start at 2 seconds in.

但是,如果我将源src中的webm文件下载到本地Web服务器,然后将src更改为指向本地:

But if I download the webm file in the source src to my local webserver, and change src to point locally:

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

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

...then setting currentTime is complete ignored. No errors are showing in the developer tools console.

现在,我的网络服务器正在以视频/webm"哑剧类型来提供此服务,但它将像任何旧文件一样被提供-不会流式传输.

Now, my webserver is serving this with mime type "video/webm", but it will be served like any old file -- not streamed.

我需要以某种特定方式流式传输的网络服务器吗?这里还有什么毛病?

注意:该Web服务器是专有平台,尽管可能有其他方法可以达到相同的效果,但是它不会像Tomcat或其他一些常用的Web服务器那样具有完全相同的设置或控件.

Note: The webserver is a proprietary platform and won't have any of the same exact settings or controls one might expect of Tomcat or some other commonly used webserver, though there may be other ways to achieve the same effect.

推荐答案

确保您的Web服务器能够使用字节范围来提供文档.Google Chrome浏览器要求此方法有效.没有它,搜索将被禁用,设置 currentTime 无效.

Make sure your web server is capable of serving the document using byte ranges. Google Chrome requires that this works. Without it, seeking will be disabled and setting currentTime will have no effect.

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

To test if your web server does this, use the following command:

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

响应状态必须为 206部分内容,并且您应该只接收资源的第一个字节,而不是整个资源.

The response status must read 206 Partial Content and you should receive only the first byte of the resource instead of the whole resource.

-菲尔

这篇关于Chrome中的HTML5视频标签-从我的网络服务器下载视频时,为什么会忽略currentTime?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆