JavaScript设置显示video第一帧

时间：2025-04-05 22:26:18

注意事项：

  1. 服务端必须要有access字段来同意你的跨域请求(/en-US/docs/Web/HTML/CORS_enabled_image)
  2. 必须服务器环境下调试，本地无法调试(比如 file: 开头的)
  3. 视频文件所在的域和图片和页面所在域必须相同

示例代码

<html> 
<head>
<title>设置视频封面为视频第一帧</title>
	<style>
		.video{
			width:500px;
			height:300px;	
		}
	</style>
</head>
<body>
	<video src="url" onloadeddata="showFrame(event)" controls="controls" calss="video">
	</video>
	<script>
	    function showFrame(event) {
			let scale = 0.8,video = , 
			canvas = ("canvas"); // 创建一个画布
			 =  * scale;
			 =  * scale;
			('2d').drawImage(video, 0, 0, , ); 
			try {
				("poster", ("image/png"));
			}
			catch (err) {
				("Error: " + err);
			}
		}
	</script>
</body>
</html>

相关文章