在canvas上绘制视频图像

来源：互联网发布：重庆大学网络教育登录编辑：程序博客网时间：2024/05/04 14:05

通过该程序我们将播放的视屏同时播放到画布上

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

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

<style>

video{

border: 1px solidred;

width: 400px;

height: 300px;

}

</style>

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

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

//获取视频对象

varmyvideo=document.getElementByIdx_x("myvideo");

//获取画布对象

varmycanvas=document.getElementByIdx_x("mycanvas");

//为我们的视频对象添加时间更新的函数，当时间变化时候，执行我们的函数

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

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

},true);

</script>

</head>

<body>

<videoid="myvideo" controls autobuffer>

<sourcesrc="video/first.mp4">

<p>请在支持HTML5video标签的浏览器中</p>

</video>

<canvasid="mycanvas" width="400" height="300" style="border: 1px solidred">

</canvas>

</body>

</html>

0 0