function vSetImg(obj) {
const canvas = document.createElement("canvas");
canvas.width = obj.videoWidth;
canvas.height = obj.videoHeight;
canvas.getContext('2d').drawImage(obj, 0, 0, canvas.width, canvas.height);
obj.setAttribute('poster', canvas.toDataURL("image/png"));
//插入img标签查看封面图(调试用)
const img = document.createElement("img");
img.src = canvas.toDataURL("image/png");
document.body.appendChild(img);
}
<video preload="auto" onloadeddata="vSetImg(this)" controls>
<source src="wel.mp4">
</video>
canvas获取视频第一帧设置为视频封面
转载wx61133eeec1457 博主文章分类:javascript
上一篇:Mysql 集群环境搭建

提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
Android 网络视频如何获取封面图
一、需求:后端返回包含视频链接的数组对象,格式如下:[ { url: 'xxxxx.mp4', }, { url: 'xxxxx.mp4', }, { url: 'xxxxx.mp4', },]从上面的mp4视频中截取一帧设置为封面,如下图,下面的封面图从视频中截取而来。二、代码实现:<script> expo
Android 网络视频如何获取封面图 uni-app 音视频 javascript ide -
java获取视频封面图 java截取视频中的图片
公司里的运营团队在做运营的时候会录屏,所有需要我们开发人员做一个能够将视频转入接口里然后自动识别视频里的订单页面,然后再将订单页面以图片的形式给保存在文件夹里!
java获取视频封面图 java ocr System ide