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.mzph.cn/news/14468.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构基础知识、名词概述

1.1 基本概念和术语1.1.1 数据、 数据元素、 数据项和数据对象1.1.2 数据结构1.1.3 数据类型和抽象数据类型 1.2 抽象数据类型的表示与实现1.3 算法与算法分析&#xff08;1&#xff09;1.4 算法与算法分析&#xff08;2&#xff09;1.5 算法与算法分析&#xff08;3&#xff0…

pytest 自定义HOOK函数

除了系统提过的HOOK函数外&#xff0c;也可以通过自定义HOOK的方式实现想要的功能。 首先创建一个py文件&#xff0c;里面定义自己的HOOK函数&#xff0c;主要pytest里面的hook函数必须以pytest开头。 #myhook.pydef pytest_myhook(user):"""自定义HOOK函数&q…

LeetCode[面试题04.08]首个共同祖先

难度&#xff1a;Medium 题目&#xff1a; 设计并实现一个算法&#xff0c;找出二叉树中某两个节点的第一个共同祖先。不得将其他的节点存储在另外的数据结构中。注意&#xff1a;这不一定是二叉搜索树。 例如&#xff0c;给定如下二叉树: root [3,5,1,6,2,0,8,null,null,7,…

51单片机--AD/DA

AD/DA介绍 AD和DA是模拟信号和数字信号之间的转换过程。 AD&#xff0c;全称为模拟到数字&#xff08;Analog-to-Digital&#xff09;&#xff0c;指的是将模拟信号转换为数字信号的过程。在AD转换中&#xff0c;模拟信号经过采样、量化和编码等步骤&#xff0c;被转换为离散的…

C++ 中的关键字

&#x1f31f; C总计63个关键字&#xff0c;C语言32个关键字。 asmdoifreturntypedefautodoubleinlineshorttypeidbooldynamic_castintsignedtypenamebreakelselongsizeofunioncaseenummutablestaticunsignedcatchexplicitnamespacestatic_castusingcharexportnewstructvirtual…

缓存和数据库一致性问题分析

目录 1、数据不一致的原因 1.1 并发操作 1.2 非原子操作 1.3 数据库主从同步延迟 2、数据不一致的解决方案 2.1 并发操作 2.2 非原子操作 2.3 主从同步延迟 2.4 最终方案 3、不同场景下的特殊考虑 3.1 读多写少的场景 3.2 读少写多的场景 1、数据不一致的原因 导致…

深入理解C语言中的字符指针初始化与用法

字符指针初始化 - C 语言详解 目录 1. 介绍 2. 字符指针初始化的基础 3. 使用 const 关键字的字符指针初始化 4. C 语言与 C 在字符指针初始化的差异 5. 常见陷阱与最佳实践 6. 进阶概念&#xff1a;指针算术与动态内存分配 7. 字符串函数与字符指针 8. 结论介绍 在 C 语言中…

基于多设计模式下的同步异步⽇志系统

目录 1.项目介绍 2.整体框架设计 3.⽇志输出格式化类设计 4.⽇志落地(LogSink)类设计 5.⽇志器类(Logger)设计&#xff08;建造者模式&#xff09; 6.双缓冲区异步任务处理器&#xff08;AsyncLooper&#xff09;设计 7.⽇志宏&全局接⼝设计&#xff08;代理模式&am…

Python获取音视频时长

Python获取音视频时长 Python获取音视频时长1、安装插件2、获取音视频时长.py3、打包exe4、下载地址 Python获取音视频时长 1、安装插件 pip install moviepy -i https://pypi.tuna.tsinghua.edu.cn/simple2、获取音视频时长.py 上代码&#xff1a;获取音视频时长.py # -*-…

C语言基础入门详解三

前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂&#xff0c;风趣幽默"&#xff0c;感觉非常有意思,忍不住分享一下给大家。 &#x1f449;点击跳转到教程 一、C语言之函数指针 #include<stdio.h> #include<stdlib.h> /**函数指针 …

百度文心一言接入教程-Java版

原文链接 前言 前段时间由于种种原因我的AI BOT网站停运了数天&#xff0c;后来申请了百度的文心一言和阿里的通义千问开放接口&#xff0c;文心一言的接口很快就通过了&#xff0c;但是文心一言至今杳无音讯。文心一言通过审之后&#xff0c;很快将AI BOT的AI能力接入了文心…

uniapp使用echarts

uniapp使用echarts 1.下载资源包2.引入资源包3.代码示例注意事项 1.下载资源包 https://echarts.apache.org/zh/download.html 2.引入资源包 将资源包放入项目内 3.代码示例 <template><div style"width:100%;height:500rpx" id"line" ref&…

【网络】应用层——HTTP协议

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《网络》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; &#x1f3c0;认识HTTP协议 上篇文章中&#xff0c;本喵带着大家对HTTP有了一个初步的认识&#xff0…

使用Django自带的后台管理系统进行数据库管理的实例

Django自带的后台管理系统主要用来对数据库进行操作和管理。它是Django框架的一个强大功能&#xff0c;可以让你快速创建一个管理界面&#xff0c;用于管理你的应用程序的数据模型。 使用Django后台管理系统&#xff0c;你可以轻松地进行以下操作&#xff1a; 数据库管理&…

打羽毛球也能和C++有关联?C++高级应用程序示例,帮助你在计算机上“打羽毛球”

哇哦&#xff01;打羽毛球也能和C有关联&#xff1f;这就让我给你展示一个高级的C应用程序示例&#xff0c;来帮助你在计算机上“打羽毛球”吧&#xff01; 首先我们需要创建一个名为“BadmintonGame”的类&#xff0c;它将代表整个羽毛球比赛。该类将包含以下成员变量和成员函…

动态SQL 语句-更复杂的查询业务需求也能轻松拿捏

文章目录 动态SQL 语句-更复杂的查询业务需求动态SQL-官方文档为什么需要动态SQL动态SQL-基本介绍基本介绍动态SQL 必要性解决方案分析 动态SQL 常用标签动态SQL-案例演示if 标签应用实例where 标签应用实例choose/when/otherwise 应用实例forEach 标签应用实例trim 标签应用实…

电脑重启后VScode快捷方式失效,找不到Code.exe

问题描述 下班回家关了部分程序就直接关机了&#xff0c;回家后重启电脑发现vscode的快捷方式就失效了&#xff0c;提示Code.exe已被移动或删除。 解决方法 查看你的vscode安装目录&#xff0c;Microsoft VS Code目录下大概率会存在一个名为_的文件夹&#xff0c;然后会发现…

【公益】Q学友联合福田人力资源局开展“侨香社区促就业 技能培训强本领”

落实《“十四五”就业促进规划》文件精神&#xff0c;进一步提高就业劳动者就业技能水平&#xff0c;提高居民就业率&#xff0c;侨香社区党委坚持以党建为引领&#xff0c;整合多方资源&#xff0c;深入开展“我为群众办实事”&#xff0c;切合群众实际、满足群众需求&#xf…

深度学习技巧应用24-深度学习手撕代码与训练流程的联系记忆方法

大家好,我是微学AI,今天给大家介绍一下深度学习技巧应用24-深度学习手撕代码与训练流程的联系记忆方法,大家都知道深度学习模型训练过程是个复杂的过程,这个过程包括数据的收集,数据的处理,模型的搭建,优化器的选择,损失函数的选择,模型训练,模型评估等步骤,其中缺少…

Tomcat注册为Windows服务

要将Tomcat注册为Windows服务&#xff0c;可以使用Tomcat提供的实用工具service.bat。以下是注册和配置Tomcat作为Windows服务的步骤&#xff1a; 打开命令提示符&#xff08;Command Prompt&#xff09;或 PowerShell&#xff0c;然后进入Tomcat安装目录的"bin"文件…