HTML template play() not working but stop() is


I’m trying to build a super simple HTML template. For some reason when I add the CG, nothing shows up but when I stop, it plays my stop video. Everything works just fine when I use play() and stop() manually in a chrome window to test it. Any ideas?

I’m using JSON.stringify to add the data to this command:

cg 1 add 20 "watercooler/lowerthird/index" {"id":1,"show":"watercooler","cgType":"lowerthird","line1":"test","line2":"test","visible":true} 1

And if I run the update function directly on the template like this:


It plays back just fine. I tried it with quotes around the JSON string as well.

Here’s my JS code for the template:

function update(templatedata){
	var cgInfo = templatedata;

function play (){
		$('.background-container').append('<video class="cg-start" width="100%" height="100%" src="vid/start.webm" type="video/webm" autoplay>');
		$('.line1').delay(1600).animate({"opacity": 1}, 250);
		$('.line2').delay(1800).animate({"opacity": 1}, 250);
	}, 50);

function stop (){
	$('.background-container').append('<video class="cg-stop" width="100%" height="100%" src="vid/stop.webm" type="video/webm" autoplay>');
	$('.line1').delay(100).animate({"opacity": 0}, 250);
	$('.line2').delay(100).animate({"opacity": 0}, 250);

And the template hosted with the functions working.


for building the command you have to change the double quotes after JSON .stringify with an replace command:

JSON.stringify(…).replace(/"/g, ‘\"’);

The correct syntax for template autoplay is:

CG 1-20 ADD 0 "watercooler/lowerthird/index" 1 "{ESCAPED-JSON}"

1-20 is channel-layer as usual. The 0 is useless for HTML templates but it’s there still for backwards compatibility. The 1 after the template is the autoplay parameter. The JSON has to be escaped as @knoepsche noted.

Alright, thanks! I rewrote that JS so it looks like this now:

var prepJSON = JSON.stringify(cgList[selectedCG]).replace(/"/g, '\"');
console.log('escaped JSON: ' + prepJSON);
var casparcmd = 'CG 1-20 ADD 0 "' + cgList[selectedCG].show + '/' + cgList[selectedCG].cgType + '/index" 1 "' + prepJSON + '"\r\n';
console.log('Command: ' + casparcmd);

But the replace seems not to be working. The console log when I run it looks like this:

escaped JSON: {"id":0,"show":"watercooler","cgType":"lowerthird","line1":"test","line2":"test","visible":true}
Command: CG 1-20 ADD 0 "watercooler/lowerthird/index" 1 "{"id":0,"show":"watercooler","cgType":"lowerthird","line1":"test","line2":"test","visible":true}"

With no escaped characters. Hmm.

The Caspar server logs look like this:

[2020-07-09 20:44:37.125] [info]    Received message from CG 1-20 ADD 0 "watercooler/lowerthird/index" 1 "{"id":0,"show":"watercooler","cgType":"lowerthird","line1":"test","line2":"test","visible":true}"\r\n
[2020-07-09 20:44:37.126] [info]    Sent message to CG OK\r\n
[2020-07-09 20:44:37.134] [info]    html[file://C:\Users\cmdch\Documents\TV_CASPAR_CGS/watercooler/lowerthird/index.html] Destroyed.
[2020-07-09 20:44:37.298] [info]    html[file://C:\Users\cmdch\Documents\TV_CASPAR_CGS/watercooler/lowerthird/index.html] 1920 1080 59.940060 Log: {

So it’s definitely not getting an escaped JSON in the command.

Now it’s the other way around. Caspar should receive the backslash string and quote within the quoted data you should replace as:

var prepJSON = JSON.stringify(cgList[selectedCG]).replace(/"/g, '\\"');

It unescapes the string before it passes it through the update function.

1 Like

Ah, of course. Got it to send to the server!
Had to add var cgInfo = JSON.parse(templatedata);to my code

function update(templatedata){
  var cgInfo = JSON.parse(templatedata);

on the template side to get the data if anyone here from the future is having the same problem.

Thanks for all the help!