add processing graphics to an mp4 video

chanof · April 2018

Hi there, I'm looking for a way to add graphics on an input mp4 video, to get a video mp4 also including the graphics. I basically need to add the author's information at the bottom of the video. I try to get an automatic process in the shortest possible time processing is great for graphics and I know it takes different types of input files and can export to video, so my question is: is it possible with processing or p5 to create a small software that adds graphics (for infos taken from a txt file for example) at the bottom of the video, possibly p5 to control the process from the browser.

Thanks a lot!

kfrajer · April 2018

Not sure about p5.js but I bet you can do this using the Video Export library using Processing java. You can install the library using the Contribution manager in the PDE and run the provided examples. The concept is this: You load the video file, you load your text file, you create a recorder then you play each frame, adds the text and call the record function. Iy should work.

I am tagging @hamoid as he might be able to provide you a better sense since he is the maintainer of this useful library. By the way, if you check the other examples, you will see hot to manage the fps and other video attributes which can be handy in your case.

Kf

jeremydouglass · April 2018

If you want to do this with a non-interactive utility, you could instead just use a general purpose video transcoding and manipulating tool -- for example, ffmpeg.

https://www.google.com/search?q=watermark+video+ffmpeg

You could also build a watermark or credit bar image in Processing and the save the image to disk and call out to ffmpeg with exec() to composite it.

quark · April 2018

Rather than modify the actual movie file itself, HTML5 allows you to add 'subtitles' to your video.

For instance you might have this HTML

<section>
  <video width="720" height="400" controls>
    <source src="trailer.mp4">
    <track src="subtitles.vtt" srclang="en" default>
  </video>
</section>

The 'vtt' is a simple text file in the WebVTT format, as example of subtitle.vtt would be

WEBVTT

00:05.000 --> 00:10.500
Welcome to my video

12:10.000 --> 33:22.000
Author Jack the Ripper

33:22.000 --> 33:25.000
Goodbye

Note the times are "minutes:seconds.milliseconds"

jeremydouglass · April 2018

Neat.

A VTT utility class could make generating vtt files really easy. There might already by something out there in Java, although I haven't looked closely.

Howdy, Stranger!

Categories

In this Discussion

add processing graphics to an mp4 video

Answers