video要素で動画ファイルを配置する
img要素を使って画像を配置したい場合、最低限src属性を指定しておけば画像を表示させることが可能です。
img要素にはalt属性やwidth/height属性の指定もしておいた方が良いとは言え、これらの属性の指定がなかったとしても画像を表示させるという目的は達成することができます。
一方、video要素を使った動画配置の場合、src属性にファイルパスを指定するだけでは動画を再生できません。
再生可能な状態にするには、controls属性を追加する必要があります。
controls属性を追加することにより、動画の再生ボタンやシークバーが表示されるようになり、ユーザーが動画を視聴できる状態になります。
その他、img要素と決定的に異なる点としては、終了タグが省略不可であるという点があげられます。
img要素の場合、終了タグは省略可能というより記述してはなりませんが、video要素の場合は開始タグで始まり終了タグで閉じる必要があります。（開始タグと終了タグの間に何も記述することがない場合であったとしても、終了タグを記載する必要があります。）
以上を踏まえて、動画を配置するための非常にシンプルなvideo要素の使用例を確認してみましょう。
<video src="sample-movie.mp4" width="500" height="500" controls></video>
そして、このコードの表示結果は下の画像のようになります。
動画は非常にシンプルなもので、ファイルサイズもかなり軽量です（64KB）ので、気軽に再生ボタンをクリックして確かめてみてください。
ちなみにですが、img要素と違ってvideo要素には、alt属性なるものはありません。
上のサンプル動画は容量を軽くするために音声データを含んでいませんが、通常、動画は画像と違って音声を利用して内容を伝えることが可能であるためと考えられます。
それに数秒程度の短い動画ならまだしも、動画の長さが数分〜数十分に及ぶ場合、代替テキストで動画の内容を説明するのはいくらなんでも無理がありますよね。
アクセシビリティに配慮するには、動画を作成する際に音声案内（ナレーション）をつけるようにしたり、字幕（キャプション）を表示させたりといった工夫を施しておくと良いでしょう。
ただ、この動画の配置方法ではユーザーに再生ボタンをクリックしてもらう必要があるため、CSSアニメーションやGIFアニメーションのような使い方はできません。
何かを説明するための動画など、ユーザーの任意のタイミングでじっくり見てもらいたいような場合はこの方が良いのですが、Webページに動きやアクセントを加えるためのちょっとしたアニメーションを実装したい場合は、クリックしないと再生されないのは不便ですよね。
Webページにアクセントを加えるために、CSSやJavaScriptでは表現が難しいアニメーション・モーショングラフィックを動画編集ソフトで作成し、動画ファイルを配置して自動再生させたい…というケースはけっこう多いかと思います。
ということで次の章では、動画を自動再生させる方法とその際の注意点について解説します。
POINT!
- ・video要素のsrc属性にファイルパスを指定するだけでは動画が再生できない！
- ・video要素にcontrols属性を付けると、再生ボタンなどが表示されるようになり、動画が再生できる状態になる！
- ・ただしこの配置方法では自動再生されないので、ユーザーに再生ボタンをクリックしてもらう必要がある！
動画を自動再生する
video要素を使って配置した動画が自動再生されるようにするには、autoplay属性を指定する必要があります。
ただし、単にautoplay属性を指定すればそれでOKというわけではありません。
動画に音声が含まれる場合は、autoplay属性を指定してもブラウザが自動再生をブロックしてしまう仕組みになっています。
じゃあ動画ファイルを作成する際に音声を取り除いて無音の動画にすれば良いかというと、それでもまだ問題が残ります。
ブラウザがFirefoxの場合は、動画が無音であればautoplay属性の指定のみでも動画が自動再生されますが、Chromeの場合は動画が無音であってもautoplay属性だけでは自動再生されません。
このように、video要素の挙動はブラウザによって大きく異なるため、『Aというブラウザでは期待通りの動作をするけど、Bというブラウザでは全く動作しない』…なんてことがしばしば起こります。
Chromeでは、muted属性を指定して明確にミュート（無音）状態にすることで初めて、動画が自動再生されるようになります。
さらにiPhoneの場合は、playsinline属性を指定してインライン（Webページ内）で再生される動画であるということを明確にしなければ、自動再生されない仕組みになっています。
なんだかややこしくなってきましたが、ほぼ全ての環境で動画を自動再生させるためには、autoplay、muted、playsinline属性の全てを指定しておく必要があるということです。
下はそれらの属性を指定して、動画が自動再生されるようにしたコード例です。
<video
src="sample-movie.mp4"
width="500"
height="500"
controls
autoplay
muted
playsinline
></video>
これでどのようなブラウザでも、iPhoneでも、ほとんどの環境で動画が自動再生されるようになりますが、動画が自動再生されるタイミングはブラウザによりけりです。
たとえば、Chromeでは動画が画面内に現れるタイミングで自動再生を始めてくれますが、FirefoxではWebページの読み込みとともに自動再生が始まってしまいます。
なので、Firefoxではユーザーが動画にたどり着く前に既に自動再生が終わってしまっていた…ということが起こりえます。
動画が再生されるタイミングの違い（ChromeとFirefox）を比較したものが下の動画です。
動画が再生されるタイミングを完全に制御したい場合は、JavaScriptと組み合わせてスクロール量やスクロールイベントを監視する必要があるため、HTMLだけでは不可です。
ただ、動画を見てもらうには動画の自動再生のタイミングをコントロールする以外にも、動画が延々と繰り返される（ループする）ようにするという方法もあります。
動画のループ再生を有効にするのはHTMLだけでも可能で、loop属性を指定するだけなので簡単にできます。
ということで、ほぼ全ての環境で動画が自動再生されるようにした上で、ループ再生を有効にしたコード例が下です。
<video
src="sample-movie.mp4"
width="500"
height="500"
controls
autoplay
muted
playsinline
loop
></video>
なお、ちょっとした飾り目的のアニメーション動画を見せたいだけであれば、controls属性による再生ボタン等の表示は返って邪魔になるのでなくても良いでしょう。
昔は、『Webページにアニメーション動画を埋め込む＝GIFアニメーション』という認識が一般的だったかと思いますが、GIFアニメーションでは256色しか表現できないので低画質になってしまいがちですし、GIFだからと言ってデータが軽量となるわけではありません。
今となっては、MP4形式の動画の方がキレイで容量もそこまで重くならないので使いやすいと言えます。
なので冒頭でも述べたように、これからはWebページにMP4などの動画ファイルを埋め込む機会がどんどん増えてくるんじゃないかと思います。
ただ、img要素で配置できるGIFと違い、MP4の動画はvideo要素で配置する必要があるので、video要素の扱い方の基本をしっかり押さえておくことが大切です。
POINT!
- ・自動再生するには、動画を無音にしてautoplayを指定すれば良いのだが…！
- ・ブラウザによって挙動が異なるため、muted属性とplaysinline属性も必要！
- ・ループ再生にするには、loop属性も指定しておこう！
