如何截取视频作为封面图

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>capture screen</title>
</head>
<body><!-- #t=9 可以设置截取那一帧的 -->
<video id="video1" src='1.mp4#t=9' controls="controls" poster='' onloadstart='a(1)'></video>
<img id="img"  style='width:300px;height: 300px' src="" alt="">
</video>
<script type="text/javascript">
function a(num){var video, output;var canvas = document.createElement('canvas')video = document.getElementById('video'+num)video.setAttribute('crossOrigin', 'anonymous')canvas.width = video.clientWidthcanvas.height = video.clientHeightvideo.onloadeddata = (() => {canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)var dataURL = canvas.toDataURL('image/png')video.setAttribute('poster', dataURL)console.log(dataURL)var img  = document.getElementById('img')img.setAttribute('src', dataURL)})
}
</script>
</body>
</html>

需要放到本地服务器,才能查看

如何截取视频作为封面图相关推荐

如何获取别人视频的封面图，提取教程分享
我们看视频的时候,第一眼看到的是什么?那当然是视频的封面了.所以当我们遇到喜欢的视频时候,那么有时候会不会特想要视频的封面图片呢?提取视频封面的方法很简单,接下来给大家分享一种十分简单的获取封面图的方 ...
Java 实现分段截取视频生成gif图使用ffmpeg操作
Java 实现分段截取视频生成gif图使用ffmpeg操作前言核心代码调用的抽象方法,包含逻辑处理通过ffmpeg获取视频时长合成gif图删除文件夹最终的调用如果有更好的方式,请务 ...
从源代码获取视频和封面图
从源代码获取视频和封面图视频下载 1.用谷歌浏览器打开视频 2.右上角三点处打开开发者工具 3. 4.复制3中地址,新建网址打开封面图下载 1.右键点开网址源代码 2.ctrl+f出现搜索框 3. ...
iOS截取视频预览图，截图方向错误的解决
2019独角兽企业重金招聘Python工程师标准>>> 今天在修改项目bug的时候遇到了,截图视频预览图的时候总是方向不对,竖屏录制的视频(好像是竖屏录制截图出的错,记不太清楚了?) ...
微信小程序视频列表封面图禁止多个视频同时播放
微信小程序视频列表用到的组件是 video 链接 https://developers.weixin.qq.com/miniprogram/dev/component/video.html 先附上 ...
iOS获取相册视频文件封面图选取手机中的音频、视频文件并导出数据。
应项目需求,需要实现本地选取并上传图片.音频和视频文件. 其中选取图片这块有很多开源框架,不再赘述.本文主要是采用iOS自带的类MPMediaPickerController 来实现UIImagePi ...
c# FFMPEG 视频生成封面图
/// <summary>/// 导出封面图/// </summary>/// <param name="ffmpegFileName">FFm ...
java使用ffmpeg截取视频作为封面
转自 https://blog.csdn.net/zhaowen25/article/details/39674029 网盘 https://pan.baidu.com/s/1o7YplUE 转自 ...
从视频中截取首帧作为封面图并展示出视频及封面图（canvas）
html <p class="clearfix"><label>视频文件:</label><span><video id=&q ...

如何截取视频作为封面图

如何截取视频作为封面图相关推荐

最新文章

热门文章