gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 14:19:25 25 4
gpt4 key购买 nike

我想问一下为什么我不能在这个 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com