Geek Answers Handbook

Running green screen in another video

I would like to ask why I cannot run two different video sources, which are the .ogg and .mp4 files in this canvas. I am trying to override this green screen video to another video that hid its background color.

<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>
+7
html5 video canvas
source share
1 answer

This Metia article shows a working example of HTML5 green screen (color key) on canvas. As you can see, this allows you to change the background to a selection of still images and videos .

+3
source share

More articles:


All Articles