我嘗試過使用標簽，但是當(dāng)調(diào)整窗口大小時，我需要視頻在調(diào)整窗口大小時填充空間。在最大比例下，它填充了空間，并且隨著縮小，它開始在頂部和底部添加大量空白。超文本標記語言<video playsinline autoplay muted loop poster="images/user_item.mp4" class="w-100" style=""> <source src="images/user_item.mp4" type="video/mp4"></video>CSSvideo { position: absolute; min-width: 100%; min-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 300px; border-radius: 5px 0 0 5px;}是否可以在畫布中播放視頻并調(diào)整畫布大小并使其填充所提供的整個空間？
1 回答
白衣染霜花
TA貢獻1796條經(jīng)驗 獲得超10個贊
不需要畫布，只需使用 CSS 即可。特別是在這里，您想要該object-fit財產(chǎn)。
默認情況下，視頻設(shè)置為contains，這意味著它將把媒體的大小設(shè)置為最小邊，并將邊框添加到最大邊，從而保持媒體的長寬比。
從你的描述來看，很不清楚你是否想要cover保持寬高比但剪切媒體，
video {?
? ? position: absolute;
? ? width: 100vw;
? ? height: 100vh;
? ? top: 0;
? ? left: 0;
? ? object-fit: cover;
}
<video src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm" autoplay loop muted></video>
或fill，它只是拉伸/收縮介質(zhì)。
video {?
? ? position: absolute;
? ? width: 100vw;
? ? height: 100vh;
? ? top: 0;
? ? left: 0;
? ? object-fit: fill;
}
<video src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm" autoplay loop muted></video>
對于未來的讀者，請注意此 CSS 屬性也可以設(shè)置為 <canvas>。
- 1 回答
- 0 關(guān)注
- 181 瀏覽
添加回答
舉報
0/150
提交
取消