CODEWITHSUNDEEP
javascriptjqueryhtml
Mohammad Ali Akbari
Mohammad Ali Akbari

Reputation: 10395

Prevent pausing video on click

How can I prevent pausing video on-click? e.preventDefault; dose not work.

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
  $(function () {
    $('video').click(function (e) {
      e.preventDefault;
    });
  });
</script>

Upvotes: 4

Views: 1035

Answers (2)

loelsonk
loelsonk

Reputation: 3596

Here is workaround to your problem.

We add event listener onpause. Whenever we detect pause event being triggered we run play() method.

We could also do the following thing: (same effect as example below, but simplified)

<video id="bunny" width="400" controls  onPause="this.play();">

See working example.

var vid = document.getElementById('bunny');
vid.addEventListener('pause', function(e) {
  vid.play();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="bunny" width="400" controls  >
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

Upvotes: 3

Badacadabra
Badacadabra

Reputation: 8517

Remove controls and add autoplay:

<video width="320" height="240" autoplay>
  <source src="http://www.uio.no/tjenester/it/multimedia/utvikling/video/test.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Upvotes: 1

Related Questions