纯前端播放文件流视频并预览并截取视频第一帧

1、把文件流转为本地可以播放地址

调用getFileURL并传入文件流会返回一个地址，将地址赋值给video的src即可播放视频，无需上传至服务器。

getFileURL(file) {var url = null;if (window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);} else if (window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) { // webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;
},

2、截取视频第一帧

调用getVideoBase64并将第一步得到的url转给getVideoBase64即可得到视频第一帧图片，getVideoBase64返回的片为base64格式。

注释：canvas.toDataURL(type, encoderOptions)中type为图片格式，encoderOptions为图片质量（取值为0-1），图片格式为png图片相对会大一些，如果图片为jpeg那么图片相对会小很多，图片为jpeg转换成base64长度会小很多，当然图片质量越小base64长度也会越小。

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', 222);video.setAttribute('height', 148);video.setAttribute('controls', 'controls');video.currentTime = 1  //视频时长，一定要设置，不然大概率白屏video.addEventListener('loadeddata', function(e) {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',0.3); //转换为base64var img = document.createElement("img");img.src = dataURLvideo.setAttribute('poster', dataURL);resolve(dataURL);});})
}

纯前端播放文件流视频并预览并截取视频第一帧相关推荐

Vue中实现文件流格式图片预览
需求:后端接口返回文档流格式图片,如何在页面中显示显示并预览? 思路: 设置 axios responseType: 'blob':传送门:JavaScript Blob 对象详解 URL.creat ...
前端pdf文件在浏览器不预览直接下载的方法
1.先可以看我另篇文章 https://www.cnblogs.com/mo3408/p/12659393.html 2.如果没有合适的再看下面(通过jquery或者js,利用download这个属性 ...
纯前端下载pdf链接文件,而不是打开预览的解决方案
纯前端下载pdf链接文件,而不是打开预览的解决方案参考文章: (1)纯前端下载pdf链接文件,而不是打开预览的解决方案 (2)https://www.cnblogs.com/jackson-yqj/ ...
SpringBoot+Vue+Itext实现前端请求文件流的方式导出PDF时在指定位置添加照片
场景 SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF: SpringBoot+Vue+Itext实现前端请求文件流的方式下载PDF_BADAO_LIUMANG_QIZHI的 ...
怎么关闭计算机右侧的硬盘预览,选择性关闭视频文件预览给Win7硬盘CPU减压
Win7之家( www.win7china.com):选择性关闭视频文件预览给Win7硬盘CPU减压很多朋友的硬盘里面保存了大量的图片和电影,图片的格式基本就是jpg为主,但视频文件可就多了去了. ...
JS纯前端实现文件保存
JS纯前端实现文件保存 <body><a href="" id="a">click here to download your file ...
JavaCV音视频开发宝典：使用JavaCV读取海康平台或海康网络摄像头sdk回调视频TS码流并解析预览图像
<JavaCV音视频开发宝典>专栏目录导航 <JavaCV音视频开发宝典>专栏介绍和目录前言两年前博主写了如何利用JavaCV解析各种h264裸流,<JavaCV ...
android ffmpeg 仿剪映播放器剪辑视频预览条快速精准抽帧
android ffmpeg 仿剪映播放器剪辑视频预览条快速精准抽帧由于本人想学习音视频相关的东西,所以找了剪映作为借鉴,通过仿照剪映的功能学习音视频相关的东西,所以有了这个项目暂时这个项目 ...
JavaCV音视频开发宝典：使用JavaCV读取海康平台或海康网络摄像头sdk回调录像回放视频PS码流并解析预览图像
<JavaCV音视频开发宝典>专栏目录导航 <JavaCV音视频开发宝典>专栏介绍和目录前言上一章中<JavaCV音视频开发宝典:使用JavaCV读取海康平台或海 ...
文件文档在线预览开源项目kkFileView的使用
文件文档在线预览开源项目kkFileView的使用 1.项目特性 2.部署过程 2.1 二进制下载部署文件进行部署 2.2 docker方式部署 2.3 通过源代码编绎部署 3.部分配置说明 3.1 ...

纯前端播放文件流视频并预览并截取视频第一帧

纯前端播放文件流视频并预览并截取视频第一帧

1、把文件流转为本地可以播放地址

2、截取视频第一帧

纯前端播放文件流视频并预览并截取视频第一帧相关推荐

最新文章

热门文章