<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<video id="video" controls="" width="270" style="margin-top:15px;">
<source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
<!-- <source src="/example/html5/mov_bbb.ogg" type="video/ogg">
<source src="/example/html5/mov_bbb.webm" type="video/webm"> -->
</video>
<canvas id="myCanvas" width="270" height="135" style="border:1px solid #d3d3d3; margin-top:15px;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var v = document.getElementById("video");
var c = document.getElementById("myCanvas");
ctx = c.getContext('2d');
v.addEventListener('play', function () { var i = window.setInterval(function () { ctx.drawImage(v, 0, 0, 270, 135) }, 20); }, false);
v.addEventListener('pause', function () { window.clearInterval(i); }, false);
v.addEventListener('ended', function () { clearInterval(i); }, false);
</script>
</body>
</html>
复制代码Reproduced in: https: //juejin.im/post/5d00b690f265da1bcd37d06c