最近のウェブサイトでは動画を積極的に使うデザインも増えてきています。HTML5になり新たに追加されたvideoタグを使うことで、Webページで簡単に動画を扱うことが可能になりました。今回はvideo要素について、いろんな属性や設定方法などをまとめていきます。   まずは基本的なvideoタグの記述です。src属性で再生する動画ファイルのパスを指定するだけで動画が再生できます。

<video src="movie.mp4">
</video>

  また、動画データ形式がmp4の場合に、旧バージョンのブラウザでは対応していないケースもあります。その時に対応できるよう複数の形式をサポートする場合にはsource要素を使います。形式別にそれぞれ指定します。

<video>
  <source src="movie.mp4" type="video/mp4; codecs='*******,*******'">
  <source src="movie.ogv" type="video/ogv; codecs='*******,*******'">
  <source src="movie.webm" type="video/webm; codecs='*******,*******'">
</video>

  そして、video要素がサポートされていないなどで動画が再生できない場合のメッセージを表示させる場合にはvideoタグの中に直接テキストを配置させます。

<video src="movie.mp4">
  <p>このブラウザでは動画を再生することができません。最新版のブラウザをご利用ください。
  </p>
</video>

   

video要素で使える属性と設定方法

video要素にはいろんな属性があり、その属性でいろんな設定ができるようになります。数もたくさんありますが、まずは覚えておきたいよく使うものをまとめています。

src	再生する動画ファイルのパスを指定
poster	動画が再生されていない時に表示させる画像をパスで指定
autoplay	ページのロードが完了したら自動的に動画を再生する
loop	動画を繰り返すループ再生を許可する
controls	再生ボタンやタイムラインなどのインターフェースパーツを表示させる
muted	音声付き動画データの場合は消音にする
preload	事前に動画データを読み込むか制御する、属性の値で指定する 【auto】初期値でページロードと合わせて読み込みされる 【none】動画データの読み込みがされない状態 【metadata】動画データのメタデータのみ読み込みされる
width	動画の幅を指定する
height	動画の高さを指定する

  実際にこれらの属性の設定した例になります。必要に応じて使い分けていきます。

<video src="movie.mp4" poster="[PATH]/movie-image.jpg" controls autoplay>
</video>

   

Google Chromeでvideo要素で指定した動画が自動再生されない場合への対応

Google Chromeバージョンによってautoplay属性で自動再生を指定しても、再生されない場合もあります。この時は下記のようにmuted属性を指定することで対応できます。

<video src="movie.mp4" autoplay muted>
</video>

  バージョンがChrome 66の場合に音声付き動画の場合には自動再生されない仕様になったことが原因で、音声なしの場合でも指定が必須とのことです。  

iOS Safariでvideo要素で指定した動画が自動再生されない場合への対応

Safariでも同じく、autoplay属性で自動再生を指定し、さらにmuted属性を指定しても、再生されない場合には下記のように、playsinline属性を追加します。

<video src="movie.mp4" autoplay muted playsinline>
</video>

  playsinline属性を追加することで動画のインライン再生が可能になります。このようにブラウザごとで若干の違いがあるので少しややこしいですね。  

---

  いかがでしょうか、これまではiframeなどでyoutubeの動画などをインラインで埋め込むなどの方法が多かったですが、これで動画を使った表現の幅も広がりそうですね。   （参考にさせて頂いたサイト） video: 動画埋め込み要素 最新版のGoogle Chromeでサイトの埋め込み動画が自動再生されない場合の対応方法まとめ