video截取视频第一帧作为播放前默认图片-Toy模板网

这篇具有很好参考价值的文章主要介绍了video截取视频第一帧作为播放前默认图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

重要！不设置会导致第一帧图片不显示

  video.currentTime = 1;  //currentTime 属性设置或返回视频播放的当前位置（以秒计）

实现js

  var canvas = document.createElement('canvas');
  const video = document.getElementById('video');
  video.setAttribute('crossOrigin', 'anonymous');
  video.currentTime = 1;  //currentTime 属性设置或返回视频播放的当前位置（以秒计）   重要！不设置会导致第一帧图片不显示
  canvas.width = video.clientWidth;
  canvas.height = video.clientHeight;
  console.log('width:'+video.clientWidth)
  console.log('heigth:'+video.clientHeight)
  video.onloadeddata = (() => {
      canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
      var dataURL = canvas.toDataURL('image/png');
      video.setAttribute("poster",dataURL);// 设置标签的 poster 属性的值为 base64 编译过后的canvas绘图。	
  })

附上全部代码文章来源地址https://www.toymoban.com/news/detail-523202.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>video</title>
	</head>
	<body>
		<video id="video" controls="controls" src="video.mp4">
			很抱歉，您的浏览器不支持播放标签!
		</video>
		<script src="js/jquery-1.11.3.js"></script>
		<script type="text/javascript">
			var canvas = document.createElement('canvas');
			const video = document.getElementById('video');
			video.setAttribute('crossOrigin', 'anonymous');
			video.currentTime = 1; //currentTime 属性设置或返回视频播放的当前位置（以秒计）   重要！不设置会导致第一帧图片不显示
			canvas.width = video.clientWidth;
			canvas.height = video.clientHeight;
			console.log('width:' + video.clientWidth)
			console.log('heigth:' + video.clientHeight)
			video.onloadeddata = (() => {
				canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
				var dataURL = canvas.toDataURL('image/png');
				video.setAttribute("poster", dataURL); // 设置标签的 poster 属性的值为 base64 编译过后的canvas绘图。	
			})
		</script>
	</body>
</html>

到了这里，关于video截取视频第一帧作为播放前默认图片的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！