フルスクリーン背景ビデオ（HTML5）

Question

フルスクリーンの背景ビデオを含むウェブサイトを作成しようとしているので、GoogleのいくつかのサイトとStrackoverFlowのいくつかの記事を検索しました。最も興味深い投稿は、http://www.html5-fullscreen-video.comについてのものでしたが、私はそれを働かせることはできません。

デスクトップやタブレット用のフルスクリーン背景ビデオを正常に起動する誰かが作業中のソースコードを持っていますか？

乾杯、 セバスチャン

Answer 1

チェックこれは本当に良いチュートリアル：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 

Answer 2

あなたはの世話をする必要がある2つのものがあります：

1.yourビデオ要素は、穴の画面f.e.に合わせて持っていますCSSで

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

2.beあなたのvideoタグがバックグラウンドで常にあり、tは任意のHTMLコンテンツをオーバーレイdoesnのことを、確認してください経由。これをZ-索引で解くことができます。より高い数字は、より低いz-インデックス番号の上にある。

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