сделал всё по примеру:
<html>
<canvas width='854' height='480' id='myCanvas'></canvas>
<script>
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);
</script>
если кликнуть по экрану проигрывается только звук
видео пока нет
браузер Google Chrome
в Edge так же