我嘗試過使用標簽，但是當調整窗口大小時，我需要視頻在調整窗口大小時填充空間。在最大比例下，它填充了空間，并且隨著縮小，它開始在頂部和底部添加大量空白。超文本標記語言<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;}是否可以在畫布中播放視頻并調整畫布大小并使其填充所提供的整個空間？
1 回答
白衣染霜花
TA貢獻1796條經驗 獲得超10個贊
不需要畫布，只需使用 CSS 即可。特別是在這里，您想要該object-fit財產。
默認情況下，視頻設置為contains，這意味著它將把媒體的大小設置為最小邊，并將邊框添加到最大邊，從而保持媒體的長寬比。
從你的描述來看，很不清楚你是否想要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，它只是拉伸/收縮介質。
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 屬性也可以設置為 <canvas>。
- 1 回答
- 0 關注
- 189 瀏覽
添加回答
舉報
0/150
提交
取消