нажмите JQuery на видео не работает

Question

Когда я пытаюсь нажать на видео с помощью js в Friefox, нажмите и отобразите в консоли идентификатор видео, которое не работает. Зачем?

$('.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>

Answer 1

Элементы управления Firefox - это тег всего видео

---

Проблема

"Когда я пытаюсь нажать на видео с помощью js в Friefox Firefox щелкните и отобразите в консоли идентификатор видео, которое не работает. Почему? "

---

Пояснение

Firefox имеет плакат в центре кнопки воспроизведения иChrome нет.Это очевидный показатель того, что у FF есть атрибут controls, который охватывает весь тег, а у Chrome нет, он controls доступен только в нижней части панели.

Видео тег Firefox интерпретирует щелчоксначала это свойство controls, поэтому событие click, зарегистрированное в .vid, никогда не запускается или более вероятно, что событие было вызвано, а затем вызывается e.stopPropagation(), так что больше ничего не будет вызвано щелчком.

---

Резюме

Подведем итог:

1. Поведение видео-тега Firefox: реагирует на события нажатия с воспроизведением / паузой, но другие обратные вызовы не запускаются.

2. Firefox controls взаимодействует со всеми событиями кликов, направленными на тег видео.

---

Решение ⭐

Если вам нужно controlsв теге video, затем не регистрируйте событие click для тега video.Вместо этого зарегистрируйте альтернативное, но похожее событие:

mousedown, focus, contextmenu и т. Д.

---

Demo

Просмотрите демонстрацию с помощью Firefox:

• Есть 3 видео тега:

# ID [controls] Событие Результат на Firefox v.60.0.2

#vid0 ---- true ------ click --------- Воспроизведение видео / Не запускается обратный вызов

#vid1 --- false ------ click --------- Не воспроизводит видео / Запускает обратный вызов

#vid2 ---- true ------ focus --------- Воспроизведение видео / запуск обратного вызова ⭐

$('.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>

Answer 2

Измените приведенный ниже фрагмент кода

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

на

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

, и он должен работать.