wordpressのテーマを新しいものに変更したのを機に、サイトのトップページに動画を埋め込んでみました。
結果、デスクトップからのみですが、10秒程度のアニメ動画が表示される仕様になりました。
動画ファイルを使用すると重くなるのを心配して今まで躊躇っていたのですが（あとgoogle先生から評価下げられるのも嫌だった）、しかしアニメ制作をメインに扱っているサイトなので、そのテーマ性を重視して今回の変更にいたりました。割と心配していたほど読み込みに時間掛からないんで、ホッとはしてます笑。
以下、動画ヘッダーを採用する際のファイルの最適なサイズや仕様についてです。
- ファイル形式：.mp4（H264形式）
- 動画再生時間：10秒
- 画面サイズ：1280×720（1920×1080からリサイズ）
- フレームレート（fps）：25（29.97から落としました）
- ターゲットビットレート（Mbps）：3
- 最大ビットレート（Mbps）：10
- ファイルサイズ：3.8MB（少ないほど良い。最低でも5MB以下になるように調整）
この設定で書き出したファイルを使用しました。サイズは1280×720ですが、ヒーローヘッダーにそのまま全幅（ストレッチ）で挿入しました。結果がこのサイトのトップページです。ちなみにスマホでアクセスすると指定した静止画が表示されるため、携帯ユーザーにも優しい仕様。
ポイントは、ファイルサイズを5MB以下に抑えることです。このファイルサイズをターゲットにして、再生時間を調整したりフレームレートを弄るのが良さそうです。音声は当然必要ないので切りましょう。
これでより、アニメ制作をしているサイトであるということがより伝わりやすくなりました。
余談
今回ヘッダー動画に追加した動画は以前アニエラマーケット用に作成した15秒CMのものです。素材があったからその辺は短時間で終わってよかった。
素材は有効活用に限りますねー。