Jump to content
Search Community

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

kpiraro 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 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

Link to comment
Share on other sites

@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

 

  • Like 2
Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

@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

 

  • Like 3
Link to comment
Share on other sites

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!

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