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

JS获取页面中video标签视频的封面和时长

从HTML中提取Video信息

/***  从html字符串中提取video标签*  入参: {String} htmlString*  出参:{Array} 数组*/
function extractVideosFromHTML(htmlString) {const dom = new DOMParser().parseFromString(htmlString, 'text/html');const videos = Array.from(dom.querySelectorAll('video'));return videos.map(videoElement => videoElement.getAttribute('src'));
}

获取视频的第一帧作为视频封面

/*** 获取视频的第一帧* 入参:视频文件的url地址* 返回第一帧图片 */
function getFirstVideoFrame(videoUrl) {return new Promise((resolve, reject) => {const videoElement = document.createElement('video');videoElement.crossOrigin = 'anonymous';videoElement.muted = true; // 可选,静音视频防止音频自动播放问题videoElement.style.display = 'none'; // 隐藏视频元素document.body.appendChild(videoElement); // 添加到DOM中以便加载videoElement.addEventListener('loadedmetadata', () => {// 设置canvas大小与视频一致const canvas = document.createElement('canvas');canvas.width = videoElement.videoWidth;canvas.height = videoElement.videoHeight;const ctx = canvas.getContext('2d');videoElement.addEventListener('seeked', async () => {// 移动到视频开始位置并绘制第一帧ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);// 转换canvas内容为Data URLconst imageData = canvas.toDataURL('image/jpeg'); // 或'image/png'// 清理DOMdocument.body.removeChild(videoElement);resolve(imageData)});}, { once: true });// 快速跳转至视频开始处videoElement.currentTime = 0;});videoElement.onerror = (error) => {reject(error); // 如果加载视频出错,返回Promise的reject值};videoElement.src = videoUrl;});
}

获取视频的播放时长

/***  获取视频的时长*  入参:视频文件,file对象*  返回: 视频时长,单位为 秒*/
function getVideoDuration(file) {return new Promise((resolve, reject) => {        const fileReader = new FileReader();fileReader.onload = (event) => {const blob = new Blob([event.target.result], {type: file.type});const video = document.createElement('video');video.src = URL.createObjectURL(blob);video.onloadedmetadata = () => {resolve(video.duration);URL.revokeObjectURL(video.src);video.remove();};video.onerror = (err) => {URL.revokeObjectURL(video.src);video.remove()reject(err)}};fileReader.readAsArrayBuffer(file);});
}

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • ctfshow-命令执行
  • nacos 安装 centos7 docker
  • Pytorch深度学习快速入门笔记【小土堆】
  • Linux基础环境搭建(CentOS7)- 虚拟机准备_搭建hadoop能使用桥接模式吗
  • HTML5中`<area>`标签深入全面解析
  • HS光流法原理与实现
  • 在职研生活学习--20240907
  • Verilog FPGA 仿真 控制任务
  • 开发中ostringstream,格式化输出的问题
  • 7.测试用例设计方法 + Bug
  • 系统性能分析工具sysstat之sar命令以及nginx中打开gzip使用配置gzip_http_version值为1.0和1.1时遇到的结果乱码问题
  • 创游系列开心娱乐完整组件
  • Gmtracker_深度学习驱动的图匹配多目标跟踪项目启动与算法流程
  • 解锁精准电商营销新纪元:深度剖析京东商品详情API数据驱动的营销策略
  • 2024.9.10
  • 《网管员必读——网络组建》(第2版)电子课件下载
  • Android交互
  • iOS动画编程-View动画[ 1 ] 基础View动画
  • Lsb图片隐写
  • Sequelize 中文文档 v4 - Getting started - 入门
  • ubuntu 下nginx安装 并支持https协议
  • vue学习系列(二)vue-cli
  • 创建一个Struts2项目maven 方式
  • 第三十一到第三十三天:我是精明的小卖家(一)
  • 二维平面内的碰撞检测【一】
  • 番外篇1:在Windows环境下安装JDK
  • 关于字符编码你应该知道的事情
  • 记一次删除Git记录中的大文件的过程
  • 聊聊directory traversal attack
  • 三栏布局总结
  • 原生Ajax
  • 在Unity中实现一个简单的消息管理器
  • 国内唯一,阿里云入选全球区块链云服务报告,领先AWS、Google ...
  • 专访Pony.ai 楼天城:自动驾驶已经走过了“从0到1”,“规模”是行业的分水岭| 自动驾驶这十年 ...
  • ​软考-高级-系统架构设计师教程(清华第2版)【第12章 信息系统架构设计理论与实践(P420~465)-思维导图】​
  • #systemverilog# 之 event region 和 timeslot 仿真调度(十)高层次视角看仿真调度事件的发生
  • $(this) 和 this 关键字在 jQuery 中有何不同?
  • (14)Hive调优——合并小文件
  • (4)事件处理——(2)在页面加载的时候执行任务(Performing tasks on page load)...
  • (Demo分享)利用原生JavaScript-随机数-实现做一个烟花案例
  • (pycharm)安装python库函数Matplotlib步骤
  • (第三期)书生大模型实战营——InternVL(冷笑话大师)部署微调实践
  • (分享)一个图片添加水印的小demo的页面,可自定义样式
  • (附源码)计算机毕业设计SSM基于java的云顶博客系统
  • (正则)提取页面里的img标签
  • *1 计算机基础和操作系统基础及几大协议
  • .Net 6.0--通用帮助类--FileHelper
  • .NET Reactor简单使用教程
  • .NET 分布式技术比较
  • .NET 项目中发送电子邮件异步处理和错误机制的解决方案
  • .NET+WPF 桌面快速启动工具 GeekDesk
  • .Net程序帮助文档制作
  • .Net转Java自学之路—SpringMVC框架篇六(异常处理)
  • @SuppressWarnings注解
  • @transactional 方法执行完再commit_当@Transactional遇到@CacheEvict,你的代码是不是有bug!...