CODEWITHSUNDEEP
javascriptjqueryhtmlfirefox
mataka
mataka

Reputation: 115

click jquery on a video doesn't work

When I try to click on video using js in Friefox click and display in console the id of the video it doesn't work. Why? 

$('.videoclass').click(function() {
  console.log(this);
  var id = $(this).attr("id");
  console.log(id);
})
<video controls="" id="ui-id-1" class="videoclass" style="position: absolute; top: 118px; left: 61px;" width="320" height="240">    <source id="videoavantuuid" src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> </video>

Upvotes: 3

Views: 1483

Answers (2)

zer00ne
zer00ne

Reputation: 43880

Firefox controls is the Whole Video Tag

Problem

"When I try to click on video using js in Friefox Firefox click and display in console the id of the video it doesn't work. Why? "

Explanation

Firefox has a play button center poster and Chrome does not. This is an obvious indicator that FF has controls attribute that covers the entire tag and Chrome does not, it's controls are accessible only at the bottom where the bar is.

Firefox video tag is interpreting the click on it's controls property first so the click event registered on .vid is never fired or more likely event was fired then e.stopPropagation() was called so nothing else would be triggered by a click.

Recap

To summarize so far:

  1. Firefox video tag behavior: responds to click events with play/pause but no other callbacks are triggered.

  2. Firefox controls interacts with all click events directed to the video tag.

Solution ⭐

If you need controls on the video tag, then do not register the click event on the video tag. Register an alternate yet similar event instead:

mousedown,focus, contextmenu, etc.

Demo

Review the Demo with Firefox:

  • There's 3 video tags:

   #ID      [controls]      Event             Result on Firefox v.60.0.2

#vid0 ---- true ------ click --------- Plays video / Does not run callback

#vid1 --- false ------ click --------- Does not play video / Runs callback

#vid2 ---- true ------ focus --------- Plays video / Runs callback ⭐

$('.vid').on("click", identify);

$('.ff').on('focus', identify); //⭐

function identify(e) {
  var eventcurrentTarget = e.currentTarget.id;
  var eventTarget = e.target.id;
  var thisId = this.id;
  console.log({
    eventcurrentTarget,
    eventTarget,
    thisId
  });
}
figure {
  width: 320px;
  margin: 0 auto 20px 0
}

figcaption {
  font-size: 32px
}

.as-console-wrapper {
  margin-left: 325px;
  width: 40%;
  min-height: 96%
}

.as-console-row:after {
  display: none !important
}
<figure>
  <figcaption>#vid0</figcaption>
  <video id="vid0" class="vid" width="320" height="240" controls>   
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> 
</video>
</figure>

<figure>
  <figcaption>#vid1</figcaption>
  <video id="vid1" class="vid" width="320" height="240">
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> 
</video>
</figure>

<figure>
  <figcaption>#vid2 ⭐</figcaption>
  <video id="vid2" class="ff" width="320" height="240" controls>   
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> 
</video>
</figure>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 3

Jonathan Schell
Jonathan Schell

Reputation: 119

Change the below piece of the code

$('.videoclass').click(function() {

to 

$(document).on('click', '.videoclass', function(){

and it should work.

Upvotes: -1

Related Questions