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 possible to set the video so that if the user clicks any part it plays?

Testing on Android 2.3.3, on iOS the whole video seems to be clickable

My current code:

<video src="video/video.mp4" type="video/mp4" width="300" height="188" class="video" controls preload="none" poster="img/test.png" webkit-playsinline>
    </video>

Thanks

回答1:

Using jQuery you could try something like this:

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

回答2:

You could do a simple click event intercept.

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

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.

回答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

来源：https://stackoverflow.com/questions/8213622/html5-video-making-the-whole-video-clickable-on-android-to-play