最近は動画を背景に使ったWebサイトもよく見かけます。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。
実例
作る際に気を付けるポイント
- 動画ファイルは出来るだけ軽くする。（あくまでイメージなので長さも1分くらいをめどに）
- デフォルトではミュートの設定に
- あくまでも背景なので自動再生とループ再生の設定にする。（自動再生が効かないスマホでは代替え画像を使用する）
まずはhtmnl5のvideoタグのプロパティを覚えましょう
src="" (URL)ファイルのURL
height="" 数値 要素の高さ
width="" 数値 要素の幅
autoplay="" autoplay 自動的に再生を行います。
controls="" controls 動画再生をコントロールするUIを表示します。
loop="" loop 動画を繰り返し再生します。
metadata 動画ファイルを読み込みはじめるタイミングを設定します。preloadが指定されていてもautoplayが入っている場合、autoplayが優先されます。
poster="" (URL) ブラウザが指定したファイルを再生できない環境の場合、代替する画像を指定できます。
muted 動画に音声がついている場合、音を出さない設定にできます。
mediagroup="" 任意の文字列 audioとvideoなどを同期できます。同じ値を入力することで、同じグループとして指定し、再生を同期することができます。
