Autoplay not working on chrome, videojs 6.4.0 / chrome 62.0.3202.75 (Works on Firefox / Edge)

[erick3000]

Description

Using the latest 6.4.0 js and css the autoplay doesn't work only on chrome, tested on firefox / edge and it work. Also videojs 5 autoplay does work, so it seems to be a problem related to version 6.

Steps to reproduce

Explain in detail the exact steps necessary to reproduce the issue.

1. Load latest JS / CSS 6.4.0
2. Print the player
   (example)
3. try all 3 browsers
   -Chrome
   -Edge
   -Firefox

Results

Chrome - No Autoplay
Edge - Autoplays
Firefox - Autoplays

Expected

Chrome - Autoplays
Edge - Autoplays
Firefox - Autoplays

Actual

autoplay doesn't work

Error output

none

Additional Information

Video js version 5 does autoplay correctly

versions

videojs

6.4.0 / 6.2.8 tested

browsers

chrome

OSes

windows

plugins

none

[gkatsev]

I'm unable to reproduce this. How are you setting autoplay? Would you be able to make a reduced test case where you can reproduce this? Do you happen to have data saver enabled (not even sure if it's available on desktop)?

[muralimnmcse]

Me too facing issue after the chrome's updated.
Cross-origin plugin content from http://vjs.zencdn.net/swf/5.3.0/video-js.swf must have a visible size larger than 400 x 300 pixels, or it will be blocked. Invisible content is always blocked.

[gkatsev]

Flash is a whole other matter

[andriybohdan]

Looks like i'm having the same type of problem.

The sample with autoplay below works fine in Safari and Firefox, but doesn't work in Chrome 62.0.3202.94 MacOS High Sierra.

https://codepen.io/bav/pen/opvMmx

[gkatsev]

@andriybohdan it works for me when I change to the "full" view on codepen: https://codepen.io/bav/full/opvMmx/, I wonder if the sandboxing in the normal view in codepen is causing issues.

[andriybohdan]

@gkatsev Thanks for checking. Hmm.. it works for me in Full view too, but not when i run it outside of codepen.

Here's the same demo from codepen but without sandboxing:

http://soft-systems.net/t/video-js/index.html

Video is played without issues in Safari, Firefox and iOS Safari, but it fails to auto start in Chrome.

[gkatsev]

Weird, I can repro your page locally @andriybohdan. I'll take a look, thanks.

[gkatsev]

That's super weird. Works fine without video.js but fails with Video.js. My local dev setup is autoplaying just fine too.

[gkatsev]

@andriybohdan do you happen to have an https version of that test page? I wonder if that's an issue?

[gkatsev]

Tested with an https thing myself and seems to also not work there. It does work without Video.js.

[gkatsev]

I can get the codepen to fail by middle clicking and to open in a new tab and then switching over.

[andriybohdan]

yeah, it's strange. If i switch off video.js it works just fine with plain html5 video.

I think it can be related to "src=" attribute. When i check this codepen in safari video.js adds src=...:

<video id="player_html5_api" class="vjs-tech" tabindex="-1" autoplay="" muted="muted" **src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"**>
  <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>

but it's missing when checking in Chome:

<video id="player_html5_api" class="vjs-tech" tabindex="-1" autoplay="" muted="muted">
  <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>

[gkatsev]

I don't think that matters.
I also found that we have a bug in our play() handling that's causing some issues, so, it can't be used as a workaround for this either. I really wonder why my dev environment works fine but not this test page.

[gkatsev]

OH, I got it to work. If I put Video.js into the head, it works fine but not if I have it in the body like it is right now. Bizarre.

[gkatsev]

Actually, if it's before the video element it seems to work fine.

[gkatsev]

For example: https://solutions.brightcove.com/gkatsevman/fail.html

I'll see if I can narrow down why it's happening. I wonder if it's a chrome bug related to their autoplay work.

[andriybohdan]

Right you're. Thanks a lot!

And now there's "src=" attribute in Chrome as well, so probably it's related in some way.

[gkatsev]

Seems like it's something to do with moving the video element in the DOM along with the addition of the autoplay attributes. Trying to make a reduced test case and this is what it's leading me to.

[gkatsev]

I think the problem here is that we have the video element autoplay too early, then when we move the video element into the player div, chrome will pause the video and we don't replay it.

[gkatsev]

I have a potential fix for this: #4804

[andriybohdan]

@gkatsev i've got a chance to try this fix and seems like now it plays video even when autoplay is off in Chrome.

[gkatsev]

Thanks for testing @andriybohdan, I think I just messed up the conditions :)

[gkatsev]

@andriybohdan I pushed up an update, would you be able to re-test?

[gkatsev]

So, the fix for this introduced a regression #5005. In Chrome 65, it seems to no longer be necessary, I'm going to verify whether it's necessary for Chrome 62, 63, and 64. If it's not necessary in chrome 64, what are your thoughts about getting rid of this workaround? @andriybohdan @tjaneczko @videojs/core-committers.

[gkatsev]

well, I can't even reproduce our failing test cases from above in browserstack. Maybe it's no longer an issue and we can just remove the workaround.

[tjaneczko]

If it's no longer an issue with Chrome and the browserstack tests are passing on various versions I think it's probably ok to remove this workaround

[misteroneill]

Agree with @tjaneczko - if it's no longer reproducible in a few recent versions of Chrome, we should revert the workaround.

[rijosh]

This is because of now chrome is preventing auto play in html5 video, so by default they will not allow auto play. so we can change this settings using chrome flag settings. this is not possible for normal case so i have find another solution. this is working perfect...
(add preload="auto")

//Video auto play bug fixing
var herovide = document.getElementById('videoBanner');
herovide.autoplay=true;
herovide.load();
//Video auto play bug fixing

[campones]

facing a weird issue with videojs 7.0.5 where autoplay works fine while navigating through the site but not working when pressing the refresh button (f5). that's with chrome 70, no issues on firefox.

[gkatsev]

That sounds like expected behavior if you have a low IME score on Chrome. Once you interact with a domain, autoplay restrictions are released until the page is refreshed/navigated away from.
We have a best practices post on our blog: https://blog.videojs.com/autoplay-best-practices-with-video-js/

[campones]

maybe but on my other domain, the exact same site will autoplay so..

[mister-ben]

but on my other domain, the exact same site will autoplay

That's exactly the point of the "media engagement index". Chrome will allow autoplay with fewer restrictions on domains you personally visit and watch sufficient video. Equally just because the MEI score is high enough for a domain for you to autoplay, it doesn't mean it is for anyone else.

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#mei

[stratboy]

I have tried every possible solutions explained here, but video.js doesn't autoplay with chrome. It does in every other browsers but not chrome. Also note that, as pointed out by others here, it will perfectly work without video.js. So it's not a chrome issue, nor a configuration issue. It must be a bug.

As for completeness, I have tried all these ways:

• use native video autoplay mute props
• use data-setup='{ "autoplay":"mute" }'
• use player.autoplay('mute') on player.ready, with or without the previous 2, in all combinations
• use player.autoplay('mute') on player.ready, but delaying the internal call by 1000ms
• add a direct js .load() as per @rijosh suggestion

With all those combinations, the following results:

• nothing worked with chrome
• every solution worked with all other browsers
• as already pointed out, it all works fine in chrome if video.js is not loaded/used

P.s.
I read somewhere in stackoverflow that chrome seems not to be happy if markup is added via js around the video tag. Don't know if it's a reliable point, but maybe needs further investigation.

[gkatsev]

I looked into it a bit as part of #5581 and it does seem like there's something weird going on. We'll investigate more.

[stratboy]

Ok I SOLVED this issue this way (kind of a hack) > extracted from some source of mine, so please forget variables:

  <video  loop class="video-js main-video-bg" id="video-bg">
    <source src="<?= $video_bg_mp4; ?>" type="video/mp4">
  </video>

Than later

var player = videojs('video-bg');
player.ready(function(){
  _.delay(function(){ player.autoplay('muted'); }, 1000); // lodash here, but it could be simply setTimeout
});

So 3 things are implied here:

• Didn't use video's autoplay/muted attributes or data-setup
• Used 'muted' and not 'mute' (before > MY FAULT!!!)
• Delayed the player autoplay call <<< this is crucial. Used 1000ms, but maybe even less is enough.

Now it works, but the need for delay is quite a strange thing. Maybe, if really needed for chrome, you could hide it into your autoplay implementation.

Tested on:

• Mac > chrome/firefox/safari
• Pc > chrome/firefox/edge/ie11

[gkatsev]

Thanks @stratboy that's helpful. It did seem like some timing issue when I looked at it quickly yesterday, so, thanks for confirming it. We definitely should be covering it internally in Video.js. Users shouldn't need to do that.

[stratboy]

@gkatsev chrome's need for some time to wake up before doing well, is something I already saw before 2 or 3 more times on other contexts than video (don't remember, but I clearly remember reviewing some code of mine that had timers with some 'chrome wtf/hell' comments beside). It's kind of buggy without any reason sometimes. To be true, I never liked chrome, I never felt it as something really solid, don't know why, but my 20 years of web development force me to this instinct for some unknown reason 🤓

[gkatsev]

Hah, yeah, there's definitely sometimes weird things happening.

[dhullsumit]

I solved. this is not a generic solution, but its working fine for me.
you just need to reload page.

<video preload="auto"autoplay muted loop >
<source src="vid.mp4" type="video/mp4">
</video>

<script>
var video = $("video").get(0);
video.load();
video.play();
if (video.paused){
location.reload(true);
}
</script>

[stratboy]

@dhullsumit please see mine above.

[dhullsumit]

@stratboy, this is for if you are not using any pluging.

[stratboy]

@dhullsumit as I wrote, you can just use a plain-ancient-pure-vanilla-shining-javascript setTimeout() function instead of _.delay.

[webakimbo]

More data in case it's useful:

• Delaying play/autoplay in my js does not work for me, including @stratboy's implementation above.
• BUT I can play the video just fine if I run the exact same command manually in the js console.

Worth noting that I'm running an old version (v5.17.0) on a 2yo Rails codebase; Sprockets is choking on the newer version I downloaded (v7.3.0).

[asksandeep]

Thanks :) It's working