Is it possible to export video with comments on overlay of video using popcorn JS?

Question

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?

Answer 1

Short answer: no

Long answer: The MP4 container can hold XMP metadata so in theory someone could write an exporter but you would still need a player capable of using the XMP metadata and as far as I know VLC doesn't support it.

Answer 2

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:

Easiest option: Client frame rendering, server video rendering

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.

Best, but hard option: Client frame rendering, client video rendering

'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.