鍍金池/ 問(wèn)答/HTML5  HTML/ html5 video標(biāo)簽 自適應(yīng)

html5 video標(biāo)簽 自適應(yīng)

我需要在調(diào)整瀏覽器窗口的時(shí)候 可以讓視頻適應(yīng)窗口的大小.

網(wǎng)上找了個(gè)css3屬性object-fit, 這個(gè)倒是很牛逼,可是兼容性太差了.

或者只能想辦法, 計(jì)算窗口的比例, 然后根據(jù)視頻的比例, 判斷下, 重新計(jì)算video的寬高?

求指教...

回答
編輯回答
大濕胸

一般是不寫height值，讓他等比適應(yīng)寬度的100%，也就是
<video src="movie.mp4" width="100%" controls="controls">
Your browser does not support the video tag.
</video>

2018年8月20日 13:08
編輯回答
老梗

不太明白你的意思，你想要的效果是瀏覽器窗口多大，視頻就顯示多大嗎？

<video width="100%" height="100%" autoplay src="ds.mp4"></video>
  • 用百分比布局就行了，如果想要全屏自適應(yīng)，直接body寬高設(shè)置為100%，然后讓video繼承body的寬高。
  • 這時(shí)候就算窗口如何縮放，video始終顯示的是整個(gè)瀏覽器窗口的大小。
2017年7月22日 14:31
編輯回答
疚幼

只需要控制寬就行了 width="80%" 類似這樣，高度會(huì)隨著寬度自適應(yīng)變化的~

2017年1月12日 08:50
編輯回答
夢(mèng)一場(chǎng)

網(wǎng)上找了個(gè) 假如視頻比例是4比3, 可以父盒100%寬, 按照比例padding-bottom. 然后在設(shè)置vedio寬高100%.

2018年6月27日 06:39
編輯回答
故人嘆

自適應(yīng)窗口如果不考慮豎屏 而且要消除視頻黑邊 （屏幕比例與視頻比例不一致會(huì)出現(xiàn)）

那么給視頻容器高度一個(gè)滿屏的設(shè)置 然后
把視頻弄成絕對(duì)定位，
高度100%
寬度（重點(diǎn)：calc(100vh / 0.562)）<--此方法能讓視頻永遠(yuǎn)保持16：9
top0；
left50%;
transform: translateX(-50%);

2017年11月28日 08:31