如何在html5视频上显示视图？

<video id="myVideo" width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<canvas id="myCanvas" width="640" height="360"></canvas>

var video = document.getElementById('myVideo');
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

function drawVideoFrame() {
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  requestAnimationFrame(drawVideoFrame);
}

video.addEventListener('play', function() {
  drawVideoFrame();
});