It is currently 24 Jun 2017, 09:50

HTML lower third template for learning

Videos, graphics, Flash templates – how to create and play them using CasparCG

Moderators: Macey, Jonas Hummelstrand, didikunz

HTML lower third template for learning

Postby Nicke » 02 Mar 2017, 13:56


I needed a HTML template for demo purposes and I browsed the forum for clues on how to make one. I found alot of outdated information but I hope that this template is up-to-date for the current 2.1 version of CasparCG.

I've used parts of code/ideas found here on the forum. The idea for the lower third was copied from a videohive After Effects template because I needed something to follow when fighting the css to behave as I wanted :) The code has comments so you should be able to follow what is happening.

When playing a HTML template in CasparCG the update function is called before play so just take that into consideration when making templates. I had problems with using css @font-face because there is a delay between using the font and when I can measure the width of the text. I now use a 40ms delay so if you have a better solution I would like to hear about it.

Youtube video of template in use

Template can be found here

UPDATE 02.03.2017 15:48 GMT+2:
-Template is using Greensock JS for animation
-The font is from Google Fonts
-The template can be called without any parameters (displays example content).
-The template can be loaded into Chrome for debugging (uncomment debug section in code) + you must use update before play. When using stop the webpage must be reloaded to use again.
-The template is controlled as a flash template no CALL calls are needed (unless you need to call your own custom function CALL 1-10 "CustomFunction('hello!')" ).
Posts: 85
Joined: 30 Oct 2011, 04:15
Location: Helsinki, Finland

Re: HTML lower third template for learning

Postby didikunz » 02 Mar 2017, 14:49

Cool, thanks!
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland
Problems? Guide to posting Bug reports & Feature requests
User avatar
Posts: 3477
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: HTML lower third template for learning

Postby AVID_Eng » 02 Mar 2017, 19:19

Thank you for posting it.
WebCG is a framework capable of generating dynamic HTML templates for CasparCG.
User avatar
Posts: 27
Joined: 02 Apr 2015, 10:56

Return to Content

Who is online

Users browsing this forum: No registered users and 10 guests