我想问一下为什么我不能在这个 Canvas 上运行两个不同的视频源，即 .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>
最佳答案
This article on Metia显示 Canvas 中绿屏(色度键)视频的有效 HTML5 示例。如您所见，它允许你们两个将背景更改为精选的静态图像和视频源。
关于html - 在另一个视频中运行绿屏视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24631334/