CODEWITHSUNDEEP
jqueryipadhtmlvideohtml5-video
user1370288
user1370288

Reputation: 919

iPad html5 video with NO controls?

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();
});

Upvotes: 25

Views: 24379

Answers (5)

net.uk.sweet
net.uk.sweet

Reputation: 12431

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();
});

Upvotes: 14

egandesign
egandesign

Reputation: 51

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

Upvotes: 5

Purple Tentacle
Purple Tentacle

Reputation: 178

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);

Upvotes: 3

Doin
Doin

Reputation: 8194

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>

Upvotes: 8

fseydel
fseydel

Reputation: 305

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

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

Upvotes: 2

Related Questions