Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Kirsten Larsen
Kirsten Larsen
7,133 Points

Next button on videos - How do you do this?

Hi there, How do you make it so that the "Next" arrow button appears at the end of each video. I'd like to do that on a website of my own.

It's hidden until the video finishes and then it takes you to the next step. But it's also a great button overlaid over the video itself.

How do you do this?

Wilson Usman
Wilson Usman
35,206 Points

Hi Kirsten,

Do you have a website example of what you're trying to do? Or are you trying to do something similar to what they do in treehouse after each video?

2 Answers

Lauren Clark
Lauren Clark
33,155 Points

Hey good question, I've only recently started to develop HTML5 video websites.

I found this post really helpful over on Dev.Opera Everything You Need to Know About HTML5 Video and Audio

You can detect the end of the video with some JavaScript

<script>
    var video = document.getElementsByTagName('video')[0]; //Get the video Element

    video.onended = function(e) {
      //Put your code to reveal the buttons here
    };

// Using jQuery

 $(document).ready(function(){
    $('video').on('ended',function(){
    //Reveal button code goes here
    });
  });

</script>

You would absolute position the end of video buttons on a CSS overlay, which is hidden until the video ends.

.video-overlay{
   display: none;

}

Something like

    $('video').on('ended',function(){
       $('.video-overlay').css({
           'display' : 'block'
     });
    });

Or you could use jQuery's .show() method

Kirsten Larsen
Kirsten Larsen
7,133 Points
Kirsten Larsen
Kirsten Larsen
7,133 Points

Ooh thanks! @Lauren! I believe that is what I was looking for.

@Wilson - I'm trying to do exactly what they do here on the Treehouse website. In the lessons, they have a "Go on to the next screen" button appear, but only when you've completed the video.