html5全屏视频onClick事件

Question

有没有一种方法可以使图像触发全屏html5视频？ 基本上我有这样的事情：

           <div class="slide" id="">
               <img src="../root/img/gc_small.png" id="videoPlay" style="margin:200px 0 0 0;">
                <video autoplay loop muted controls="false" id="myVideo">
                    <source src="video/portal.mp4" type="video/mp4">
                </video>
            </div>

所以我当时想隐藏#myVideo并向#videoButton中添加一个click事件，以使视频进入完整的浏览器屏幕。 这可能吗？？

Answer 1

<video id="videoplay" controls="controls" autoplay="autoplay"> 
    <source src=small.mp4 type=video/mp4>
    <source src=small.3gp type=video/3gp>
    <source src=small.webm type=video/webm> 
    <source src=small.ogv type=video/ogg> 
</video>
<script type="text/javascript">
var myVideo = document.getElementById('videoplay');
myVideo.addEventListener('click', function () {
if (myVideo.paused) {
if (myVideo.requestFullscreen) {
    myVideo.requestFullscreen();
}
else if (myVideo.msRequestFullscreen) {
    myVideo.msRequestFullscreen();
}
else if (myVideo.mozRequestFullScreen) {
    myVideo.mozRequestFullScreen();
}
else if (myVideo.webkitRequestFullScreen) {
    myVideo.webkitRequestFullScreen();
}
myVideo.play();
}
else {
myVideo.pause();
}
}, false);
</script>

Answer 2

$(function() {
    $(SELECTOR).on('click', function(event) {
        event.preventDefault();
        $(VIDEO SELECTOR).requestFullscreen();
    });
});

Answer 3

您可以使用jQuery。 就像是：

$(function(){
 // Helper function to Fill and Center the HTML5 Video
 jQuery('video, object').maximage('maxcover');
});