Ad

Why Does Videojs Not Work Only In Chrome?

I'm using video.js in React. My problem is that video doesn't work only in Chrome. Video loads, but doesn't play automatically. It works in Firefox, Microsoft Edge, even Internet Explorer. The video starts in Chrome only when I have developer tools opened. Have you ever had a problem like this? My code is very simple:

<video data-setup='{"loop": true, "autoplay": true, "loadingSpinner": false}' 
className="video-js vjs-default-skin article-video">
    <source src={this.state.video}/>
</video>

State loads different videos based on innerWidth.

EDIT:

Attribute muted allows Chrome to autoplay video:

<video muted="muted" data-setup='{"loop": true, "autoplay": true, "loadingSpinner": false}' 
className="video-js vjs-default-skin article-video">
    <source src={this.state.video}/>
</video>
Ad

Answer

For now, chrome is preventing auto play in html5 video, so by default they will not allow auto play. Read more about the change here...

Here are their policies on autoplay:

Chrome's autoplay policies are simple:

  • Muted autoplay is always allowed.
  • Autoplay with sound is allowed if:
    • User has interacted with the domain (click, tap, etc.).
    • On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously play video with sound.
    • On mobile, the user has [added the site to their home screen].
  • Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.

As to why autoplay is enabled with the developer tools open: This vaguely answers it :

Developer switches

As a developer, you may want to change Chrome autoplay policy behavior locally to test your website depending on user engagement.

  • You can decide to disable entirely the autoplay policy by setting the Chrome flag "Autoplay Policy" to "No user gesture is required" at chrome://flags/#autoplay-policy. This allows you to test your website as if user were strongly engaged with your site and playback autoplay would be always allowed.

  • You can also decide to make sure playback autoplay is never allowed by disabling use of MEI, applying autoplay policy to Web Audio, and whether sites with the highest overall MEI get playback autoplay by default for new users. This can be done with three internal switches with

    chrome.exe --disable-features=PreloadMediaEngagementData,AutoplayIgnoreWebAudio, MediaEngagementBypassAutoplayPolicies.

Ad
source: stackoverflow.com
Ad