Streaming live at 10am (PST)

HTML5 Video autoplay now working on mobile?


#1

Hi,

I've been looking into how to implement HTML5 videos as a background video on mobile. Previously I thought it was impossible due to OS limitations, however I've found it being used on quite a few websites now (They aren't GIFS as far as I can tell) and was wondering if anyone had any advice on how I could achieve this?

Here's an example,

www.theweeknd.com


Here is my public share link: LINK
(how to access public share link)


Autoplay Background Video - Not working
#2

Apparently you only need the playsinline attribute...

I have a working example with just that code:

At least on iPhone / IOS10

<video playsinline autoplay loop muted style="min-width:100%; min-height:100%;" >
 	<source type="video/mp4" src="//bg.cdn.ustudio.com/app/transcodes/TQAdh6DJdtuY.mp4">
 	<source type="video/webm" src="//bg.cdn.ustudio.com/app/transcodes/TuX1xml2yZsS.webm">
</video>

EDIT: Ok so neither theweeknd.com nor my example work on Android. So i suspect this method only works for iOS10. Maybe also on very modern Androids handsets and browsers...

EDIT2: I confirm all of the above


Template HTML Video Playback on Mobile Devices
Background video on mobile?
#3

That's absolutely incredible, thank you so much for your quick help Vincent! Unfortunately I don't have an android device to test this on, but do you know if I'll need to supply a fall back image for older android devices?


#4

iOS relaxed their restrictions. If the video doesn't have sound, it CAN be autoplayed inline.


#5

I have tested it on many android devices now, so I can say it's not working at all on Android. Only iOS10 Safari.

So yes you need to provide a fallback for all the rest.


Embed Video Not Displaying on Mobile View
#6

Oh ok, so the mutedattribute isn't even needed. Makes sense.


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.