running a green screen video in another video

 

I would like to ask why can't I run two different source of video which is .ogg and .mp4 files in this canvas. I am trying to override this green screen video to another video that had it's background colour hidden. 

<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>

This article on Metia shows a working HTML5 example of green-screen (chroma key) video in a canvas. As you can see, it allows you two change the background to a selection of static images and video sources.

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

上一篇: Xcode失败，退出码254

下一篇: 在另一个视频中运行绿屏视频