您的位置：首页 > 其它

在canvas上绘制视频图像2

2013-12-30 20:39 260 查看

通过该程序我们将播放的视屏同时播放到画布上，经过修改之后程序没有延迟

<!DOCTYPE
html>
<html>
<head>

<meta
charset="utf-8">

<title>在canvas上绘制视频图像2</title>

<style>

video{

border: 1px solid
red;

width: 400px;

height: 300px;

}

</style>

<script>

window.addEventListener("load",function(){

alert("页面加载完成");

//获取视频对象

var
myvideo=document.getElementByIdx_x_x("myvideo");

//获取画布对象

var
mycanvas=document.getElementByIdx_x_x("mycanvas");

var fps=30/1000;

setInterval(function(){

mycanvas.getContext("2d").drawImage(myvideo,0,0,400,300);

},fps);

},true);

</script>
</head>
<body>
<video
id="myvideo" controls autobuffer>

<source
src="video/first.mp4">

<p>请在支持HTML5
video标签的浏览器中</p>
</video>
<canvas
id="mycanvas" width="400" height="300" style="border: 1px solid
red">

</canvas>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航