Play timeline, pause timeline, play video, resume timeline functionality

[konstructive]

Hi guys,

 

I'm having loads of troubles when trying to add video playback to the timeline.

The video I'm using is hosted on cloudflare and I'm using some cloudflare API methods and events to play it and catch some events (https://developers.cloudflare.com/stream/video-playback/player-api/).

 

The functionality I'm trying to achieve is:

1. Fade in video on timeline

2. Pause timeline

3. Have a callback to play a video

4. Resume the timeline

5. Fade in image

6. Fade in another video

7. Pause timeline

8. Play video

9. Resume the timeline

 

In the codepen it's one of many variations I tried.

 I also tried using add('lable'), addPause() with different timing animations, but none of it works as desired.

 

The main issue, when viewing in a console, both of the videos start playing at the same time and the timeline doesn't wait for the video to finish.

 

The Cloudflare video JS API should work in a similar way as interacting with HTML5 video, the only thing that video somehow only would trigger play() only inside the .on('loadeddata', function() {...}).

 

Thanks,

Olga

See the Pen PoZOeGe by olgabrushuk (@olgabrushuk) on CodePen

[elegantseagulls]

It looks like maybe you have some ordering issues (your call should probably be right before the .pause()), but in your .call you are calling the play function as: playTheVideo(videoAsset3, animationTl), this will trigger the play right away (instead of at the .call). For the call you'd need to just call playTheVideo no () and then pass the parameters separately (See: https://greensock.com/docs/v3/GSAP/Timeline/call()) or setup a function inside the call to run playTheVideo.  

[konstructive]

Hi there,

 

Thank you for your quick response. I amended the order and the call function and it still doesn't seem to work:

See the Pen WNrXKpX by olgabrushuk (@olgabrushuk) on CodePen

The timeline doesn't wait for the video t finish playing.

And as well, I'm not sure what's the correct way to resume the timeline.

 

Thanks,

Olga

[ZachSaucier]

Hey Olga, welcome to the GreenSock forums and thanks for supporting GreenSock by being a Club GreenSock member!

 

I've never seen a <stream> tag before. I guess that's a Cloudflare thing?

 

I think what Ryan was suggesting was something more along the lines of this, where you still load the video at the beginning but call .play() on the video when you need to:

See the Pen XWXzYwY?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Also, when making modifications for demos in the forums we recommend using the "fork" button so that each version is saved at a different URL. That way people looking at the thread later can see the full context  

[konstructive]

Hi Zach,

 

Many thanks for jumping on this. 

Sorry, I created a fork and reverted my changes in the initial example, so it's all in order now.

 

To answer your question, yes, <stream> is something that came from Cloudflare.

 

It makes more sense now in your example, I can see extra video functionality added. But the fade in of the image doesn't wait for the first video to finish playing before it fades in. If there is a way to pause the timeline to wait for the video to finish playing?

 

Thanks,
Olga

[ZachSaucier]

Oops, .pause() should be .addPause() there. Fixed now  

[konstructive]

Hi Zach,

 

Many thanks!

It works, and I managed to replicate it in my actual project with even more complicated functionality and iterations

 

Thanks,

Olga

[konstructive]

Hi Zach,

 

Sorry to get back to this. But this unfortunately doesn't work in IE11 (Windows 10). I'm not sure how to give an example of it as codepen doesn't work in IE11 itself.

The issue is that in the latest working codepen example that you provided the console.log('video ' + video + ' played'); gets called twice for each video in the timeline and then console.log('video ' + video + ' ended'); gets called twice again, and so technically speaking video.on('loadeddata', function() {  gets called twice. As a result of this the video freezes on the first frame and doesn't play, although the rest of the time line seems to function correctly with the correct delays.  Also, when there is only one video and not two, all functions as expected and video plays.

I know that it can be the issues with the Cloudflare events, but it just seems that the structure of JS itself is wrong around the way the video is set up inside that 'loadeddata'. Will be helpful if you can spot any issues.

 

Many thanks,
Olga

[ZachSaucier]

If you switch /pen to /debug in CodePen URLs it will work in IE. 

 

But this issue doesn't really around related to GSAP... Do you have a specific question?

[konstructive]

Hi Zach,

 

Great, thank you. Was able to use that in IE11 now.

I don't think it's a GSAP issue, thank you for your advice, I will see what Cloudflare suggests. 

 

Thanks,
Olga

[konstructive]

Hi there,

 

I managed to fix the videos play functionality in IE11 by fixing some embed code for Cloudflare for when more than one video is included, the changes can be seen on the codepen below. In essence the <script> tag should be included only once and the ?video=xxx should be removed from the first and only <script> tag.

Unfortunately, the functionality I need to achieve at my real case project is way more complicated than the example in codepen here.  As another bit of the functionality that I need to add is to be able to loop either of the videos X amount of times. In the codepen below I amended JS to include .call() and .addPause() twice for the first video (and as the idea the video needs to play twice before it moves to the next element in the timeline), but the functionality I'm getting is not as I would expect. So the first video still plays only once, but the playVideo() function is called twice straight away without waiting for the first pause. I added some logs to each .call() and what happens can be seen in the Console.

Any ideas how to make the video play X amount of times in the timeline?

See the Pen LYGdzXO by olgabrushuk (@olgabrushuk) on CodePen

 

Many thanks,

Olga

[ZachSaucier]

1 hour ago, konstructive said:

Any ideas how to make the video play X amount of times in the timeline?

In the ended function I'd use a counter to see how many times it has completed. If the counter is below the target number, replay the video. If it's equal or above it, play the timeline.

[konstructive]

Hi Zach,

 

Thank you for your reply.

Sorry, but I don't understand how to put the counter into the timeline as the videos setup and play are called from different places in the timeline and how to use this count of 'ended' in the call() function. I'll see what I can do though.

But I have a question on why my code in the codepen example above won't work?

In theory, the following should work:

.call(playVideo, [videoAsset1, 'play first time'])
.addPause()
.call(playVideo, [videoAsset1, 'play second time'])
.addPause()

The video playback is called and the timeline is paused, on video ended timeline resumes and comes to second .call(), the timeline is being paused and so on X amount of times. From the documentation for .call and .addPause it seems that they are added in the correct places and sequence in the timeline.

 

Thanks,

Olga

[ZachSaucier]

1 hour ago, konstructive said:

I don't understand how to put the counter into the timeline as the videos setup and play are called from different places in the timeline and how to use this count of 'ended' in the call() function.

I'd probably have a counter for each video. You could even attach the counter to the video reference itself:

video.playCount = 0;

// later
if(video.playCount < numPlays) {
  video.currentTime = 0;
  video.play();
} else {
  timeline.play();
}

 

1 hour ago, konstructive said:

why my code in the codepen example above won't work?

If you look in the console you can see that the first and second play calls are fired when the page is initialized. This is because zero duration calls (like .addPause and .call) are meant to fire in the same instant.

 

If you add an empty tween after the first pause it works as expected (with the second play coming later). You could change the duration of this tween to something like 0.01 and it would work as you intend, but I recommend the counter approach as it's more easily extendable.

See the Pen zYrWjWQ?editors=0010 by GreenSock (@GreenSock) on CodePen

[konstructive]

Hi Zach,

 

Thank you for getting back to me so fast again.

 

I wasn't able to add counters as I have quite a lot of oughted functionality and videos are inside loops already with quite a few variations on where they appear in the timeline, so code started getting quite unmanageable and difficult to read.

 

But the latter option with the empty .to({}) hack in between .addPause() and the next .call() has worked.

 

Thanks,

Olga