Html5全屏视频
答
不，还没有办法做到这一点呢。我希望他们在浏览器中添加这样的未来。
编辑：
现在有针对网络可以requestFullscreen上的视频或Canvas元素要求用户给你permisions并使其全屏Full Screen API。
让我们考虑这个元素：
<video controls id="myvideo">
<source src="somevideo.webm"></source>
<source src="somevideo.mp4"></source>
</video>
我们可以把该视频到全屏模式，这样的脚本：
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
答
您可以用jQuery做到这一点。
我有我的视频和控制自己的<div>这样的：
<div id="videoPlayer" style="width:520px; -webkit-border-radius:10px; height:420px; background-color:white; position:relative; float:left; left:25px; top:55px;" align="center">
<video controls width="500" height="400" style="background-color:black; margin-top:10px; -webkit-border-radius:10px;">
<source src="videos/gin.mp4" type="video/mp4" />
</video>
<script>
video.removeAttribute('controls');
</script>
<div id="vidControls" style="position:relative; width:100%; height:50px; background-color:white; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; padding-top:10px; padding-bottom:10px;">
<table width="100%" height="100%" border="0">
<tr>
<td width="100%" align="center" valign="middle" colspan="4"><input class="vidPos" type="range" value="0" step="0.1" style="width:500px;" /></td>
</tr>
<tr>
<td width="100%" align="center" valign="middle"><a href="javascript:;" class="playVid">Play</a></td>
<td width="100%" align="center" valign="middle"><a href="javascript:;" class="vol">Vol</a></td>
<td width="100%" align="left" valign="middle"><p class="timer"><strong>0:00</strong>/0:00</p></td>
<td width="100%" align="center" valign="middle"><a href="javascript:;" class="fullScreen">Full</a></td>
</tr>
</table>
</div>
</div>
然后我的jQuery的.fullscreen类是：
var fullscreen = 0;
$(".fullscreen").click(function(){
if(fullscreen == 0){
fullscreen = 1;
$("video").appendTo('body');
$("#vidControls").appendTo('body');
$("video").css('position', 'absolute').css('width', '100%').css('height', '90%').css('margin', 0).css('margin-top', '5%').css('top', '0').css('left', '0').css('float', 'left').css('z-index', 600);
$("#vidControls").css('position', 'absolute').css('bottom', '5%').css('width', '90%').css('backgroundColor', 'rgba(150, 150, 150, 0.5)').css('float', 'none').css('left', '5%').css('z-index', 700).css('-webkit-border-radius', '10px');
}
else
{
fullscreen = 0;
$("video").appendTo('#videoPlayer');
$("#vidControls").appendTo('#videoPlayer');
//change <video> css back to normal
//change "#vidControls" css back to normal
}
});
它需要一点点清理因为我仍然在研究它，但据我所知，这应该适用于大多数浏览器。
希望它有帮助！
答
所有冰雹HTML5 _/\ _
var videoElement = document.getElementById('videoId');
videoElement.webkitRequestFullScreen();
答
if (vi_video[0].exitFullScreen) vi_video[0].exitFullScreen();
else if (vi_video[0].webkitExitFullScreen) vi_video[0].webkitExitFullScreen();
else if (vi_video[0].mozExitFullScreen) vi_video[0].mozExitFullScreen();
else if (vi_video[0].oExitFullScreen) vi_video[0].oExitFullScreen();
else if (vi_video[0].msExitFullScreen) vi_video[0].msExitFullScreen();
else { vi_video.parent().append(vi_video.remove()); }
答
从CSS
video {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(polina.jpg) no-repeat;
background-size: cover;
}
答
这里是一个非常简单的方法使用Fullscreen API（3行代码）和RequestFullscreen我使用的方法，它可以在所有流行的浏览器中兼容：
var elem = document.getElementsByTagName('video')[0];
var fullscreen = elem.webkitRequestFullscreen || elem.mozRequestFullScreen || elem.msRequestFullscreen;
fullscreen.call(elem); // bind the 'this' from the video object and instantiate the correct fullscreen method.
的[？有没有办法让HTML5视频全屏]（可能重复http://*.com/questions/ 1055214 /还有一种方法可以制作html5视频全屏） – Mat 2011-05-18 04:41:18