archive-gh-me/tween.js
1
0
Fork 0
mirror of https://github.com/tweenjs/tween.js.git synced 2025-12-08 20:16:12 +00:00
Code Issues Projects Releases Wiki Activity

fix: the video example wasn't working sometimes

Browse Source
This commit is contained in:
Joe Pea 2020-10-24 17:23:57 -07:00
parent 98c8064a33
commit 9cd8c4116d
1 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
examples/05_video_and_time.html
View File

@ -9,19 +9,29 @@
<div id="info">
<h1><a href="http://github.com/tweenjs/tween.js">tween.js</a></h1>
<h2>05 _ video and time</h2>
<p>Playing a video, synchronizing a tween to it</p>
<p>Playing a video, synchronizing a tween to it. <button id="playButton">Play</button></p>
</div>
<div id="target" style="position: absolute; left: 50px; top: 300px; font-size: 100px; letter-spacing: -7px;">
<div
id="target"
style="
position: absolute;
left: 0px;
top: 300px;
transform: translateX(50px);
font-size: 100px;
letter-spacing: -7px;
"
>
<video id="video" src="video/sintel.webm" width="320" height="138"></video>
</div>
<script src="../dist/tween.umd.js"></script>
<script src="js/RequestAnimationFrame.js"></script>
<script>
<script type="module">
var video
window.addEventListener('load', function () {
playButton.addEventListener('click', function () {
init()
animate()
})
@ -54,11 +64,11 @@
}
function animate() {
requestAnimationFrame(animate)
if (video.readyState === video.HAVE_ENOUGH_DATA) {
TWEEN.update(video.currentTime)
}
requestAnimationFrame(animate)
}
</script>
</body>