Can I preload multiple video resources to load in the same HTML5 <video> element?

Viewed 5996

I'm working out details on a web application which involves the sequential loading of a long series of (very short) video clips, one after the other, with occasional input from the user establishing new directions for which video clips to load.

I would like to be able to have the browser preload the video clips five at a time. However, the way that we currently have the site working is by means of a single video element which is having its src attribute continually updated through JavaScript.

Is there a straightforward way I can get the browser to preload multiple video clips even though I am ultimately loading them all (one at a time) into the same video element?

2 Answers

I was curious if you happened to finish the project you were working on? I am experimenting with an html5 video player with a playlist and was wondering if you ran into any big problems. Were there performance issues with loading/playing multiple video files? Were you able to run this on an iPad? Did you have a fallback for IE?

My approach was going to be: have a single <canvas> element with multiple hidden <video> elements and use the canvas drawImage() function to display and crossfade between videos.

Related