Amphtml: amp-ima-video: Controls Hidden when Ad is Playing

[torch2424]

relates to #8841
relates to #18531

Issue Context

• Issue is visible on the amp-ima-video AMP By Example.

• Source code for the video player of <amp-ima-video> can be found in ads/google/imaVideo.js.

• Currently, we are designing/considering a rebuild of video within AMP to use Video.js, so smaller issues will be considered as we don't want to dedicate too much time on the older component version.

Issue Description

When an ad is playing there is no way to exit full screen, or mute the ad, due to a lack of controls when an ad is playing.

[torch2424]

So this may be a bit tricky. Discussed this a little bit with @aghassemi and they may a good point there is a conflict of intent when an ad is playing.

If you click the video, it should take you to the ad page. However, currently, the controls are shown by clicking the video. Also, if the controls are shown, what is the radius for when we should take them to the ad vs. when they actually meant to click the button?

May need some UX / Add standards advice on this before implementation.

[curseagain]

Here are my thoughts:

• always: have a sound toggle button to toggle sound on/off
• full screen only: have an 'x' icon to close the ad (with the effect of exiting full screen and pausing ad/video)
• On desktop-hover or mobile-touch show controls. Fade controls away again after timeout.
  On desktop-click-outside-of-controls or mobile-touch-a-second-time-outside-of-controls go to ad?

Adding these controls should be a priority because:

• right now a user has to mute their device and/or close a browser window in order to exit/silence an ad that has started playing noise unexpectedly
• sometimes ads don't give you the option to skip so you are forced to watch a 30 second video before you can control your window again
• on desktop, if you are watching a video in full screen and an ad begins to play you are forced to click on the ad in order to be given the option to exit. There is no way to even close your browser. The same is true on mobile on my particular device.

[torch2424]

Here are my thoughts:
always: have a sound toggle button to toggle sound on/off
full screen only: have an 'x' icon to close the ad (with the effect of exiting full screen and pausing ad/video)

So to make things easier for now, let's try to preserve the current flow of the component, and then we can open other issues to start making larger changes to how/where controls live and appear. This will make more sense in my last reply haha!

On desktop-hover or mobile-touch show controls. Fade controls away again after timeout.
On desktop-click-outside-of-controls or mobile-touch-a-second-time-outside-of-controls go to ad?

I definitely think this should be how the controls are shown/hidden. I was advised by @spacedino to try and get this component to function more like amp-video, which falls in line with this. I'll open another issue for this.

Adding these controls should be a priority because:
right now a user has to mute their device and/or close a browser window in order to exit/silence an ad that has started playing noise unexpectedly
sometimes ads don't give you the option to skip so you are forced to watch a 30 second video before you can control your window again
on desktop, if you are watching a video in full screen and an ad begins to play you are forced to click on the ad in order to be given the option to exit. There is no way to even close your browser. The same is true on mobile on my particular device.

So continuing on what you suggested in your first comment, I do agree that we should offer controls when an is playing. However, I think offering buttons outside of the standard controls is a larger change. I was think that this could be as simple as, whenever an ad plays, just keep the controls always visibile, and then when it ends, go back to the standard controls.

When an ad is playing and controls are visible. Hide other elements of the video, such as the scroll and play/pause, and only show the mute and fullscreen button. @curseagain could we have your PR do this, unless you see a problem with this?

cc @jasti Would like to hear your thoughts on this issue as well. I will try and reach out to some Ads teams soon to get their feedback as well.