[ACCEPTED]-HTML5 video background on iPad/iphone-html

In http://www.develooping.com/canvas-video-player/ you can see a responsive mp4 background 4 working in iPad/iPhones. Download the code 3 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 2 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 1 it can help.

Just mark as record. Nowadays, the ability 4 of background video get supported (iOS 10 3 +) due to the new policies of WebKit.

To 2 be specific, check out the official document 1 below. https://webkit.org/blog/6784/new-video-policies-for-ios/

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

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

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

SquareSpace uses an interesting approach 6 to "simulating" video on their 5 website by using a clever loop of .pngs 4 and overlays. See http://www.squarespace.com/

If you sift through the 3 HTML you will find the hand sequence here: http://cf.squarespace.com/details/musician-hand-sequence-hires.png

It 2 works on phones.. Just something to think 1 about.

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

I 3 see three options, assuming you don't need 2 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 1 works fine.

I have stumbled upon something that might 5 help you with this task..

http://vagnervjs.github.io/frame-player/

Its a JS player 4 that receives a JSON list of images representing 3 frames of the video.

This will also provide 2 flexibility with regards to styling options 1 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.

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