CODEWITHSUNDEEP
javascriptjqueryhtmlfirefoxvideo
Jeffrey James
Jeffrey James

Reputation: 95

How to fix a function that's interfering with Firefox's Default HTML5 Video Player

Why is 

onclick="this.play();"

interfering with Firefox's HTML5 default video controls and how to fix it?

I have this problem where I gave my poster an onclick play this function and it works on browsers except for firefox. Firefox's default HTML5 video control is now not working. If you press play it does nothing but refresh the area and the play button reappears but the video never plays. But if you skip the video to certain parts it will 'eventually' load and play it.

Here's the code:

<video id="bigvid3" poster="https://cdn.shopify.com/s/files/1/0641/4457/files/Very_Clean.jpg?
5718060450832183858" onclick="this.play();" preload="none" controls="controls" width="100%">
<source src="//cdn.shopify.com/s/files/1/0641/4457/t/3/assets/InnovoThermometer.mp4"    type="video/mp4">
</video>

Upvotes: 4

Views: 77

Answers (2)

Fred Joseph
Fred Joseph

Reputation: 264

You have to disable firefox's default controls.

document.getElementById('myVideo').addEventListener('click', function (event) {
    event.preventDefault(); // Prevent the default behaviour in FireFox

    // Then toggle the video ourselves
    if (this.paused) {
        this.play();
    }
    else {
        this.pause();
    }
});

Replace myVideo with your video ID in this case "bigvid3". You will get the functionality you're looking for.

If you want to learn more refer to this link as it too answers this question.

Upvotes: 1

Ji_in_coding
Ji_in_coding

Reputation: 1701

Just tried running your snippet on firefox, it is indeed not behaving as intended. If this is a problem only in firefox, then i can suggest a work around.

onclick="if(!$.browser.mozilla){this.play();}"

What this code does is to check if the browser is firefox, if yes, do nothing. this will allow you to rely on the default click handling.

see the sample on codepen

Upvotes: 2

Related Questions