4

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>
Jeffrey James
  • 95
  • 5

2 Answers2

2

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

Ji_in_coding
  • 1,691
  • 1
  • 14
  • 17
  • Interesting. But it appears that clicking on the poster now won't play the video as before with the modified workaround. On both codepen and on the site where the video is found, neither plays when I click the poster with this markup – Jeffrey James Aug 30 '16 at 18:53
  • @JeffreyJames I have just tested on firefox 43 and chrome. both are playing fine. are you running an older browser? – Ji_in_coding Aug 30 '16 at 18:58
  • That's odd. I am on the latest version of chrome. Firefox plays fine. IE doesnt play with the workaround. But on chrome it doesn't play. Please know I am referring to clicking the image to make the video play not clicking the actual default play button at the bottom. Sorry if there might be confusion. – Jeffrey James Aug 30 '16 at 19:08
  • @JeffreyJames Oh... I am actually clicking on the play button. But I have just tried your original code on all chrome,ie,firefox. It actually work when I click on the post image. My firefox is version 43 – Ji_in_coding Aug 30 '16 at 19:36
  • That's probably because you tried it while I was putting the old onclick function back to its original state. I'm trying the new function from another helper now. – Jeffrey James Aug 30 '16 at 19:40
1

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.

Community
  • 1
  • 1
Fred Joseph
  • 264
  • 1
  • 3
  • 10