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

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

news 2026/2/3 6:21:26

简言

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

效果

在这里插入图片描述

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

实现步骤

  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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/2/1 9:15:18

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2026/2/2 10:18:58

解锁数据库简洁之道：FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

编程新知 2025/8/13 16:42:24

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/10/5 8:09:39

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2026/2/1 13:28:03

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控，故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

编程新知 2026/1/15 1:34:10

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/11/8 16:42:13

人机融合智能 | “人智交互”跨学科新领域

本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...

编程新知 2026/1/25 13:33:35

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

编程新知 2025/9/19 22:12:36

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

编程新知 2025/10/12 2:03:36