![](/img/trans.png)
[英]Chrome / Safari HTML5 Video Fullscreen Mode not working properly
[英]Safari html5 video fullscreen size
在 OSX Safari 上,單擊全屏時的 HTML5 視頻標簽。 如何強制視頻覆蓋全屏而不是顯示帶有黑色背景的小尺寸(可能是原始尺寸)?
好的,找到了。 設置最大高度時需要一些 CSS。 回答:
video:-webkit-full-screen {
width: 100%;
height: 100%;
max-height: 100%;
}
正如@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 的普通控制器的樣式,並確保它們不會顯示並使其有點尷尬。
這么久真好。 我們現在需要讓控制器工作。 這可以通過使用全屏 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();
}
}
});
如果你想知道如何添加畫中畫,你可以在這里看到這篇文章
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.