Javascript-форум - <canvas> видео на холсте

всем привет
пытаюсь сделать видеоплеер
надо вывести видео на холсте <canvas>
пример брал с этого источника: https://riptutorial.com/html5-canvas...on-the-canvas-

создаём <canvas>:

<html>
	<canvas width='1280' height='720' id='example'></canvas>
<script>

скрипт плеера:

example = document.getElementById("example")
ctx = example.getContext('2d')

var videoContainer; // объект для хранения видео и связанной информации

var video = document.createElement("video"); // создаем элемент видео
video.src = "video.mp4";

video.autoPlay = false; // гарантируем, что видео не будет воспроизводиться автоматически
video.loop = true; // устанавливаем зацикливание видео.
videoContainer = { // мы добавим свойства по мере необходимости
	video : video,
	ready : false,
};

video.oncanplay = readyToPlayVideo; // установить событие для функции воспроизведения, которую можно найти ниже

function readyToPlayVideo(event){ // это ссылка на видео
// видео может не соответствовать размеру холста, поэтому найдите масштаб, подходящий для него
	videoContainer.scale = Math.min(
	canvas.width / this.videoWidth,
	canvas.height / this.videoHeight);
	videoContainer.ready = true;
// видео можно воспроизвести, поэтому передайте его функции отображения
	requestAnimationFrame(undateCanvas);
}

function updateCanvas(){
	ctx.clearRect(0,0,canvas.width,canvas.height); // Хотя это не всегда необходимо
// могут появиться некорректные пиксели из-за
// предыдущих видео, поэтому лучше отобразить их четко
// безопасно
// рисовать только если загружено и готово
	if(videoContainer !== undefined && videoContainer.ready){
// найти верхний левый угол видео на холсте
		var scale = videoContainer.scale;
		var vidH = videoContainer.video.videoHeight;
		var vidW = videoContainer.video.videoWidth;
		var top = canvas.height / 2 - (vidH /2 ) * scale;
		var left = canvas.width / 2 - (vidW /2 ) * scale;
// теперь просто отрисовать видео нужного размера
		ctx.drawImage(videoContainer.video, left, top, vidW * scale, vidH * scale);
		if(videoContainer.video.paused){ // если не воспроизводится, показать экран паузы
			drawPayIcon();
		}
	}

// все готово для отображения
// запросить следующий кадр через 1/60 секунды

	requestAnimationFrame(updateCanvas);
}

</script>

файл video.mp4 есть
надо проиграть видео именно на холсте <canvas>
пока что ничего не выводится
помогите разобраться

canvas = document.getElementById("myCanvas") ctx = canvas.getContext('2d') var videoContainer; // объект для хранения видео и связанной информации var video = document.createElement("video"); // создаем элемент видео video.src = "video.mp4"; video.autoPlay = false; // гарантируем, что видео не будет воспроизводиться автоматически video.loop = true; // устанавливаем зацикливание видео. videoContainer = { // мы добавим свойства по мере необходимости video : video, ready : false, }; video.oncanplay = readyToPlayVideo; // установить событие для функции воспроизведения, которую можно найти ниже function readyToPlayVideo(event){ // это ссылка на видео videoContainer.scale = Math.min( canvas.width / this.videoWidth, canvas.height / this.videoHeight); videoContainer.ready = true; requestAnimationFrame(undateCanvas); } function updateCanvas(){ ctx.clearRect(0,0,canvas.width,canvas.height); // Хотя это не всегда необходимо if(videoContainer !== undefined && videoContainer.ready){ var scale = videoContainer.scale; var vidH = videoContainer.video.videoHeight; var vidW = videoContainer.video.videoWidth; var top = canvas.height / 2 - (vidH /2 ) * scale; var left = canvas.width / 2 - (vidW /2 ) * scale; ctx.drawImage(videoContainer.video, left, top, vidW * scale, vidH * scale); if(videoContainer.video.paused){ // если не воспроизводится, drawPayIcon(); } } requestAnimationFrame(updateCanvas); } function drawPayIcon(){ ctx.fillStyle = "black"; // darken display ctx.globalAlpha = 0.5; ctx.fillRect(0,0,canvas.width,canvas.height); ctx.fillStyle = "#DDD"; // colour of play icon ctx.globalAlpha = 0.75; // partly transparent ctx.beginPath(); // create the path for the icon var size = (canvas.height / 2) * 0.5; // the size of the icon ctx.moveTo(canvas.width/2 + size/2, canvas.height / 2); // start at the pointy end ctx.lineTo(canvas.width/2 - size/2, canvas.height / 2 + size); ctx.lineTo(canvas.width/2 - size/2, canvas.height / 2 - size); ctx.closePath(); ctx.fill(); ctx.globalAlpha = 1; // restore alpha } function playPauseClick(){ if(videoContainer !== undefined && videoContainer.ready){ if(videoContainer.video.paused){ videoContainer.video.play(); }else{ videoContainer.video.pause(); } } } canvas.addEventListener("click",playPauseClick);