Как создать видео и холст, а затем нарисовать его на холсте? - PullRequest
Новая
       0

Как создать видео и холст, а затем нарисовать его на холсте?

0 голосов
/ 02 апреля 2020

У меня проблемы с получением этого элемента видео для добавления на холст, который он воспроизводит, он создает внутри холста, но не рисует на холсте. Может кто-нибудь объяснить мне, где я ошибся, пожалуйста? 

<!DOCTYPE html>
<html>
<style>
canvas {
  border: 1px solid black;
}
</style>
<body>

<div id="popUpCanvas">

</div>

<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  var videoCanvas = document.createElement("Canvas");
  var video = document.createElement("Video");
  var source = document.createElement("Source");
  var context = videoCanvas.getContext('2d');

    videoCanvas.setAttribute('class', 'CanvasVideo');
    videoCanvas.setAttribute('id', 'CanvasVideo');

    video.setAttribute('class', 'videoCanvas');
    video.setAttribute('id', 'videoCanvas');
    video.setAttribute('controls', '');
    video.setAttribute('autoplay', '');

    source.setAttribute('class', 'videoSource');
    source.setAttribute('id', 'videoSource');
    source.setAttribute('src', 'http://www.imgur.com/mClEpxu.mp4');
    source.setAttribute('type', 'video/mp4');

  video.appendChild(source);
  videoCanvas.appendChild(video);

    context.drawImage(video,0,0,100,100);

  document.getElementById("popUpCanvas").appendChild(videoCanvas);
}
</script>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 02 апреля 2020

Вам не нужен холст для показа видео на HTML5, это пример рабочего кода:

Он будет иметь рамку холста вокруг видео, но нет необходимости используйте элемент canvas. 

<!DOCTYPE html>
<html>
<style>
    .CanvasVideo {
        border: 1px solid black;
        width: 300px;
        height: 300px;
    }
    video {
        height: inherit;
        width: inherit;
    }
</style>
<body>

<div id="popUpCanvas">

</div>

<button onclick="myFunction()">Try it</button>
<script>
    function myFunction() {
        var videoCanvas = document.createElement("Div");
        var video = document.createElement("Video");
        var source = document.createElement("Source");

        videoCanvas.setAttribute('class', 'CanvasVideo');
        videoCanvas.setAttribute('id', 'CanvasVideo');

        video.setAttribute('class', 'videoCanvas');
        video.setAttribute('id', 'videoCanvas');
        video.setAttribute('controls', '');
        video.setAttribute('autoplay', '');

        source.setAttribute('class', 'videoSource');
        source.setAttribute('id', 'videoSource');
        source.setAttribute('src', 'http://www.imgur.com/mClEpxu.mp4');
        source.setAttribute('type', 'video/mp4');

        video.appendChild(source);
        videoCanvas.appendChild(video);
        document.getElementById("popUpCanvas").appendChild(videoCanvas);
    }
</script>

</body>
</html>
0 голосов
/ 02 апреля 2020

Вам необходимо обновлять холст каждый кадр, чтобы содержимое видео отображалось в реальном времени. Это может быть достигнуто с помощью анимационного кадра: 

requestAnimationFrame(updateVideo);
function updateVideo() {
    if (!video.ended) requestAnimationFrame(updateVideo);
    context.clearRect(0,0,100,100);
    context.drawImage(video,0,0,100,100); 
}

Эта функция будет вызываться перед каждым кадром, чтобы обновлять видео с экрана. Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...