全屏視頻簡介HTML5？

好，所以我需要有一個視頻加載全屏作爲網站的介紹。我可以在HTML5中做到這一點，還是需要使用Flash？全屏視頻簡介HTML5？

有人可以請解釋或指向我如何做到這一點的好資源。

我需要網站加載和5秒剪輯播放通過沒有播放器控制或任何東西，然後直接進入主網站。

正是這樣的例子：http://www.firecrackerfilms.com/

謝謝:)

來源

2012-04-30 BrettGolding

你不想全屏，你只是想填補整個客戶區，根據您的示例網站。 – Brad

該視頻*既不是全屏，也不是全視口*。 – msanford

這裏是關於HTML5的一個很好的線程VS Flash視頻和利弊： HTML 5 <video> tag vs Flash video. What are the pros and cons?

個人而言，我更喜歡HTML5，因爲你可以在iPhone或iPad等幾乎所有設備上觀看視頻等）。

但是html5並沒有flash視頻那麼強大。

您還應該考慮到有些用戶在瀏覽器中禁用了javascript或flash配置。

來源

2012-04-30 19:04:29 MUG4N

我不認爲真正的全屏可能與用戶請求它。至少在閃光燈中是不可能的。

如果你的意思是要填充整個視口，那麼可以通過使用css來設置視頻元素的大小來完成視覺元素的大小，如果你將寬度和高度設置爲與視頻的寬高比不匹配，視頻不會被拉伸以填充框。相反，視頻保留了正確的寬高比，並在視頻元素中使用了letterbox。視頻將在視頻元素內儘可能大地呈現，同時保留寬高比。

來源

2012-04-30 19:05:49 drogadon

如果您需要設置一個背景視頻試試這個

使用position:fixed上的視頻，將其設置爲100％width/height，並在其上添加一個負z-index所以會出現的一切背後。

如果你看VideoJS，控件只是html元素。

HTML

<video id="background" src="video.mp4" autoplay>

CSS

#video_background { 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: -1000; 
}

來源

2012-04-30 19:06:54 coder

+1正如我已經做了幾次，但問題是，當你迫使它適應視口時，你會失去視頻的寬高比。我提出的解決方案保留了方面，但有些視頻丟失的警告。根據我的經驗，這兩種解決方案都可以接受，這取決於您的視頻內容。 – msanford

是的，我同意我們放寬視頻的寬高比。 – coder

只是爲了完整而提及:) – msanford

在你的榜樣的頁面是不是全屏，也不是它甚至全視，it's a small video黑色背景，融合成該頁面的黑色背景。 如果你能做到這一點，這將工作。

如果你關心在iPad上，你會never be able to auto-play an HTML5 video介紹，因爲iOS的抑制autoload和autoplay，除非它們被用手指觸摸屏幕觸發。但是再一次，它無法播放Flash。

如果您希望HTML5視頻成爲全視口，例如在4：3顯示器中觀看16：9視頻，則會使視頻變成全高並丟失視頻的邊緣。對於相反的情況也是如此。這將保持視頻的寬高比，但需要注意的是，您將視頻內容的一部分遺失給了隱藏溢出。按照@coder的建議，如果你不關心寬高比，你可以製作視頻height: 100%和。

由於這個原因，在您的示例網站上使用它們可能會更容易，並使視頻融入背景。

來源

2012-04-30 19:15:36 msanford

全屏視頻簡介HTML5？

回答

相關問題