Add robust support for autoplay on platforms that may prevent it

[Sivitas]

I made a comment about it on #281 but thought a new ticket would be more appropriate.

Is there any work ongoing to make autoplay on android and ios work properly?

I've done a small modification to the advanced example to autoplay and it works great on desktop but in chrome on android and safari on ios the ad gets stuck right as it loads the first frame. Looking at the console logs and the inspector, it seems the ads are playing in a separate video element loaded within an iframe (or 2) and do not have the required attributes for 'autoplay muted' (and 'playsinline' for ios) as specified in these articles

https://webkit.org/blog/6784/new-video-policies-for-ios/
https://developers.google.com/web/updates/2016/07/autoplay

[shawnbuso]

We are currently working on it and hope to have support in the IMA SDK soon. Once support is added to the SDK we should be able to get it added to the plugin relatively easily.

[Sivitas]

That's good to hear. In the mean time I've used a bit of a hack to make it work, in case it can help others

if (isMobileDevice) {
  var $video = $.find('.my-identifier-class video');
  // Might be optional, but I needed this because the attr solution 
  // wasn't autoplaying on ios still
  $video[0].muted = true;
  // This line was needed to make mobile work even though I had set autoplay and 
  // muted both to true on the videojs initial settings and on the DOM I can 
  // see these attributes already exists
  $video.attr({ muted: 'muted', autoplay: 'autoplay' });
  // Might be optional, but I needed it to make android not freeze on ad finish/new video
  // Apparently it's also not fired on ios, but it wasn't needed on ios anyways...
  $video.one('canplay', function() { $video.removeAttr('muted'); });
}

I also created a unmute button that when clicked unmutes both the video and the ad video player (using similar hacks as above)

It's not pretty, but autoplay works everywhere for me right now. Hopefully official support comes soon!

[JoshHubi]

It seems the most recent release of IMA SDK comes with autoplay support.

[Sivitas]

Just got around to testing it out, and it does seem like autoplay works out of the box now without the hacks I created before.

[stoicbuddha]

It's worked for iOS for awhile, but is it working with Android?

[Sivitas]

I see it's working on ios and android for normal VAST tags, but VPAID ads are not working right. The extra player the IMA SDK is creating for the ads does not have 'muted' or 'autoplay' attributes on them. Using the hack above + a timeout of 500ms, I can make android work. No luck with iOS.

Also, after clicking the VPAID ad, then returning and resuming the ad through the api player.ima.resumeAd(), I notice that the original video hangs after the ad ends. From what I see, the cause is due to the event CONTENT_RESUME_REQUESTED not being triggered

[stoicbuddha]

I'm seeing several creatives that are their own player on Android that put a big ol' monkey wrench in everything. That said, it's playing certain creatives flawlessly on Android, which is pretty great.

@shawnbuso Do you have plans for these creatives (the ones with their own players)? Is there a way to get them playing automatically in the SDK/plugin?

[Sivitas]

So I've created a demo github repo to show some issues. Autoplay is working for me in most cases, but as shown in issue 2 there, it does not work for our vpaid ad.

https://github.com/Sivitas/videojs-demo

[shawnbuso]

Hi all,

The IMA SDK just recently released support for autoplay on mobile. We'll need to do some testing in this plugin to see if it just works out of the box or if there's more work to be done on our end, but we'll keep you posted.

Thanks!
Shawn

[dingman]

That's great @shawnbuso! Do you have any code examples to accomplish auto-play on mobile?

[shawnbuso]

Not yet but they are in the works - I'll add a sample once I have it finalized.

[neemak]

Hi
I have done some changes according to https://developers.google.com/interactive-media-ads/docs/sdks/html5/autoplay but mobile autoplay not working.
http://adunits.popmunch.com/neema/googleads_ima_html5_samples/simple/index.html

I have included ads.js file at the bottom of index page above.

[shawnbuso]

Hi there - are you using the video.js plugin? It looks like you just have your own IMA implementation, in which case you'll want to look for help on the IMA SDK support forum. This issue tracker is only for supporting the video.js plugin for IMA.

[580]

@neemak Make sure your player is muted. If you are working with VPAID, also make sure the creative didn't change on the volume before ad being started.

[ghost]

Hi,
Our Video is not working in Android Mobile in Autoplay mode. this is our URL http://106.51.1.175/videojs-ima-master/examples/autoplay/

help us to resolve this issue asap.

[shawnbuso]

Hi, which device and os are you testing on? I tested on an up-to-date Android phone and it's working for me. When you see a problem, what is the specific issue that you're seeing?

[ghost]

Hi,
Our Video is not working in Android Mobile 7.1.1 Moto G (5S) in Autoplay mode When DataSaver is on in Google Chrome v63. Data saver on in Google chrome means Autoplay Disabled. How to overcome this issue. this is our URL http://106.51.1.175/videojs-ima-master/examples/autoplay/

help us to resolve this issue asap.

[shawnbuso]

Thanks for the info - right now we have an issue somewhere between the video.js player, videojs-contrib-ads, and videojs-ima that causes autoplay to break if it's disallowed by the browser. We're going to work with the folks from the other projects to try to figure out where the issue lies and get it resolved.

[ghost]

Hi
How can we change the preroll,midroll,postroll ads in the demo video player. Kindly guide us to change the ads.

[shawnbuso]

Hi - this issue is specific to troubleshooting autoplay on mobile. Could you open a new issue for this question? Thanks!

[shawnbuso]

I've filed videojs/videojs-contrib-ads#319 to work with the contrib-ads folks to see how we can better handle browser-prevented autoplay.

[shawnbuso]

FYI I've changed the title of this submission since this same issue now applies to non-mobile platforms that also prevent autoplay (like desktop Safari, and soon desktop Chrome).

[shawnbuso]

It looks like we won't be able to handle this completely within the player, because video.js and contrib-ads don't have great support for falling back to click to play when autoplay fails. Instead I'm updating the autoplay sample to show how you can do this for yourself using can-autoplay.

[marguinbc]

FWIW, VideoJS 6 is adding (has added) can-autoplay. I'll try to find the PR/Issue.

[shawnbuso]

Ah interesting, I did not know that - I'll see if I can use the one they have included instead.

[marguinbc]

Sorry, I misspoke. There was talk of adding it in the VideoJs Slack board but I guess it isn't/hasn't been adopted yet.

[shawnbuso]

Ah ok no worries - for now I'll just load the library myself in the autoplay example.