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