無料テンプレート68～72の動画

無料テンプレート 68～72 の動画に関する解説の続きです。

タッチデバイスについて

index.html の video タグ
<video autoplay loop muted id="top_video">
<source src="images/top-video.mp4" type="video/mp4">
<source src="images/top-video.ogv" type="video/ogg">
<source src="images/top-video.webm" type="video/webm">
<img src="images/top-video.jpg" alt="トップ画像"/>
</video>

初期設定では、autoplay（自動再生）となっていますが、iPhone や iPad では動作しません。

これは、「ユーザーの意志に関係なく動画が再生されないように」という配慮だと思います。

そこで、このテンプレートでは、タッチデバイスは画像（images/top-video.jpg）を表示するように設定されています。

つまり、タッチデバイスのヘッダーは動画ではなく画像です。

muted（ミュート）について

ウェブサイトにアクセスした時に、音声が流れると驚くユーザーもいると思いますので、video タグに muted を設定しました。

ただ、環境によっては正しく動作しない可能性もございますので、予め動画から音声を削除しておくと確実です。

補足として、PLAY VIDEO をクリックした時に再生される、メインの動画（main-video）には muted は設定していません。

動画の縦横比について

動画の縦横比は、「16:9」で作成してください。

サンプル動画は、横 1920px 高さ 1080px ですが、横 1280px 高さ 720px などでも構いません。

動画は、スクリーンサイズの横幅いっぱいに表示されます。

つまり、横 1280px 高さ 720px の動画は、横 1920px 高さ 1080px のスクリーンサイズで閲覧すると、縦横比を保持したまま拡大して表示されます。

ファイルサイズと画質を考えて、それぞれのウェブサイトで適正な動画サイズを選択して頂けたらと思います。

動画のファイル形式について

video タグは、上から順番に動画の再生を試みるので、初期設定では「.mp4」「.ogv」「.webm」の順番となります。

対応できる動画がない場合は、images/top-video.jpg が表示されます。（環境によっては、この限りではない可能性がございます）

動画のファイル形式の変換は、フリーソフトでも可能です。

様々な環境に対応するためには、「.mp4」「.ogv」「.webm」といったファイル形式を準備しておくと良いと思います。

動画のファイル形式を減らしたい場合は、<source src=" から始まるファイル形式の指定を削除してください。

メインの動画（main-video）のコードは、script.js の 11行目に記載されています。

script.js の 11行目
var main_video = '<video autoplay controls id="top_video"><source src="images/main-video.mp4" type="video/mp4"><source src="images/main-video.ogv" type="video/ogg"><source src="images/main-video.webm" type="video/webm"><img src="images/main-video.jpg" alt="ビデオが再生できません"/></video>';

赤・青・緑に色分けしたのが、それぞれのファイル形式の指定です。

index.html の video タグ（top-video 用）と合わせて、script.js の video タグ（main-video 用）も編集してください。

当サイトの無料テンプレートがお役に立ちましたら幸いです。