html5 视频上的 Firefox onlick 事件

Question

In Mozilla Firefox click on html5 video makes it pause/play by default, but not in Chrome or Safari. And i want to disable this behavior in FF. But it seems that FF prevent from bubbling some events on video and i cant catch clicks.

window.addEventListener("click", function(e){
    if (e.target && e.target.matches('.html5video')) { 
        console.log('click');
    }       
});

This code will do nothing in FF.

Any suggestions to solve this? How can i track click events on html5 video tag in FF?

Should i use some kind of wrappers or...?

Answer 1

In the last version of FF (64) if you remove the controls attribute of the video element your code works.

If you cannot remove controls you may listen, for instance, on the pause event. On pause start playing again....

 document.querySelector('.html5video').addEventListener('pause', function(e) { // don't pause.... this.play(); })

 <video class="html5video" width="400" controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video>