1

Let's say you have a HTML5 <video> element with an MP4 video source:

#video { width: 400px; }
#text { font-size: 30px; background-color: yellow; }
<video controls id="video"><source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4">
<span id="text">Hello world</span>
</video><br>
<button>Export</button>

The <span> here is invisible, is there a way to make it visible on top of the video canvas, such that we can export the video + text as a new MP4 (rendered) video?

I can imagine this is nowadays included in some browser API, without the need of an external library, is it correct?

Basj
  • 41,386
  • 99
  • 383
  • 673

1 Answers1

0

short answer ... not easily.

You can push the video to a canvas, overlay the text, and then use something like https://github.com/antimatter15/whammy to save the canvas as a video but there will be a corresponding loss of fidelity along the way.

Far better would be to use something like ffmpeg server side as in this example and trigger it from your web page (eg using PHP) and then present the output once completed to the user

Offbeatmammal
  • 7,970
  • 2
  • 33
  • 52