帶HTML5的全屏幕背景視頻

我正在嘗試創建一個帶有全屏幕背景視頻的網站，因此我在Google和StrackoverFlow上搜索了幾個網站。最有趣的帖子是關於http://www.html5-fullscreen-video.com，但我無法得到它的工作。帶HTML5的全屏幕背景視頻

有沒有人有一個工作源代碼，成功地啓動桌面和平板電腦的全屏幕背景視頻？

乾杯，塞巴斯蒂安

來源

2012-03-13 Sebastian

任何人都多一些提示嗎？ http://www.ycoyacht.com/看起來很不錯，只在平板電腦上不起作用。 – Sebastian 2012-03-13 16:18:00

檢查這真的是很好的教程：https://dev.opera.com/blog/everything-you-need-to-know-about-html5-video-and-audio-2/

您videotag應該像

<video poster="movie.jpg" controls> 
    <source src='movie.webm' type='video/webm'/> 
    <source src='movie.ogv' type='video/ogg'/> 
    <source src='movie.mp4' type='video/mp4'/> 
    <p>Your browser doesn t support html5.</p> 
</video>

海報是你的縮略圖和源是不同的瀏覽器不同的來源。

你可以註冊使用時的.htaccess文件喜歡你的服務器videotypes：

AddType video/ogg .ogv 
AddType video/mp4 .mp4 
AddType video/mp4 .mov 
AddType video/webm .webm

來源

2012-03-14 10:22:31 longilong

謝謝，會檢查它！ – Sebastian 2012-03-14 16:04:26

歡迎您。以及未來：每個問題只能接受一個答案！如果您發現其他評論有用，您可以在點擊左側數字上方的箭頭的同時上傳它們。 – longilong 2012-03-15 10:31:41

有需要照顧的兩件事情：

1.您的視頻元素具有以適應孔篩F.E.通過

.videotag{ 
    min-width: 100%; 
    min-height: 100%; 
} 
//should work, if not add position:absolute; left: 0px; top:0px;

2.be肯定的，那你的視頻標籤總是在背景和沒有按牛逼覆蓋任何HTML內容的CSS。你可以用z-index來解決這個問題。更高的數字位於較低的Z指數數字之上。

.videotag{ 
    min-width: 100%; 
    min-height: 100%; 
    z-index: 1; 
} 
.contentToOverlayVideo{ 
    z-index: 5; 
}

來源

2012-03-13 16:35:45 longilong

您好，感謝您的評論，我如何需要將視頻放在網站上？ YCOYacht網站使用這樣的東西：

– Sebastian 2012-03-13 21:19:30

帶HTML5的全屏幕背景視頻

回答

相關問題