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

问题描述 投票:0回答:1

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

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

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

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

谢谢!

javascript html video blob filereader
1个回答
8
投票

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

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

概念很简单,但是当你看一个 mp4 文件时,它会涉及很多 - 苹果开发者网站上有一个很好的例子(https://developer.apple.com/library/content/documentation/QuickTime/RM /Fundamentals/QTOverview/QTOverview_Document/QuickTimeOverview.html):

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

当您想剪切部分视频时,像 ffmpeg 这样的工具会努力提取和重组文件。

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

2023 年 2 月更新

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

您确实需要了解对 SharedArrayBuffer 支持的需求:

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

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

© www.soinside.com 2019 - 2024. All rights reserved.