From the course: Learning Web Audio and Video

Unlock the full course today

Join today to access over 24,700 courses taught by industry experts.

Solution: Show and hide the controls

Solution: Show and hide the controls

From the course: Learning Web Audio and Video

Start my 1-month free trial Buy for my team

Solution: Show and hide the controls

“

(upbeat music) - The solution I came up with for this involves a little bit of JavaScript. So if we scroll down, into our JavaScript area, what we do is define a new variable called mc. We perform a querySelector on our document for an id of mediacontrols. Mediacontrols encompasses all of our media controls, as we can see right here. We're going to add two EventListeners to the actual media object, which we've already defined before this challenge. This is the videoelement. We set an EventListener onto media for a mouseenter event. And we set another event on media for a mouseleave event. When a mouseenter is detected, we're going to showControls, and we invoke a function to do so. That function is directly beneath here. Function showControls, and for that we're simply setting the mediacontrols style display attribute to block. That's going to ensure that we can see our controls. Because when we perform a…

Contents