SOURCE

var videoElem = document.getElementById('video');
var canvasElem = document.getElementById('canvas');
var playBtn = document.getElementById('play');
var pauseBtn = document.getElementById('pause');
var reloadBtn = document.getElementById('reload');
var imgElem = document.getElementById('img');
var ctx = canvasElem.getContext('2d');
var timeId = null;
var draw = () => {
    if (videoElem.ended || videoElem.paused) return;
    ctx.clearRect(0, 0, canvasElem.width, canvasElem.height);
    ctx.drawImage(video, 0, 0, canvasElem.width, canvasElem.height);
    timeId = setTimeout(draw, 0);
};

playBtn.addEventListener("click", () => {
    if (!videoElem.paused) return;
    videoElem.play();
    draw();
});

pauseBtn.addEventListener("click", () => {
    if (videoElem.paused) return;
    videoElem.pause();
    clearTimeout(timeId);
});

reloadBtn.addEventListener('click', () => {
    videoElem.pause();
    videoElem.src = 'https://www.runoob.com/try/demo_source/movie.mp4';
    videoElem.load();
});


videoElem.addEventListener('canplay', () => {
    console.log('canplay');
    // ctx.clearRect(0, 0, canvasElem.width, canvasElem.height);
    // setTimeout(() => {
        // videoElem.currentTime = 1;
        // ctx.drawImage(video, 0, 0, canvasElem.width, canvasElem.height);
        // var src = canvasElem.toDataURL();
        // imgElem.src = src;
        // console.log('src', src);
    // }, 1000);
});

<video id="video">
	<source src="https://www.runoob.com/try/demo_source/movie.mp4">
	</source>
</video>
<canvas id="canvas" width="460" height="270"></canvas>
<div>
	<button id="play">play</button>
    <button id="pause">pause</button>
    <button id="reload">reload</button>
</div>
<img id="img" src="" />