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

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

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 3

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 4

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

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

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