Jeffrey James Jeffrey James - 3 months ago 5
jQuery Question

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>




Answer

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.