js上传视频并获取视频帧做为封面

//上传点击事件
function toGetUpdate(){// 生成文件上传的控件let inputElement = document.createElement('input')inputElement.setAttribute('type' , 'file')inputElement.style.display = 'none'if (window.addEventListener) {inputElement.addEventListener('change', (e)=>{uploadFile(e)}, false)} else {inputElement.attachEvent('onchange', (e)=>{uploadFile(e)})}document.body.appendChild(inputElement)inputElement.click()
}
//上传方法
function uploadFile(el){if (el && el.target && el.target.files && el.target.files.length > 0) {// console.log(el)const files = el.target.files[0]const isLt100M = files.size / 1024 / 1024 < 100  //100M大小const size = files.size / 1024 / 1024  //文件大小单位为M,(做限制条件用)// console.log(files)//if (files.type.indexOf('mp4') === -1) { //如果不是视频格式(限制格式判断)//alert('请选择mp4文件')//}const reader = new FileReader(); // 创建读取文件对象reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件reader.onload = function(t) { // 文件读取完成后// console.log(t.target.result)//视频路径（可能已经不叫路径了，现在就是个数据流文件（@~__~@））let video = document.createElement("video");video.setAttribute('src', t.target.result);video.setAttribute('controls', 'controls');video.setAttribute('width', 400); //设置大小，如果不设置，下面的canvas就要按需设置video.setAttribute('height', 240);video.currentTime = 7  //视频时长，一定要设置，不然大概率白屏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); //绘制canvaslet dataURL = canvas.toDataURL('image/png'); //转换为base64console.log(dataURL)video.setAttribute('poster', dataURL);//设置为视频封面//document.getElementById('output').appendChild(canvas)可以放到页面上看看效果//document.getElementById('output').appendChild(video)});};     }
}//改一改，同样适应图片上传
if (el && el.target && el.target.files && el.target.files.length > 0) {// console.log(el)const files = el.target.files[0]const isLt2M = files.size / 1024 / 1024 < 2const size = files.size / 1024 / 1024// 判断上传文件的大小// if (!isLt2M) {//   alert('上传图片大小不能超过 2MB!')// } elseif (files.type.indexOf('image') === -1) { //如果不是图片格式alert('请选择图片文件')} else {const reader = new FileReader(); // 创建读取文件对象reader.readAsDataURL(el.target.files[0]); // 发起异步请求，读取文件reader.onload = function() { // 文件读取完成后// 读取完成后，将结果赋值给img的srcresolve(this.result)};}}

js上传视频并获取视频帧做为封面相关推荐

阿里云oss视频上传后,如何获取视频封面
前言:在阿里云oss视频上传后,我们如何获取视频封面呢?而不是通过上传方式获取封面.其实OSS本身提供了视频截帧功能 OSS提供的视频截帧功能和OSS图片服务功能使用的方式是类似的,都是通过传入x-o ...
js上传视频，预览视频
js上传视频,预览视频 <videostyle="width:300px; height:auto;object-fit: fill;"playsinlinecontrols ...
java实现MinIO文件上传，并将视频文件截图，将视频封面及视频通过MinIo上传到服务器中
java实现MinIO文件上传,并将视频文件截图,将视频封面及视频通过MinIo上传到服务器中配置完毕,接下来开始代码编写. 说明总过程分为两步. 1.配置MinIO的环境. 2.代码编写. 下面 ...
WebUpload 视频上传，支持多视频上传
在项目中使用了WebUpload视频上传,由于对WebUpload的配置参数上不是很了解,走了不少弯路,以下是整理出来的代码. 前台jsp页面只有通过iframe引入该文件即可. file_uplo ...
抖音怎么上传无损画质_抖音上传视频为什么会模糊？如何才能上传高清无损视频？...
抖音上传视频为什么会模糊?如何才能上传高清无损视频? 文章首发"公众号"[四爷课堂],专注分享短视频运营干货,关注可领取100G抖音运营资料,仅限50个名额. 四哥初入抖音的时候, ...
小程序wx.chooseImage和wx.chooseVideo 上传多张图片和视频
直接看代码拉,可直接赋值实现噢 <view class="upload" style="overflow:hidden;">// 展示上传的图片&l ...
服务器在线看视频无法播放,上传到服务器的视频不能在线播放怎么办？
原标题:上传到服务器的视频不能在线播放怎么办? 问题:我们在本地测试视频播放时,常常遇到这种情况,本地测试视频是可以正常播放的,但项目上传服务器后,视频就无法播放了,原因通常有以下几种,原因及解决方案 ...
好看视频上传软件批量发布视频讲解
好看视频上传软件批量发布视频讲解短视频具有哪些优势呢.短视频这么火极客思维小编粗略总结如下为什么短视频那么火形式互动短视频在形式上的互动性更强通常内容以故事为中心这类平台有完整且的编排和加工剪辑对每 ...
html限制视频上传大小,微信公众号怎么上传大视频？可以上传多大的视频？
原标题:微信公众号怎么上传大视频?可以上传多大的视频? 想在公众号文章中插入视频,但不知道公众号可以传多大的视频,这篇文章会给你答案,继续看下去吧~ 微信公众号视频大小限制多少当写公众号文章时,我们 ...
使用MATLAB读取视频并获取视频信息、分帧保存
题外话:初学MATLAB,是因为跟着老师做项目,与MATLAB机器学习相关,包含了智能信息处理,是从前未接触的领域.因此,想写博客来记录自己的学习进度.老师安排的第一次任务为:用MATLAB读取视频, ...

js上传视频并获取视频帧做为封面

js上传视频并获取视频帧做为封面相关推荐

最新文章

热门文章