Video.js: Big play button remains visible after autoplay begins in Firefox

[kylegilman]

Description

If the video.js script is loaded at the bottom of the page, the big play button remains visible in Firefox on autoplay videos. The play button disappears if the user pauses and presses play again. I haven't seen it in any other browsers, and if the script is loaded in the header, everything seems to work fine in Firefox.

Reduced test case with script in footer (big play button is visible in Firefox)
http://jsbin.com/luyokucuxi/1/edit?html,output

Reduced test case with script loaded in header (big play button is not visible in Firefox)
http://jsbin.com/nugunenuku/1/edit?html,output

Results

Expected

I expect to see only the video with no controls when the video autoplays in Firefox.

Actual

The big play button remains visible while the video autoplays in Firefox.

Error output

None

Additional Information

versions

videojs

Video.js version 5.17.0

browsers

Firefox 52.0

OSes

Tested on Mac 10.11.3

[kavin-90]

Your demo http://jsbin.com/luyokucuxi/1/edit?html,output no play button display for me i'm using latest firefox 52.x

so what is you're getting not happening to me so your code is working.

if you want to remove controllbar and big play button remove controls from video tag

<video id="my_video_1" class="video-js vjs-default-skin" autoplay preload="auto" width="640" height="268" 
  data-setup='{}'>

[kylegilman]

Thanks @kavin-90 but I'm not interested in disabling the controls. I want the controls to be visible when they're supposed to be visible. I just tried it again and I see now that on the first page load the big play button is not visible in Firefox, but if you refresh, presumably with some of the files now loading from your local cache, the big play button is visible. I suspect this is some sort of race condition where the video-js player is initialized after the video starts playing in the browser and doesn't get the message that the video is already playing, but I'm not sure about that. This was brought to my attention by one of my WordPress plugin's users who was getting complaints from several of his website's users so I know it's happening to other people, but if nobody else can reproduce it, here's a link to a video showing what happens.

[kylegilman]

I'm also getting reports that it happens in Edge 14 too, but I haven't been able to reproduce it myself in an underpowered virtual machine. I think you need a relatively speedy system to make it happen.

[jkhsjdhjs]

I'm experiencing the same issue. Tested it with Firefox on Arch Linux and Windows 10. Is there any workaround yet?

[kylegilman]

It's not pretty, but the best I've been able to come up with is a JavaScript callback after the player is initialized checking if autoplay is enabled, the video is not paused, but the player still has the class vjs-paused. If those conditions are met, I pause then play the video. This makes sure the video player acts like it is really playing. The basic structure is this:

if ( player.autoplay() && !player.paused() && player.hasClass('vjs-paused') ) {
    player.pause();
    player.play();
}

[jkhsjdhjs]

Thanks! Works perfectly, but I hope this will get fixed soon.

[misteroneill]

Can verify that this happens in the provided example. It looks like the vjs-has-started class is not properly toggled in this case.