IPad html5 video with NO controls?

Question

It kills me all day, but I'm not sure how to make the html5 video player work without built-in controls.

I don’t want to control something, never, but if I don’t turn them on, the video doesn’t seem to want to play, even if I add a few javascript below, trying to make it play, it works on iPhone and several browsers, but not iPad, what is strange, any idea?

Here is some markup if that helps!

<video src="video.mp4" id="video" poster="image.jpg" onclick="this.play();"/></video> $('#video').click(function(){ document.getElementById('video').play(); }); 

Answer 1

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

The workaround is to position the invisible div over the video element and snap the click that plays the video to this (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(); }); 

Answer 2

By design, you can’t auto-play the video, but just remove the controls after the playback has started, which I assume is the effect you really want:

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

Answer 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" - deletes controls during playback

It starts automatically on a laptop and runs on an iPad!
thanks doin

Answer 4

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

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

Answer 5

IOS 6 currently supports the autoplay element on some devices.

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