背景に映像が流れるページ


2016年7月20日

はじめまして新入部員のウルトラマンです。

背景にムービーを流すページ

最近よく背景にムービーを流しているページをよく見かけるので はじめの第一歩として作って見ようと思います。
下の実行結果は、インラインフレームで表示させています。
(ページ全体で見れば背景全体にムービーが流れています。→ポップアップ全体表示で見たい方はこちら
 

実行結果

 

ソースコード

解説

1.ブラウザ別に対応させるため動画ファイルタイプは、mp4とwebm2つ設定します。
(webm動画はGoogleが推奨するものでChrome, Firefox, Operaでネイティブにサポートされています)

2.ページを読み込んだ際動画が読み込まれるまで、表示させておく静止画が必要なので、違和感のないよう動画の1フレーム目をポスター画像として用意します。
たった4行ほどのコードで実装完了です。

補足として「.htaccess」の設定
動画ファイルをブラウザに認識させるための下記コードを入れますと背景動画が再生エラーが減らせます。

他にもCSSなどを使ってムービーの横サイズをレスポンシブに変更できたりします。

参考情報

http://www.tohoho-web.com/html/video.htm

あいさつ

今後とも宜しくお願いします