Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
pati

Add acction to a video

Go to solution Solved by Shaun Gorneau,

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!


I would like to know if there's a way to animate a HTML video. 


 


What I would like to do is to add a link to another page on the video, but that link should appear just for a few seconds.


 


For example, the video starts with no animations. Then on second 12, the link appears for 5 seconds and disappears again. I'm thinking of using the video currentTime like this codepen I created: 

See the Pen Ppeyry by sonder15478 (@sonder15478) on CodePen


 


Any ideas of how to do it?


Link to comment
Share on other sites

Sure, you can us the video/audio `timeupdate` method to poll the current time ... you can then use logic to display/hide any element(s) as you need.

  • Like 1
Link to comment
Share on other sites

I have created this: 

See the Pen GWdzgm by sonder15478 (@sonder15478) on CodePen

which is more less what I need. The only thing that I can't do is to show the link just for a few seconds.

At the moment, it's showing it during the whole video... Do you know how to solve this? I am very close!

Link to comment
Share on other sites

  • Solution

A few things ...

 

1. With vid.addEventListener ... you haven't defined `vid`

2. Your getElementById selector for the video doesn't match your id on the video element

3. I changed the visibility property to opacity

4. Start with the overlay opacity at 0 to avoid a flash at the beginning

 

See the Pen evragw?editors=0010 by sgorneau (@sgorneau) on CodePen

  • 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.
×