Search code examples
htmlmobilesafariamazon-s3html5-video

HTML5 Video tag always downloads full video in Safari


I have the following HTML5 video tag:

<video id="vid"  controls="controls" preload="metadata">
    <source src="/testvid.m4v" type="video/mp4" />
    Your browser does not support the video tag.
</video>

As soon as the video is clicked, Safari begins downloading the entire video file and does not stop until it gets to the end. The video file is 400 MB, so this is a problem due to the cost of the bandwidth.

It does not seem to be a problem with the location of the index in the file, as the app at http://renaun.com/blog/code/qtindexswapper/ says the index is already at the start, and the start of the video is playable immediately even though the rest is still being downloaded.

The source file is in Amazon S3, and so the server supports range requests.

Is there anything I can do? Ideally I would like some sort of sensible buffer, e.g. 20 MB of content ahead of the playhead, or 1 minute, or something like that.


Solution

  • The normal behaviour is that a small portion of the video is downloaded when the page loads (just enough for the browser to display a frame and to get the file headers). When you play the video, the whole video is downloaded while it plays.

    In some older versions of browsers, the video downloads again if you use the seek bar.

    There is no setting or attribute you can use to change this behaviour.

    Source