How to fix a feature that interferes with Firefox's default HTML5 video player

Why

onclick="this.play();"
Run codeHide result

interferes with HTML settings Firefox HTML5 and how to fix them?

I have this problem when I gave my onclick poster to play this function and it works in browsers other than firefox. Firefox defaults to HTML5 video control no longer working. If you press the play button, it does nothing but update the area, and the play button appears again, but the video will never play. But if you skip a video in certain parts, it will β€œeventually” load and play it.

Here is 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>
Run codeHide result
+4
source share
2

firefox.

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();
    }
});
Hide result

myVideo "bigvid3". , .

, .

+1

firefox, , . firefox, .

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

, , firefox, , . .

. .

+2

Source: https://habr.com/ru/post/1653040/


All Articles