Menu
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>
750
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.
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
