I’ve seen a lot of posts regarding stopping a background video from looping, which I have be able to do just fine. My question is about being able to transition to a second, looped video after the first/main video is finished. This would give the effect of an “intro” followed by a looping “static” scene at the end.
So (for sheet-music readers) it would be like: |—Video 1 (play once)—||:—Video 2 (loop)—:||
If the last frame of video 1 matched up with video 2, then it would give a seamless effect of a lasting, animated scene.
If you stacked the videos, you could then look at a timed interaction to hide the video after so many seconds, then revealing the looping video behind.
Getting the timing right might be a bit hard though.
That could work. Do you happen know if there is an event emitted from the video element once the video finishes? If so, that could be used to control the switch
Maybe this:
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}