Skip to content

Instantly share code, notes, and snippets.

@ngs
Last active January 8, 2023 15:42
Show Gist options
  • Save ngs/f60ca7ca87f69cf13e96b9c131dd0c8d to your computer and use it in GitHub Desktop.
Save ngs/f60ca7ca87f69cf13e96b9c131dd0c8d to your computer and use it in GitHub Desktop.
document.getElementById('lottie').addEventListener('click', e => {
const elements = [].concat.apply([], anim.projectInterface.compositions.map(e => e.elements));
const baseElements = elements.map(elm => elm.baseElement);
let element = e.target;
let found = null;
while(element && /^(g|path)$/.test(element.nodeName)) {
let idx = baseElements.indexOf(element);
if (idx !== -1) {
found = elements[idx];
break;
}
element = element.parentNode;
}
if (found) {
console.info(found.data.nm)
}
})
<html>
<head></head>
<body>
<canvas id="LeCanvas" width="800" height="450" style="position:absolute; left:5; top:5">Can't Load Canvas</canvas>
<!-- Video -->
<video id="videoPlay" controls width="450">
<source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/7/79/Big_Buck_Bunny_small.ogv/Big_Buck_Bunny_small.ogv.160p.webm" type="video/webm">
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<p>
Time:
<span id="timeLabel"></span>
</p>
<script>
var video = document.getElementById('videoPlay');
var label = document.getElementById('timeLabel');
lastTime = -1;
function draw() {
var time = video.currentTime;
if (time !== lastTime) {
label.innerHTML = time;
lastTime = time;
}
//wait approximately 16ms and run again
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment