上传视频获取视频第一帧做为封面前端js

重点1：URL.createObjectURL(file|blob)
URL.createObjectURL(file|blob)：返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放。
重点2：canvas

getVideoCover(file){const url = URL.createObjectURL(file)let dataURL = ''const video = document.createElement("video")video.setAttribute('crossOrigin', 'anonymous')video.setAttribute('src', url)video.setAttribute('width', 400)video.setAttribute('height', 'auto')video.setAttribute('preload', 'auto')video.addEventListener('loadeddata', ()=> {const canvas = document.createElement("canvas")const width = video.videoWidth const height = video.videoHeightcanvas.width = widthcanvas.height = heightcanvas.getContext("2d").drawImage(video, 0, 0, width, height) dataURL = canvas.toDataURL('image/jpeg')const blob = that.base64ToBlob(dataURL)const coverUrl = blob ? URL.createObjectURL(blob) : ''console.log("coverUrl",coverUrl )})}

上传视频获取视频第一帧做为封面前端js相关推荐

SSM根据上传文件获取视频文件时长
一.编写前端上传文件代码 <html> <head><title>file upload</title> </head> <body& ...
vue 获取上传视频的第一帧做为视频封面
上一篇文章记录了vue上传视频,接下来,需要在上传成功后截取视频第一帧做为视频封面. 截取视频第一帧具体实现如下: <template><div><div v-if=& ...
Java代码实现上传视频获取视频某一帧作为截图封面(二)
上一个文章讲了Java代码实现上传视频获取视频某一帧作为截图封面的一种方法,现在讲述第二种方法.为什么要在这里讲这种方法呢?第一.这种方法生成的图片占用的空间更小第二.这种方法可以获取很多信息一.根 ...
上传时获取video视频时长
本来开心的划水摸鱼,然后一个后端的卧龙过来跟我说上传需要把视频时长传递他,我当时第一反应就是你能获取吗? 然后就被告知不好获取,好吧那就只能自己写咯,整体就是在页面中创建一个video 的dom 节点 ...
腾讯视频下载转mp4_腾讯视频如何上传自己的视频
今天小编给广大用户分享腾讯视频下载转mp4_腾讯视频如何上传自己的视频.现在小视频.Vlog正发展地如火如荼,这是一个人人都能做自媒体,人人都能输出内容的时代,腾讯视频也是其中的一个平台.这篇经验就来 ...
vue-element上传视频并预览、上传多个视频+laravel8后台（larke-admin）
上传单个视频 1.vue中注意:BASE_API就是后台api的地址,token自己设置,也可以删除,看后台需要 <el-upload class="avatar-uploader& ...
vue上传大文件/视频前后端（java）代码
vue上传大文件/视频前后端(java)代码一.上传组件二.后端java代码注意: 一.上传组件 <template><div>&l ...
预计每天全世界上传的短视频超过4亿条
我是卢松松,点点上面的头像,欢迎关注我哦! 今天写的不是新闻,是对我做短视频这一年以来的感悟: 2017年的时候看新闻报道,每天就有2000万条短视频了,现在据@梁博透露:现在应该每天上传的短视频有8 ...
几行命令实现日常任务的自动化执行，包括解析html、扫描二维码、语音转换、pdf编辑、程序员问题搜索、自动化手机、监控cpu、上传机器人、视频水印等
几行命令实现日常任务的自动化执行,包括解析html.扫描二维码.语音转换.pdf编辑.程序员问题搜索.自动化手机.监控cpu.上传机器人.视频水印等. 01.解析和提取 HTML 02.二维码扫描仪 ...
HTML5 单个或者多个Video标签视频加载第一帧方法（poster属性）
最近在做这个前端视频加载第一帧的功能,查了很多资料基本上有两种思路: 一.canvas画图取base64格式编码设置poster属性的方法: 二.给定图片设置在视频上方,点击图片隐藏起来,视频追加播放 ...

上传视频获取视频第一帧做为封面前端js

上传视频获取视频第一帧做为封面前端js

上传视频获取视频第一帧做为封面前端js相关推荐

最新文章

热门文章

上传视频 获取视频第一帧 做为封面 前端js

上传视频 获取视频第一帧 做为封面 前端js

上传视频 获取视频第一帧 做为封面 前端js相关推荐

最新文章

热门文章

上传视频获取视频第一帧做为封面前端js

上传视频获取视频第一帧做为封面前端js

上传视频获取视频第一帧做为封面前端js相关推荐