javascript - 是否可以使用爆米花 JS 导出带有视频叠加评论的视频?

标签 javascript html video popcornjs

我正在使用 porpcorn JS 在视频上添加注释,我在视频上创建了叠加层,所有注释都呈现在视频上。有什么方法可以让我在 .mp4 文件中导出带有嵌入 html 内容的视频。那么我可以在 VLC 等任何原生播放器中播放该视频吗?

最佳答案

您最好在服务器端处理 所有 并在客户端简单地播放呈现的视频。如果客户端的代码足够复杂,您可以考虑以下两种选择:

最简单的选择:客户端帧渲染,服务器视频渲染

您可以非常轻松地从视频中抓取每一帧,将其绘制到 Canvas 上,然后将注释绘制到同一 Canvas 上(使用自定义代码或库,如 html2canvas)。接下来最简单要做的是将所有帧一一发送到服务器并使用一个简单的 ffmpeg 命令(类似于 ffmpeg -i img%03d.png -c:v libx264 -pix_fmt yuv420p out.mp4) 生成 mp4,然后将其发送回客户端。

最佳但困难的选择:客户端帧渲染、客户端视频渲染

'当然'实际上在客户端渲染视频也不是不可能。但是请注意,我所知道的唯一库不呈现 .mp4 文件,而是呈现 .webm 文件。这是否是一个问题取决于你。无论哪种方式,能够执行此操作的库称为 whammy.js .您实际上需要再次将所有帧和注释绘制到 Canvas 上,然后将其encoder.add 添加到 Whammy 视频对象。 API 非常简单而且切中要点,但请注意,我不知道它的跨平台支持程度如何。

关于javascript - 是否可以使用爆米花 JS 导出带有视频叠加评论的视频?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20839859/

相关文章:

javascript - JQuery 选择器和 "is"的问题

javascript - 在 chrome 扩展选项页面上添加类似 facebook 的按钮

jquery - 在一行中显示图库图像

jquery - 带有 vimeo 章节的多标签 Bootstrap

ios - 响应式 HTML5 视频 - 在 iOS 中调整大小

ASP.NET DataList - 所有文本框的 JavaScript 验证

javascript - openERP 7 : How to get the Model name and Action of the Current page?

jquery - 无法让 rCarousel 工作(导航宽度和自动滚动)

javascript - 使用javascript删除选择了id的表行

android - 如何让以 H.264 编码的视频流在 "WebView"中播放?