518008 - Support for video content area to be clickable play/pause button

Status: VERIFIED FIXED

(Toolkit :: Video/Audio Controls, enhancement)

Description

[Jennifer Morrow [:Boriss] (UX)]

Currently missing video behaviors:

- When autoplay is off, a play button should display in the center of the video and the entire content area should be a clickable play button.  The video should fade partially to black.

- While the video is playing, the content area should be a clickable pause button.  Clicking it to pause should produce the same play button as above, and the video should fade similarly to black.

The reason for adopting this already widely-used video interaction is that the clickable area for the most common two tasks - play and pause - is as large as possible and therefore faster and easier to click.  It also means that if the video is autoplaying and the user does not want it to play, they don't need to hover over the video and wait for the UI pause/play button to appear. 

This should work the same in fullscreen mode as standard play mode.

Comment 1

[Robert O'Callahan (:roc) (email my personal email if necessary)]

This doesn't seem like something we'd take on branch for 1.9.2.

Comment 3

[Biju]

One issue need to be considered:-
If the web developer is not using VIDEO tag just as normal player, 
but something other then that, this feature will be a trouble to him.
example at http://www.double.co.nz/video_test/video.svg you can click and drug
the video. Here we dont want the pause and play action when user click it to
drag.

One option, this feature should available only when controls are enabled.

Comment 5

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Yes, this should definitely only happen when controls are enabled!

Comment 6

[Jared Wein [:jaws] (please needinfo? me)]

This bug has been broken up into two bugs.

This bug will stay as the bug for making the video content area a large play/pause button, while bug 666306 is now the bug for making the video initially show a large play button if autoplay is off.

Comment 7

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch for bug 518008

The video content area is now clickable to play/pause the video.

Comment 8

[Jared Wein [:jaws] (please needinfo? me)]

I forgot to add that the patch for this bug only enables this ability if the video controls are visible.

Comment 9

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Comment on attachment 541120 [details] [diff] [review]
Patch for bug 518008

Review of attachment 541120 [details] [diff] [review]:
-----------------------------------------------------------------

I'm not a toolkit peer.

Comment 10

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch for bug 518008 - version 2

Based on our conversation offline, I have changed the button back to a spacer and am now using the click handler. This works just as well and will probably not introduce any weird a11y issues.

Comment 11

[Justin Dolske [:Dolske]]

Bah, I typed my comment for our conversation in a tab but never saved it:

From a quick chat: It's probably lightly better to just add a onclick handler to the spacer, instead of making it a <button>. It's kind of a weird case where we literally are not interested in anything other than the click (and so have to do extra stuff to make the button invisible).

The slight difference that made onclick win out for me is that for A11Y we actually don't want the button showing up at all. It's redundant with the existing play/pause button (which is accessible), and would probably just be annoying to show up as a separate thing anyway.

Comment 12

[Justin Dolske [:Dolske]]

Comment on attachment 541422 [details] [diff] [review]
Patch for bug 518008 - version 2

I hate to bikeshed, but I think I'd rather keep it named controlsSpacer.

r+ with that simple rename!

Comment 13

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch for bug 518008 - version 3

Changed the name of the spacer back to controlsSpacer.

Comment 14

[Jared Wein [:jaws] (please needinfo? me)]

:Dolske, with the above rename, can you land this for me?

Comment 15

[Justin Dolske [:Dolske]]

Comment on attachment 541872 [details] [diff] [review]
Patch for bug 518008 - version 3

No re-review needed, but r+ anyway. :) I'll just flag this checkin-needed lest I not get to it this weekend.

Comment 16

[Dão Gottwald [:dao]]

http://hg.mozilla.org/mozilla-central/rev/fcc6c92e9b93

Comment 17

[Jake]

A little problem, rightclick will trigger it as well, normally you rightclick because you want to see the context menu other than play/pause it.

Comment 18

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to comment #17)
> A little problem, rightclick will trigger it as well, normally you
> rightclick because you want to see the context menu other than play/pause it.

Thanks for catching that. I have logged bug 667323 for this issue.

Comment 19

[Vlad [QA]]

Using the steps from the description and a youtube video it's enough to verify this bug?
Thanks

Comment 20

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Vlad [QA] from comment #19)
> Using the steps from the description and a youtube video it's enough to
> verify this bug?
> Thanks

This bug only applies to HTML5 <video> when controls are enabled, therefore youtube videos will not apply.

Comment 21

[Vlad [QA]]

I've verify this on o youtube video with html5 enabled. If I right-click on the video, in the context menu I have "About html5" so I guess it ok.

The whole video acts like a play/pause button.

It's enough to verify this?

thanks

Comment 22

[Vlad [QA]]

Back again :)
I've now tested this bug on this test page:
http://dolske.net/mozilla/tests/video/tests.html#

Everything is working as expected.

Setting resolution to Verified Fixed on Mozilla/5.0 (Windows NT 6.1; rv:7.0) Gecko/20100101 Firefox/7.0 beta 3

Comment 23

[Rick Waldron [:rwaldron]]

This really should be left to end developers to implement in JavaScript. See: https://bugzilla.mozilla.org/show_bug.cgi?id=693014