Question

我想问为什么我不能在这个画布中运行两个不同的视频源，即.ogg和.mp4文件。我试图将这个绿屏视频覆盖到另一个隐藏了背景颜色的视频。

<html>
  <head>
    <script type = "text/javascript">
      function load() {
        var get1 = document.getElementById("c1");
        var set1 = get1.getContext("2d");

        var get2 = document.getElementById("c2");
        var set2 = get2.getContext("2d");

        var video1 = document.getElementById("video1");
        var video2 = document.getElementById("video2");

        video1.addEventListener('play', function(){runVideo();});
        video2.addEventListener('play', function(){runVideo2();});

        var runVideo1 = function() {
          if(video1.paused || video1.ended) {
            return;
          }

          var frameconversion = function() {
            if(window.requestAnimationFrame) {
              requestAnimationFrame(runVideo1);
            } else {
              setTimeout(runVideo,0);
            }
          };
        };

        var runVideo2 = function() {
          if(video2.paused || video2.ended) {
            return;
          }

          var frameconversion2 = function() {
            if(window.requestAnimationFrame) {
              requestAnimationFrame(runVideo2);
            } else {
              setTimeout(runVideo2,0);
            }
          }
        }
      }
    </script>
  </head>
  <body onload="load()" style="background:grey">
    <video id = "video1" controls="true">
      <source src = "video.ogg" />
    </video>
    <video id = "video2" controls="true">
      <source src = "Helicopter Bell Fly By with Sound on green screen - free green screen 6.mp4" />
    </video>
    <canvas id = "c1" width="500" height="300"></canvas>
    <canvas id = "c2" width="500" height="300"></canvas>
  </body>
</html>

Answer 1

This article on Metia在画布中显示了绿屏（色度键）视频的HTML5示例。如您所见，它允许您将背景更改为选择的静态图像和视频来源。

在另一个视频中运行绿屏视频

1 个答案: