0

I have the below click function so that when a video is clicked the video plays. It works perfectly on desktop browsers, but on tablets does not. You press it and the video instantly pauses. I believe this is to do with the click function looking for a click and there not being one on a tablet but I'm unsure how to solve it.

HTML

<div class="section">
<div class="video">
    <video poster="img/my-poster.jpg"><source src="mp4/low-res/my-video.mp4" type="video/mp4"></video>
</div>
</div>

jQuery

$(document).ready(function () {

    $('.section video').on("click touchstart", function() {
          this.paused ? this.play() : this.pause();
});

});
caffeinehigh
  • 309
  • 1
  • 3
  • 11

1 Answers1

3

That's because your touchstart and click are in conflict.

There is a hack to prevent this conflict :

var flag = false;
$('.section video').on("click touchstart", function(){
  if (!flag) {
    flag = true;
    setTimeout(function(){ flag = false; }, 100);
    this.paused ? this.play() : this.pause();
  }
  return false;
});

Credits and more informations : How to bind 'touchstart' and 'click' events but not respond to both?

EDIT : Thanks @RoryMcCrossan for precisions about bind()

André DS
  • 1,823
  • 1
  • 14
  • 24
  • Probably want to flip it back to false in the else conditional, otherwise the flag will be true for the first video, and not work for other videos, or for itself a second time. – Taplar Oct 18 '18 at 21:09
  • The [Pointer Events Polyfill](https://github.com/jquery/PEP) also looks promising. – showdev Oct 18 '18 at 21:27