Unmute video on mouseover - banner ad

1

Hello,

I’m trying to create a video banner ad with the video hosted elsewhere. Got the video to play but now I am struggling to figure out how to:

• unmute on mouseover
• mute on mouse out
• hide controls
• make clickable to url

I’m not a coder so any help would be appreciated. Thanks!

Steve

PS - I’d also be willing to pay a freelancer.

2

If you are using a video that is hosted elsewhere, I assume that you are using a <video> HTML tag that you wrote out yourself. The two important bits to this are:

  • you need to add an ID to your <video> tag so it would look like <video id="myvideo"> (where myvideo can be any unique identifier)
  • you will need to make sure this is the Inner HTML of a rectangle element, not a HTML Widget (as this is an iframe and harder to access)

Create an On Mouse Over action to run Javascript that looks like:

hypeDocument.getElementById("mymovie").volume = 1.0;

Create an On Mouse Out action to run JavaScript that looks like:

hypeDocument.getElementById("mymovie").volume = 0.0;

In general, you would just not include the controls attribute in your <video> tag. If you need to later remove this in code, you could do it with code like:

hypeDocument.getElementById("mymovie").removeAttribute("controls");

You could just add an On Mouse Click action to the containing element. If you are using HTML you could probably also just surround it in an <a> tag. However note that this might not be advisable because users often do want to interact with videos, although it seems like you are removing controls.

To expand on this, also note that a lot browsers nowadays enforce that video cannot autoplay unless it muted first. Mouse over isn't an action that allows unmuting in this case, the user must click on the video. Further, mouse over/out aren't really a thing on touch screen devices, so that's something else to consider in the interface.

3

Wouldn't the volume be set to "0"?

4

Whoops, corrected above!