2
有沒有辦法修改視頻的全屏功能在瀏覽器中的行爲方式?我想在屏幕左側顯示視頻,在右側顯示圖片(實際上是PDF)。更改全屏html5視頻的尺寸
我曾與CSS在Chrome嘗試過:
video:-webkit-full-screen
這給了我一些成果,但不希望的一個。我應該爲此創建自定義操作嗎?如果是這樣,我怎麼讓視頻突破瀏覽器的邊界?
有沒有辦法修改視頻的全屏功能在瀏覽器中的行爲方式?我想在屏幕左側顯示視頻,在右側顯示圖片(實際上是PDF)。更改全屏html5視頻的尺寸
我曾與CSS在Chrome嘗試過:
video:-webkit-full-screen
這給了我一些成果,但不希望的一個。我應該爲此創建自定義操作嗎?如果是這樣,我怎麼讓視頻突破瀏覽器的邊界?
你應該插入一個<div>
內<video>
標籤的定義height
和width
具有以下屬性:
.video-container {
position: relative;
height: auto;
width: 60%;
}
video {
width: 100%;
max-width: 500px; // Or whatever value on your choice
height: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
隨着width
100的%,該視頻將填補整個瀏覽器的空間,但限制有多大可以通過設置max-width
或max-height
來獲得分辨率和響應度。我希望我的回答能幫助你!
編輯
以適應一個正確裏面div
,你必須分配到容器position: relative
和position: absolute
到影片本身。如果你想突破邊界,那麼你必須調整視頻的max-height
和max-width
的尺寸。
請檢查此question,因爲它與您的類似。
這將只佔用瀏覽器中的空間,而不佔用屏幕本身。 –
我修改了我的答案,看看! –
我選擇了另一種解決方案,即https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API –