全屏背景視頻

我使用的是HTML5視頻元素，在頁面上顯示全屏背景視頻：全屏背景視頻

HTML

<video poster="<?= MEDIA_URL ?>images/video-placeholder.jpg" autoplay="" loop="" muted="" preload=""> 
    <source src="<?= MEDIA_URL ?>video/flower.mp4" type="video/mp4"> 
    <source src="<?= MEDIA_URL ?>video/flower.ogv" type="video/ogg"> 
    <source src="<?= MEDIA_URL ?>video/flower.webm" type="video/webm"> 
</video>

CSS

video { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: 0; 
    background-size: cover; 
}

這種運作良好，除了因爲視頻的1920 x 1080，在較小的屏幕上（如我的1440 mac），大部分視頻都會被裁剪掉。

是否有人知道有任何其他方式來實現這一點，而不裁剪這麼多的視頻？

來源

2014-07-13 Luke Palmer

嘗試設置css的寬度：100％;並且保留height：auto; – 131

@ahmadalbayati不幸的是，這在視頻的頂部和底部導致了一定的空白空間。 –

嘗試：

width: 100%; 
height: 100%;

我是這麼認爲的它去工作。或嘗試把標籤

video

內的一個

<div></div>

然後改變他們的屬性。

如果解決你的問題告訴我。

謝謝

來源

2014-07-13 14:36:15 user3161739

你可以試試背景：-webkit-布（添加視頻到畫布後），或者甚至更好，你可以使用-moz-元素......他們的課程只能在Chrome瀏覽器和firefox，所以它可能不是你要找的東西，但這些有兩種方式，很好知道......你可以在這裏閱讀關於-webkit-canvas：http://updates.html5rocks.com/2012/12/Canvas-driven-background-images和bout -moz-element這裏：https://developer.mozilla.org/en-US/docs/Web/CSS/element。

來源

2014-07-13 14:36:31 RanSch

是的，可惜我需要它在IE中工作！ –

全屏背景視頻

回答

相關問題