1296090 - HTML5 video controls' buttons are tiny on html5demos.com (and other sites?)

Status: RESOLVED INCOMPLETE

(Firefox for Android Graveyard :: Audio/Video, defect, P3)

Description

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Attachment: html5demos screenshot (small)

STR:
* Go to http://html5demos.com/video
* Long-press "Show controls"
* Tap the screen to show the video controls

Expected: Buttons sized for fingers
Actual: Tiny buttons

I compared the controls with those on youtube, which has controls sized as expected.

I noticed the controls on youtube appear to be the default controls, however, so it seems like this issue may be specific to certain sites.

fwiw, I have no issues hitting them but I do feel more tense when trying to hit the smaller targets.

Comment 1

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Attachment: youtube screenshot (expected size)

Comment 2

[Sebastian Kaspari (:sebastian; :pocmo)]

Ray, do you have an idea why the controls are smaller?

Comment 3

[Ray Lin[:ralin]]

Hi, Sebastian

I think it is width scale problem. The html width of http://html5demos.com/video and YouTube are 620px and 360px, but they both scaled in the same device width. That means controls on http://html5demos.com/video is almost two times smaller than on YouTube.

Current our style works fine with responsive web page and normal scaled layout, like YouTube. It's come with complication to adapt most pages, however, at least detect resolution and resize if necessary is what we could do.

Comment 4

[Barbara Bermes [:barbara] - NI please!]

What do you think Anthony, is this a major UX concern?

Comment 5

[Ray Lin[:ralin]]

There's a function[0] which adjust controls' style according to the size and the width/height ratio of video.
For now, it's a desktop specific feature since the breakpoints doesn't make sense to touch control, but it should be where we start from.

[0] https://dxr.mozilla.org/mozilla-central/rev/97a52326b06a07930216ebefa5af333271578904/toolkit/content/widgets/videocontrols.xml#1465

Comment 6

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to Barbara Bermes [:barbara] from comment #4)
> What do you think Anthony, is this a major UX concern?

I think we should fix this so that our touch targets stay the same size on all videos. 

Of course, for smaller videos, we would eventually have to remove certain "features" so that it fits inside the frame of the video. Ive posted this spec elsewhere before but I can't find the spec right now.

Basically, as the video width gets smaller, we can't fit as many "features" so things like volume and the progress indicators + cast button, would be the first to be removed to make way for the other buttons. Next would be the mute button. Play/pause, and fullscreen are probably the most important to help the user gain control.

Comment 7

[Wesley Huang [:wesley_huang] (EPM) (NI me)]

Ray, are you still working on this ?

Comment 8

[Ray Lin[:ralin]]

Sorry that I haven't been looking for this bug for long. My queue is quite full now, so won't be able to work on this  before getting form autofill project finished at some point.

Comment 9

[BMO Automation]

We have completed our launch of our new Firefox on Android. The development of the new versions use GitHub for issue tracking. If the bug report still reproduces in a current version of [Firefox on Android nightly](https://play.google.com/store/apps/details?id=org.mozilla.fenix) an issue can be reported at the [Fenix GitHub project](https://github.com/mozilla-mobile/fenix/). If you want to discuss your report please use [Mozilla's chat](https://wiki.mozilla.org/Matrix#Connect_to_Matrix) server https://chat.mozilla.org and join the [#fenix](https://chat.mozilla.org/#/room/#fenix:mozilla.org) channel.