Removing HTML5 Video 'Controls' For IPad

I've discovered when NOT including 'Controls' within the HTML5 video attribute. The iPad will not play the video. How do I remove the HTML5 video controls; while still allowing the

Solution 1:

The user needs controls to be able to interact with the video, otherwise how can they play it, pause it etc.?

You can remove the controls with JavaScript but it would have the same effect, i.e. the user unable to control the video.

So you need to either leave the control in, or hide them and build your own set using the Media API (see Working with HTML5 multimedia components – Part 3: Custom controls ). This way you could limit the controls for example.

If you want to simply allow the user to play the video when they "click" on it, you could try something like:

var video = document.getElementById('myVideoId');
video.addEventListener('click', function() { video.play(); }, false);

Solution 2:

By design you can't autoplay video, but it's simple enough to remove the controls after playback has started, which may be all you want:

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

(Not sure if iPads will honor the preload="auto" attribute, but it doesn't hurt to include it in any case).

Solution 3:

in my case it didn't want to work when the event came from the video itself so in the end I had to stretch an invisible div perfectly covering the video's surface

also it is somehow related to the click event which must occur, I have created quite a deep JS logic around it that works perfectly fine with every other device but on IPAD the "first play" works only if a separate item has been clicked (we're talking here about scenario when built in controls are off) weird but nothing else worked for me, hope this helps