From 9cd8c4116ddc0fdf8a98243dc2de37334c9d8fad Mon Sep 17 00:00:00 2001
From: Joe Pea <joe@trusktr.io>
Date: Sat, 24 Oct 2020 17:23:57 -0700
Subject: [PATCH] fix: the video example wasn't working sometimes

---
 examples/05_video_and_time.html | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/examples/05_video_and_time.html b/examples/05_video_and_time.html
index 707f647..e6ff63b 100644
--- a/examples/05_video_and_time.html
+++ b/examples/05_video_and_time.html
@@ -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>