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

2018-06-06 23:14:43

我想问为什么我不能在这个画布中运行两个不同的视频源，即.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>

Metia上的这篇文章展示了一个工作的HTML5绿色屏幕（色度键）视频的例子。正如你所看到的，它允许你将背景改变为选择静态图像和视频源。

链接地址: http://www.djcxy.com/p/21461.html

上一篇: running a green screen video in another video

下一篇: How can I solve conflicting cross version suffixes in SBT?