有没有办法让图像触发全屏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添加一个点击事件,将视频带入完整的浏览器屏幕。这可能吗??
$(function() {
$(SELECTOR).on('click', function(event) {
event.preventDefault();
$(VIDEO SELECTOR).requestFullscreen();
});
});
<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>
你可以使用jQuery。就像是:
$(function(){
// Helper function to Fill and Center the HTML5 Video
jQuery('video, object').maximage('maxcover');
});