在沒有任何溢出的情況下最大化窗口中的HTML5視頻

我正在開發Plex的開源替代方案，我試圖在播放期間讓瀏覽器中的視頻播放器佔用儘可能多的窗口，但是我遇到一些問題。 Chrome瀏覽器內置的視頻播放器正是我想要做的，如果您只是訪問其中的視頻網址，Netflix網站也是如此。但是，我一直無法在我的網站上很好地播放此內容。在沒有任何溢出的情況下最大化窗口中的HTML5視頻

我（與PrimeFaces JSF）得到了下面的代碼現在：

\t \t \t div.video-container { 
 
\t \t \t \t margin: 0; 
 
\t \t \t \t padding: 0; 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t height: 100%; 
 
\t \t \t \t text-align: center; 
 
\t \t \t } 
 
\t \t \t .expanded-video { 
 
\t \t \t \t padding: 0; 
 
\t \t \t \t margin: 0 auto; 
 
\t \t \t \t max-width: 100%; 
 
\t \t \t \t max-height: 100%; 
 
\t \t \t }

\t \t <div style="position: fixed; left: 0; right: 0; top: 0; bottom: 0; text-align: center; max-width: 100%; max-height: 100%;"> 
 
\t \t \t <p:panel header="#{rawPage.getTitle()}" styleClass="ui-noborder video-container"> 
 
\t \t \t \t <video onclick="playPause(this)" ondblclick="toggleFullscreen(this)" id="movie" src="#{rawPage.getUrl()}" type="#{rawPage.getMimeType()}" 
 
\t \t \t \t \t width="auto" height="auto" preload='metadata' controls='' autoplay='' autofocus='' class="expanded-video" > 
 
\t \t \t \t </video> 
 

 
\t \t \t \t <script src="http://vjs.zencdn.net/6.2.0/video.js"></script> 
 
\t \t \t </p:panel> 
 
\t \t </div>

的問題是，我可以得到它的水平或垂直填充窗口，但如果我調整窗口大小，那麼視頻會延伸到屏幕邊緣之外。例如：

底部切斷：

相同的視頻，窗口大小（這種行爲是正確的）：

沒有如果我訪問的網址是什麼鍍鉻的MP4文件（完全適合，沒有切斷）：

我知道我可以使用JavaScript接收窗口大小調整事件，並設置高度和寬度，但我正在尋找一個純HTML + CSS解決方案來解決這個問題，讓我保持頂部的div顯示電影的標題。（項目已經有Twitter的引導）

編輯

的DOM看起來是這樣的，一旦它是由JSF呈現：

<div style="position: fixed; left: 0; right: 0; top: 0; bottom: 0; text-align: center; max-width: 100%; max-height: 100%;"><div id="j_idt6" class="ui-panel ui-widget ui-widget-content ui-corner-all ui-noborder video-container" data-widget="widget_j_idt6"><div id="j_idt6_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">Big Buck Bunny</span></div><div id="j_idt6_content" class="ui-panel-content ui-widget-content"> 
 
\t \t \t \t <video onclick="playPause(this)" ondblclick="toggleFullscreen(this)" id="movie" src="/media/api/raw/downloads/Big Buck Bunny.mkv" type="video/x-matroska" width="auto" height="auto" preload="metadata" controls="" autoplay="" autofocus="" class="expanded-video"> 
 
\t \t \t \t </video> 
 

 
\t \t \t \t </div></div> 
 
</div>

另外值得一提的是，我們不是活得試圖支持Internet Explorer或Edge，並且，雖然我們想支持Safari，但如果我們不能，我們也可以。

來源

2017-07-27 KG6ZVP

請問，如果你不使用'p將其工作？ – Kukeltje

不是。它有些似乎更接近，但似乎我所能做的只是在優先考慮寬度或高度之間進行選擇。不幸的是，我正在使用面板顯示媒體播放的標題，並希望將其保留在頁面上。 – KG6ZVP

但是如果在沒有PrimeFaces面板的情況下核心的「問題」仍然存在，則Q的核心不是PrimeFaces相關的。爲什麼使用javascript調整大小事件錯誤？ – Kukeltje

將max-width和max-height更改爲'width'和'height'爲我排序。

你基本上告訴視頻，只要它不超過100％，它可以是任何尺寸;

.expanded-video { 
    padding: 0; 
    margin: 0 auto; 
    width: 100%; 
    height: 100%; 
}

嗯，可能錯誤地理解，但無法測試我的解決方案，視頻被阻止在工作

來源

2017-07-27 05:40:22 Gezzasa

這也會產生延伸到窗口下方的視頻。發佈編輯以包含呈現的DOM。 – KG6ZVP

最好的我可以從谷歌是https://stackoverflow.com/questions/36949747/make-video-fit-100-with-any-screen-resolution但是你的視頻將覆蓋整個屏幕，即使有副本。抱歉。希望你得到你正在尋找的答案。 – Gezzasa

您也可以使用這個CSS技巧來調節根據寬度視頻的比例; panel`：

.cover { 
    min-width: 100%; max-width: 100%; object-fit: cover; 
}

Detailed Info Here

來源

2017-07-27 05:42:24

更簡單，但如果視頻是4：3，或者您將瀏覽器窗口的大小調整爲小於其寬度，它會使視頻太高並超出屏幕底部。 – KG6ZVP

在沒有任何溢出的情況下最大化窗口中的HTML5視頻

回答

相關問題