9

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

Izaias
  • 389
  • 3
  • 15
  • 4
    It clearly says "Partial Content", so I'd assume it first fetches some data such as the video codec to check if it is supported or if it needs to attempt another source/fallback, then fetches the entire video if it succeeds. Obviously this is just speculation. – Fabrício Matté Nov 30 '12 at 22:19
  • 2
    Yep, @FabrícioMatté is right. Chrome makes a range request and will sometimes make range requests for later chunks of the file. Subsequent requests are often loaded from the same network request, but are listed multiple times. You can verify this with a packet sniffer. – Brad Nov 30 '12 at 22:23
  • Thanks @Brad, I learned something new today. `=]` – Fabrício Matté Nov 30 '12 at 22:26

3 Answers3

8

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.

jeremy
  • 4,294
  • 3
  • 22
  • 36
3

Next ffmpeg command could help you to fix this issue:

ffmpeg -i initial-file.mp4 -c copy -movflags +faststart corrected-file.mp4

From documentation:

-movflags faststart
Run a second pass moving the index (moov atom) to the beginning of the file. This operation can take a while, and will not work in various situations such as fragmented output, thus it is not enabled by default.

Alexej Sommer
  • 2,677
  • 1
  • 14
  • 25
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.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592