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 KnowledgeWoods Consulting
KnowledgeWoods Consulting
5,607 Points

How can we add next and rewatch button when a video in html5 player ends?

How can we show next and rewatch button when a video in html5 player ends? Just like treehouse videos.

Simon Truong
Simon Truong
2,179 Points

Hi Bhaskar,

Could you paste any code you have already implemented for your video player in order to guide you better in what you would like to achieve ?

Peace,

Nam

3 Answers

KnowledgeWoods Consulting
KnowledgeWoods Consulting
5,607 Points
KnowledgeWoods Consulting
KnowledgeWoods Consulting
5,607 Points

I have no code ready with yet. All i need is that when video ends then i can show button to go to next video or replay it. Just watch a video in the treehouse courses. when the video ends they show two buttons. One for rewatch and another for next.

Simon Truong
Simon Truong
2,179 Points

Have you tried using the following tag ? It adds control buttons to your video 

<video src=leverage-a-synergy.ogv controls> </video>
KnowledgeWoods Consulting
KnowledgeWoods Consulting
5,607 Points

It will add controls but only on player not on the video. I request you please watch any one video of treehouse and check in the end.

Simon Truong
Simon Truong
2,179 Points
Simon Truong
Simon Truong
2,179 Points

I know what you are talking about Bhaskar, the replay and next button that appears in the middle of the video canvas when you have finished playing the current video... But I don't have the skills yet to help you with that. I'm sorry.

Maybe you could look into the source code, when the video has ended, I think it must be somewhere over there.

Peace,

Nam

Simon Truong
Simon Truong
2,179 Points
Simon Truong
Simon Truong
2,179 Points

I had a look for you

html is something like this 

<p>
                  <a class="rewatch-video">
                    <span class="icon icon-resume"></span>
                    <span class="label">Rewatch</span>
                    Build the Contact Page
                  </a>
                </p>

                  <a class="button" href="/library/how-to-make-a-website/adding-pages-to-a-website/add-iconography">
                    <span class="label">Next Step:</span>
                    Add Iconography
                    <span class="icon icon-play-white"></span>
</a>

And CSS should be something like that :

.rewatch-video{font-weight:bold;display:-moz-inline-stack;display:inline-block;vertical-align:middle;*vertical-align:auto;zoom:1;*display:inline}
.video-overlay-message .rewatch-video:hover{color:white}
.video-overlay-message .rewatch-video .icon{margin-right:4px}