HTML5 Video Safari Downloads Full Before Playing

html5 video safari downloads full before playing

looks like the MOOV atom isn't at the beginning of the file.
I used ffmpeg to just relocate that (no other encoding) and then a binary compare (using HexFiend) and a quick test seemed to show that Safari was playing the video sooner

./ffmpeg -i top.mp4 -codec copy -movflags faststart top-fs.mp4

(caveat being that even though I cleared browser cache I didn't do things like bounce my test server or time things too accurately)

FWIW I find ffmpeg to be a good solution, and especially for background video you'll want to play around with parameters to optimize for your use-case

iOS Safari downloading whole MP4 video before playing?

If your video has sound, this will cause a delay in loading. As per the apple developer release notes for Safari 10, ".. videos without audio tracks or with disabled audio tracks can play automatically when the webpage loads". A note is also added on caniuse.com that the autoplay feature is only available to non-audible videos.

You could try putting the muted attribute before the autoplay in your video code, or muting the audio track of your video [in a vid editor] and then re-export/upload a silent version to see if that makes a difference.

Good luck!

HTML5 Video tag always downloads full video in Safari

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: http://www.stevefenton.co.uk/Content/Blog/Date/201106/Blog/HTML-5-Video-In-Real-Life/

Mobile Safari - wait until <video> has fully downloaded before playing

There's a DOM event called canplaythrough that you can subscribe to in your JavaScript. This event is called when the browser estimates it can play through the entire video without pausing to buffer.

EDIT: Similarly, you can use the progress event to determine how much of the video has been buffered:

var player = document.getElementById('video_player'); // The <video> element
player.addEventListener('progress', onVideoProgressUpdate, false);

function onVideoProgressUpdate(e) {
    var percentageBuffered = 0;

    if (player.buffered.length > 0 && player.buffered.end && player.duration) {
        percentageBuffered = player.buffered.end(0) / player.duration;
    } else if (player.bytesTotal != undefined && player.bytesTotal > 0 && player.bufferedBytes != undefined) {
        percentageBuffered = player.bufferedBytes / player.bytesTotal;
    }

    if (percentageBuffered == 1) { // 100% of the video has been buffered
        player.Play();
    }
}

Why do webkit browsers need to download the entire html5 video (mp4) before playing?

As Foaster said, the metadata block needs to be early in the video so that the video doesn't have to load up to it (which may entail loading in the entire video if it's placed at the end).

But you don't need some black-box .exe file from a product website to move the metadata block. Here's how to do it with just good old ffmpeg:

ffmpeg \
-i input.mp4 \
-codec copy \
-movflags faststart \
-f mp4 output.mp4

This will:

1. -i input.mp4: Take input.mp4 as input.
2. -codec copy: Copy the stream as-is (with no encode/decode step).
3. -movflags faststart: Move the metadata block to the start.
4. -f mp4 output.mp4: Format as an MP4 file and output with the name output.mp4.

Link to full ffmpeg documentation here. Installation instructions for various platforms here (a simple brew install ffmpeg is sufficient for Mac users).

Forcing playback with short HTML5 videos in Safari

I am not an OS X user so I have no experience with Safari, however I've had the chance to debug mp4 playback in Chrome. Chrome has a buffering window that it tries to fill until it begins actual playback. Safari may have a bigger window. Also since in normal cases all the tables that contain sample positions, durations etc. are at the end of the file browser may want to read them to begin playback. A smart browser can dispatch a read with a byte range header to get only the end of the file and then seek the actual video data, but again I have no idea what safari does.

What you can try is to use MP4Box on your video files to move the meta data and all tables to the beginning, that could help.

As mentioned by OP in the comments using FFmpeg with -movflags faststart (see FFmpeg MP4 options) can also be used to achieve this.

---

Related Topics