JS—— 上传视频截取视频第一帧作为封面

1.html

<input type="file" name="file1">
<img/>

2.js

$("input").change(function(){
	var file = $(this)[0].files[0]
	var fileUrl = URL.createObjectURL(file);
	var videoElement = document.createElement("VIDEO")
    videoElement.src = fileUrl
    videoElement.autoplay = true
    videoElement.crossOrigin = 'anonymous'; // 如果视频是跨域资源，需要设置 CORS
    videoElement.muted = true; // 静音（部分浏览器需要静音才能自动播放）
    videoElement.playsInline = true; // 适用于移动设备
    videoElement.addEventListener("loadeddata", function (_event) {
		var canvas = document.createElement("canvas");
		canvas.width = videoElement.videoWidth * 0.8;
		canvas.height = videoElement.videoHeight * 0.8;
		canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height); 
		$("img")[0].src = canvas.toDataURL("image/png");
	});
})