Can't get .play() to work with <video> element in banner ad

[kpiraro 3 Likes (Newbie)]

Hi there,

 

I've been struggling with this for a while now and finally decided to submit this to the forum. I've read a number of posts that make this seem easy, but I'm obviously missing something.

 

I'm trying to simply add an HTML video element to a timeline so I can control when it starts to play and coordinate it with my other banner elements. In this simple example, I want to control how long I see a black screen with the intro text before I fade that black background and text away and start the video. (The Pen I've posted here is a much shortened version, btw, for simplicity.)

 

I have tried a number of configurations of .play() and .add with a callback function, but it just doesn't seem to work. The only reason the video plays in the Pen I have now is that I have autoplay set in the HTML attributes in the video element. If I remove that attribute from the video element, the rest of my timeline plays over a blank box. 

 

Is there something I'm missing with how to configure a video element and add it to a simple timeline? 

 

Thanks so much for any insight you can give me!

See the Pen 09204ff9282158241aa562ef3ee5aa48?editors=1111 by kpiraro (@kpiraro) on CodePen

[Sahil 2,541 Likes (Superhero)]

@kpiraro It's okay to post your queries, if it takes you more than hour for something simple then you should definitely post a question here.

 

I think there is some confusion, and GSAP doesn't control videos out of box. What you can do is, use call method of TimelineMax to play the video. Check following demo. I changed background color just to see what is happening.

 

See the Pen PRYGwW?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

[kpiraro 3 Likes (Newbie)]

Thanks so much, @Sahil! I knew there was some piece of the puzzle I wasn't getting.

 

Could I ask you to explain one point about WHY this works? 

 

I see you added another variable, "vd," that grabs the class of the video element with querySelector. That variable is used in addition to the "video" variable I declared with the video element itself. So in the playVideo function, it looks like you add "video" to the vtl timeline, but use the .play() method on "vd." Can you explain why that works? What's the difference between assigning variables to the whole video element vs. the video class, and why do we need both for that function?

[Sahil 2,541 Likes (Superhero)]

@kpiraro Sorry for the confusion, I didn't remove unwanted code in my demo. I have commented out everything that wasn't necessary.  And following is cleaned up demo.

 

Usually in timeline you use to, from, fromTo, staggerTo, staggerFrom, staggerFromTo to animate anything. The call method gives you opportunity to call any function that will execute normal javascript i.e. non-GSAP stuff. So in this case when first two tweens are done animating the call method calls playVideo function. And inside the function I am using general method to play video.

 

Docs seem to be inaccessible at the moment so I can't post any links but you should visit docs for more details about call method. Hope this clarifies, but feel free to ask any questions if you have anymore doubts.

 

See the Pen wmwJor?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[kpiraro 3 Likes (Newbie)]

This is a huge help, @Sahil! Thanks so much for taking the time. I think the two .play() methods, in normal javascript and GSAP, were a particular sticking point; I didn't know about javascript .play() and thought I could just use GSAP .play() to trigger the video. And the querySelector is obviously important too. Thanks again!