JavaScript中获取视频缩略图的方法

代码如下:

<head>
	<meta charset="UTF-8">
	<title>获取视频缩略图</title>
</head>

<body>
	<!-- 在页面引入视频 -->
	<video id="video" width="20%" height="200px" controls autoplay>
		<source src="video/qqvideo.mp4" type="video/mp4">
	</video>
	
	<!-- 图片缩略图显示的位置 -->
	<div id="output" style="display: inline-block;">
		
	</div>
	
	<!-- 在线引入jquery地址 -->
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	
	<script type="text/javascript">
		var video = $("#video")[0],
			output = $("#output")[0]; //获取DOM对象
		var scale = 0.1; //图片的倍数

		var captureImage = function() { //截取图片的方法
			var canvas = document.createElement("canvas"); //创建一个canvas
			canvas.width = video.videoWidth * scale; //canvas的宽
			canvas.height = video.videoHeight * scale; //canvas的高
			canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
			var img = document.createElement("img"); //在页面中创建一个img标签
			img.src = canvas.toDataURL("image/png"); //图片的base64编码
			output.append(img); //将图片显示在id="output"的div中
		};
		var initialize = function() { //初始化方法
			video.addEventListener('loadeddata', captureImage); //为元素添加事件
			//loadeddata在当前帧的数据加载完成且还没有足够的数据播放视频/音频(audio/video)的下一帧时触发
		};
		
		$(function() {
			initialize(); //执行方法
		});
	</script>
</body>

如您在阅读中发现不足,欢迎留言!!!

Asurplus、 CSDN认证博客专家 博客专家 全栈开发
书山有路勤为径,学海无涯苦作舟!
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 终极编程指南 设计师:CSDN官方博客 返回首页