是否可以仅使用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剪切部分视频并将其上传到服务器 的相关文章

  • ASP.NET 验证控件和 Javascript 确认框

    我有一个使用 NET 服务器端输入验证控件的页面 此页面还有一个 javascript 确认框 在提交表单时会触发该确认框 当前 当选择 提交 按钮时 会出现 javascript 确认框 一旦确认 就会触发 ASP NET 服务器端验证控
  • 替换img路径jquery

    我正在尝试替换 jquery 中的 img 路径 注入远程页面 replaceexample com thumbs withexample com images 我已经尝试过这个 但似乎不起作用 img attr src replace t
  • 修复 Raphaël 路径节点上 Tipsy 工具提示的位置

    这是一个非常具体且有些复杂的问题 所以我设置了一个最小测试用例 http reveal dk 8080 revealit dk tipsytest 在阅读本文的其余部分之前 您可能应该先了解一下 我的页面显示悬停时突出显示区域的图像Raph
  • 为什么Promise中的代码会同步执行? [复制]

    这个问题在这里已经有答案了 在我的项目中 我有一个很长时间运行的操作 所以我决定将其放入Promise因为我认为这样我就可以在里面的代码继续执行其他操作Promise正在跑步 调试的时候发现外面的代码Promise仅当里面的代码执行Prom
  • 如何使用 github 托管外部 CSS 文件?

    我将 css 上传到 github 然后转到网站上的文件并单击 raw 选项 我尝试将其添加到网页中 但 chrome 给出以下错误 资源解释为样式表 但使用 MIME 类型 text plain 进行传输 https raw github
  • 如何使用 HTML 和 CSS 在我的网站上显示社交图标?

    我拼命尝试向我的网站添加一些图标 但无法让它们正确显示 我想要的只是一个包含图像并在线显示它们的容器 然后我想在该容器和图像之间添加一些填充 仅此而已 看这里我的方法 如果有人可以帮助我并纠正我的代码 使其真正有效 我会非常高兴 在我的 H
  • 在给定索引上将字符串分成两部分并返回两部分

    我有一个字符串 需要在给定索引上拆分 然后返回两个部分 并用逗号分隔 例如 string 8211 8 211 98700 98 700 因此 我需要能够在任何给定索引上拆分字符串 然后返回字符串的两半 内置方法似乎执行分割 但只返回分割的
  • django 模板上的 vscode html 自动套用格式

    我喜欢 VSCode 的保存自动格式功能 直到它弄乱了我的模板代码 它错误地将我的 django 模板语法格式化为一行代码 有时非常长的一行 所以不用这段代码 for row in ABCDEFGH tr for col in 123456
  • 基于范围内变量的角度设置形式动作

    我一直在尝试设置一个搜索表单 可以在其中注入表单操作属性 在我的表格中我有
  • CSS以两种颜色显示一个字符[重复]

    这个问题在这里已经有答案了 css中是否可以用两种颜色制作单个字符 我的意思是例如字符 B 上半部分为红色 下半部分为蓝色 h1 font size 72px background webkit linear gradient red 49
  • 为什么 console.log() polyfill 不使用 Function.apply()?

    我一直在看一些流行的console log 包装 填充 保罗 爱尔兰的 http paulirish com 2009 log a lightweight wrapper for consolelog 本阿尔曼的 http benalman
  • 如何在 CSS 中将容器内的多个 div 居中

    我正在测试像 Windows Metro 风格的中心分隔线 container height 300px width 70 background EEE margin 10px auto position relative block ba
  • 如何禁用网页中的萤火虫?

    如何使用 Javascript 禁用 firebug 我想这样做是为了向访问者隐藏我的网页的运作方式 有什么选择可以做到这一点吗 你不能 你能做的最好的事情就是混淆你的 JavaScript 实际上刮掉了 您能做的最好的事情就是将所有安全关
  • D3 强制布局,较大的节点聚集在中心

    我一直在修改将用于标签云的强制布局 每个标签都由一个
  • jQuery:向左滑动和向右滑动

    我见过slideUp and slideDown在 jQuery 中 左右滑动的功能 方式怎么样 您可以使用 jQuery UI 中的附加效果来做到这一点 详情请参阅此处 http docs jquery com UI Effects Sl
  • jQuery UI 对话框 - 关闭后无法打开

    我有一个问题jquery ui dialog box https jqueryui com dialog 问题是 当我关闭对话框然后单击触发它的链接时 除非刷新页面 否则它不会再次弹出 如何在不刷新实际页面的情况下回调对话框 下面是我的代码
  • 测试 jQueryUI 是否已加载

    我正在尝试调试网站 并且我认为 jQueryUI 可能未正确加载 如何测试 jQueryUI 是否已加载 if jQuery ui UI loaded OR if typeof jQuery ui undefined UI loaded 应
  • 在什么情况下,使用 HTTP/2 单独加载图像会比使用 HTTP/1.1 中的精灵一次加载所有图像慢?

    HTTP 2 使多路复用连接成为可能 从而消除了与服务器的多个连接的需要 通过单个连接 可以将许多单独的图像发送到客户端 这避免了将多个图像组合成一个并使用 CSS 将其分开的旧图像精灵模式 我很好奇精灵在 HTTP 2 世界中是否仍然会更
  • 从json中获取所有子节点

    我有以下 json var source k 01 k 02 children k 05 k 06 children k ABC k PQR k 07 k 03 我希望能够指定 k 的值并取回所有孩子 以及孙
  • Radiobutton-带有纯 html/css 的按钮

    是否可以创建像这样的单选按钮JQuery http jqueryui com demos button radio那些 用纯html css thanks 试试这个小提琴 http jsfiddle net mcXm7 1 http jsf

随机推荐