Jump to content
Search Community

Video in Greensock timeline not playing smoothly

Sean_has_started_coding test
Moderator Tag

Recommended Posts

Hello all

I am trying to insert an mp4 file into a timeline but the video is not playing smoothly in Chrome or Safari. 

I have nested timelines and looking to play the video in the second timeline.

I'm pretty new to Greensock (and not totally comfortable with JavaScript, coming from a design background), so would really appreciate any feedback on why the video is not playing smoothly. I have set up a codepen.  Have tried to troubleshoot the issue but not having any luck.
Do shout out if you have any questions.

Many thanks
Sean

See the Pen QWVevXd by HappyGooner (@HappyGooner) on CodePen

Link to comment
Share on other sites

Hi there Sean,

 

Would you mind giving us a little more info on why you're using GSAP to scrub the video? There may be a better approach than this that we can advise on when we know what you're trying to achieve. Video is a fiddly beast and encoding video files so that they can be scrubbed through is a whole deep dive rabbithole in itself (unrelated to GSAP)

Thanks!

Link to comment
Share on other sites

hi Cassie, thanks for much for replying to my post.

So far, I've just worked on 2D animation on my banners, using text and shapes. I wanted to look into incorporating video in the 2D animations. For now, the banners won't be interactive, just inserting some video will make the banners a little more engaging. 

I was not sure if this is an easy task within a GSAP timeline.

If you can point me towards how I can learn how this can be achieved, that would be wonderful.

Thanks again for your time.

Sean

Link to comment
Share on other sites

Heya, yeah then you probably don't need to scrub through.

 

You could do something like this for a simple use case like you've shown

 

See the Pen PodMEJR?editors=1011 by GreenSock (@GreenSock) on CodePen

 

If you have to pause/play and your video is just a small part of a larger timeline - it might get a little complicated as you'd have to conditionally play or pause depending on where you are in the timeline and whether the video should be toggled at that point or not. 

Let me know if your use case is more complicated and we can look at different solutions!

FYI

If you do need to scrub this is the magic video compression snippet for ffmpeg
ffmpeg -i input.mp4 -movflags faststart -vcodec libx264 -crf 23 -g 1 -pix_fmt yuv420p output.mp4

  • Like 1
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...