Webページに動画を埋め込むHTMLのvideo要素の最適な使い方



特別な動画コンテンツであれば、YouTubeで公開するのではなく、Webサイトに訪問してもらって視聴してもらう方が、Webサイト意外では公開されていない分、コンテンツの価値を高めることができます。

YouTubeだと限定公開にしてもURLを知っていれば誰でも閲覧でき、その動画URLがSNS等で拡散されれば、全公開とほぼ同じになります。非公開にすればアクセス権限として観覧者のメールアドレスを登録する必要があります。

YouTubeの公開設定については、以下の記事でご紹介しています。

YouTube動画の公開設定を非公開として視聴できるユーザーを限定する



HTMLのvideo要素でWebページに動画を埋め込み、Webサイトを訪問してもらって視聴してもらう方が、ここでしか観れないという希少性から、人の心を引きつけることもできるでしょう。
またSEOの観点からも、Webページ内で数分の動画を視聴してもらうことで、ページ滞在時間が長くなりページの評価が高くなりSEO効果が期待できます。

video要素では、多くの属性を設定して動画をコントロールすることができます。
ここでは、HTMLのvideo要素で動画を埋め込み時のベストプラクティスを探ってみたいと思います。

video要素の基礎


最初にvideo要素の使い方をおさらいしておきます。
まずは、一番シンプルな例です。

HTML

<video controls>
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.webm" type="video/webm">
  <source src="sample.ogg" type="video/ogg">
  <p>videoタグをサポートした主要ブラウザで視聴ください。</p>
</video>



video要素では、「controls」のような属性を設定して動画をコントロールしていきます。
source要素で、各ブラウザやデバイスに対応するメディアファイル形式の動画を設定します。
p要素は、video要素をサポートされていなかったり、動画が再生されない時に適応されます。

上記のサンプルでも設定していますように、メディアファイル形式は以下の3つを用意してもらえば、ほとんどのデバイスでどれかの形式の動画を再生することができます。

  • mp4
  • webm
  • ogg



video要素に設定する主な属性は以下のものがあります。（一部です）

controls
コントロールパネルを表示
autoplay
自動再生
loop
繰り返し再生
muted
動画の音をでないようにする
poster
開始画面のサムネイル画像の設定
playsinline
インライン再生を可能にする
preload
動画読み込み
autoPictureInPicture
小画面再生（ピクチャインピクチャモード）
disablePictureInPicture
ピクチャインピクチャモードを無効にする



たくさんの属性がありますので、用途に合わせて動画をコントロールしていくことになります。

動画を繰り返し再生する


Webページ内で動画を繰り返し再生してみてもらう、もしくはコンテンツの背景として大きく動画を設置する場合は、自動再生と繰り返し再生あたりを設定しておけば良いでしょう。

HTML

<video muted autoplay loop>
  <source src="video/sample.mp4" type="video/mp4">
  <source src="video/sample.webm" type="video/webm">
  <source src="video/sample.ogg" type="video/ogg">
  <p>videoタグをサポートした主要ブラウザで視聴ください。</p>
</video>



auto属性で動画を繰り返し再生してますが、muted属性で動画の音をでないようにしないとautoplayが効きません。
また、auto属性ではあらかじめ動画を読み込む必要がありますので、Webページの表示速度を改善するために動画の読み込みを事前に読み込まないようにするpreload属性は効きません。
あとは、loop属性を設定すれば、Webページにアクセスしてすぐに動画が繰り返し再生されます。

CSSでは、レスポンシブに対応するように幅と高さを調整しておきましょう。
サンプルでは、max幅を800pxとしています。

CSS

video {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: auto;
}



幅と高さのほか、video要素を中央寄せにするために「display: block;」と「margin: auto;」を指定していますが、画面全体で動画を活用するなどすることもあると思うので、ご自身のデザインに合わせてください。

ユーザーの操作で動画を再生する


Webページのコンテンツの一部として動画を視聴してもらう場合は、controls属性を設定していきます。

HTML

<video controls playsinline preload="none" poster="video/thumb/sample.png">
  <source src="video/sample.mp4" type="video/mp4">
  <source src="video/sample.webm" type="video/webm">
  <source src="video/sample.ogg" type="video/ogg">
  <p>videoタグをサポートした主要ブラウザで視聴ください。</p>
</video>



auto属性は指定しませんので、Webページの表示速度を改善するため、preload属性の値を「none」にして動画を事前に読み込まないようにします。この時、事前に読み込まれないことによって再生前のサムネイルがなく、動画の要素領域がブラウザによっては真っ白になったり真っ黒になったりしますので、poster属性で再生前のサムネイル画像を設定しておきます。動画の内容に合った画像を読み込むと良いでしょう。

ほか、playsinline属性を設定することでインライン再生を可能にします。
これは、スマートフォンやタブレット端末で動画の再生を始めた時に、全画面表示せずに再生するために設定します。

CSSは先ほど同様、レスポンシブに対応したスタイルを指定していきます。

CSS

video {
  width: 100%;
  max-width: 800px;
  height: auto;
  aspect-ratio: 16 / 9; /* 動画のアスペクト比 */
  display: block;
  margin: auto;
}



preload属性で事前に動画を読み込まない場合、動画を再生する際にWebブラウザによっては一瞬レイアウトが崩れるので、aspect-ratioメディア特性を利用して、サポートされているブラウザに対しては動画のアスペクト比の領域を確保するようにしておきましょう。

aspect-ratioメディア特性については、以下の記事でご紹介しています。

CSSのaspect-ratioプロパティで手軽にアスペクト比を設定する



動画をWebページに埋め込んでいく中で、ダウンロードされたは困る動画もあるでしょう。
多くの動画がそうかと思いますが。

動画をダウンロードできないようにする


Webブラウザにもよりますが、ダウンロード機能が利用できるブラウザもあります。
controlslist属性で「nodownload」と指定することで、ダウンロード機能を無効（非表示）にすることができます。

controlslist="nodownload"



また、右クリックからもダウンロードができてしまいますので、oncontextmenu属性で「return false;」と指定し、video要素を右クリックできないようにします。

oncontextmenu="return false;"



Google ChromeとMicrosoft Edgeは、最新のバージョンをご利用であればもうダウンロードできないようになっていますが、FirefoxとSafariでは右クリックからダウンロードが可能となっています。ChromeやEdgeと同様に、そのうち仕様が変更されると思いますが。

他にも、たくさんのWebブラウザが存在しており、すべてにおいてダウンロードを禁止するためには、「controlslist=”nodownload”」と「oncontextmenu=”return false;”」はどちらも記述しておいた方が良いでしょう。

video要素の最適な使い方（まとめ）


これまでの内容を踏まえてまとめますと、以下の記述が最適な埋め込み方法になるでしょう。

動画を繰り返し再生

HTML

<video muted autoplay loop controlslist="nodownload" oncontextmenu="return false;">
  <source src="video/sample.mp4" type="video/mp4">
  <source src="video/sample.webm" type="video/webm">
  <source src="video/sample.ogg" type="video/ogg">
  <p>videoタグをサポートした主要ブラウザで視聴ください。</p>
</video>


CSS

video {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: auto;
}

ユーザーの操作で動画を再生

HTML

<video controls playsinline preload="none" poster="video/thumb/sample.png" controlslist="nodownload" oncontextmenu="return false;">
  <source src="video/sample.mp4" type="video/mp4">
  <source src="video/sample.webm" type="video/webm">
  <source src="video/sample.ogg" type="video/ogg">
  <p>videoタグをサポートした主要ブラウザで視聴ください。</p>
</video>


CSS

video {
  width: 100%;
  max-width: 800px;
  height: auto;
  aspect-ratio: 16 / 9; /* 動画のアスペクト比 */
  display: block;
  margin: auto;
}



うまくvideo要素を使って動画を埋め込むことができれば、よりユーザーがコンテンツを閲覧しやすく、動画を視聴しやすいWebページにすることができるでしょう。

video要素に設定する属性の特徴を理解していただき、用途に合わせて動画を埋め込んでいく際は、ぜひ参考にしてください。