Personalized video creation

one of my client asked me to create a personalized video with Tumult Hype. The goal is to change the content dynamically, based on customer informations

Here in this example, they can change the name and the image dinamically

What I need to do in Tumult Hype to achieve this result?


as webservice or hypevideoexport¿

Do I need to create an HTML Widget and use some JavaScript code?

I’m a beginner, sorry

Webservice would be Serverside. Generating Videos on a Server.
Very ambitious

Loading external Data for a hypevideoexport should be quite easy

You need to synchronize the Hype-Timeline with the video (I didn't test how accurate the Video-Runtime does that already, so I assume this to be a task, but it might already work out of the box). You can bring in information through JSON(P) or JavaScript Objects. Exporting video is done in the Tumult Hype App, but the Hype Video Runtime could be used to run the export in the browser on a server.

To elaborate:

You need to synchronize the Tumult Hype Animation with your video timeline

You can integrate the entire movie into your timeline. Using the Tumult Hype Animation tool you can create a new animation that matches your video timeline, but Hype is incapable to modify your existing video.

You can bring in dynamic information with Hype Data Magic through JSON(P) or plain JavaScript Objects

You can connect to data using something like Hype Data Magic and set arbitrary information in it; like a headline. You can also then integrate Hype Data Magic with other APIs that you want (weather, stocks etc.) and use the information in your timelines.

HTML5 and video are two different technologies. One uses a DOM to render and behaves more like a layout. Video is pixel-based and therefor you cannot truly mix them. You can only overlay the one over the other.

Of course, you can create JavaScript code that makes it easier to invoke the illusion of a perfect synchronization, but you will hit limits when you want to mask an element or track the position of something moving in the video with your HTML5 timeline.

The end result of these snapshots of overlapping layers (HTML5, Video) are then stiched and saved as a pure native video (without sound).

1 Like

of course, i forgot about mentioning that ...