Question

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 video to function normally; on iPad iOS.

Note: // Could I somehow remove ‘Controls’ with a script; while keeping it in tact within the HTML5 video mark-up; could this be a viable solution?

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