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 功 ...
随机推荐
- ubuntu-ln命令
安装软件完成后,常常需要使用ln命令来将命令重新定义一下路径,就相当于windows中的加入系统环境变量的意思 ~ sudo ln -s /home/spike/Downloads/redis/src ...
- Storm工作流程 vs. Spark Stream
看的这个学习课程: http://study.163.com/course/courseLearn.htm?courseId=1002887002#/learn/video?lessonId=1003 ...
- 这篇文章关于两阶段提交和Paxos讲的很好
http://blog.chinaunix.net/uid-16723279-id-3803058.html <两阶段提交协议与paxos投票算法> 点评:2PC绝对是CP的死党,是分布式 ...
- Java中的事务
Java中的事务 学习了:https://www.cnblogs.com/chengpeng15/p/5802930.html 膜拜一下 org 分为三类:jdbc事务.jta事务.容器事务:
- cocos2d-x 3.0游戏实例学习笔记《卡牌塔防》第0步---知识点总结&效果预览&设计思路
/* 说明: **1.本次游戏实例是<cocos2d-x游戏开发之旅>上的最后一个游戏.这里用3.0重写并做下笔记 **2.我也问过木头本人啦,他说:随便写.第一别全然照搬代码:第二能够说 ...
- DecimalFormat格式化输出带小数的数字类型
刚開始 double d = 333333333.333333333; System.out.println(d); 输出结果为3.333333333333333E8 网上找到了DecimalForm ...
- Code Coverage and Unit Test in SonarQube
概念 https://blog.ndepend.com/guide-code-coverage-tools/ Code Coverage Results Import (C#, VB.NET) Uni ...
- thinkphp 内存查询表 防止多次查库
//从内存查询 表 以防止多次查库 private static function selectTable($tableName,array $where,$getFirst=false){ $res ...
- springboot @WebFilter过滤器的使用
过滤器的用法就不多说了 新建Filter的继承类:MemberFilter(放置包需要注意) @WebFilter(urlPatterns = "/*") @Order(1) pu ...
- 23. Merge k Sorted Lists[H]合并k个排序链表
题目 Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity ...