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

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

news 2026/2/8 9:26:27

简言

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

效果

在这里插入图片描述

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

实现步骤

  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>

结果

相关文章：

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

简言 有的时候想截取视频某一秒的视频画面。 手动截取操作麻烦&#xff0c;还得时刻关注视频播放时间。 于是&#xff0c;我搞出来了一个根据视频自动截取特定时间描述的页面。 效果 实现步骤 获取视频对象根据视频时长生成时间选择表单根据表单选择的时间和视频地址&#x…...

编程日记 2023/10/17 9:06:40

第五十九章 学习常用技能 - 将数据从一个数据库移动到另一个数据库

文章目录 第五十九章 学习常用技能 - 将数据从一个数据库移动到另一个数据库 第五十九章 学习常用技能 - 将数据从一个数据库移动到另一个数据库 如果需要将数据从一个数据库移动到另一个数据库&#xff0c;请执行以下操作&#xff1a; 识别包含数据及其索引的Global。 如果…...

编程日记 2023/10/17 9:04:38

虚拟示波器的设计与实现

摘 要 针对传统示波器功能单一、不方便更新升级的缺陷&#xff0c;本文基于虚拟仪器软件LabVIEW和NI PCI-6221数据采集卡设计并实现了一种多功能虚拟示波器&#xff0c;该虚拟示波器不仅具有采集和显示实际信号时域波形的功能&#xff0c;还具有信号产生、波形存储等功能。 测试…...

编程日记 2023/10/17 9:01:34

ImgPlus：基于CodeFormer的图片增强

背景 最近参与了华为云开发者大会AI赛道&#xff0c;做了一个AI图片增强作品&#xff0c;本片文章来简单介绍一下。 正文 作品名称&#xff1a;ImgPlus 赛题技术领域选择&#xff1a; AI&#xff0c;图片增强 使用技术名称&#xff1a; CodeFormer&#xff0c;ECS&#xff0…...

编程日记 2023/10/17 8:58:32

2024华为校招面试真题汇总及其解答（二）

6.【算法题】三步问题 题目： 三步问题。有个小孩正在上楼梯，楼梯有n阶台阶，小孩一次可以上1阶、2阶或3阶。实现一种方法，计算小孩有多少种上楼梯的方式。结果可能很大，你需要对结果模1000000007。 示例1: 输入：n = 3 输出：4说明: 有四种走法示例2: 输入：n = 5输出：1…...

编程日记 2023/10/17 8:57:31

编译链接（Compile Link）

文章目录 前言一、翻译环境1、概念2、翻译环境的组成3、什么是编译链接&#xff1f; 二、编译1、编译的阶段2、预编译3、编译1、什么是语法分析&#xff1f;2、什么是词法分析&#xff1f;3、什么是语义分析&#xff1f;4、什么是符号汇总&#xff1f; 4、汇编1、符号表展示 三…...

编程日记 2023/10/17 8:56:30

14 幂等生产者和事务生产者

kafka消息交付可靠性保障和精确一次语义处理 消息交付可靠性保障&#xff0c;指的kafka对Producer和Consumer要处理的消息提供什么样的承诺。总共就三种&#xff1a;at most once 、at least once、axactly once kafka默认提供的是 at least once。原因是只有Broker提交消息并…...

编程日记 2023/10/17 8:55:29

zabbix部署与监控

目录 一、什么是zabbix&#xff1f; 二、zabbix 监控原理 三、Zabbix 新特性 三、Zabbix 功能组件 四、部署 zabbix zabbix的服务端部署 zabbix的客户端部署 zabbix的服务端部署 一、什么是zabbix&#xff1f; zabbix 是一个基于 Web 界面的提供分布式系统监视以及网络…...

编程日记 2023/10/17 8:54:28

Python 编程基础 | 第五章-类 | 5.8、运算符重载

一、运算符重载 1、Python类内置方法 Python常用内置方法&#xff0c;如下&#xff1a; __init__&#xff1a; 构造函数&#xff0c;在生成对象时调用__del__&#xff1a; 析构函数&#xff0c;释放对象时使用__repr__&#xff1a; 打印&#xff0c;转换__setitem__&#xff1…...

编程日记 2023/10/17 8:53:27

【前端设计模式】之解释器模式

解释器模式是一种行为设计模式&#xff0c;它用于解释特定语言或规则的表达式。在前端开发中&#xff0c;解释器模式可以用于处理复杂的逻辑或规则&#xff0c;并将其转化为可执行的代码。 解释器模式特性 定义语言规则&#xff1a;解释器模式通过定义语言规则来解析和执行表…...

编程日记 2023/10/17 8:52:24

TiDB 7.4 发版：正式兼容 MySQL 8.0

MySQL 是全球最受欢迎的开源数据库&#xff0c;长期位于 DB-Engines Ranking 排行榜第二名&#xff0c;在世界范围内拥有数量庞大的企业用户和开发者。然而&#xff0c;随着时间的推移&#xff0c;MySQL 用户正面临新挑战。Oracle 官宣将在 2023 年 10 月终止 MySQL 5.7 版本的…...

编程日记 2023/10/17 8:51:23

QT 网络编程 服务端 客户端 QTcpServer

服务端的创建 //创建服务端QTcpServer对象 server new QTcpServer(this);//设置服务端&#xff0c;端口&#xff0c;这里绑定的是主机的所有网卡&#xff0c; server->listen(QHostAddress::Any, 8080);//绑定连接信号与槽 connect(this->server, &QTcpServer::new…...

编程日记 2023/10/17 8:50:22

Stm32_标准库_16_串口蓝牙模块_手机与蓝牙模块通信_手机传入信息能对芯片时间日期进行更改

实现了手机发送信息给蓝牙模块&#xff0c;程序对数据进行分析拆解&#xff0c;并更新自身数据 main.c: #include "stm32f10x.h" // Device header #include "Delay.h" #include "OLED.h" #include "Serial.h" #include "Ti…...

编程日记 2023/10/17 8:49:21

137.【SpringCloud-快速搭建】

微服务框架搭建 (一)、SpringCloud-Parent1.创建一个SpringBoot项目2.导入我们的依赖 (二)、SpringCloud-API (实体类)1.创建一个SpringBoot项目2.导入我们的依赖3.创建我们的实体类 (三)、SpringCloud-dept (业务A)1.创建一个SpringBoot项目2.导入我们的依赖3.配置我们的配置信…...

编程日记 2023/10/17 8:48:20

计算机网络第2章-CDN（4）

视频流和内容分发网 HTTP流和DASH 在HTTP流中&#xff0c;视频只是存储在HTTP服务器中作为一个普通的文件&#xff0c;每个文件有有一个特定的URL。当用户要看视频时&#xff0c;客户与服务器之间创建一个TCP连接并发送HTTP GET请求。 HTTP流具有严重缺陷&#xff0c;即所有…...

编程日记 2023/10/17 8:47:18

Linux常见的指令合集

Linux指令合集 认识linuxlinux基础指令1.pwd 命令2. ls 命令3.cd 命令4. man 命令5. grep 命令6. ps 命令7. kill 命令8. netstat 命令9. date 查看当前系统时间10. echo 打印选项 -e linux文件操作指令1. mkdir 命令2. rmdir 命令3. touch 命令4. rm 命令5. mv 命令6. cp 命令…...

编程日记 2023/10/17 8:46:15

字符串_哈希

参考文章&#xff1a; E. Compress Words(字符串hash)_z听歌的小孩z的博客-CSDN博客 字符串哈希 - OI Wiki (oi-wiki.org) 板子&#xff1a; #include<bits/stdc.h> using namespace std; const int N2e450; typedef long long ll; const int mod1e97; typedef unsig…...

编程日记 2023/10/17 8:43:10

python 之enumerate()函数

文章目录 enumerate() 是 Python 中的一个内置函数&#xff0c;它用于在遍历可迭代对象&#xff08;如列表、元组、字符串等&#xff09;时同时获取每个元素的索引和值。这个函数非常有用&#xff0c;因为它允许您在迭代过程中轻松地访问元素的索引&#xff0c;而不需要手动维护…...

编程日记 2023/10/17 8:42:09

【LeetCode刷题（数据结构与算法）】：用队列实现栈

请你仅使用两个队列实现一个后入先出&#xff08;LIFO&#xff09;的栈&#xff0c;并支持普通栈的全部四种操作&#xff08;push、top、pop 和 empty&#xff09; 实现 MyStack 类&#xff1a; void push(int x) 将元素 x 压入栈顶 int pop() 移除并返回栈顶元素 int top() 返…...

编程日记 2023/10/17 8:41:07

“客户端到服务器的数据传递”和“服务器上的数据传递”这两种数据传递的方式的区别

“客户端到服务器的数据传递”和“服务器上的数据传递”这两种数据传递方式的主要区别如下&#xff1a; 数据的流动方向&#xff1a; 在“客户端到服务器的数据传递”中&#xff0c;数据是从客户端&#xff08;如浏览器&#xff09;流向服务器。在“服务器上的数据传递”中&…...

编程日记 2023/10/17 8:40:06

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2026/1/26 13:21:10

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2026/2/6 9:24:15

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2026/1/31 15:09:31

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2026/1/29 14:27:00

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2026/1/31 13:13:28

Sklearn 机器学习 缺失值处理 获取填充失值的统计值

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中，数据清…...

编程新知 2026/1/20 10:06:51

多元隐函数 偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式&#xff0c;给定一个隐函数关系&#xff1a; F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 &#x1f9e0; 目标&#xff1a; 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z​、 …...

编程新知 2025/9/19 5:31:38

32位寻址与64位寻址

32位寻址与64位寻址 32位寻址是什么&#xff1f; 32位寻址是指计算机的CPU、内存或总线系统使用32位二进制数来标识和访问内存中的存储单元&#xff08;地址&#xff09;&#xff0c;其核心含义与能力如下&#xff1a; 1. 核心定义 地址位宽&#xff1a;CPU或内存控制器用32位…...

编程新知 2025/9/26 20:18:15

RushDB开源程序 是现代应用程序和 AI 的即时数据库。建立在 Neo4j 之上

一、软件介绍 文末提供程序和源码下载 RushDB 改变了您处理图形数据的方式 — 不需要 Schema&#xff0c;不需要复杂的查询&#xff0c;只需推送数据即可。 二、Key Features ✨ 主要特点 Instant Setup: Be productive in seconds, not days 即时设置 &#xff1a;在几秒钟…...

编程新知 2026/2/5 4:20:19