smooth video transition HTML5

Question

looking to use HTML5 video tag and JS. the aim is to make a video swap from one video to the next very smoothly just like a cut in the movie. I have had a look at the API http://www.w3.org/TR/html5/video.html#tracklist

if anyone has an idea that would be great. My current plan is to familiarise myself with the API and figuare out how to que up the video for a smooth change. currently sellect a src and then play() causes an ugly white space pause before the next video comes in.

many thanks for looking

Answer 1

Use firefox and make hardware acceleration on. if you have good hardware it should work. and you can also try this method, imagine if you have 5 videos to play and when you are in the 2nd video you can keep them by the video currently you are playing ,keep them on left and right sides and make them pause. when you move on to the 3nd video you can just get that relevant video and make it play. this method should eliminate any unnecessary lags.

Answer 2

HTML5 videos use a very low amount of CPU, so there's no reason you can't have multiple tags on the page at the same time. I would suggest having them all on the page and then using CSS and JavaScript to transition between them.

Answer 3

You won't be able to make this work on iOS since it doesn't allow playback to initialize without user interaction. The user will have to click to start each video.

Annoying, but that's how Apple rolls.