css3-animation
/
drawvideo.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" width="600" height="600"></canvas>
		<video width="600" src="img/video_WebTitle_batch.mp4" controls="controls" loop="loop" autoplay="autoplay" preload="auto">

		</video>
	</body>
	<script type="text/javascript">
		let canvas = document.getElementById('canvas')
		let ctx = canvas.getContext('2d')
		// console.log(ctx)
		let video = document.querySelector('video')
		let intime;
		// console.log([video])
		video.onplay=()=>{
			let x = -100
			ctx.font='32px 微软雅黑'
			ctx.strokeStyle='#fff'
		intime=setInterval(()=>{
				x+=0.4
				ctx.clearRect(0,0,600,600)
				ctx.fillRect(0,0,600,600)
				ctx.strokeText('vuedata',x,100)
				if(x>700){x=0}
				ctx.fillStyle='#000'
				ctx.drawImage(video,0,131.25,600,337.5)

			},32)
		}
		video.onpause = ()=>{
			clearInterval(intime)
		}
	</script>
</html>