一、方法一

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

注意：canvas无法对跨域的图片进行操作，需要提前处理好跨域问题

    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);});})}

二、方法二

可以选择使用第三方平台实现。七牛云、阿里云等云端存储平台功能强大，不仅具有海量的存储功能，平台封装的还有很多功能丰富的API。若使用七牛云，以七牛云平台为例，说明一下视频截取方法

http://xxx.clouddn.com/test.mp4

如果想要实现截取视频的某一帧其实很方便，只需在视频的url后面这样拼接即可

http://xxx.clouddn.com/test.mp4?vframe/jpg/offset/8/w/300/h/200

其中“jpg”为生成图片的格式，‘8’为截取视频第8秒的截图，“w”为宽度300px，“h”为高度200px 。

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

前端开发如何获取视频第一帧作为封面
首先说明一下,浏览器或者手机需要支持video标签. 从H5本身来说,这里用到了video的一个属性,poster(规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像.). 然后还有一个vi ...
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 ...
jquery+video 获取视频第一帧做视频封面
直接在视频资源后添加#t=0.1 即可由于每个视频资源不同有的视频前一两秒是黑屏的所以时间可自定义例如图上我直接放的#t=2 不是第一帧但是可实现封面效果最终效果图如下: 如果调整了秒数还是不出来 ...

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

一、方法一

二、方法二

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

最新文章

热门文章