H5 video获取第一帧作为 poster 属性

最新推荐文章于 2024-05-27 19:00:00 发布

才华有限

最新推荐文章于 2024-05-27 19:00:00 发布

阅读量7k

点赞数 1

分类专栏： video

本文链接：https://blog.csdn.net/weixin_42935546/article/details/104533175

版权

video 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

demo测试
在菜鸟安卓测试正常.但是 ios 中的video 只有视频在播放的时候，才临时去加载视频。
所以是空白的一个播放按钮.
如果真的需要做.需要自定义video.
H5 的 video 兼容实在麻烦…
细节
如果需要获取第一帧设置进去: poster=“img_the_scream.jpg” 这个属性不能不设置也不能为空设置为 poster="…" 都可以.为空会无法设置

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<video id="video1" poster="img_the_scream.jpg"  controls width="270" >
    <source src="mov_bbb.mp4" type='video/mp4'>
</video>
<div id="output"></div>

<script>
 function one () {
 	var video, output;
	output = document.getElementById("output");
	var canvas = document.createElement('canvas')
	var img = document.createElement("img");
	  video = document.getElementById('video1')
	  video.setAttribute('crossOrigin', 'anonymous')
	  canvas.width = video.clientWidth
	  canvas.height = video.clientHeight
	  video.onloadeddata = (() => {
		  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
		  var dataURL = canvas.toDataURL('image/png')
		  img.src = dataURL;
		  img.width = 400;
		  img.height = 300;
		  output.appendChild(img);
		  video.setAttribute("poster",dataURL);
	  })
 }
	one()
</script>

</body>
</html>

才华有限

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
H5 video获取第一帧作为 poster 属性

demo测试在菜鸟安卓测试正常.但是 ios 中的video 只有视频在播放的时候，才临时去加载视频。所以是空白的一个播放按钮.如果真的需要做.需要自定义video.H5 的 video 兼容实在麻烦…细节如果需要获取第一帧设置进去: poster=“img_the_scream.jpg” 这个属性不能不设置也不能为空设置为 poster="…" 都可以.为空会无法设置<...
复制链接

扫一扫