Jump to content
Search Community

TimelineLite to mp4

yoannes test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
Share on other sites

  • 1 year later...
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 comment
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.
×
×
  • Create New...