上传视频获取缩略图

PanDa____

已于 2023-04-23 13:23:45 修改

阅读量242

点赞数

文章标签：音视频 javascript html

于 2023-04-23 11:17:10 首次发布

本文链接：https://blog.csdn.net/panda____/article/details/130317532

版权

该代码示例展示了如何使用HTML5的FileAPI和canvas元素来处理用户上传的视频文件，获取视频的第一帧作为截图。当视频加载完成后，它会在页面上创建一个video元素播放视频，并利用canvas进行截图，最后将截图以图像形式展示。

摘要由CSDN通过智能技术生成

<!doctype html>

<html lang="en">

	<head>

		<title>html5 上传视频获取视频截图</title>

		<meta charset="UTF-8" />

		<script type="text/javascript">
			var video, drawImg;

			function showURL() {

				var resultFile = document.getElementById("fileVideo").files[0]; //获取file实例

				if (resultFile) {

					var url = window.URL.createObjectURL(resultFile); //得到上传视频的路径
	
					drawImg = document.getElementById("drawImg");

					video =  document.createElement("video") //创建 video对象

					video.src = url;
					video.autoplay='autoplay';
					video.controls="controls";
					
                    drawImg.appendChild(video);
					video.addEventListener('loadeddata', getImg); //监听是否得到数据

				}

			}

			var getImg = function() {

				var canvas = document.createElement("canvas"); //绘制canvas

				canvas.width = video.videoWidth;

				canvas.height = video.videoHeight;

				//绘制imgage

				canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

				var img = document.createElement("img");

				img.src = canvas.toDataURL("image/png");

				drawImg.appendChild(img);

			};

			window.onload = function() {

				document.getElementById("fileVideo").addEventListener("change", showURL, false)

			}
		</script>

	</head>

	<body>

		<input type="file" name="fileVideo" id="fileVideo" multep />
		<div id="drawImg"></div>

	</body>

</html>