htmlvideowebpopcornjs

Add annotations to a web video


I would like to implement a web application where you can upload a video (e.g. in mp4 format) and add custom messages to it or tag specific frames. I need to be able to determine the location, size and duration of the balloon containing the text. The interface should be easy enough to use and allow you to add a simple text or a link.

How could I implement this? Is there a platform I could use? Looking around I found this platform called WireWax which basically does everything I need, however there is no pricing section and I suspect that you have to contact them directly.

Another interesting product that I found is Popcorn.js which allows you to add annotations to videos, but I would have to create from scratch the interface to add messages.

Do you have any advice?


Solution

  • Popcorn.js does indeed have an interface. It's called Popcorn Maker, and it's here: https://popcorn.webmaker.org/

    It's open source, so you can modify it however you like. The source is here: https://github.com/mozilla/butter