HTML5 installation instructions

I just want to ask if there is an instruction or tutorial on how to make HTML 5 run on CasparCG. I already tried googling, all I see are examples of html projects. I’m trying to migrate from flash to HTML 5.

I tried downloading the loopic sample html. When I tried running it, it shows the background photo, but not the lower third text and graphics.

I receive this error when I try out the template:

[2021-09-13 09:05:15.961] [info] Sent message to CG OK\r\n
[2021-09-13 09:05:19.754] [info] Received message from CG 1-20 ADD 1 “TEST/LOWER-THIRD” 1 “”\r\n
[2021-09-13 09:05:19.755] [info] Sent message to CG OK\r\n
[2021-09-13 09:05:19.760] [info] html[file://X:\casparCG Server 2.3\template/TEST/NEW COMPOSITION.html] Destroyed.
[2021-09-13 09:05:19.879] [error] html[file://X:\casparCG Server 2.3\template/TEST/LOWER-THIRD.html] 1280 720 50.000000 Log: Uncaught TypeError: Cannot read property ‘@attributes’ of undefined
[2021-09-13 09:08:48.950] [info] Received message from CG 1-20 REMOVE 1\r\n
[2021-09-13 09:08:48.950] [info] Sent message to CG OK\r\n

Thanks and best regards


as I can see from the log, template data is missing and that is causing the template to partly play. So if you just add template data to the template, like in the example below, it should play just fine.

CG 1-20 ADD 1 "TEST/LOWER-THIRD" 1 "<templateData><componentData id=\"_title\"><data id=\"text\" value=\"TITLE_HERE\" /></componentData><componentData id=\"_subtitle\"><data id=\"text\" value=\"SUBTITLE_HERE\" /></componentData></templateData>"\r\n

Also, Loopic is tested with the latest CasparCG version so just make sure you are using it.

And I highly recommend you test the templates with some client applications. It is very likely that something will break if you are typing manually long XMLs in the console

Same result, just the background screen without the lowerthird. I downloaded the basic lowerthird demo of Loopic (I replaced the dynamic ID as f0 and f1 prior to downloading).

When I run the command, it just shows the “waiting room with monitors” background photo, but it does not show the lower third with text.

The Server version I am using is CasparCG Server 2.3.1 e767c1dda Release x64.

[2021-09-14 23:21:50.639] [info]    Received message from CG 1-20 ADD 1 "TEST/LOWER-THIRD" 1 "<templateData><componentData id=\"f0\"><data id=\"text\" value=\"top text\"/></componentData><componentData id=\"f1\"><data id=\"text\" value=\"bottom text\"/></componentData></templateData>\r\n
[2021-09-14 23:21:50.640] [info]    Sent message to CG OK\r\n
[2021-09-14 23:21:50.649] [info]    html[file://X:\casparCG Server 2.3\template/TEST/LOWER-THIRD.html] Destroyed.

That same command works for flash templates.

Got it to work. GFX is not showing because I caspar server was configured at 720p and the template was at 1080p. Noob mistake for me

Thanks for the assist imare.

1 Like