Video Autoplay for both desktop browsers and mobile browsers

[UKMonti]

Hi, I'm in the process of creating an 300x250 MPU to be uploaded to DoubleClick Studio and ideally want the video in this creative to autoplay on both desktop browsers as well as mobile browsers. So far the MPU only autoplays on desktop browsers and requires user interaction to start playing on mobile browsers.

 

I've read several forums that state that videos are unable to autoplay on mobile browsers for various reasons; so my question is, has anyone had a similar problem and been able to find a workable solution?

 

Many thanks,

[Dipscom]

Hello UKMonti,

 

Welcome to the forums!

 

Video autoplay on mobile devices is still an issue. Things are starting to improve, if you respect some parameters as described here:

 

Webkit browsers:

https://webkit.org/blog/6784/new-video-policies-for-ios/

 

Chrome:

https://developers.google.com/web/updates/2016/07/autoplay

 

So, in modern devices, you will be able to. On older devices, no. There are hacks to make it work with Canvas, image sequences and the sort but they all have the unintended side effect of being less optimised than video.

[UKMonti]

Thanks for your quick reply Dipscom!

 

I've just come across this library not long ago that seems to be allowing my videos to autoplay on mobile browsers:

 

https://www.npmjs.com/package/iphone-inline-video

 

I haven't come across any issues with it so far and it seems to be previewing okay for the time being.

[Dipscom]

That one is news to me. Good to know. Thanks for that, mate.

[joe_midi]

Oh nice Federico updated it, I think there were way more issues back in September when I first looked at that module.

 

Also can't remember what the deal was for Android.

[Jonathan]

iOS 10 supports the playsinline attribute so you can use it natively now. Just add the playsinline attribute to your video element.

 

See: https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html

<video controls playsinline>
   <source src="myfile.mp4" type="video/mp4">
   <source src="myfile.webm" type="video/webm">
   <source src="myfile.oog" type="video/oog">
</video>

But for non iOS 10 iphone/ipad devices you would need a polyfill: https://github.com/bfred-it/iphone-inline-video