Mobile app version of vmapp.org
Login or Join
Sue5673885

: Does HTML5 video cache the entire video before playback or does it stream? I have an HTML5 page that plays a small video (1.5MB) with autoplay and loop enabled. The problem is, sometimes it

@Sue5673885

Posted in: #Html5 #Video

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

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Sue5673885

1 Comments

Sorted by latest first Latest Oldest Best

 

@Welton855

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme