当前位置: 首页 > news >正文

js获取上传视频的封面第一帧

代码如下:粘贴到这个在线编辑器里,可以测试效果。

菜鸟教程在线编辑器 

<div><div style="flex: 1;border: 1px solid #999; position:relative;color: #333;background-color:#FFF2B8;"><span style="position: absolute;top:45%;left:45%;">点此选择文件</span><input id="a5" type="file" accept="video/*" style="opacity:0.5;width: 100%;height: 200px;"></div><br><div style="width: 70px;text-align: center;">预览:</div><div  id="b5" style="min-width: 300px;min-height: 300px;"></div></div><script>const a5=document.getElementById("a5");const b5=document.getElementById("b5");a5.onchange=(event)=>{if (!event) return;let fileList= event.target.files;if (fileList.length <= 0) return;let reader = new FileReader();reader.onload = function (event) {var listHtml = '<video id="video" style="display: none;" class="video" controls="controls">'+'<source src="'+event.target.result+'">'+'</video>'+'<div class="output"></div>';b5.innerHTML=listHtml;//创建画布var canvas = document.createElement('canvas')var video = document.getElementById("video");video.preload = true;video.autoplay = true;video.muted = true;video.setAttribute('crossOrigin', 'anonymous');//设置画布的宽和高,canvas.width = 800;canvas.height = 400;video.onloadeddata = (() => {canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)var dataURL = canvas.toDataURL('image/png')b5.innerHTML=`<img src="${dataURL}">`;// 删除掉不需要的video标签部分// b5.removeChild(video)})}reader.readAsDataURL(fileList[0]);}</script>

http://www.lryc.cn/news/101615.html

相关文章:

  • Nginx 高可用负载均衡(三种模式)
  • Linux tail命令
  • 【屏幕适配发展介绍 Objective-C语言】
  • linux中ls命令详解
  • 大盗阿福(记忆化搜索板子)
  • 打卡力扣题目八
  • matlab使用教程(5)—矩阵定义和基本运算
  • 用HTML写一个简单的静态购物网站
  • 如何在go中实现程序的优雅退出,go-kratos源码解析
  • Appium+python自动化(二十八)- 高级滑动(超详解)
  • github token使用方法
  • Spring属性注解对配置项名称的自动转换
  • Docker 安全 Docker HTTPS请求过程与配置
  • DevOps(三)
  • AOP的妙用
  • CAN转ETHERCAT网关将CAN 总线和 ETHERCAT 网络连接方法
  • 【大数据趋势】7月30日 汇率,恒指期货的大数据趋势概率分析。
  • mac使用mvn下载node-sass 会Binary download failed, trying source
  • 【C++】开源:Muduo网络库配置与使用
  • VCS ICO - Intelligent Coverage Optimization
  • 【分布式系统】分布式系统的8个谬误
  • tinkerCAD案例:25. 量角器 - 测量角度
  • Flutter 使用texture_rgba_renderer实现桌面端渲染视频
  • linux虚拟机开机后桌面显示CentOS-7.5-x86盘片文件,并且无法远程连接虚拟机?
  • 【Spring Boot 源码学习】走近 AutoConfigurationImportSelector
  • 系统学习Linux-MySQL数据库备份(四)
  • 具身智能controller---RT-1(Robotics Transformer)(中---实验介绍)
  • 无涯教程-jQuery - load( url, data, callback)方法函数
  • 【Shell】Shell编程之免交互
  • 从Vue2到Vue3【七】——Vue2中响应式原理的实现及其缺陷