前端截取视频第一帧作为封面

概述

1.做项目的时候突然想截取视频第一帧，作为视频的封面，然后搜了很多博客都发现得到空白的图片，最后得到了解决。

2.方法：通过创建canvas标签，利用其drawImage() 方法在画布上绘制该视频，然后运用toDataURL方法转换canvas上的图片为base64格式，并将base64格式的图片作为video标签的poster属性。

3.浏览器：chrome

代码关键

video.currentTime = 1

currentTime 属性设置或返回视频播放的当前位置（以秒计）。当设置该属性时，播放会跳跃到指定的位置。一定要设置该属性，不然会得到空白的图片。

知识点

video.onloadeddata

onloadeddata 事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的下一帧时触发。在当前帧的数据可用时执行相应 JavaScript代码。

canvas.toDataURL

是返回一个包含图片展示的数据URL。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。

video.setAttribute(‘crossOrigin’, ‘anonymous’)

canvas无法对跨域的图片进行操作，这样解决了跨域问题。

完整代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>capture screen</title></head><body><video id="video" controls="controls"><source src="./0130_1.mp4"></video><div id="output"></div><script type="text/javascript">(function(){var video, output;output = document.getElementById("output");var canvas = document.createElement('canvas')var img = document.createElement("img");video = document.getElementById('video')video.setAttribute('crossOrigin', 'anonymous')video.currentTime = 1 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')img.src = dataURL;img.width = 400;img.height = 300;output.appendChild(img);})})();</script></body>
</html>

前端截取视频第一帧作为封面相关推荐

vue截取视频第一帧做封面图
利用画布canvas来截取第一帧作为图片 cutPicture(item) {let video = document.createElement("video");video.s ...
vue 截取视频第一帧
最近自己写项目,在项目中涉及功能点又截取视频帧的点:需求澄清:移动端封面展示,平台上传图片(多张上传)取第一张上传图片为封面图:如上传视频则截取视频第一帧作为封面图: 实现思路:h5 video标签 ...
php ffmpeg截图,php ffmpeg截取视频第一帧保存为图片的方法
php ffmpeg截取视频第一帧保存为图片的方法 $xiangmupath = $this->getxiangmupath(); $filename = 'chengshi'; $cmd = ...
前端开发如何获取视频第一帧作为封面
首先说明一下,浏览器或者手机需要支持video标签. 从H5本身来说,这里用到了video的一个属性,poster(规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像.). 然后还有一个vi ...
windows下PHP截取视频第一帧
php截取视频第一帧,需要配合第三方软件实现,php执行windowsShell命令,进行图片处理首先下载第三方软件ffmpeg http://www.ffmpeg.org/download.htm ...
安卓截取视频第一帧的方法
视频app大多是需要有一张相关视频的图片做封面展示的.下面是可以直接从视频的url取到视频的第一帧图片的方法: Bitmap bitmap = ThumbnailUtils.createVideoTh ...
PHP截取视频第一帧
安装ffmpeg 第一步:下载ffmpeg:http://ffmpeg.org/releases/ffmpeg-3.4.1.tar.gz wget http://www.ffmpeg.org/rele ...
ffmpeg截取视频第一帧
public function getVideoCover($file_info, $time, $dir_video, $size, $dir) { try { $time = $time ? $t ...
php截取视频第一帧为图片,把视频变成一帧一帧的图片(ae怎么把视频变成单帧) 视频截图视频画面每帧图片截取...
AE怎么把视频变成单帧?这是小编今天要与大家讨论及解决的一个问题.在视频后期处理中,有时为实现某个场景效果,需要把视频中的某帧变成静态帧图片:或者需要视频截图视频画面每帧图片截取出来,把视频变成一帧一 ...
js截取视频第一帧图片
const getVideoBase64 = (url: any) => {//url为视频链接地址return new Promise(function (resolve, reject) { ...