The answer is
You need to update currentTime video element and then draw the frame in canvas. Don't init play() event on the video.
You can also use for ex. this plugin https://github.com/tstabla/stVideo
Using canvas to display Videos
Displaying a video is much the same as displaying an image. The minor differences are to do with onload events and the fact that you need to render the video every frame or you will only see one frame not the animated frames.
The demo below has some minor differences to the example. A mute function (under the video click mute/sound on to toggle sound) and some error checking to catch IE9+ and Edge if they don't have the correct drivers.
Keeping answers current.The previous answers by user372551 is out of date (December 2010) and has a flaw in the rendering technique used. It uses the setTimeout and a rate of 33.333..ms which setTimeout will round down to 33ms this will cause the frames to be dropped every two seconds and may drop many more if the video frame rate is any higher than 30. Using setTimeout will also introduce video shearing created because setTimeout can not be synced to the display hardware.
There is currently no reliable method that can determine a videos frame rate unless you know the video frame rate in advance you should display it at the maximum display refresh rate possible on browsers. 60fps
The given top answer was for the time (6 years ago) the best solution as requestAnimationFrame was not widely supported (if at all) but requestAnimationFrame is now standard across the Major browsers and should be used instead of setTimeout to reduce or remove dropped frames, and to prevent shearing.
The example demo.
Loads a video and set it to loop. The video will not play until the you click on it. Clicking again will pause. There is a mute/sound on button under the video. The video is muted by default.
Note users of IE9+ and Edge. You may not be able to play the video format WebM as it needs additional drivers to play the videos. They can be found at tools.google.com Download IE9+ WebM support
// This code is from the example document on stackoverflow documentation. See HTML for link to the example._x000D_
// This code is almost identical to the example. Mute has been added and a media source. Also added some error handling in case the media load fails and a link to fix IE9+ and Edge support._x000D_
// Code by Blindman67._x000D_
_x000D_
_x000D_
// Original source has returns 404_x000D_
// var mediaSource = "http://video.webmfiles.org/big-buck-bunny_trailer.webm";_x000D_
// New source from wiki commons. Attribution in the leading credits._x000D_
var mediaSource = "http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv"_x000D_
_x000D_
var muted = true;_x000D_
var canvas = document.getElementById("myCanvas"); // get the canvas from the page_x000D_
var ctx = canvas.getContext("2d");_x000D_
var videoContainer; // object to hold video and associated info_x000D_
var video = document.createElement("video"); // create a video element_x000D_
video.src = mediaSource;_x000D_
// the video will now begin to load._x000D_
// As some additional info is needed we will place the video in a_x000D_
// containing object for convenience_x000D_
video.autoPlay = false; // ensure that the video does not auto play_x000D_
video.loop = true; // set the video to loop._x000D_
video.muted = muted;_x000D_
videoContainer = { // we will add properties as needed_x000D_
video : video,_x000D_
ready : false, _x000D_
};_x000D_
// To handle errors. This is not part of the example at the moment. Just fixing for Edge that did not like the ogv format video_x000D_
video.onerror = function(e){_x000D_
document.body.removeChild(canvas);_x000D_
document.body.innerHTML += "<h2>There is a problem loading the video</h2><br>";_x000D_
document.body.innerHTML += "Users of IE9+ , the browser does not support WebM videos used by this demo";_x000D_
document.body.innerHTML += "<br><a href='https://tools.google.com/dlpage/webmmf/'> Download IE9+ WebM support</a> from tools.google.com<br> this includes Edge and Windows 10";_x000D_
_x000D_
}_x000D_
video.oncanplay = readyToPlayVideo; // set the event to the play function that _x000D_
// can be found below_x000D_
function readyToPlayVideo(event){ // this is a referance to the video_x000D_
// the video may not match the canvas size so find a scale to fit_x000D_
videoContainer.scale = Math.min(_x000D_
canvas.width / this.videoWidth, _x000D_
canvas.height / this.videoHeight); _x000D_
videoContainer.ready = true;_x000D_
// the video can be played so hand it off to the display function_x000D_
requestAnimationFrame(updateCanvas);_x000D_
// add instruction_x000D_
document.getElementById("playPause").textContent = "Click video to play/pause.";_x000D_
document.querySelector(".mute").textContent = "Mute";_x000D_
}_x000D_
_x000D_
function updateCanvas(){_x000D_
ctx.clearRect(0,0,canvas.width,canvas.height); _x000D_
// only draw if loaded and ready_x000D_
if(videoContainer !== undefined && videoContainer.ready){ _x000D_
// find the top left of the video on the canvas_x000D_
video.muted = muted;_x000D_
var scale = videoContainer.scale;_x000D_
var vidH = videoContainer.video.videoHeight;_x000D_
var vidW = videoContainer.video.videoWidth;_x000D_
var top = canvas.height / 2 - (vidH /2 ) * scale;_x000D_
var left = canvas.width / 2 - (vidW /2 ) * scale;_x000D_
// now just draw the video the correct size_x000D_
ctx.drawImage(videoContainer.video, left, top, vidW * scale, vidH * scale);_x000D_
if(videoContainer.video.paused){ // if not playing show the paused screen _x000D_
drawPayIcon();_x000D_
}_x000D_
}_x000D_
// all done for display _x000D_
// request the next frame in 1/60th of a second_x000D_
requestAnimationFrame(updateCanvas);_x000D_
}_x000D_
_x000D_
function drawPayIcon(){_x000D_
ctx.fillStyle = "black"; // darken display_x000D_
ctx.globalAlpha = 0.5;_x000D_
ctx.fillRect(0,0,canvas.width,canvas.height);_x000D_
ctx.fillStyle = "#DDD"; // colour of play icon_x000D_
ctx.globalAlpha = 0.75; // partly transparent_x000D_
ctx.beginPath(); // create the path for the icon_x000D_
var size = (canvas.height / 2) * 0.5; // the size of the icon_x000D_
ctx.moveTo(canvas.width/2 + size/2, canvas.height / 2); // start at the pointy end_x000D_
ctx.lineTo(canvas.width/2 - size/2, canvas.height / 2 + size);_x000D_
ctx.lineTo(canvas.width/2 - size/2, canvas.height / 2 - size);_x000D_
ctx.closePath();_x000D_
ctx.fill();_x000D_
ctx.globalAlpha = 1; // restore alpha_x000D_
} _x000D_
_x000D_
function playPauseClick(){_x000D_
if(videoContainer !== undefined && videoContainer.ready){_x000D_
if(videoContainer.video.paused){ _x000D_
videoContainer.video.play();_x000D_
}else{_x000D_
videoContainer.video.pause();_x000D_
}_x000D_
}_x000D_
}_x000D_
function videoMute(){_x000D_
muted = !muted;_x000D_
if(muted){_x000D_
document.querySelector(".mute").textContent = "Mute";_x000D_
}else{_x000D_
document.querySelector(".mute").textContent= "Sound on";_x000D_
}_x000D_
_x000D_
_x000D_
}_x000D_
// register the event_x000D_
canvas.addEventListener("click",playPauseClick);_x000D_
document.querySelector(".mute").addEventListener("click",videoMute)body {_x000D_
font :14px arial;_x000D_
text-align : center;_x000D_
background : #36A;_x000D_
}_x000D_
h2 {_x000D_
color : white;_x000D_
}_x000D_
canvas {_x000D_
border : 10px white solid;_x000D_
cursor : pointer;_x000D_
}_x000D_
a {_x000D_
color : #F93;_x000D_
}_x000D_
.mute {_x000D_
cursor : pointer;_x000D_
display: initial; _x000D_
}<h2>Basic Video & canvas example</h2>_x000D_
<p>Code example from Stackoverflow Documentation HTML5-Canvas<br>_x000D_
<a href="https://stackoverflow.com/documentation/html5-canvas/3689/media-types-and-the-canvas/14974/basic-loading-and-playing-a-video-on-the-canvas#t=201607271638099201116">Basic loading and playing a video on the canvas</a></p>_x000D_
<canvas id="myCanvas" width = "532" height ="300" ></canvas><br>_x000D_
<h3><div id = "playPause">Loading content.</div></h3>_x000D_
<div class="mute"></div><br>_x000D_
<div style="font-size:small">Attribution in the leading credits.</div><br>Canvas extras
Using the canvas to render video gives you additional options in regard to displaying and mixing in fx. The following image shows some of the FX you can get using the canvas. Using the 2D API gives a huge range of creative possibilities.
Image relating to answer Fade canvas video from greyscale to color
See video title in above demo for attribution of content in above inmage.
Here's a solution that uses more modern syntax and is less verbose than the ones already provided:
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const video = document.querySelector("video");
video.addEventListener('play', () => {
function step() {
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
requestAnimationFrame(step)
}
requestAnimationFrame(step);
})
Some useful links:
Source: Stackoverflow.com