vue实现mp4视频截图

需求：按帧数(时间)截取图片

/*** @description : 视频截图* @param {String} url : 视频地址* @param {Number} currentTime : 视频帧数* @param {download} hasDownload : 是否下载* @result : 返回base64，打开下载则下载*/
export function videoSnapshot(url, currentTime = 1, hasDownload = true) {return new Promise((resolve, reject) => {const canvas = document.createElement('canvas') //  创建canvas 用来截图const video = document.createElement('video') //  创建video 用来存放被截图的视频video.setAttribute('crossOrigin', 'anonymous') //  支持跨域document.body.appendChild(video) //  把视频插入页面里video.style.visibility = 'hidden' //  视频不显示video.setAttribute('src', url) //  设置video路径// 监听视频播放video.onplay = function() {// 暂停video.pause()// 指定播放时间 视频播放的当前位置（以秒计）video.currentTime = currentTime// 设置视频容器的宽高播放 如果设置一项会自动按照比例生成  这里是高固定,宽自动video.height = video.clientHeight// 设置canvas的截图大小,如果没给定宽高值会取视频容器的宽高canvas.width = video.clientWidthcanvas.height = video.height/*  使用定时器为了视频跳转到某一帧的时候视频进行缓冲,等视频加载完成之后进行截图如果截图是黑屏说明视频未加载完成就开始截屏了*/setTimeout(() => {//  使用canvas进行绘画 视频画面canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)let b64 = canvas.toDataURL('image/png')if(hasDownload) {let link = document.createElement('a')link.href = b64link.setAttribute('download', '视频截图.png')link.style.display = 'none'document.body.appendChild(link)link.click()}resolve(b64)document.body.removeChild(video)}, 1000)}// 当视频准备就绪的时候 video.onloadeddata = () => {// 播放它video.play()}})
}

vue实现mp4视频截图相关推荐

vue前端video视频截图与录影功能的简单实现
目录截图:截取图片后可以进行涂鸦编辑,并能清除,撤销. 录影:点击按钮后录制10s左右的视频文件. 文件上传服务器示例最近项目开发中,需要实现在video 视频上截图,录影后将文件上传到阿里云服务 ...
基于Vue+canvas实现视频截图功能
开发过程中遇到一个实际问题,上传的视频需要提供视频封面(视频封面必填).封面可以自己制作并上传,但是这样需要脱离网站,用其他方式制作封面,使用体验并不友好,因此第一个想到的方案是:上传视频时,若人员未 ...
多文件断点续传，上传视频自动转MP4和截图，图片格式转换
功能:自己写的一个组件,根据调用传过来的的fileType判断是上传视频还是图片还是音频.可以选择多文件上传,同时也可以暂停,继续,取消,断网重连续传.如果上传的是视频,会自动转为mp4,自动截取一帧 ...
vue实现视频截图（webRTC、屏幕快照）笔记
使用到的第三方库 canvas,html2canvas,kscreenshot 代码 //安装插件 npm install kscreenshot //在截图的页面引入 import kscreens ...
js截屏 video_canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频在使用canvas制作这个截图功能时,首先必须保证页面上 ...
js截屏 video_用原生JS和html5进行视频截图并保存到本地
Video视频截图 body, h1, h2, p { margin:0; padding:0; } html { font-family:"微软雅黑"; background-c ...
[html] H5播放的video视频，如何实现对视频截图？
[html] H5播放的video视频,如何实现对视频截图? <video controls src="./assets/demo.mp4" width="400& ...
ffmpeg 截图 java_Java Web 中使用ffmpeg实现视频转码、视频截图
视频网站中提供的在线视频播放功能,播放的都是FLV格式的文件,它是Flash动画文件,可通过Flash制作的播放器来播放该文件.项目中用制作的player.swf播放器. 多媒体视频处理工具FFmpe ...
【Javascript】【视频录制】通过video标签和canvas实现视频截图录制和下载
录像原理创建一个画布,video标签本身不具备记录画面功能,所以我们需要通过Canvas来达成这个功能创建一个录制器,与CanvasStream绑定,这样画布绘制什么,录制器都能触发回调创建一个 ...

vue实现mp4视频截图

vue实现mp4视频截图

vue实现mp4视频截图相关推荐

最新文章

热门文章