HTML5 video background on iPad/iphone - html

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 video is not resizing.
Also, the video does not resize correctly when the aspect ratio of the window is not the same as the aspect ratio of the video. You will see that the background image begins to become visible.
Thanks!

Answer 1

In http://www.develooping.com/canvas-video-player/ you can see a responsive mp4 background working in iPad/iPhones. Download the code from http://www.develooping.com/wp-content/uploads/2016/04/html-canvas-video-player.zip. It uses an adapted version of HTML canvas video player script by Stanko;
<div class="video-responsive">
<video class="video" muted="muted" loop="loop" autoplay="autoplay">
<source src="mY_movie.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<canvas class="canvas"></canvas>
<div id="over_video">Look at me</div>
</div>
The script is used as follows
<script src="canvas-video-player.js"></script>
<script>
var isIOS = /iPad|iPhone|iPod/.test(navigator.platform);
if (isIOS) {
var canvasVideo = new CanvasVideoPlayer({
videoSelector: '.video',
canvasSelector: '.canvas',
timelineSelector: false,
autoplay: true,
makeLoop: true,
pauseOnClick: false,
audio: false
});
}else {
// Use HTML5 video
document.querySelectorAll('.canvas')[0].style.display = 'none';
}
</script>
The CSS is
body {
background: #000;
padding:0;
margin:0;
}
.video-responsive {
padding-bottom: 56.25%;
position: relative;
width: 100%;
}
.canvas,
.video {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
background: #000;
z-index: 5;
}
#over_video{
position: absolute;
width: 100%;
height: 100%;
text-align: center;
top: 0;
z-index: 10;
font-size: 12vw;
color: #FFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-top: 20%;
text-shadow: 4px 4px 4px #5C433B;
}
Hope it can help.

Answer 2

Just mark as record.
Nowadays, the ability of background video get supported (iOS 10 +) due to the new policies of WebKit.
To be specific, check out the official document below.
https://webkit.org/blog/6784/new-video-policies-for-ios/

Answer 3

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 4

Unfortunately, the iPad doesn't support automatic video play, so you'd need a play/stop/pause button. Here's an example of something that does work on iPad: http://html5-fullscreen-video.ceseros.de/html_5_fullscreen/movie/1

Answer 5

SquareSpace uses an interesting approach to "simulating" video on their website by using a clever loop of .pngs and overlays. See http://www.squarespace.com/
If you sift through the HTML you will find the hand sequence here: http://cf.squarespace.com/details/musician-hand-sequence-hires.png
It works on phones.. Just something to think about.

Answer 6

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.

Answer 7

I have stumbled upon something that might help you with this task..
http://vagnervjs.github.io/frame-player/
Its a JS player that receives a JSON list of images representing frames of the video.
This will also provide flexibility with regards to styling options of the video itself and responsiveness..
You could load a different set of images (lower in quality) to suuport IPADs vs. desktop support for instance.

Answer 8

Most easiest way I think, just use gif for background. For example you can convert it online like in http://ezgif.com/video-to-gif