HTML templates professional TV studio

I have a doubt regarding html templates, as we are moving to html templates from flash, i would like to ask if the quality for a Broadcast transmission is as good as flash templates. I have tested in the office and I can mix with fill and key, but never tested in a professional studio.
Can somebody help me with this to be sure that Im in the correct way moving from flash to html?

Many thanks

The switch from Flash to HTML is mostly a programming and design workflow change for the template developers. Although the underlying technology is different for both, they share similar capabilities and the switch should be transparent to the server. They both have alpha (fill+key) support, high quality image scaling and acceptable text and vector graphics anti-aliasing.
What’s your concern regarding quality?

Thank you so much for your quick response. My concern is only that I never worked before on HD broadcast sports events with html templates, always with templates based on tga or png files, and I want to be sure that my feed based in html once I send fill & key to the mixer the result will have the same broadcast quality.

The most efficient way to use sequences is converting them to a webm (VP8) video clip with alpha and control the time along with text animations. The quality is great actually, even better than Flash templates on higher resolutions.

You can see a 1:1 template conversion to HTML here:

The HTML one is vector based and can stretch to every resolution (it was previously based on PNGs).

1 Like

Thank you for your help

I just recently completed a full channel branding package using HTML templates for a network of four national broadcast channels.

HTML templates can do the job 9 times out of 10. The biggest difference IMHO is the lack of Broadcast Designer friendly animation / authoring tools what traditional graphics systems provide (Adobe AE, Vizrt Artist, 3Designer or the like) and thus requires more code oriented approach. But browser based rendering can also bring new and interesting options to the table which may be even easier to implement than with dedicated, closed systems.

Expect some hurdles and learning alternative tooling along the way, but in the end you will most likely be pleased with the end results.

1 Like

Can you recommend me any tool that can be helpful to develope templates for caspar?

Thank you so much

There is a discussion about this in this tread.

Also if you can split, like doing all dynamic things like words in HTML and all visuals as rendered videos there wont be in the end a difference in the visual appearance. Out of HTML you can try things like three.js if you want to have live graphics.

Only downfall I have experienced is you can’t switch between templates instantaneously, you will have a couple of frames blank between playing another template. This will be only an issue if you need to have seamless transition, but you can overcome this by placing everything in one template.

Normally you do not want to have seamless transitions from one template to the other, as that should be solved with templates that have multiple steps (using the NEXT command). Otherwise you can use multiple layers and send a play command to one and a stop to another.

I have never figured out how NEXT command is working with templates.

The template has to support it. The classic way was in Flash timeline, where you added a stop(); somewhere in an action frame, so that the play-head stopped there. Next played it from there. In HTML you need to add a function next() {...} that is called by the NEXT command. Inside this function you can advance your animation a step forward. Templates can support multiple NEXT’s. For instance to reveal stuff step by step.