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.

[dmlap]

Decided to add a state to the player that listens for mouse or touch events and updates a class on the player. When we know it's touch, we double the font size.

[bc-bbay]

On it

[heff]

@bc-bbay get anywhere with this?

[heff]

Moving this to 5.1 as it's something that needs more research and probably isn't API breaking.

[UIX-Design]

@gkatsev I found out this here:

const player = videojs(video, {
    controls: true,
    controlBar: {
        volumePanel: {
            inline: false,
        }
    }
});

if (window.mobileAndTabletcheck()) {
        player.ready(function () {
            player.usingNativeControls = true;
            player.src({ type: 'video/mp4', src: '/assets/videos/video.mp4' });
            player.requestFullscreen();
            player.play();
        })
}

window.mobileAndTabletcheck = function () {
    var check = false;
    (function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true; })(navigator.userAgent || navigator.vendor || window.opera);
    return check;
};

Result:

Why nativeControls doesn't work on this way on tablet devices like iPad Pro?

const player = videojs(video, {
    controls: true,
    nativeControlsForTouch: true,
    controlBar: {
        volumePanel: {
            inline: false,
        }
    }
});

if (window.mobileAndTabletcheck()) {
        player.ready(function () {
            player.src({ type: 'video/mp4', src: '/assets/videos/video.mp4' });
            player.requestFullscreen();
            player.play();
        })
}

Result:

After closed an opened fullscreen again:

Why is this happening?