HTML5 video background on iPad/iphone

Question

I used this solution to use an html5 video as the background of my site.

However, it doesn\'t seem to work on iPad/iphone, all I am getting is a black screen, and the vi

Answer 1

Since iOS10 there is a solution, see here: https://webkit.org/blog/6784/new-video-policies-for-ios/

On iPhone, <video playsinline> elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins. <video> elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone. When exiting fullscreen with a pinch gesture, <video> elements without playsinline will continue to play inline.

Answer 2

The only way to autoplay videos on mobile devices is to ditch the html video tag.

I see three options, assuming you don't need audio:

• Use a gif instead of the video. Depending of the animation, the file size will skyrocket though
• Use a really long jpg or png that contains every frame of the video and then shift through them with javascript
• Decode the video with javascript. For example use this h.264 decoder and play videos with good compression. Only downside I see is that it requires quite some CPU for the decoding.

I went for the last solution and it works fine.