2012-03-03 578 views
3

動態更改網頁中HTML5視頻寬度和高度的最佳方式是什麼?我所指的行爲類型與http://flipboard.com/動態更改HTML5視頻分辨率的最佳方式

的介紹視頻中的行爲類似。當窗口大小調整後,視頻仍佔用可查看大小的100%(不滾動)。我注意到視頻在某種程度上被調整大小,但停止調整大小並在某個時間點被裁剪。

獲得相同行爲的最佳方式是什麼?我想讓視頻佔據瀏覽器的整個可視區域而無需滾動條。這只是在臺式機/筆記本電腦上,我不考慮任何移動設備的ATM。

現在我想到的是動態地改變視頻的寬度/高度屬性以適應使用javascript的可視區域,同時也設置了一個最小尺寸,使視頻不會變形。視頻可以放在一個始終居中的容器中,因此如果瀏覽器的尺寸太小,它會被裁剪。我不確定這是否太冗長,如果有更簡單的方法。

謝謝。

回答

0

它看起來像他們有高度和寬度設置爲100%的CSS屬性。如果您使用的元素檢查器(如Chrome瀏覽器內置的Chrome或Firebug內置元素檢查器),您應該能夠清楚地看到它們如何爲video元素以及其嵌套的div元素構造html/css。然後,如您所說,還設置了最小寬度/最小高度屬性。

除非我誤解了你的問題,否則應該那麼簡單。希望這可以幫助!