Autoplay video on mobile

I seem to remember that video is not allowed to autoplay on mobile to save on data bandwidth. It works fine on desktop but just shows a static image on mobile, yet I have found sites like this http://baron-baron.com where it autoplays on my mobile and it’s hard to see what is really different.

Any ideas how to make this work in Blocs? It’s quite annoying because the test video is less than 1mb.

Did you try my snippets site? I have there a autoplay example… is for opening message in the end but check as they work in mobile, you have there the snippets to make it work.

https://blocs.pt/message_after_video_autoplay_ends.html

The main https://blocsapp.com. website has video that auto plays on mobile.

@Pealco for some reason that script wasn’t working at all for me, even on desktop. All I could see was the player controls when I linked to my client’s video, however it did actually show me the solution before I’d even sipped my first cup of coffee!

When I tried to right click the video to “save as” up popped the lazy-load graphic, rather than the video, so I went back and disabled that in project settings and then found the normal Blocs video player works as hoped on mobile. I have it set to autoplay and loop, but no player controls. This was just a test video and I’ll need to edit it, but it works.

1 Like

Actually, video plays in autoplay on mobile phones with Android, but does not play at all on iPhones, neither with finger tap nor in autoplay. At least if the video is not from you tube streamed respectively embedded as an asset in Blocs and after export from Blocs hosted on the web hosting server within the vid folder that Blocs exports.

I wonder if video hosted on YouTube but linked in Blocs would work, because YouTube videos clearly can be watched on iPhones.

OK that’s interesting to know. I have an Android phone here so I have not been able to test that. From searching just now on Google it seems iPhones are only effected when in low power mode.

I think the player bric almost needs an option to show the player button if autoplay does not begin. Something like described here https://stackoverflow.com/questions/54379718/autoplay-video-iphone-low-power-mode-not-working

I built this on blocs and autoplay video works on mobile.

http://ghanadesign.net/

So does mine on an iPhone SE IOS 13:
https://sidneys-blues.de

Some browsers like Brave are disabling autoplay by default on any device. I think we need a back up option where a play button appears if autoplay is blocked for any reason @Norm

I have come across hero blocs with a video where the first video frame is black and all you see if a black void on the page with no video. If you do use video like this try to make sure the first frame has an image.

@Flashman
As far as I know, iPhones are are affected in general not auto-playing any video if Autoplay is on (and Controls are off). Firefox on Android autoplay my videos. Firefox on iOS (iPhone) does not, neither does Safari.

As soon as you switch on the controls in Blocs, the video still does not autoplay on the website, but with the controls it can be started (on iPhones). To Note Android phones are not affected by this - they autoplay fine.
But worse, a new problem just occurred that I did not have had before. On a client’s website I have on the home page a background video and on the shopping page the normal video bric. On both videos I switched in Blocs the autoplay and controls on and uploaded it 10 minutes ago to the web server. When I start either video on the iPhone, it plays the video in a modal with black background. However, this could be, because my video dimensions are not the predefined 16:9 standard in Blocs. But it is annoying, because the video dimensions had been specifically made shorter in height to remain in context of the other elements on the page.

Yes, you are right I wished that Blocs would have the function at least to put a “Play” button triangle in the centre of the video (like it is on the sample Vimeo video bric in Blocs) to start the play as an alternative control.
However, I think the whole kerfuffle has more to do with how Apple does not want video and sound to be played automatically.


@kwakukwaku
Yes, your video runs on my iPhone (16:9 Blocs standard) but the video is left and right truncated. Same effect as if you use a picture for the Hero Bloc and watch it on the XS breakpoint. Only the vertical middle ground of the image is visible. Same on an Android phone.


@Bootsie
It looks like an image with Ken Burns effect. If this is done as a video it does work fine in my iPhone. Now, how did you do this?

You’re right.
It’s an image with a Ken Burns effect made with iMovie and exported as a .mp4 file.

I haven’t tried it, but you may be able to do something similar with a still image using the card designer bric, that now has a full width option and that has a Ken Burns effect. https://blochead.dev @Whittfield could probably clarify that.

I’ll give it a try.
Stand by …

Make sure you get the 1.4 update. This was only released yesterday. Existing card brics will need to be rebuilt, but it’s a pretty cool update. Card Designer 1.4 is now available!

Yes, but how did you make it work on the iPhone? Did you just use the Video bric in Blocs and what adjustment did you do? I guess it is a Local Video, 16:9 Ratio, with

  • Autoplay On
  • Muted On
  • Plays Inline Off
  • Loop On
  • Controls Off

That mp4 file cannot be large and I assume you did not change/add anything (Div, Column, Row etc.) in the Layer Navigator.

Got it already.
You can create a similar effect, but it is not the same.
I stick to the iMovie solution.

Although I know there’s a thread or even a video for that, I’ll try to explain.

create a 1 column row bloc
set padding to None
set width to Full

in the row disable “Include Gutters”
implement the video bric in this column
now you have a full size column with a video which is fully responsive on all breakpoints

I hope this helps.
video

2 Likes

First Thanks a lot, Bootsie.

Aha, I see now what is different. You have checked “Plays Inline”. I have this not checked. I will try this and see if my video will work on the iPhone with this. :pray:

1 Like

I’m not sure if this is responsible for that.

@Bootsie
Thank you Bootsie. You solved the mystery.

@Flashman
You can make the video work on Android and iOS devices exactly the way Bootsie explained. It is indeed that you must check “Plays Inline”. My clients videos work now fine on my iPhone exactly as intended (jeffriramli.com/).