Html5 Video - Making The Whole Video Clickable On Android To Play?

I have added an html5 video to my mobile web app, at the moment in order to play this video the user has to click the small play icon at the bottom left of the video. Is it possibl

Solution 1:

Using jQuery you could try something like this:

$('.video').click(function() {
    this.play();
});

Solution 2:

You could do a simple click event intercept.

jQuery('video').click(function() {
    if (this.paused) {
        this.play();
    } else { 
        this.pause();
    }
    returnfalse;
});

The problem with this, is that it will override any default controls on the video. This means the user won't be able to use default browser controls. If you want custom behavior for your video like what you're asking, you should use a framework like VideoJS. This framework has the "click-to-play" behavior you're looking for, as well as the ability to style all aspects of the video playback controls.

Solution 3:

You could create a canvas overlay and when that is clicked it plays the video and hides the canvas. then when the video is complete you could 'unhide' the canvas element. this way you could also put a play icon in the canvas for the user