【html】利用生成器函数和video元素,取出指定时间的视频画面

简言

有的时候想截取视频某一秒的视频画面。
手动截取操作麻烦,还得时刻关注视频播放时间。
于是,我搞出来了一个根据视频自动截取特定时间描述的页面。

效果

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

实现步骤

  1. 获取视频对象
  2. 根据视频时长生成时间选择表单
  3. 根据表单选择的时间和视频地址,利用canvas和vido元素生成某一帧的视频画面图片
  4. 图片实现下载

源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>处理视频</title><style>.container {margin: 50px;}</style>
</head><body><div class="container"><div class="upload__box"><input id="upVideo" name="upVideo" type="file" accept="video/*" placeholder="上传视频" /></div><div class="video__box"><video width="800" height="450" id="video" src="" controls></video></div><div class="select__box"></div><div class="analyze__text"><ul></ul></div></div><script>const upVideoDom = document.getElementById("upVideo")const videoDom = document.getElementById('video')const selectBoxDom = document.querySelector('.select__box')const TextListDom = document.querySelector('.analyze__text')upVideoDom.addEventListener("change", (e) => {const file = e.target.files[0];let videoURL = URL.createObjectURL(file)videoDom.src = videoURLvideoDom.onloadedmetadata = (e) => {//  视频时长let videoDuration = e.target.durationcreateTimeSelectDom(videoDuration)}})//  根据时长创建dom选择器function createTimeSelectDom(duration) {//  生成可选秒数列表let fragDom = document.createDocumentFragment()let form = document.createElement("form")form.id = 'selectForm'form.name = 'selectForm'if (duration < 60) {let selectDom = document.createElement("select")selectDom.multiple = trueselectDom.form = "selectForm"selectDom.name = "seconds"let optionDom = document.createElement("option")optionDom.innerText = '--选择秒数--'optionDom.value = ''selectDom.appendChild(optionDom)for (let i = 0; i < duration; i++) {let item = i.toString().padStart(2, '0')let optionDom = document.createElement("option")optionDom.innerText = itemoptionDom.value = itemselectDom.appendChild(optionDom)}form.appendChild(selectDom)} else if (duration < 3600) {let minute = duration / 60let seconds = duration % 60let miuteSelectDom = document.createElement("select")miuteSelectDom.form = "selectForm"miuteSelectDom.name = "mintue"let optionDom = document.createElement("option")optionDom.innerText = '--选择分--'optionDom.value = ''miuteSelectDom.appendChild(optionDom)for (let i = 0; i < minute; i++) {let item = i.toString().padStart(2, '0')let optionDom = document.createElement("option")optionDom.innerText = itemoptionDom.value = itemmiuteSelectDom.appendChild(optionDom)}let secondsSelectDom = document.createElement("select")secondsSelectDom.multiple = truesecondsSelectDom.form = "selectForm"secondsSelectDom.name = "seconds"let optionDom2 = document.createElement("option")optionDom2.innerText = '--选择秒数--'optionDom2.value = ''secondsSelectDom.appendChild(optionDom2)for (let i = 0; i < 59; i++) {let item = i.toString().padStart(2, '0')let optionDom = document.createElement("option")optionDom.innerText = itemoptionDom.value = itemsecondsSelectDom.appendChild(optionDom)}form.appendChild(miuteSelectDom)form.appendChild(secondsSelectDom)} else {}let submitInput = document.createElement("input")submitInput.type = 'submit'submitInput.value = '确定'form.onsubmit = formSubmitform.appendChild(submitInput)let resetInput = document.createElement("input")resetInput.type = 'reset'resetInput.value = '重置'form.appendChild(resetInput)fragDom.appendChild(form)selectBoxDom.appendChild(fragDom)}function formSubmit(e) {e.preventDefault()let mintueV = '00'if (selectForm.mintue) {mintueV = selectForm.mintue.value}let timeList = []for (let v of selectForm.seconds.options) {if (v.selected) {timeList.push(`${mintueV}:${v.value}`)}}//  生成帧图片TextListDom.children[0].innerHTML = ''createFramepicture({url: videoDom.src, timeList})}//  生成帧图片列表function createFramepicture({ url, timeList, }) {if (!url || !timeList) returnlet time;const video = document.createElement('video')video.width = 160video.height = 90video.crossorigin = "anonymous"video.src = urllet canvas = document.createElement("canvas"),width = video.width,height = video.height;canvas.width = widthcanvas.height = heightfunction* createTime() {for (let k = 0; k < timeList.length; k++) {time = timeList[k]let timeArr = time.split(':')let currentTime = Number(timeArr[0]) * 60 + Number(timeArr[1])video.currentTime = currentTime //  会导致 oncanplaythrough重新触发yield true}}let a = createTime()video.oncanplaythrough = () => {if (time) {//  当time存在时再渲染,避开video第一次加载成功analyzeVideo(video, time, canvas)}a.next()}}function analyzeVideo(video, time, canvas) {const ctx = canvas.getContext('2d')// ctx.clearRect(0, 0, video.width, video.height)ctx.drawImage(video, 0, 0, video.width, video.height);let dataURL = canvas.toDataURL("image/png")let li = document.createElement('li')let img = document.createElement('img')img.src = dataURLlet p = document.createElement('p')p.innerText = `${time}`let btn = document.createElement('button')btn.innerText = '下载'btn.onclick = () => {downloadImg(dataURL, time)}li.appendChild(p)li.appendChild(img)li.appendChild(btn)const fragDom = document.createDocumentFragment()fragDom.appendChild(li)TextListDom.children[0].appendChild(fragDom)}function downloadImg(src, time) {let a = document.createElement('a')a.href = srca.download = `frame picture`a.click()}</script>
</body></html>

结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/108843.shtml

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

相关文章

【数据仓库】hadoop生态圈与数据仓库

文章目录 1.大数据定义2. Hadoop与数据仓库3. 关系数据库的可扩展性瓶颈4. CAP理论5. Hadoop数据仓库工具5.1. RDS和TDS5.2. 抽取过程5.3. 转换与装载过程5.4. 过程管理和自动化调度5.5&#xff0e;数据目录&#xff08;或者称为元数据管理&#xff09;5.6&#xff0e;查询引擎…

9中间件-Redis、MQ---进阶

mq进阶 RabbitMQ 怎么避免消息丢失&#xff1f; 把消息持久化磁盘&#xff0c;保证服务器重启消息不丢失。 每个集群中至少有一个物理磁盘&#xff0c;保证消息落入磁盘。#RabbitMQ 的消息是怎么发送的&#xff1f; 首先客户端必须连接到 RabbitMQ 服务器才能发布和消费消息&…

笙默考试管理系统-MyExamTest----codemirror(33)

笙默考试管理系统-MyExamTest----codemirror&#xff08;33&#xff09; 目录 一、 笙默考试管理系统-MyExamTest 二、 笙默考试管理系统-MyExamTest 三、 笙默考试管理系统-MyExamTest 四、 笙默考试管理系统-MyExamTest 五、 笙默考试管理系统-MyExamTest 笙默考试…

数仓建设(三)

4) 累积快照事实表 多个业务过程联合分析而构建的事实表&#xff0c;如采购单的流转环节。用于分析事件时间和时间之间的间隔周期。少量的且当前事务型不支持的&#xff0c;如关闭、发货等相关的统计。 4. DWS公共汇总层设计规范 数据仓库的性能是数据仓库建设是否成功的重要标…

PA2019 Terytoria

洛谷P5987 [PA2019] Terytoria 题目大意 在一个平面直角坐标系上&#xff0c;有一个长度为 X X X&#xff0c;宽度为 Y Y Y的地图&#xff0c;这个地图的左边界和右边界是连通的&#xff0c;下边界和上边界也是连通的。 在地图中&#xff0c;有 X Y X\times Y XY个格子以及…

【vue2高德地图api】03-完善展示页,并且调用poi搜索接口

系列文章目录 文章目录 系列文章目录前言一、编写页面内容样式1.1 html内容1.2 css内容解决报错 二、完善api接口变量方法1.data变量2. methods3. computed4. api接口方法 三、配置api接口方法创建map.jsgetParkList方法 移动端控制台插件四、编写components组件在main.js中引入…

算启新程 智享未来 | 紫光展锐携手中国移动共创数智未来

10月11日-13日&#xff0c;2023年中国移动全球合作伙伴大会在广州举行&#xff0c;此次大会以“算启新程 智享未来”为主题&#xff0c;与合作伙伴一起共商融合创新&#xff0c;共创数智未来。作为中国移动每年规模最大、最具影响力的盛会&#xff0c;吸引了数百家世界500强企业…

[机缘参悟-110] :一个IT人对面具的理解:职业面具戴久了,就会忘记原本真实的自己,一个人是忠于职位,还是忠于内心?

目录 一、职业面具戴久了&#xff0c;就会忘记原本真实的自己 二、霸王别姬 三、没有对错&#xff0c;各走各路 3.1 程蝶衣&#xff1a;戏里戏外&#xff0c;忠于角色 3.2 段小楼&#xff1a;戏里戏外&#xff0c;角色分明 3.3 没有对错&#xff0c;各走各路 四、职场中…

视口 css

视口是浏览器上显示网页的一块区域&#xff0c;大小并不局限于浏览器可视区域范围。PC端和移动端视口差别很大。PC端中视口宽度始终与浏览器窗口宽度一致&#xff0c;移动端视口与浏览器窗口宽度完全独立。 PC端 PC端视口大小等于浏览器窗口可视区域大小&#xff0c;无论浏览…

集准测试-架构真题(五十六)

如果数据库单标即可实现业务功能&#xff0c;采用&#xff08;&#xff09;方式进行数据交换与处理较为合适。如果通过数据库不同表的连接操作获取数据才能实现业务功能&#xff0c;这时候采用&#xff08;&#xff09;方式进行数据交换与处理合适。 主动记录数据网关包装器数…

RabbitMQ的LazyQueue

在默认情况下&#xff0c;RabbitMQ会将接收到的信息保存在内存中以降低消息收发的延迟。但在某些特殊情况下&#xff0c;这会导致消息积压&#xff0c;比如&#xff1a; 消费者宕机或出现网络故障消息发送量激增&#xff0c;超过了消费者处理速度消费者处理业务发生阻塞 一旦…

PyQt 小程序

设备管理程序 v0.0.1.0, 终于出了一个基础版本,… … 两个字典的键值判断 辛亏用的是Python 这个编码时间大大缩短了 对已有的命令行进行GUI 化 from typing import Optional import PySide6.QtCore import PySide6.QtWidgets from cmd_ui import Ui_MainWindow from PySide6.…

Qt 视口和窗口的区别

视口和窗口 绘图设备的物理坐标是基本的坐标系&#xff0c;通过QPainter的平移、旋转等变换可以得到更容易操作的逻辑坐标 为了实现更方便的坐标&#xff0c;QPainter还提供了视口(Viewport)和窗口(Window)坐标系&#xff0c;通过QPainter内部的坐标变换矩阵自动转换为绘图设…

Vue2使用定时器和闭包实现防抖和节流函数。将函数放入util.js中,供具体功能在methods中调用

Vue2使用定时器和闭包实现防抖和节流函数。将函数放入util.js中&#xff0c;供具体功能在methods中调用。<br/ 参考文档&#xff1a; 如何在Vue中优雅的使用防抖节流人类高质量JS防抖与节流机制Vue项目中使用防抖和节流vue2使用lodash中的防抖&#xff08;debounce&#xff…

小程序首页搭建

小程序首页搭建 1. Flex布局是什么&#xff1f;2. 容器的属性2.1 flex-direction属性2.2 flex-wrap属性2.3 flex-flow属性2.4 justify-content属性2.5 align-items属性2.6 align-content属性 二.首页布局搭建二.1moke模拟数据实现轮播图4.信息搭建 Flex弹性布局 1. Flex布局是…

未来展望:大型语言模型与 SQL 数据库集成的前景与挑战

一、前言 随着 GPT-3、PaLM 和 Anthropic 的 Claude 等大型语言模型 (LLM) 的出现引发了自然语言在人工智能领域的一场革命。这些模型可以理解复杂的语言、推理概念并生成连贯的文本。这使得各种应用程序都能够使用对话界面。然而&#xff0c;绝大多数企业数据都存储在结构化 …

我的创作纪念日———C/C++之动态内存管理

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言程序设计————KTV C语言小游戏 C语言进阶 C语言刷题 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力&#xff0c;一起奔赴大厂。 目录 1.前言 2.为什么要有动态内存分配…

NSS [NISACTF 2022]easyssrf

NSS [NISACTF 2022]easyssrf 先看题目&#xff0c;给了一个输入框 看这提示就知道不是curl了&#xff0c;先file协议读一下flag&#xff0c;file:///flag 不能直接读flag&#xff0c;读个提示文件file:///fl4g 访问一下 <?phphighlight_file(__FILE__); error_reporting(0…

python每日一练(9)

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…

mybatisplus 自定义mapper加多表联查结合分页插件查询时出现缺失数据的问题

问题描述 最近做项目时使用了mybatisplus&#xff0c;分页插件也使用的是mybatisplus自带的分页插件&#xff0c;业务需求是查询客户列表&#xff0c;每个客户列表中有一个子列表&#xff0c;在通过分页插件查询后&#xff0c;会出现数量总数为子列表总数、客户列表与子列表不…