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 !!
thanks
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 
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? 
EDIT: here is a recording https://youtu.be/jW1IURHNrWI (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.
Hi, I’m trying to control the webm by using requestVideoFrameCallback but appears the message requestVideoFrameCallback is not a function…
I’m using 2.3 lts, what version o cef it uses? On the Chrome site appears enable by default in version 83. So maybe thereis an option to enable it on previous versions.
It won’t work since CCG 2.3 is compiled with CEF 3.3578.1870 which is Chromium 71.0.3578.98.
Have you done any tests with requestVideoFrameCallback and seen improvements?
We are using video inside html and control the animations. At this time, we use VideoFrame.js to control the animations.
This lib is very old and we are facing some freezes mainly on the beginning of the animations, we don’t know if it’s something related to this lib, because it uses timers but is strange.
On chrome all appears to be ok, so yesterday I was playing with VideoFrame.js and replaced the timers with requestVideoFrameCallback and worked like a Sharm in chrome… The problem was when I tried on CasparCG… requestVideoFrameCallback is not a function.
There are some functionalities missing from casparcg at this moment in my opinion, we tried clip-path some time ago and have terrible performance…
With the end of flash, html is the only resort at this time, but using some old stuff…
This is a stupid affirmation but at this moment some of us need to receive info for the templates and create a way of connecting directly to html templates, so casparcg only do the conversion from html to sdi/ndi/etc… As an example OBS do the same stuff, we can send fill e key with the last html technology, have inputs and outputs in a lot of different ways… it have a multimonitor with touch to change scenes… we can control it by websockets…