Video.js: Pause/play video on tap, if control bar is visible

[Akxe]

Description

This problem was discuses here quite a few times. Youtube dedicated a lot of time to find the best way to do it, what they ended up doing is different between app and web.

App

Only show/hides controls

Web

Tap will show controls if they are hidden, if the tap will toggle play state.

Motivation

Web youtube

Mobile web youtube has this feature as described above.

Confusion

A lot of peoples are actually confused, why it isn't getting paused. I know that is was a decision, but it might be beneficial to make it as config option of player.

4557, #4623, videojs/video.js#4817

Results

I think best would be to make it as config, as both options have theirs benefits.

---

I can give a look, if you agree, otherwise I'll do it as plugin.

[mister-ben]

I don't see that behaviour on mobile web on You Tube. On Android Chrome and iOS Safari they use the native HTML video controls, both of which toggle controls but not playback. The difference on Android Chrome is a big play button is shown when paused, and if you click on (or near) that, then it pauses or plays because of the button press. Maybe what you want is just to also show the big play button when the control bar is shown?

[Snowbell92]

this is my solution for this exact same problem.

  player.on('touchstart', function (e) {
        if (e.target.nodeName === 'VIDEO') {
            if (player.paused()) {
                this.play();
            } else {
                this.pause();
            }
        }
    });

If I don't check that target is the video element, the controlbar's play/pause button malfunctions. controlbar's click event and my touch event clashes and my event wins because it is attached to player.

I tried to enable big play button with this.BigPlayButton.enable() but that gave me BigPlayButton is not defined error. I don't know what I was doing wrong.

My solution works, but I still feel like it's a hacky one. A better one would be very appreciated.

[Akxe]

@mister-ben I just re-tested iOS (iPad) and by tapping any place on screen the video toggles play state if control bar is shown. Kinda like desktop, but with the first tap to show controls.

[gkatsev]

For me, youtube on mobile just uses the native controls. As for our controls, we modeled our behavior after iOS behavior which toggles the controls during playback and disables toggling playback on the touch area. This behavior also matches how the youtube app (at least on Android) works.
To me, pausing the video whenever you touch it if the controls are hidden feels like it'll be frustrating when you want to just see the controls to say check up on time.

It's probably worth making a plugin to enable this behavior so that the code is shared between people. If it becomes really popular we can consider including it in by default with an option or something.

[Akxe]

Indeed YouTube web app changed last week...

---------- Původní zpráva ----------
Od: Gary Katsevman
Datum: 6. 9. 2018 v 21:08:56
Předmět: Re: [videojs/video.js] Pause/play video on tap, if control bar is
visible (#5403)

For me, youtube on mobile just uses the native controls. As for our
controls, we modeled our behavior after iOS behavior which toggles the
controls during playback and disables toggling playback on the touch area.
This behavior also matches how the youtube app (at least on Android) works.
To me, pausing the video whenever you touch it if the controls are hidden
feels like it'll be frustrating when you want to just see the controls to
say check up on time.

It's probably worth making a plugin to enable this behavior so that the code
is shared between people. If it becomes really popular we can consider
including it in by default with an option or something.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
(https://github.com/videojs/video.js/issues/5403#issuecomment-419207003), or
mute the thread
(https://github.com/notifications/unsubscribe-auth/AB6Lhix-kVFaEYN5EEHGHmT5F2BPS7kQks5uYXK9gaJpZM4WPU1B)
.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[pramodrwt]

+1