iPad html5 video with NO controls?

Question

This has been killing me all day, but I am not sure how to get a html5 video player working without the native controls.

I want no controls what-so-ever but if I don't include them, the video does not seem to want to play, even if I add some javascript below trying to force it to play, it works on iPhone and multiple browsers, but not iPad which is strange, any idea?

Here's some markup if it helps!

<video src="video.mp4" id="video" poster="image.jpg" onclick="this.play();"/></video>

$('#video').click(function(){
   document.getElementById('video').play();
});

Solution 1

iOS does not support the autoplay attribute of the video tag. It would also appear that you cannot use jQuery to bind to a click event from the video element (see fiddle).

A workaround is to position an invisible div over the video element and bind the click which plays the video to that (see fiddle):

HTML:

<div id="video-overlay"></div>
<video id="video" width="400" height="300">
      <source id='mp4'
        src="http://media.w3.org/2010/05/sintel/trailer.mp4"
        type='video/mp4'>
      <source id='webm'
        src="http://media.w3.org/2010/05/sintel/trailer.webm"
        type='video/webm'>
      <source id='ogv'
        src="http://media.w3.org/2010/05/sintel/trailer.ogv"
        type='video/ogg'>
</video>

CSS:

#video { border: 1px solid black; }
#video-overlay { position: absolute; width: 400px; height: 300px; z-index: 999;  }

jQuery:

$('#video-overlay').click(function(){
   document.getElementById('video').play();
});

Solution 2

By design you can't autoplay video, but it's simple enough to remove the controls after playback has started, which I'm guessing is the effect you really want:

<video id="video" src="video.mp4" poster="image.jpg" preload="auto" onplaying="this.controls=false"/></video>

Solution 3

I used this

<video id="video" controls=“true” width="300" height="250" poster="gray30x25.gif"  autoplay onplaying="this.controls=false">

controls=“true” - makes it work on ipad

autoplay - makes it autoplay except mobile

onplaying="this.controls=false" - removes the controls when playing

It autoplays on laptop, and works on iPad!
thanks Doin

Solution 4

The best I can do is play the video as soon as the user touches the screen to do anything, even scroll down the page.

function playVideoNow(e)
{
    document.getElementById('video').play();
    document.removeEventListener('touchstart', playVideoNow);
}

document.addEventListener('touchstart', playVideoNow, false);

Solution 5

As of now, iOS 6 supports the autoplay element on some devices.

Check http://www.longtailvideo.com/html5/autoloop/ for reference.

View more solutions