HTMLtemplate webm intro => loop => outro


Since there is no debating that the download time for one video is better than three and @hreinnbeck is right when he says loading one video makes playing out a loop easier (You may need a setTimeout or a has ended event listener to play out the next video).
I just want to offer these last few points. Separating the videos lets you load different intro and outros dynamically from one template. For example, I use one template called full-video.html and that loads an intro wipe, video to playout full, and then an outro wipe all specified by the client. As I mentioned above you could then add a default fallback video if the new intro or outro fails. Then one step further, if the default video fails, the template can remove itself from the server and report the error to the client.


The performance issue is more with having multiple video elements rather than loading (this seems to matter even more when running CEF with gpu acceleration enabled).

Every template is different, I often have elements that animate in and out of the loops so you can’t easily have different videos and turn them on/off, fade in/out etc.

But the most important part of my example is demonstrating the seek and seekExact methods (which also work well with GSAP and similar ways of animating) and having a single event loop (newFrame/rAF) driving everything.


i’m testing it on chrome but video isn’t playing…
after digging i found that video is playing but browser isn’t updating current frame


Chrome version >78? It seems to have some issues.


ohh right !!

do you have any idea for adding mix effect in loop and outro etc as rrebuffo suggest for achieving this he is using two video tags but you are suggesting for best performance use only one video tag

second i wanna ask on page refresh video tag is showing black screen then loading first frame of video
so how can we avoid this black flashing on refresh


Not sure what you mean with mix effects, my example is purposefully very different in the intro/loop/outro to show that it is frame accurate. A real video would be with animation into the loop and out of it.

You’ll want “background:transparent;” on the video tag.


yeah i get it !

sorry my question is off the topic
what i wanna say is while looping video when we play outro than instead of waiting for loop end and then play outro we quickly have to play outro without any wait so video will show jump from some looping frame to outro start
so do you have any idea for avoiding this jump and that’s why i was asking for something like mix effect etc


Just use two video elements and disable enable-gpu in your config if you have performance issues. I had to do that and discussed it here.


I just placed an empty video tag above the other and faded in the outro in that new tag


The only way around that with a single video is either design it so that changes aren’t very obvious, or the looping elements can be quickly masked. The loop could also be short enough to not make it matter if it’s played to the end.

Best way is always to do the animations in SVG for example. Though that still depends on design decisions.


thank you guys for suggestions :slight_smile:


True, but decisions not always one gets to make


This is not frame accurate. When I play loop only or loop alternate I sometimes see the first frame of outro. And BTW why is this video eating 70% of my CPU? :astonished:

EDIT: here is a recording (a bit jerky because of the screen capture)


If you are noticing that there are issues with the single video approved, then you may want to try downloading each section as a separate video and playing them out programmatically as needed.