Does HTML5 video cache the entire video before playback or does it stream?

Question

I have an HTML5 page that plays a small video (1.5MB) with autoplay and loop enabled.

The problem is, sometimes it takes up to 10 seconds after loading the page before the video starts playing. I've seen this happen in both Firefox and Chrome.

The only explanation I can think of is that the browser needs to download the entire video before playback begins.

Is this normal, or have I perhaps encoded the videos in a streaming-unfriendly way?

Edit: The video is 10 seconds of 25 fps video encoded by ffmpeg, here are the parameters I used to build them:

//OGV (Theora/Vorbis - used for firefox)
ffmpeg -i input -b 2000k -vcodec libtheora -acodec libvorbis -ab 160000 -g 30  video.ogv

//MP4 (Used by IE, Safari, Chrome)
ffmpeg -i input -b 1500k -vcodec libx264 -vpre slow -vpre baseline -g 30 video.mp4

Answer 1

It is normal to buffer a few seconds of videos before starting playback. That prevents having a lot of hiccups and interruptions during playback. The problem is that your video is only a few seconds, so it would most likely be cached in its entirely.

That being said, you are correct in saying that some formats are not easy to stream. The most common ones used online are though. We cannot know your particular case because you have not given any information about video.

Lastly, this depends both on the video codec used and the decoder because even if the format is capable, it does not mean the decoder can. Firefox and Chrome use different codecs and even different ones depending on the platform. So, once again, more information is needed.