Web blog WEBブログ

<video>タグで動画を埋め込む

2019.04.08

こんにちは。ディレクターの杉浦です。
最近ご依頼が多い、メインビジュアルなどへの動画埋め込み方法をご紹介いたします。
HTML5で新しく追加された動画のための<video>タグを使用していきます。

動画の準備

動画は「mp4形式」を用意します。
主要ブラウザはほぼmp4に対応していますが、mp4が再生できないブラウザの場合も想定して、複数の動画データを用意することもオススメします。

「.mp4]形式
「.webm」形式
「.ogv」形式

動画容量が大きくなるとサイトの読み込みが遅延しウェブページを開くのに時間がかかります。結果、直帰・閲覧離脱に繋がってしまうので配慮が必要です。
出来る限り軽い動画にまとめるよう心掛けて下さい。推奨は3MB以下、20秒以内を目標に。
動画圧縮を無料オンラインでできるサイトもあります。

動画タグの書き方

■基本の書き方

<video width="300" height="150">
 <source src="sample.mp4" />
 <source src="sample.webm" />
 <source src="sample.ogv" />
</video>

 

※主要ブラウザは概ねmp4に対応していますので、mp4だけでも良いかと思います。
※<source>は閉じタグ不要です

video属性

主な属性

■controls・・・操作パネルの表示
再生・一時停止・再生位置の移動・ボリュームなど、コントロールパネルを表示させます。

■autoplay・・・動画を自動再生
ウェブページを読み込んだ時点で、動画が自動再生されます。

■loop・・・繰り返し再生
動画が終了すると、自動的に先頭に戻ります。

■muted・・・無音再生(消音)
スマホに埋め込んだ場合、iOS/Androidでの自動再生には「muted」属性の指定が必須です。
自動再生で音を出す事はできないことと、音声ありにするとポップアップ表示されることがあります。

■playsinline・・・インライン再生の対応(Safari)
(動画をページに埋め込む形式のことをインライン再生といいます)
iPhoneでは「playsinline」属性がないと表示できないので指定が必須です。

■android系端末への対応
「onclick=”this.play();”」がないと再生されないことがあるので指定をします。

<video controls autoplay loop muted preload onclick="this.play();>
<source src="sample.mp4" />
<source src="sample.webm" />
<source src="sample.ogv" />
</video>

 

背景に画像を用いた実装例

HTML

<p>RunLand</p>
<div class="video-wrap">
  <p>RunLand</p>
  <video src="images/sample.mp4" controls autoplay loop muted preload onclick="this.play();>
  </video>
</div>

CSS

body {
  background: #000;
}
.video-wrap {
  position: relative;
}
video {
  display: block;
  margin: 0 0 0 auto;
}
p {        
  color: #fff;
  font-size: 400%;
  position: absolute;
  left: 30%;
  top: 200px;
  z-index: 1;
}

See the Pen
LvRJNq
by nao (@naooo)
on CodePen.


▲右下の「0.25x」または、「CODEPEN」のロゴをクリックすると快適なサイズで見ていただけます

まとめ

動画を使用することで臨場感や楽しさが伝わる効果もあり魅力的なサイトになります。
ただし各ブラウザへの対応や、動画サイズが重たくページが開きにくなどユーザビリティ的なデメリットにならないように注意して制作しましょう。

杉浦直子

この記事を書いた人 杉浦 直子 ディレクター

無料相談窓口