Кроссбраузерное решение для обнаружения кликов видео?

Question

Я создаю «редактор», используя JQuery. Когда я щелкаю свой элемент видео, он должен показывать мой div меню. Но он не работает на Firefox, кажется, что он не реагирует на код события клика, который я применил к нему.

Любые идеи, как я могу показать свое меню, когда вы нажимаете мой видео на Firefox?

$(document).ready(function() {
  $('.my-widget').click(function() {
    $('.my-menu').toggle();
  });
});

body {
  text-align: center;
}
.my-widget * {
  width: 200px;
  height: auto;
}
.my-menu {
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: red;
  text-align: center;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="my-menu">
<p>menu</p>
</div>
 
<div class="my-widget">
  <video controls="controls"><source src="https://storage.coverr.co/videos/Empire?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjExNDMyN0NEOTRCMUFCMTFERTE3IiwiaWF0IjoxNTc5MTUyMTk3fQ.C3WW6q97qHYspm5Hjn10mfbYCAfdR9jkm81QtNI2mF4"></video>
</div>

<div class="my-widget">
  <img src="https://images.pexels.com/photos/3445716/pexels-photo-3445716.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/>
</div>

<p>Click the image or video to toggle the menu</p>

Answer 1

Поскольку браузер предоставляет доступ, когда пользователи нажимают на элементы управления MediaElements, вам необходимо удалить атрибут controls из элемента <video>:

<video controls="controls"><source="..."></video>