Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
UKMonti

Video Autoplay for both desktop browsers and mobile browsers

Recommended Posts

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,

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

:)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×