是否可以使用爆米花JS导出带有评论叠加视频的视频？ [英] Is it possible to export video with comments on overlay of video using popcorn JS?

问题描述

我正在使用porpcorn JS为视频添加注释，我在视频上创建了叠加层，所有注释都在视频上呈现。有没有办法让我可以在 .mp4 -file中导出带有嵌入式html内容的视频。所以我可以在像VLC这样的原生播放器中播放那个视频吗？

I am using porpcorn JS for adding annotations on video, I have created overlay on video and all annotations are rendered on video. Is there any way so that I can export video with embedded html content inside an .mp4-file. So I can play that video in any native player like VLC?

推荐答案

你最好处理它 all 在服务器端，只是在客户端上播放渲染的视频。如果客户端的代码足够复杂，您可以考虑以下两个选项：

You're best of handling it all on the server side and simply playing the rendered video on the client. If the code on the client side is sufficiently complex you can consider the two following options:

您可以轻松地从视频中抓取每个帧，将其绘制到画布上，然后将注释也绘制到同一个画布上（使用自定义代码或类似 html2canvas ）。接下来，最简单的要做的就是将所有帧逐个发送到服务器并使用简单的ffmpeg命令（类似 ffmpeg -i img％03d.png - c：v libx264 -pix_fmt yuv420p out.mp4 ）生成mp4，然后将其发送回客户端。

You can quite easily grab each frame from the video, draw it onto a canvas and next draw the annotations to the same canvas as well (using either custom code or a library like html2canvas). Next the easiest thing to do would be to send all the frames one by one to the server and use a simple ffmpeg command (something like ffmpeg -i img%03d.png -c:v libx264 -pix_fmt yuv420p out.mp4) to generate the mp4 which you would then send back to the client.

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

'Of course' actually rendering the video on the client side is not impossible. Do note however that the only library I am aware of does not render .mp4 files, but .webm files. Whether that's a problem is up to you. Either way, the library that is capable of doing this is called whammy.js. Once again you would actually need to draw all the frames and annotations to a canvas which you then encoder.add to the Whammy video object. The API is pretty simple and to the point, however do note that I have no idea about how cross platform its support is.

这篇关于是否可以使用爆米花JS导出带有评论叠加视频的视频？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！