vue 截取视频第一帧
最近自己写项目,在项目中涉及功能点又截取视频帧的点;需求澄清:移动端封面展示,平台上传图片(多张上传)取第一张上传图片为封面图;如上传视频则截取视频第一帧作为封面图;
实现思路;h5 video标签,canvas;上传视频成功之后把返回视频地址放到video标签内,通过canvas画布截取视频第一帧;
组件代码:
<el-form-item ref="videocontentvideo" style="display:none;">
<img :src="imgurl">
<video width="320" height="240" controls id="upvideo">
</video>
<img :src="modlevidel" />
</el-form-item>
<el-form-item class="upload-demo-content" v-show="formLabelAlign.type==2">
<el-upload class="upload-demo" :limit="1" :on-exceed="exceedhandle" drag :file-list="filsListArray" :action="configuploadurl" :on-success="successuploadhandle" accept="video" name="fileList" :before-upload="beforeUploadVideo">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将视频文件拖到此处,或
<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip"></div>
</el-upload>
</el-form-item>
successuploadhandle(response, file, fileList) {
this.formLabelAlign.video = this.modlevidel =
response.data.fileList[0].url;
this.filsListArray = [];
this.filsListArray.push({
name: this.formLabelAlign.video,
url: this.formLabelAlign.video
});
this.findvideocover();
},
exceedhandle(files, fileList) {
this.$message.error("只能上传一个视频额");
},
beforeUploadVideo(file) {
if (
[
"video/mp4",
"video/ogg",
"video/flv",
"video/avi",
"video/wmv",
"video/rmvb"
].indexOf(file.type) == -1
) {
this.$message.error("请上传正确的视频格式");
return false;
}
},
主要代码=》截取视频第一帧:
findvideocover() {
let _this = this;
this.$nextTick(() => {
let video = document.getElementById("upvideo");
let source = document.createElement("source");
// source.src = require("../../assets/5b086751dbb7af1ea8fa8d05e66fe5c3.mp4");this.formLabelAlign.video
source.src = this.formLabelAlign.video;
source.type = "video/mp4";
video.appendChild(source);
video.addEventListener("loadeddata", function() {
var canvas = document.createElement("canvas");
canvas.width = "320";
canvas.height = "320";
canvas
.getContext("2d")
.drawImage(video, 0, 0, canvas.width, canvas.width);
var img = document.createElement("img");
let imgsrc = canvas.toDataURL("image/png");
_this.Videoframehandle(imgsrc.split(",")[1]);
});
});
},
视频预览:
showvideohandle() {
this.$alert(
`<video width="320" height="240" controls>
<source src="${
this.filsListArray[0].url
}" type="video/mp4">
您的浏览器不支持 HTML5 video 标签。
</video>`,
"视频预览",
{
dangerouslyUseHTMLString: true
}
);
},
效果:
vue 截取视频第一帧的更多相关文章
- php ffmpeg截取视频第一帧保存为图片的方法
php ffmpeg截取视频第一帧保存为图片的方法 <pre> $xiangmupath = $this->getxiangmupath(); $filename = 'chengs ...
- Android -- 获取视频第一帧缩略图
干货 从API 8开始,新增了一个类: android.media.ThumbnailUtils这个类提供了3个静态方法一个用来获取视频第一帧得到的Bitmap,2个对图片进行缩略处理. public ...
- Android视频处理 --处理视频第一帧缩略图
从API 8开始,新增了一个类: android.media.ThumbnailUtils这个类提供了3个静态方法一个用来获取视频第一帧得到的Bitmap,2个对图片进行缩略处理. ? 1 publi ...
- 使用javacv 截取视频指定帧节
个人博客 地址:https://www.wenhaofan.com/article/20190407105818 引入依赖 <dependency> <groupId>org. ...
- Android之使用MediaMetadataRetriever类获取视频第一帧
一.首先,来介绍一下MediaMetadataRetriever类,此类位于android.media包下,这里,先附上可查看此类的API地址:MediaMetadataRetriever类.大家能够 ...
- javacv获取视频第一帧
第一种是用ffmpeg工具,不过还得安装客户端软件,于是放弃了,还有一种是javacv开源工具,所以选择第二种: 第一种:ffmpeg工具 需要安装ffmpeg软件,支持windows和linux,视 ...
- 关于video标签移动端开发遇到的问题,获取视频第一帧,全屏,自动播放,自适应等问题
最近一直在处理video标签在IOS和Android端的兼容问题,其中遇到不少坑,绝大多数问题已经解决,下面是处理问题经验的总结: 1.获取视频的第一帧作为背景图: 技术:canvas绘图 windo ...
- Java截取视频首帧并旋转正向
package test; import java.awt.Dimension; import java.awt.Graphics2D; import java.awt.Image; import j ...
- 通过 ffmpeg 获取视频第一帧(指定时间)图片
最近做一个上传教学视频的方法,上传视频的同时需要上传视频缩略图,为了避免用户上传的缩略图与视频内容不符,经理要求直接从上传的视频中截图视频的某一帧作为缩略图,并给我推荐了FFMPEG.FFMPEG 功 ...
随机推荐
- 配置db账号和密码时一定注意空格问题、空行问题否则连接报错
#postgresql dbpg.datasource.type=com.alibaba.druid.pool.DruidDataSourcepg.datasource.driverClassName ...
- HDU 4507
数位DP. 一般是利用DFS来求数位DP了,结合了记忆化搜索.设dp[i][j][k]为前i位,并且前i位的数位和mod7为j,前i位的数字的表示数字值mod7.为什么可以这样呢?因为继续DFS下去, ...
- 零基础学python-2.16 列表解析
这一节聊聊强大的列表解析 主要就是在一行里面赋值给列表 以下我们举两个样例: 上面的样例我们引入了range函数,他主要作用是在一定范围里面取整数值 我来解释一下中括号中面的那一句:x**2 for ...
- nginx源代码分析--进程间通信机制 & 同步机制
Nginx源代码分析-进程间通信机制 从nginx的进程模型能够知道.master进程和worker进程须要通信,nginx中通信的方式有套接字.共享内存.信号.对于master进程,从外部接受信号, ...
- POJ3463 Sightseeing
题目大意:求两点间最短路与长度为最短路长度+1的路径的条数之和. 方法1:最短路径+DP 首先求出ST间最短路径,然后根据递归式记忆化搜索(因此还要构造反向图). 我们知道到达终点的路径长度最长为ma ...
- JQuery常用的api[最好是系统地学习一下《锋利的JQuery》]
text http://api.jquery.com/text/ Get the combined text contents of each element in the set of matche ...
- hdoj--2063--过山车(最大匹配)
过山车 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
- HttpServletRequest对象小结
当客户端通过HTTP协议访问服务器时,请求所有信息都封装在HttpServletRequest对象中,可通过它获取到请求的所有信息,其常用方法如下: getRequestURL方法返回客户端发出请求时 ...
- angular4 select 绑定(ngModel)对象
欢迎加入前端交流群交流知识&&获取视频资料:749539640 <h1>My Application</h1> <select [(ngModel)]=& ...
- 配置win2008防火墙 允许被Ping的设置方法
出于安全因素考虑,在 Windows Server 2008 上是不允许从外部对其执行 Ping 指令的 如果要配置允许被 Ping 通过以往的设置步骤会发现并不能从 Windows firewall ...