CODEWITHSUNDEEP
javascripthtmlvideo
user1128677
user1128677

Reputation: 479

Firefox onlick event on html5 video

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...?

Upvotes: 2

Views: 578

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

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>

Upvotes: 3

Related Questions