全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい

0584-73-5123 平日
9:00~18:00

Web blog WEBブログ

外注・下請けホームページ制作TOP
WEBブログ
<video>タグで動画を埋め込む

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

2019.04.08

フロントエンド(HTML/CSS)

※この記事は2019年04月08日時点の情報をもとに作成されました。

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

【目次】

1. 動画の準備
2. 動画タグの書き方
3. video属性
4. 背景に画像を用いた実装例

動画の準備

動画は「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.25ｘ」または、「CODEPEN」のロゴをクリックすると快適なサイズで見ていただけます