Can't stop video player by clicking on it ( mobile chrome browser )

[kinkkong]

Description

I'm running very simple configuration with sample video. When I'm testing player on the desktop when the video is playing I'm able to stop it by clicking anywhere on the video player. Why I'm running that on mobile when the video is running I'm able to stop it only by clicking on the pause button.
My mobile is on Android OS I'm using chrome browser. Tested that on firefox mobile as well same behavior.

Steps to reproduce

1. Go to videoJs demo on Your android mobile
2. Try to stop the video when it is playing by clicking on it.

Results

Expected

I would like to have the same behaviour as on desktop version, stop by clicking anywhere on video.

Actual

Can't stop the video by clicking on it - mobile version.

Error output

no error

Additional Information

versions

latest

videojs

what version of videojs does this occur with?

browsers

chrome mobile, firefox mobile

OSes

Android OS

plugins

no plugins

[welcome]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[gkatsev]

Tapping on the video player toggled the controls on mobile. We don't have an option to use tap-to-play/pause on mobile like we do on desktop.
You could potentially add your own handler and toggle playback. You'll just need to make sure that the click isn't happening on a control bar element.

[stale]

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.

[Ali-Shariyat]

may this help you
const player = videojs(this, options); player.on('touchstart', function(e){ if ($(e.currentTarget).hasClass("vjs-playing")) { this.bigPlayButton.show(); player.pause() }else{ player.play() } });

[LukeMcLachlan]

may this help you const player = videojs(this, options); player.on('touchstart', function(e){ if ($(e.currentTarget).hasClass("vjs-playing")) { this.bigPlayButton.show(); player.pause() }else{ player.play() } });

this is working, however the problem I am finding is that if the click is happening on the control bar, for example if the user clicks the pause button, the video pauses momentarily but then resumes again. How do you make sure that the click isn't happening on a control bar element?
My solution, thus far and based on the stackoverflow topic https://stackoverflow.com/a/55936308/3842368, has given me the following code that detects a click on the video and not the control bar:

const player1 = videojs('my-video1', {
  controls: true,
  autoplay: false,
  preload: 'auto'
 
}); player1.on('touchstart', function(e){ console.log(e); if((e.target.tagName === 'VIDEO')) {if (($(e.currentTarget).hasClass("vjs-playing"))) { this.bigPlayButton.show(); player1.pause() }else{ player1.play() } }});