HTML5 Video Tag in Chrome - Why is currentTime ignored when video downloaded from my webserver?

大兔子大兔子 提交于 2021-02-05 18:56:39

问题


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.

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>

Using Chrome, if you

  1. Wait for the video to download for a bit (until the progress bar is about 10% in)
  2. Press setTime - you should notice the time jump to 2 seconds
  3. press play

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

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"'/>

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

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

Do I need a webserver that streams in some specific way? What else could be at fault here?

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.


回答1:


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.

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

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

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

-Phil



来源:https://stackoverflow.com/questions/4572720/html5-video-tag-in-chrome-why-is-currenttime-ignored-when-video-downloaded-fro

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!