背景に映像が流れるページ
はじめまして新入部員のウルトラマンです。
背景にムービーを流すページ
最近よく背景にムービーを流しているページをよく見かけるので
はじめの第一歩として作って見ようと思います。
下の実行結果は、インラインフレームで表示させています。
(ページ全体で見れば背景全体にムービーが流れています。→ポップアップ全体表示で見たい方はこちら)
実行結果
ソースコード
1 2 3 4 5 6 7 8 9 |
<body> <!--再生設定--> <video id="hoge_video" autoplay="" loop="" muted="" poster="静止画.jpg" preload="none"> <source src="動画.mp4" type="video/mp4"> <source src="動画.webm" type="video/webm"> </video> <center><h1>ほげほげほげ</h1></center> </body> |
解説
1.ブラウザ別に対応させるため動画ファイルタイプは、mp4とwebm2つ設定します。
(webm動画はGoogleが推奨するものでChrome, Firefox, Operaでネイティブにサポートされています)
2.ページを読み込んだ際動画が読み込まれるまで、表示させておく静止画が必要なので、違和感のないよう動画の1フレーム目をポスター画像として用意します。
たった4行ほどのコードで実装完了です。
補足として「.htaccess」の設定
動画ファイルをブラウザに認識させるための下記コードを入れますと背景動画が再生エラーが減らせます。
1 2 3 |
AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm |
他にもCSSなどを使ってムービーの横サイズをレスポンシブに変更できたりします。
参考情報
http://www.tohoho-web.com/html/video.htm
あいさつ
今後とも宜しくお願いします
ディスカッション
コメント一覧
まだ、コメントがありません