Plyr: Toggle pause/play does not work on Android

[omitech]

• [x] Issue observed on https://plyr.io

Expected behaviour

Click (or tap) on the video container (outside control buttons) should toggle pause/play.

Actual behaviour

Pause does not work when clicking( or tapping) on the video container in Chrome on Widows with touchscreen monitor and in Chrome on Android (6/7). Video does start when clicking(tapping) on the video container, but does not pause. It only works on click(tap) on video control button. However, pause works in Chrome on non-touchscreen PC and it also works in IE edge, Firefox with / without touchscreen.

So my guess, it is somehow related to handling touch events in Chrome.

Environment

• Browser: Chrome
• Version: 62.0.3202.94 (64-bit)
• Operating System: Windows 10
• Version: build 1709

Players affected:

• [x] HTML5 Video
• [ ] HTML5 Audio
• [x] YouTube
• [x] Vimeo

Steps to reproduce

• On an android device, start/pause video at https://plyr.io by tapping on the video container. It starts, but does not pause.

Relevant links

[jarekskuder]

Same here. Everything was fine until recently. I have Cordova app that plays video stream and now every time I call pause, in the debugger I see pause event, but the video doesn't stop.

[omitech]

I'm not seeing pause event triggered in Chrome (only when clicking pause button) :
````
v = document.getElementsByTagName("video")[0];
v.addEventListener("pause", function() {console.log('pause event')});

[omitech]

I think the problem lies in this code https://github.com/sampotts/plyr/blob/9c4b53d761929ab7305f6bfdbd7fc541ed902d43/src/js/plyr.js#L3295

                // On click play, pause ore restart
                _on(wrapper, 'click', function() {
                    // Touch devices will just show controls (if we're hiding controls)
                    if (config.hideControls && plyr.browser.isTouch && !plyr.media.paused) {
                        return;
                    }

So basically if browser.isTouch == true then video will not pause on click (provided that hideControls is set to true). The problem is that isTouch that is defined as "ontouchstart" in document.documentElement returns true only in Chrome by default.

IE, edge and firefox returns false even if touch events are supported by OS. In firefox you must explicitly set dom.w3c_touch_events.enabled to 1 (or 2) in config to enable touch events on desktop.

Not sure if there are any workarounds for this. Maybe by defining separate touch and click events: Click pauses the video, touch displays controls, and pauses if controls are already visible.

[sampotts]

This is being fixed in v3 (working on it at the moment). It's one of the last big pieces of v3 work before it can be beta tested. The detection of touch devices has always been a bit flaky so I'm going to look at trying to listen for mouse vs touch events. The issue is iOS will sometimes fire mousemove even though it has no mouse, etc. It's a real pain.

[sampotts]

Closing this one as I think it's fixed but feel free to re-open if not solved in v3 👍

[fietstouring]

still seems to be an issue in latest version 3.3.7, at least for me.
Pause not possible on Android chrome

[friday]

@fietstouring See #968

[mattbarnicle]

this also does not work for me using v3.4.6 on Android Chrome, but only with Vimeo videos in an iframe. it works for YouTube videos in an iframe and vimeo videos in an HTML5 <video> tag. tapping the screen will play the video, but subsequent taps will not pause the video nor bring up the hidden controls. so there is no way to pause the video unless the controls are always shown.

[ilearnio]

Doesn't work for me as well. Since I am hiding all controls except big play button and fullscreen, there is no way to pause the video on mobile

[ilearnio]

My temporary workaround, maybe it will save someone's time

/**
 * Fixes pausing on click on mobile
 * https://github.com/sampotts/plyr/issues/718
 */
fixMobileClick () {
  const player = this.plyrVideo
  const { wrapper, container } = player.elements
  if (!container._clickListener) {
    container._clickListener = event => {
      const targets = [container, wrapper]

      // Ignore if click if not container or in video wrapper
      if (!targets.includes(event.target) && !wrapper.contains(event.target)) {
        return
      }

      if (player.touch) player.togglePlay()
    }
    container.addEventListener('click', container._clickListener)
  }
},

[patchon]

fixMobileClick () {
  const player = this.plyrVideo
  const { wrapper, container } = player.elements
  if (!container._clickListener) {
    container._clickListener = event => {
      const targets = [container, wrapper]

      // Ignore if click if not container or in video wrapper
      if (!targets.includes(event.target) && !wrapper.contains(event.target)) {
        return
      }

      if (player.touch) player.togglePlay()
    }
    container.addEventListener('click', container._clickListener)
  }
},

Thanks for this!

[CiriousJoker]

I couldn't get @ilearnio 's solution to work, so here's mine:

  /**
   * Fixes pausing on click on mobile
   * https://github.com/sampotts/plyr/issues/718
   */
  const videoWrapper = document.getElementsByClassName("plyr__video-wrapper")[0];
  videoWrapper.addEventListener("click", event => {
    player.togglePlay();
    event.stopPropagation(); // Necessary or the video will toggle twice => no playback
  });

  player.toggleControls(false);

Querying for .plyr__video-wrapper could fail for multi-video sites, keep that in mind!

[drzeitraum]

In version 3.6.2 the problem still exists.
Fix for the multiple video:

//init
const players = Array.from(document.querySelectorAll('<SELECTOR>')).map(player => new Plyr(player));
players.forEach(function (player, i) {
    //fix
    document.getElementsByClassName("plyr__video-wrapper")[i].addEventListener("click", event => {
        player.togglePlay();
    });
});