HTML5 Video on iPad/tablets/phone

HTML & CSS
1

Hi everyone,

Hopefully somebody can help me with this issue.

I’m currently using the following code;

<video id="self" class="html5-video player" width="100%" height="100%"  poster="images/videoimg.jpg"  loop autoplay muted>
<!-- mp4 -->
<source src="/video.m4v" type="video/mp4">
<!-- webm -->
<source src="/video.webm" type="video/webm">
<!-- ogg -->
<source src="/video.ogv" type="video/ogv">					
</video>

It works fine on the main browsers, but it will not play on ipads, tablets, iphones, smart phones etc! It defaults back to a poster image?

How can I get this to autoplay? Or another method? I don’t want any controls to show as it’s currently the top part of a parallax area which i’ve set to be the background behind text. It looks great, but on tablets and phones I want this video to play (or at the very least a tap to play etc).

Can anyone help?

2

Last time I checked, autoplay was not allowed on iOS devices. There were some hacky workarounds for it in the early days, but even those got squashed by Apple.

There are some fancy JS scripts out there for full screen video backgrounds, but just a quick check of them now on iOS reveals that they don’t work. So you may be out of luck.

(As cool as it may seem, autoplay is not a very good idea anyway. It is to designers what matches are to kids—an invitation to burn down the house. It’s not ideal to force a video download on your users.)

3

Thanks for you reply. I can see what you mean by forcing a download, shame really as it’s a corporate video that runs smoothly in the background. But I suppose it would eat into you data allowance as well with it set to autoplay.