Video in Greensock timeline not playing smoothly

[Sean_has_started_coding]

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

[Cassie]

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!

[Sean_has_started_coding]

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

[Cassie]

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

[Sean_has_started_coding]

That's great, thanks Cassie.

This is a great starting point; this will serve my needs for now and I can build on this as create more intricate and complex animations.

Thanks for much again for your prompt and clear solution. Much cleaner code.