Hello all!
I’m trying to build a simple HTML template using WebCG with Lottie. For some reason, only webcg play() works and other doesn’t. Here’s my script.
var g_animation;
var g_animationLoaded = false;
function setData(data){
var t = (data.f0?data.f0.text||data.f0:'');
g_animation.renderer.elements[2].updateDocumentData({t:t},0);
}
webcg.on('data', function (data) {
return new Promise(function(resolve, reject) {
if(g_animationLoaded){
setData(data);
return resolve();
}else{
g_animation.addEventListener(
'segmentStart',
function(event){
if(event.firstFrame == 0){
setData(data);
return resolve();
}else{
return reject('no start segment');
}
g_animation.removeEventListener('data_failed');
return resolve();
},
{once:true}
)
g_animation.addEventListener(
'data_failed',
function(event){
g_animation.removeEventListener('segmentStart');
return reject('data failed');
},
{once:true}
)
}
}).catch(function(e) {console.error(e)});
})
webcg.on('play', function () {
g_animation.playSegments([3,12], true);
console.log('play');
})
webcg.on('stop', function () {
g_animation.playSegments([12,3], true);
})
webcg.on('next', function () {
})
webcg.on('remove', function () {
lottie.destroy();
})
webcg.on('update', function () {
g_animation.playSegments([13,14], true);
})
document.addEventListener("DOMContentLoaded", function(event) {
g_animation = lottie.loadAnimation({
container: animcontainer, // the dom element that will contain the animation
renderer: 'svg',
loop: false,
autoplay: false,
path: 'http://localhost/CasparCG HTML Test/test.json' // the path to the animation json
});
g_animation.addEventListener("DOMLoaded", function(event){
g_animation.playSegments([0,2], true);
g_animationLoaded = true;
});
});
I’m trying to figure out the reason but couldn’t and would appreciate if anyone could help me out with this. Much thanks.