H5为视频播放器设置截图功能.

最新推荐文章于 2025-05-04 11:32:09 发布

原创最新推荐文章于 2025-05-04 11:32:09 发布 · 3.7k 阅读

CC 4.0 BY-SA版权

本文介绍了一个简单的网页应用案例，通过JavaScript实现从正在播放的视频中抓取当前帧，并将其显示在Canvas元素上供用户保存的功能。文章提供了实现该功能所需的HTML、CSS及JavaScript代码。

1：
实例说明
当用户点击按钮的时候
程序把视频中当前播放的帧放到页面canvas元素中
，用户可以自行保存
实现过程
：
css样式
/*截图的样式*/
#win{
display:none;
position:absolute;
left:270px;
top:270px;
width:400px;
height:230px;
border:#F00 2px solid;
}
--
html代码
<video id="video" src="width="400px" controls="controls">您的浏览器不支持</video>
<button id="btnCatchPicture" onclick="CatchPictures()">截图</button>

<div id="win"><br>
<canvas id="canvas" width="400px" height="230px"></canvas>
</div>
---
js代码
<script type="text/javascript">
var video=document.getElementById("video");//获取id
//函数
function CatchPictures(){
document.getElementById("video");//获取id
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext('2d');//类型是2d
canvas.width=video.veidoWidth;//画布的宽度等于视频屏幕的宽度
canvas.height=video.videoHeight;
ctx.drawImage(video,0,0,400,230);//在画布上画画
document.getElementById("win").style.display="block";
}
</script>