Increase the hit area for controls on mobile devices

[jrw95]

Found during exploratory testing on iOS and Android mobile devices.

STR:

1. Load the video.js demo page on an iOS or Android device. This bug is most noticeable on smaller-screen Androids and iPhones.
2. Tap the bigPlayButton to start playback.
3. Tap in the timeline to seek forward or backward.
4. Try to drag the scrubber forward or backward to seek. (There is a pull request to support this behavior.)
5. Tap the full-screen button.

Expected:
Touch events to start and pause playback, to seek, and to use the full-screen and volume controls succeed.

Actual:
Because the hit areas for these controls are so small, the touch events usually don't happen, or don't work as expected.

[heff]

@BCjwhisenant @gkatsev, I assume this is fixed in the BC player with mobile specific controls?

We need to find a good solution for the main lib skin as well. Previously we talked about detecting touch usage (any touch event triggered) and applying a style that bumps the default font size. That could be relatively easy.

[jrw95]

I'll talk to our intern tomorrow about testing this.

[gkatsev]

Yep, this shouldn't be a problem for the BC player.
We probably should adopt a similar strategy to what the BC player does. It detects whether it is a touch-enabled device and adds a class to the container which then enables the different styles.

[jrw95]

@paruls, can you take a look at this?

[paruls]

scrubbing and tap seeking both work relatively well. The only time I found it difficult is when the magnification came up -which wasn't interactive (I don't know if it's supposed to be) on Android. Or when a tap into the player would just select the entire player instead of pulling up the progress bar and all the options.

[mmcc]

@paruls Just to confirm on this one, are you testing the BC player or Video.js?

[paruls]

@mmcc the video.js player

[mmcc]

Excellent. Closing this one then.

[heff]

I think we still want this on open actually. We haven't done anything to adjust the size of the controls when touch is enabled yet.