Форум

provigator · #1 (**permalink**) 24.01.2026, 21:47

всем привет
пытаюсь сделать видеоплеер
надо вывести видео на холсте <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>
пока что ничего не выводится
помогите разобраться

voraa · #2 (**permalink**) 30.01.2026, 07:24

В приведенном коде не видно, как вы видео запускаете.
Элемент <video> создается, но не подключается к dom. Кнопок воспроизведения не видно. Функция play нигде не вызывается.

provigator · #3 (**permalink**) Сегодня, 06:46

сделал всё по примеру:

<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 так же

Форум

Справочник

Discord чат

Курсы javascript