基于fastadmin框架,上传视频,自动截取视频封面图
最近用fastadmin开发了一个项目,需要用到视频的封面图片,客户又不能一一提供视频对应的封面,为减少工作量,需要在后台上传视频后直接生成默认封面图片,也可以自动上传想要的封面图片;
利用fastadmin框架,生成视频上传功能,在此基础上添加功能。
首先是页面,放的是add页面,edit页面是一样的
此处是手动上传的封面图
<div class="form-group"><label class="control-label col-xs-12 col-sm-2">{:__('Head_image')}:</label><div class="col-xs-12 col-sm-8"><div class="input-group"><input id="c-head_image" class="form-control" size="50" name="row[head_image]" type="text"><div class="input-group-addon no-border no-padding"><span><button type="button" id="plupload-head_image" class="btn btn-danger plupload" data-input-id="c-head_image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-head_image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span><span><button type="button" id="fachoose-head_image" class="btn btn-primary fachoose" data-input-id="c-head_image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span></div><span class="msg-box n-right" for="c-head_image"></span></div><ul class="row list-inline plupload-preview" id="p-head_image"></ul></div><div class="col-sm-10 col-sm-offset-2 col-xs-12" style="color: red;">封面图272*272,小于50kb</div>
</div>此处是上传视频
<div class="form-group"><label class="control-label col-xs-12 col-sm-2">{:__('Video_file')}:</label><div class="col-xs-12 col-sm-8"><div class="input-group"><input id="c-video_file" class="form-control" size="5000" name="row[video_file]" type="text"><div class="input-group-addon no-border no-padding"><span><button type="button" id="plupload-video_file" class="btn btn-danger plupload" data-mimetype="video/mp4" data-input-id="c-video_file" data-multiple="false" data-preview-id="p-video_file"><i class="fa fa-upload"></i> {:__('Upload')}</button></span></div><span class="msg-box n-right" for="c-video_file"></span></div><!--<ul class="row list-inline plupload-preview" id="p-video_file"></ul>--><video id="video" style="width: 160px;height:120px; " ></video></div><div class="col-sm-10 col-sm-offset-2 col-xs-12" style="color: red;">时长不超过15s,mp4格式,小于1M</div>
</div>此处是上传视频后自动生成的默认封面图
<div class="form-group"><label class="control-label col-xs-12 col-sm-2">{:__('默认封面图')}:</label><div class="col-xs-12 col-sm-8"><input id="fengmianinput" class="form-control" type="hidden" name="row[moren_image]"><img style="width: 160px;height:120px; " id="fengmian" src="" alt=""></div><div class="col-sm-10 col-sm-offset-2 col-xs-12" style="color: red;">上传视频后自动生成</div>
</div>
这一部分只要根据平时框架自动生成就可以了,最主要的是js文件中添加方法,下面放上最主要的js部分代码
//add方法内添加
add: function () {$("#plupload-video_file").data('upload-success',function(res){ //视频上传成功后触发//console.log(res);$("#video").attr('src',res.url);});var video = document.getElementById('video');var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');width = video.clientWidth;height = video.clientHeight;video.addEventListener('loadeddata', function (e) {// console.log('loadeddata')this.currentTime=1.5;canvas.width = this.videoWidth;canvas.height = this.videoHeight;width = this.videoWidth;height = this.videoHeight;// console.log(width, height)// console.log(this)var currentTime = this.currentTime;var that=this;setTimeout(function(){ //此处的setTimeout方法,是为了防止截取到视频前几帧为黑屏,如果可以确保视频没有黑屏,可以不用setTimeout方法ctx.drawImage(that, 0, 0, width, height);var src = canvas.toDataURL('image/jpeg');console.log(src);$("#fengmianinput").attr('value',src);$("#fengmian").attr('src',src);},200);});Controller.api.bindevent();
},//edit方法同理
edit: function () {$("#plupload-video_file").data('upload-success',function(res){//console.log(res);$("#video").attr('src',res.url);});var video = document.getElementById('video');var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');width = video.clientWidth;height = video.clientHeight;video.addEventListener('loadeddata', function (e) {// console.log('loadeddata')this.currentTime=1.5;canvas.width = this.videoWidth;canvas.height = this.videoHeight;width = this.videoWidth;height = this.videoHeight;// console.log(width, height)// console.log(this)var currentTime = this.currentTime;var that=this;setTimeout(function(){ctx.drawImage(that, 0, 0, width, height);var src = canvas.toDataURL('image/jpeg');console.log(src);$("#fengmianinput").attr('value',src);$("#fengmian").attr('src',src);},200);});Controller.api.bindevent();},
需要注意的是,这里的默认封面图(上传视频自动截取的图),图片编码是base64,数据库需要用longtext类型。
在使用框架生成视频上传功能后,不要忘记设置可以上传的视频类型以及大小。
基于fastadmin框架,上传视频,自动截取视频封面图相关推荐
- 网易自媒体视频,批量修改md5采集下载上传,批量自动去水印加水印软件 今日头条自媒体视频,youtubu...
网易自媒体视频,批量修改md5采集下载上传,批量自动去水印加水印软件 今日头条自媒体视频,youtubu 视频去重,批量自动去水印加水印软件 快视频,视频消重技术去水印去logo字幕工具 搜狐自媒体视 ...
- 通过web系统实现淘宝营销引流,小说或者视频上传之后自动生成二维码,通过二维码分享之后引入微信或者扣扣加群,群满自动切换到下一个,以及数据统计分析和若干个小工具集成
通过web系统实现淘宝营销引流,小说或者视频上传之后自动生成二维码,通过二维码分享之后引入微信或者扣扣加群,群满自动切换到下一个,以及数据统计分析和若干个小工具集成. 主要实现技术: 1.大文件视频分 ...
- 基于MFT文件上传和下载
1. MFT介绍 Managed File Transfer ("MFT")是一种安全的数据传输软件,是通过网络从一台计算机到另一台计算机的数据传输. 大文件传输(MFT)是一种安 ...
- WebUpload 视频上传,支持多视频上传
在项目中使用了WebUpload视频上传,由于对WebUpload的配置参数上不是很了解,走了不少弯路,以下是整理出来的代码. 前台jsp页面只有通过iframe引入该文件即可. file_uplo ...
- java实现MinIO文件上传,并将视频文件截图,将视频封面及视频通过MinIo上传到服务器中
java实现MinIO文件上传,并将视频文件截图,将视频封面及视频通过MinIo上传到服务器中 配置完毕,接下来开始代码编写. 说明 总过程分为两步. 1.配置MinIO的环境. 2.代码编写. 下面 ...
- 图片裁切,上传,自动匹配颜色。
图片裁切,上传,自动匹配颜色. photoclip插件学习. https://github.com/baijunjie/PhotoClip.js是官方文档. 使用方法很简单.不过我在使用的过程中遇到几 ...
- ios15之把自己编写的框架上传到CocoaPods里面
ios15之把自己编写的框架上传到CocoaPods里面 最近有个需求,把自己的写的框架上传到CocoaPods里面.使用 pod 安装到本地项目里面. 首先github新建一个仓库名,协议MIT,公 ...
- java中formfile,基于Struts FormFile上传文件
基于Struts文件上传(FormFile)详解 Struts中FormFile用于文件进行上传 1.在jsp文件中进行定义 名字: 头像: 2.在Form表单中定义FormFile /* * Gen ...
- java formfile_基于Struts文件上传(FormFile)详解
Struts中FormFile用于文件进行上传 1.在jsp文件中进行定义 名字: 头像: 2.在Form表单中定义FormFile /* * Generated by MyEclipse Strut ...
最新文章
- [深入浅出Cocoa]详解键值观察(KVO)及其实现机理
- 洛谷——P3205 [HNOI2010]合唱队
- 关于我的51CTO博客
- TopCoder SRM 152 div 2 500point
- 【译】用Fragment创建动态的界面布局(附Android示例代码)
- 把Nginx注册成Windows 系统服务(转载)
- DL之CNN:计算机视觉之卷积神经网络算法的简介(经典架构/论文)、CNN优化技术、调参学习实践、CNN经典结构及其演化、案例应用之详细攻略
- [云炬创业管理笔记]第五章打磨最有效的商业模式测试1
- 做“是非题”的正确姿势
- 平衡二叉树AVL删除
- 【OpenStack】【Nova】安装与配置详解 (1)
- CentOS 6.2 虚拟机 mail邮件信息: crash:[abrt] full crash report
- python 跳过异常元素继续,在python中的迭代器/生成器中引发异常后继续
- Spring.net 中的AOP功能
- 始于CSDN,归于CSDN【一个七年老码农的心声】
- xlwings使用InputBox
- WFP实现侧边栏导航菜单
- 粉丝测试题的软件,套路得粉丝的答题类H5推荐
- 1m=1000ms(1秒等于一千毫秒)
- 计算机无法连接到internet的操作,修复无法连接到internet
【运用方式】
的设置步骤...
热门文章
- win10系统突然无法联网解决方案
- 生鲜版微信小程序 水果小程序 修齐网络专业开发app
- mybatis中解决属性名和字段名不一致的方法
- JPA和MyBatis的优缺点对比,你是不是都不知道有哪些?
- jquery使用hide方法隐藏指定id的元素
- C#程序的实现2个内存对象的合并生成一个新的内存对象
- Web全栈开发微课堂 | 手把手教你从0到1学 Django
- double到int的快速转换
- TextView系列:ellipsize属性详解 android:ellipsize=“marquee“(跑马灯效果)
- SP1026 FAVDICE - Favorite Dice[期望DP]