是否可以仅使用html5和js剪切部分视频并将其上传到服务器

2024-04-23

我使用 Filereader 读取本地视频文件(mp4),因此我可以将其显示在视频标签中。

我需要剪切 mp4 文件的一部分(即从 5 到 10 秒)并将其上传到服务器上。

我当前的解决方案:我使用“from”和“to”参数将整个视频文件上传到服务器上,在服务器上使用 ffmpeg 剪切它,上传到 s3 并返回 url 视频。

也许只能用 JS/HTML 才能实现?我找到了 Blob.slice 方法,但我不知道如何使用它来剪切视频部分。

Thanks!


mp4 视频文件由“原子”组成,就像文件中的信息或数据块。

它们包含有关电影中曲目的标题和元数据(音频、视频、字幕等)以及媒体数据本身。

这些概念很简单,但是当您查看一个 mp4 文件时,它会非常复杂 - 苹果开发人员网站上有一个很好的示例(https://developer.apple.com/library/content/documentation/QuickTime/RM/Fundamentals/QTOverview/QTOverview_Document/QuickTimeOverview.html https://developer.apple.com/library/content/documentation/QuickTime/RM/Fundamentals/QTOverview/QTOverview_Document/QuickTimeOverview.html):

如果您通过简单地从文件中的某个点到其他点获取字节来获取 mp4 文件的“切片”,您可以看到您将丢失标头信息等,具体取决于您从哪里开始,并且也很可能从“原子”的中间。

当您想要剪切部分视频时,像 ffmpeg 这样的工具可以完成提取和重组文件的艰苦工作。

有些项目在 Bowser 中运行 ffmpeg,但我不确定它们的实用性或采用程度如何 - 无论如何,这个项目似乎很受欢迎:

  • https://github.com/bgrins/videoconverter.js https://github.com/bgrins/videoconverter.js

2023 年 2 月更新

Web 汇编语言使浏览器中的计算密集型操作变得更加可行。下面的 ffmpeg WASM 项目使用 WASM 在浏览器中实现 ffmpeg,根据我的经验,它运行良好。

  • https://github.com/ffmpegwasm/ffmpeg.wasm https://github.com/ffmpegwasm/ffmpeg.wasm

您确实需要意识到 SharedArrayBuffer 支持的必要性:

只有支持 SharedArrayBuffer 的浏览器才能使用 ffmpeg.wasm,您可以在此处查看完整列表。

上面提到的链接在这里:https://caniuse.com/sharedarraybuffer https://caniuse.com/sharedarraybuffer

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

是否可以仅使用html5和js剪切部分视频并将其上传到服务器 的相关文章

  • 如何为 Safari 浏览器设置媒体查询

    media only screen and min width 480px and max width 767px 这是我的媒体查询如何修复它 如何设置 safari 网络浏览器 媒体查询不是为了浏览器检测而进行的 使用 javascrip
  • Javascript:使用箭头键导航表格输入

    我正在为客户制作 HTML 成绩册 我使用 PHP 生成成绩册 然后输出一个 HTML 表 如下例所示 每个 td 包含一个带有 td
  • Angular 2 - 检查图像 URL 是否有效或损坏

    我正在从 API 获取大量图像 URL 并将它们显示在 Angular 2 Web 应用程序中 有些 URL 已损坏 我想用本地存储在我的网络服务器上的默认图片替换它们 有人建议如何测试 url 并在状态代码 404 的情况下替换损坏的图像
  • 有没有办法检测 Alt 键被按在哪一侧(右或左)?

    Is there a way that we can detect which side the Alt key was pressed on i e distinguish between left or right Alt I saw
  • Excel 到 JSON 的 JavaScript 代码?

    我想将excel表格数据转换为json 它必须是动态的 因此有一个上传按钮 用户可以在其中上传 Excel 工作表 然后将数据转换为 json 您能给我提供 javascript 代码吗 我尝试了 SheetJS 但无法弄清楚 我更喜欢直接
  • “对象不是函数” - onclick 事件

    在开始之前 不 我没有发现分号的问题 并且我没有向函数传递任何值 当我尝试从控制台执行函数 login 时 它工作得很好 但是当我单击 HTML 输入按钮来调用它时 我收到 Uncaught TypeError object is not
  • 缩放 MapBox GL 地图以适合标记集

    假设我有以下 Mapbox 地图代码 mapboxgl accessToken
  • 如何使用 rel=preload 预加载材质图标?

    我正在尝试使用谷歌灯塔优化我的网页 该报告指出 在导入 Material Design 图标的链接上使用 rel preloads 我尝试使用语法预加载它们 我也尝试过使用字体进行预加载 类型为 woff woff2 和 ttf 它们似乎都
  • 为什么控制台不显示从选择器返回的 jQuery 对象的方法?

    我知道如果我输入 正文 我得到一个 jQuery 对象 然而 在 chrome 的控制台上 我只能看到 jQuery 对象的内部数组 尽管事实上 jQuery 方法是可以访问的 例如 body hide 为什么控制台没有向我显示所有可访问的
  • 为什么自动关闭脚本元素不起作用?

    浏览器无法正确识别的原因是什么 只有这一点是公认的 这是否打破了 XHTML 支持的概念 注意 此声明至少对于所有 IE 6 8 beta 2 都是正确的 XHTML 1 规范的非规范性附录 HTML 兼容性指南 指出 3 元素最小化和空元
  • React Native:如何在组件中添加脚本标签

    我正在尝试在 React Native 应用程序的组件内添加标签 下面是我的代码 它似乎不起作用 谁能告诉我如何解决这个问题 import React Component from react import PropTypes from p
  • Javascript document.getElementsByClassName 返回未定义

    我有一个函数应该相当简单 并且应该在加载后完成 以减少初始加载时间 基本上我使用这段代码来获取类 prefImg 的所有元素并用它们做一些事情 但是在firebug中调试时 它说var divsList未定义 function popula
  • 将图像文件存储在猫鼬模式的二进制数据中并以html形式显示图像

    我正在使用 Express Node js 和 Mongodb 创建上传和显示图像文件的网页 我使用 schema 将图像的二进制文件保存在 mongodb 中 这是我在index js和db js中的一点代码 var Post mongo
  • 按数字字段排序,其中时间戳位于 Cloud Firestore 中的给定日期?

    在我的 Firestore 数据库中 我的集合中有一些文档 如下所示 name Item 1 count 2 timestamp January 29 2018 at 3 43 12 PM UTC 8 我正在尝试查询这个集合 以便文档按以下
  • 如何获取表单的onSubmit事件?

    我想知道如何抢onsubmit表单中的事件来进行一些表单验证 因为我无权直接访问它 我正在编写一个用于评论的 WordPress 插件 因此无法直接访问表单标签或提交按钮 我在尝试为我的插件执行此操作时感到非常沮丧 因此我在下面编写了一个
  • Javascript Concat 多维数组

    我正在尝试连接一个多维数组 以便可以迭代并显示所有数据 有一篇关于如何访问嵌套数据的非常好的帖子here https stackoverflow com questions 11922383 access process nested ob
  • Nodejs + mongodb:如何查询 $ref 字段?

    我将 MongoDB 与 Nodejs REST 服务一起使用 该服务公开了存储在其中的数据 我有一个关于如何查询使用 ref 的数据的问题 这是一个对象的示例 其中包含对花药集合中另一个对象 详细信息 的引用 id ObjectId 59
  • 仅当锚点尚未存在时,正则表达式才用锚点替换网址

    我以前见过类似的问题 但没有一个有效的解决方案 我试图用锚标记替换页面上的所有网址 但仅限那些不在锚标记内的网址 so http google com http google com应替换为 a href http google com h
  • JS:如何将此字符串转换为日期对象

    该字符串是 2012 04 13T22 59 33 我努力了Date parse str Y m dTH i s 这对我不起作用 我不确定 T 代表什么 只需将其作为日期的参数即可 var date new Date 2012 04 13T
  • 从 url 加载图像并绘制到 HTML5 Canvas

    我在从 javascript 中的 url 加载图像时遇到问题 下面的代码可以工作 但我不想从 html 加载图像 我想使用纯 JavaScript 从 url 加载图像 var c document getElementById myCa

随机推荐