<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="/Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
function vSetImg(obj) {
$(obj).removeAttr("poster");
var vimg = $("<img/>")[0];
captureImage(obj, vimg);
console.log($(vimg).attr("src"));
$(obj).attr("poster", $(vimg).attr("src"));
//展示获取的第一帧图片
$(".img").attr("src", $(vimg).attr("src"));
};
var scale = 0.8;
function captureImage(video, output) {
try {
var videocanvas = $("<canvas/>")[0];
videocanvas.width = video.videoWidth * scale;
videocanvas.height = video.videoHeight * scale;
videocanvas.getContext('2d').drawImage(video, 0, 0, videocanvas.width, videocanvas.height);
output.src = videocanvas.toDataURL("image/png");
delete videocanvas;
} catch (e) {
output.src = "加载动画.gif";
}
};
</script>
</head>
<body>
<div>
<video preload="metadata" onloadeddata='vSetImg(this)' width="420" height="280" src="VID_20191101_203801.mp4">
<source src="VID_20191101_203801.mp4" type="video/mp4" />
</video>
</div>
<div>
<img class="img" src="" />
</div>
</body>
</html>
