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 HTML Video and Audio (Retired) Captioning Video The Track Element

Posted by George Akinian
George Akinian
17,615 Points

Hi, How can I make the video start&stop by clicking anywhere on the video icon instead of targeting the play button?

Trying to make the video controls more responsive and user friendly.

Also, how I can make the space bar start and stop the video play?

thanks,

4 Answers

Gábor Balogh
Gábor Balogh
7,503 Points

with this javascript code:

var video = document.getElementById('video-element-id-here');

document.onkeypress = function(e) { if ( (e || window.event).keyCode === 32 /* space key */ ) { video.paused ? video.play() : video.pause(); } };

Nicholas Woods
Nicholas Woods
6,260 Points
Nicholas Woods
Nicholas Woods
6,260 Points

Can someone explain what parameter is being passed for 'e'. Also where there is the comment stating /* space key */ is something supposed to go here? Sorry, I'm still very new to this and tried this code and cannot get it to work.

George Akinian
George Akinian
17,615 Points
George Akinian
George Akinian
17,615 Points

Cool beans. It worked. Thanks.

George Akinian
George Akinian
17,615 Points
George Akinian
George Akinian
17,615 Points

plus to make play/stop responsive with the click anywhere on the icon. add the script towards the bottom of the html page.

video.onclick = function(e) { video.paused ? video.play() : video.pause(); };

cheers

George Akinian
George Akinian
17,615 Points
George Akinian
George Akinian
17,615 Points

Hi kabir, I suppose I was referring to the entire video player at the time. I remember googling the above code to make that option available only to discover that it was covered in the next video.

Cheers!