如何使用Canvas实时处理Video

发布网友发布时间：2022-04-22 14:39

共1个回答

热心网友时间：2022-04-20 02:11

合HTML5下的video和canvas的功能，你可以实时处理视频数据，为正在播放的视频添加各种各样的视觉效果。本教程演示如何使用JavaScript代码实现chroma-keying特效
本文使用的XHTML文档如下所示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<head>
<style>
body {
background: black;
color:#CCCCCC;
}
#c2 {
background-image: url(foo.png);
background-repeat: no-repeat;
}
div {
float: left;
border :1px solid #444444;
padding:10px;
margin: 10px;
background:#3B3B3B;
}
</style>
<script type="text/javascript;version=1.8" src="main.js"></script>
</head>
<body onload="processor.doLoad()">
<div>
<video id="video" src="video.ogv" controls="true"/>
</div>
<div>
<canvas id="c1" width="160" height="96"/>
<canvas id="c2" width="160" height="96"/>
</div>
</body>
</html>