HTML5 video being downloaded 'twice' for no reason

Question

I was just wondering why sometimes browsers need to call an HTML5 video twice before playing it. Is that normal or it's actually a bug? What happens under the hood?

Not sure my question is particularly easy to understand I took a screenshot from http://videojs.com homepage, with the network panel open, in order to help me explain it. Please check out http://bit.ly/St4rRc. The same happens with this famous page http://www.apple.com/html5/showcase/video/ made by Apple, which BTW doesn't use any javascript library for the video. I am testing it on Google Chrome/Windows.

Thanks,

Iz

Answer 1

Many media files have some kind of structure at the end of the file that defines locations of atoms or other metadata about the media such as duration, start byte offset, codecs, bitrate, etc. Some file types like mp4 containers can be "hinted" to move this data to the beginning of the file. Historically this info is concatenated to the end of the media file because many of the values (duration) aren't known until the video has finished encoding.

Answer 2

The first call is the preload. This allows the video to be ready to play as soon as the user clicks the play button assuming it's not autoplay, or as early as possible otherwise. After downlading the metadata and the first few seconds of video, it is aborted.

The second call actually fetches the whole file. Browsers will try to request only the part that wasn't already requested, but the server needs to be configured to allow that.