在OSX Safari上,点击全屏时的HTML5视频标签。如何强制视频覆盖整个屏幕,而不是显示黑色背景的小尺寸(可能是原始尺寸)?
答案 0 :(得分:4)
好的,找到了。设置max-height时需要一些CSS。回答:
video:-webkit-full-screen {
width: 100%;
height: 100%;
max-height: 100%;
}
答案 1 :(得分:0)
正如@Jack所说,我们需要使用CSS -webkit-full-screen
我想你想拥有自己的自定义控制器吗?在这种情况下,我们需要将控制面板和视频放在div中,然后使用full-screen
。我们只需将其称为videoContainer
首先我们制作HTML
<div class="videoContainer">
<video id="video" allowfullscreen="allow">
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<p>Your browser does not support the video tag.</p>
</video>
<!-- Control -->
<div class="control">
<a class="play mediaplayer-play"></a>
<a class="fullscreen mediaplayer-full-screen"></a>
</div>
</div>
<强> CSS 强>
.videoContainer:fullscreen, .videoContainer:-ms-fullscreen, .videoContainer:-moz-full-screen, .videoContainer:-webkit-full-screen {
width: 100%;
height: 100%;
}
有时它可能是错误的(Safari中的错误),所以解决这个问题的方法是将样式添加到默认控件。
video:-webkit-full-screen::-webkit-media-controls-panel, video:-webkit-full-screen::-webkit-media-controls, video:-webkit-full-screen::-webkit-media-text-track-container {
display: none !important;
opacity: 0;
}
这将影响Safari的普通控制器,并确保它们不会显示并使它变得有点尴尬。
这么好。我们现在需要的只是让控制器工作。这可以通过使用fullscreen API
的一些jQuery / Javascript代码来完成$(".fullscreen").click(function(){
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
// exit full-screen
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}else if (document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled) {
var i = $("#videoContainer");
// go full-screen
if (i.requestFullscreen) {
i.requestFullscreen();
} else if (i.webkitRequestFullscreen) {
i.webkitRequestFullscreen();
} else if (i.mozRequestFullScreen) {
i.mozRequestFullScreen();
} else if (i.msRequestFullscreen) {
i.msRequestFullscreen();
}
}
});
如果你想知道如何添加画中画和Airplay,你可以看到这篇文章here