Solutions for dynamic video content injection

I'm not sure that's the right plattform asking this question. I'm searching a solution for dynamic video content injection in web videos.

For example: Let the user define some data or objects like photos which will be used in a video after posting.

I found an example with HTML5 Canvas: http://ajaxian.com/archives/dynamic-content-injection-with-html5-canvas-and-video

But this looks a little bit experimental and of course, I'm looking for the best solution. This could also be a solution with Flash. I have no clue what the best way is to do that.

If this question is wrong here, please refer me to the right portal to ask my question there (FAQ of webapps portal says me not to posting programmign questions there. In general this is a programming question).

Answers


You have a number of options here split into 2 basic sets; flash or html5.

Generally people these days prefer an html5 solution so here are the ways I would go about this in HTML5: Use a video object with a canvas object (object/element). Here's a basic example of this: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html The benefits of this approach is that you can have dynamic objects interact with the video in realtime. If you want a simple but extremely powerful and stable toolkit for advanced video manipulation I strongly recommend Popcorn.js: http://popcornjs.org/ and check out their demos here for a taste of whats possible: http://popcornjs.org/demos

The second option if you don't need realtime manipulation is to use a server side library such as ffmpeg http://ffmpeg.org/ . For example you can post some images, animations, text etc to ffmpeg and have the server 'write' a new video file (which can be really fast if your server has enough resources) then return the video back to the front end to display the customized clip. The downside of this is that it is not realtime but the upside is that you could download/share/send the customized clip.

In flash you have a number of possibilities also and dare I say it the video manipulation capabilities are more proven in flash also you will get a wider browser penetration this way as html5 video isnt supported in Explorer 6/7/8 whereas flash on the whole would be. You can use BitmapData from each frame of the flash video to analyze the picture and composite whatever Sprite type you like in as3. There is a great library Ive used before called HiSlope http://play.blog2t.net/tag/hislope/ which isn't well documented but is really very nice for analyzing and compositing shapes, images, text etc onto reatime video. here's a demo of it working on either a live webcam or a video stream. http://play.blog2t.net/files/black-or-white/

Another benefit of flash is that you can access the webcam and go fullscreen neither of which can be done in HTML5 yet.

Best A


Need Your Help

Xstream ignoring registered converters

java xstream

I am running a webapp using spring and i use xstream as my serializing tool.

C++ Hiding a Variable through Inheritance?

c++ inheritance static-members

I'm coding a game engine and I'm trying to make all it's functions sorta hidden and mostly rule-free so when programmers code the game, they don't bother with how or why something needs to be that ...