examples/05_video_and_time.html

<!doctype html>
<html lang="en">
	<head>
		<title>Tween.js / video and time</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<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. <button id="playButton">Play</button></p>
		</div>

		<div
			id="target"
			style="
				position: absolute;
				left: 0px;
				top: 350px;
				transform: translateX(50px);
				font-size: 100px;
				letter-spacing: -7px;
			"
		>
			<video id="video" src="video/sintel.webm" width="320" height="138"></video>
		</div>

		<script type="module">
			import * as TWEEN from '../dist/tween.esm.js'

			let video
			let tween = null

			playButton.addEventListener('click', function () {
				init()
				animate()
			})

			function init() {
				const output = document.createElement('div')

				const target = document.getElementById('target')
				target.appendChild(output)

				video = document.getElementById('video')
				video.addEventListener(
					'play',
					function () {
						tween = new TWEEN.Tween({x: 50, y: 0})
							.to({x: 400}, this.duration)
							.easing(TWEEN.Easing.Linear.None)
							.onUpdate(function (object) {
								const roundX = Math.round(object.x)
								const transform = 'translateX(' + roundX + 'px)'
								output.innerHTML = 'x == ' + roundX
								target.style.transform = transform
							})
							.start(video.currentTime)
					},
					false,
				)

				video.play()
			}

			function animate() {
				if (tween && video.readyState === video.HAVE_ENOUGH_DATA) {
					tween.update(video.currentTime)
				}

				requestAnimationFrame(animate)
			}
		</script>
	</body>
</html>