前端开发如何获取视频第一帧作为封面

首先说明一下，浏览器或者手机需要支持video标签。

从H5本身来说，这里用到了video的一个属性，poster(规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。).

然后还有一个video的事件，loadeddata（当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。）。

所以要提醒一下,如果不是用框架来监听的，就自己手动用addEventListener来监听视频是否已经加载好，可以截取第一帧了。

从网上搜的资料总结一下：

都是选择用canvas来得到第一帧图片。总的来说的过程是

A：创建video标签

B：canvas无法处理跨域的图片，所以需要处理跨域请求。将图片的 crossOrigin设置成anonymous。

C：处理视频的宽，高和URL链接

D：监听video的loadeddata事件，在事件中使用canvas绘制画布

E：canvas创建好了之后使用toDataURL将图片转成base64

F：绘制图片

附上代码：

 getVideoBase64(url) {return new Promise(function (resolve, reject) {let dataURL = '';let video = document.createElement("video");video.setAttribute('crossOrigin', 'anonymous');//处理跨域video.setAttribute('src', url);video.setAttribute('width', 400);video.setAttribute('height', 240);video.addEventListener('loadeddata', function () {let canvas = document.createElement("canvas"),width = video.width, //canvas的尺寸和图片一样height = video.height;canvas.width = width;canvas.height = height;canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvasdataURL = canvas.toDataURL('image/jpeg'); //转换为base64resolve(dataURL);});})}

PS：这里转载自知乎作者，刘超杰。如果我的看不懂可以去看看原博客。

再记录一下，使用element的框架怎么截取第一帧。原理和上面一致，就不具体写怎么弄了。给一个链接地址，如果有这方面需求，可以去简书上看看这篇文章。《vue 截取视频第一帧》作者：执着的小猪仔

每天进步一点点，冲冲冲！

前端开发如何获取视频第一帧作为封面相关推荐

vue 上传视频到腾讯云存储并获取视频第一帧
官网文档链接:https://cloud.tencent.com/document/product/436/6268 需求项目里之前上传视频是调后端接口,接口将视频保存到服务器,然后返回视频链接. ...
android 获取视频第一帧作为缩略图
今天,简单讲讲android里如何获取一个视频文件的第一帧作为缩略图显示在界面上. 之前,我说个最近需要从服务器下载视频文件,但是下载后肯定需要显示视频的缩略图在界面上给用户看,于是想到显示视频的第一 ...
Android之使用MediaMetadataRetriever类获取视频第一帧
一.首先,来介绍一下MediaMetadataRetriever类,此类位于android.media包下,这里,先附上可查看此类的API地址:MediaMetadataRetriever类,大家可以 ...
Android之使用ThumbnailUtils类来获取视频第一帧缩略图
一.首先,来介绍ThumbnailUtils类,此类位于android.media包下,此类有一个公有的无参构造函数,有三个静态的公有方法,一个用来获取视频第一帧得到的Bitmap,另外两个方法用 ...
小程序获取视频第一帧
小程序获取视频第一帧最近有个小程序项目,需要在页面中展示大量的视频,但是不用播放.后来遇到问题,小程序不可以在一个页面中放置超过5个video标签,否则播放视频加载不到. 经过度娘查询找到一篇大佬的 ...
windows下PHP获取视频第一帧图片作为背景图
我在网上找了很多这方面的资料,总结如下:一般用ffmpeg获取视频第一帧图片作为背景图; ffmpeg的下载链接 http://ffmpeg.org/download.html ; 下载好包,包里面 ...
uniapp获取视频第一帧展示，及视频的层级问题，亲测有效
上传视频等,默认为黑色,无法用视频的第一帧作为封面,以及视频的video为原生组件,层级很高无法覆盖问题,虽然有cover-view,但很多场景还是不灵活, 方法: 视频组件video <vid ...
uni-app 获取视频第一帧转换为图片并展示
话不多说,直接上代码 <template><view class="content"><image v-if="demo != ''&quo ...
java获取视频第一帧工具类
java获取视频文件第一帧,为了防止黑画面,此例取第五帧,本例子采用maven形式,可以获取视频的文件大小. 1. pom.xml 添加引用jar包 jdk采用1.8,日志自行添加即可,这里使用的是l ...

前端开发如何获取视频第一帧作为封面

前端开发如何获取视频第一帧作为封面相关推荐

最新文章

热门文章