Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
yoannes

TimelineLite to mp4

Recommended Posts

Hi,

I am having some trouble on my project. I made some animations using TimelineLite and it works great. The animation are all images and texts moving around and video playing on background. But recently I was asked to export this animations to mp4. I tried many ways on doing it, but no success.

 

1. I have followed this topic below. It works fine when the animation contains only static images. with a <video> playing on background I just cant do it.

 

2. I have tried to use headless browser to record my screen, but its too slow I just couldn't get screenshots or screencast (chrome) with less than 300ms. 

 

 

 

Does anybody have idea on what I can do?

 

Thanks.

Link to post
Share on other sites

I may be way off base here .. but couldn't you simply use a screen capture tool to record the animation to MP4?

  • Like 3
Link to post
Share on other sites

I thought about it. Probably will be the only option..

I was trying to do it on server side, but too much trouble.

Link to post
Share on other sites

@yoannes You should look into following thread,

 

 

I managed to use CCapture demo to capture canvas frames, I have never used headless browser so not sure how it will perform. But you would be better with exporting all screenshots as PNG or JPG and converting them using FFMPEG. Unless of course if headless browser performs better than usual browser. Also you would be able to capture video frames and then svg on top of that, but not sure how you can capture html.

 

A quick search landed me on https://html2canvas.hertzen.com/ which might be what you are looking for.

  • Like 3
Link to post
Share on other sites

 

@Sahil

Thanks for you replay. I tried to use html2canvas but its slow, could get a frame every 300ms as well. 

 

Link to post
Share on other sites

Well ya that will happen for sure, depending on what resolution you are capturing and how your server performs. You can get around it pretty easily by capturing one frame at a time. Go through the @OSUblake's demo in thread I linked, you will get the idea of what I am talking about.

  • Like 3
Link to post
Share on other sites

This link from @OSUblake solved half of my problems. Thanks very much for this great example:
http://plnkr.co/edit/oZjPbgo9hvqwUYEV7RLi?p=preview

 

New my next mission is to take screenshots as fast as possible because on above example won't work when you have <video> element on the page. I tried to also pause the video on the moment of the shot, but no success. :-D

 

Link to post
Share on other sites

Try pausing the video, and setting it's current time to match the animation's time. 

  • Like 3
Link to post
Share on other sites

Or do a composite. Create the GSAP animation video first, and then overlay it over the video playing.

  • Like 3
Link to post
Share on other sites

@Sahil and @OSUblake  Thank-you very much for your help. I could finally manage to record the animation. 

 

Had to play the animation (progress) and <video> (currentTime) frame by frame. It was a little tricky for the video element because the number of frames may be different from the animation.

 

However, use the gif.ls lib did not work for me because of the quality of the image and I just could not make html2canvas work.. Always got blank screenshot.

 

So I added a delay of 1 second on each frame and console.log of some string. Then running headless browser (chrome) I could get console messages and take screenshot everytime this string was printed.. Each screenshot takes about 500ms so I still had some extra time to wait for the next frame.

 

After that ffmpeg to make the video from images.

 

It worked great and excellent quality. Totally recommend for who needs to get this same job done.

 

 

 

  • Like 2
Link to post
Share on other sites

Hmmmm... sounds kind of complicated.

 

SVGs can be converted into images. If you have HTML, you can put it inside of a <foreignObject> SVG element, and then convert the SVG into an image. 

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject

 

Not sure how you were calculating the video time, but if you could get that dialed in, then you could just draw the video and svg image on a canvas using the .drawImage() method.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

 

ctx.drawImage(video, 0, 0);
ctx.drawImage(svgImage, 0, 0);

 

 

Actually, you could probably just add the video to the foreignObject, and capture the video with everything else.

 

After that you can extract an image from the canvas using the .toDataURL() method.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

 

Once you have all your images, then you can convert them into a video using some encoder. I only used gif.js because it was easy to demonstrate inside of a browser, but you can use whatever.

 

@swampthang might be able to expand on what I just described. I know he has a lot of experience with converting GSAP animations into video.

 

  • Like 3
Link to post
Share on other sites

If you can convert your animations into a transparent png sequence - like img0001.png, img0002.png, etc. - you can use FFMPEG to overlay the image sequence  onto your video. That's how I've been doing it. FFMPEG can use an image sequence as a single input parameter. https://en.wikibooks.org/wiki/FFMPEG_An_Intermediate_Guide/image_sequence

Edited by swampthang
Added link to FFMPEG info
  • Like 3
Link to post
Share on other sites
On 3/20/2018 at 8:26 AM, yoannes said:

@Sahil and @OSUblake  Thank-you very much for your help. I could finally manage to record the animation. 

 

Had to play the animation (progress) and <video> (currentTime) frame by frame. It was a little tricky for the video element because the number of frames may be different from the animation.

 

However, use the gif.ls lib did not work for me because of the quality of the image and I just could not make html2canvas work.. Always got blank screenshot.

 

So I added a delay of 1 second on each frame and console.log of some string. Then running headless browser (chrome) I could get console messages and take screenshot everytime this string was printed.. Each screenshot takes about 500ms so I still had some extra time to wait for the next frame.

 

After that ffmpeg to make the video from images.

 

It worked great and excellent quality. Totally recommend for who needs to get this same job done.

 

@yoannes Did you tried MediaRecorder with Headless chrome. If you did it, Kindly share me the result.
Thank you in advance.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×