<video onclick> в Firefox - PullRequest
Новая
       24

<video onclick> в Firefox

1 голос
/ 09 мая 2019

Javascript при нажатии на элемент видео HTML не работает.

РЕДАКТИРОВАТЬ: В Firefox (66.0.5 (64-разрядная версия)) не работает.В Chrome (74.0.3729.131) работает.
Нет ошибок в консоли.

Я помещу текст в поле div, когда видео щелкает / запускается (с продолжительностью видео). 

function myfunction () {
  console.log("onclick");
  document.getElementById("videotextbox").innerHTML = "VIDEO-INFO";
}
<div>
  <video onclick="myfunction()" id="videoid" width="600" controls>
    <source src="myvideo.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>

<div id="videotextbox"></div>

w3schools write:

Поддерживаемые теги HTML: Все элементы HTML, КРОМЕ: , ,
, , ,

Пожалуйста, решение без jquery или ajax.

Ответы [ 2 ]

1 голос
/ 09 мая 2019

Это из-за controls. Ни один браузер не показывает, когда пользователи нажимают на элементы управления MediaElements.

Вы можете попробовать нажать кнопку воспроизведения или шкалу времени в Chrome, и вы увидите, что события щелчка фактически остановлены.

В Firefox эти элементы управления охватывают весь элемент видео, и, таким образом, у вас нет события щелчка, выходящего на ваш элемент. (Технически, Chrome тоже, и я подозреваю, что это ошибка, которую они оставили , когда они сделали своего обновленного игрока).

Так что если вам действительно нужны события щелчка, не устанавливайте атрибут controls: 

document.querySelector('video').onclick = e => 
  console.log('clicked');
<video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/a4/BBH_gravitational_lensing_of_gw150914.webm/BBH_gravitational_lensing_of_gw150914.webm.480p.webm" autoplay></video>

Но, как правило, вам не нужно прослушивать события щелчка, а скорее события СМИ , такие как playing, pause, seek и т. Д. 

const vid = document.querySelector('video');

['playing', 'pause', 'seeked', 'ended'].forEach(t => 
   vid.addEventListener(t, e => console.log(t))
);
video{
  max-height: 100vh;
  margin-bottom: 100px;
}
<video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/a/a4/BBH_gravitational_lensing_of_gw150914.webm/BBH_gravitational_lensing_of_gw150914.webm.480p.webm" controls></video>
0 голосов
/ 09 мая 2019

Альтернативное решение:

использовать HTML Аудио / Видео DOM закончили Событие. 

var myvideo = document.getElementById("videoid");
myvideo.onended = function() {
  document.getElementById("videotextbox").innerHTML = "VIDEO-INFO";
};

https://www.w3schools.com/tags/av_event_ended.asp

...