Smarter video starts here! Explore tools for previews, smart cropping, and image-to-video creation. Explore the Q4 launch →
始めるチュートリアルパフォーマンスとメタデータCreating a User Friendly Video Player

ユーザーフレンドリーな動画プレーヤーの作成

Webサイトに動画コンテンツを追加することは、ユーザーとのエンゲージメントを高める優れた方法です。この記事では、組み込みの <video> HTML要素を使用してWebページに動画を埋め込む方法を紹介します。

<video> 要素

<video> HTML要素は、外部ライブラリやフレームワークを使用せずにWebページへ動画コンテンツを埋め込むための標準的な方法です。さまざまな動画フォーマットをサポートし、再生、音量、全画面表示のための組み込みコントロールを提供します。また、動画の表示方法を制御するための複数の設定可能な属性があります。

以下は、埋め込み動画Webプレーヤーの基本的なコード例です。

<video controls style="width: 100%; max-width: 1500px;">
  <source
    src="https://assets.imgix.net/videos/girl-reading-book-in-library.mp4?fm=mp4"
    type="video/mp4"
  />
 Your browser does not support embedded videos!
</video>

これにより、以下の動画が作成されます。

controls 属性は、ユーザー向けの動画コントロールを表示します。ユーザーのブラウザが動画をサポートしていない場合は、Your browser does not support embedded videos! というテキストが代わりに表示されます。

<video> 要素には、他にもさまざまな属性があります。詳細については MDNドキュメント を参照してください。

コーデックベースのソースセットによる最適化

複数のコーデックオプションをソースセットで提供することで、動画配信を最大34%まで最適化できます。

最新のハードウェアは、効率性の異なるさまざまな動画コーデックをサポートしています。以下のコーデック検出ツールで、ご自身のブラウザが対応しているコーデックを確認できます。

Testing codec support...

異なるコーデックを持つ複数の動画ソースを提供することで、ブラウザは対応している中で最も効率的なフォーマットを自動的に選択します。これにより、最新のハードウェアを使用しているユーザーにはより小さなファイルサイズで同等品質の動画を配信しつつ、古いハードウェアとの互換性も維持できます。

以下は、<video> 要素と Video API の video-codec パラメータを組み合わせて、複数のコーデックオプションを持つソースセットを設定する方法です。

<video
  autoplay
  muted
  playsinline
  loop
  controls
  style="width: 100%; max-width: 1500px;"
  poster="https://assets.imgix.net/videos/girl-reading-book-in-library.mp4?fm=jpg&video-thumbnail=auto"
>
  <source
    src="https://assets.imgix.net/videos/girl-reading-book-in-library.mp4?fm=mp4&video-codec=av1"
    type="video/mp4; codecs=av01.0.05M.08"
  />
  <source
    src="https://assets.imgix.net/videos/girl-reading-book-in-library.mp4?fm=mp4&video-codec=h265"
    type="video/mp4; codecs=hev1.2.4.L120.B0"
  />
  <source
    src="https://assets.imgix.net/videos/girl-reading-book-in-library.mp4?fm=mp4&video-codec=h264"
    type="video/mp4"
  />
  Your browser does not support embedded videos!
</video>

これにより、以下の動画プレーヤーが作成されます。

こちらをクリック して、Codepen上で変更できます。

ブラウザは各 <source> 要素を上から順に評価し、最初にサポートしているものを再生します。

  1. AV1 (av01.0.05M.08) — 最も効率的な最新コーデックで、最高の画質と圧縮率を提供します。Chrome、Firefox、Edgeの最新バージョンでサポートされています。
  2. H.265/HEVC (hev1.2.4.L120.B0) — H.264より高い圧縮率を持つ高効率コーデックですが、AV1ほどではありません。Safariや他の新しいブラウザで広くサポートされています。
  3. H.264 (avc1.42E01E) — ほぼすべてのブラウザとデバイスでサポートされている、最も互換性の高いコーデックです。フォールバックとして使用されます。

対応している場合、ブラウザはH.264やH.265よりも低いビットレートで同等品質を提供できるため、最適なパフォーマンスを得るためにAV1を選択します。AV1がサポートされていない場合はH.265にフォールバックし、それもサポートされていない場合は互換性確保のためにH.264が使用されます。

fm=mp4 を指定してコーデック変換を行う場合、ビットレートはデフォルトで動的に適用されますが、各コーデックの品質やファイルサイズをより細かく制御したい場合は video-bitrate パラメータを使用して明示的に指定することもできます。

以下の表では、デモで使用している各ファイルの出力ファイルサイズとビットレートを確認できます。

パラメータコーデックビットレートファイルサイズ
?fm=mp4&video-codec=av1AV12.4 Mbps6.5 MB
?fm=mp4&video-codec=h265H.2654.4 Mbps11.7 MB
?fm=mp4&video-codec=h264H.2649.8 Mbps25.9 MB

canPlayType() によるコーデック対応の検出

<source> 要素を使った方法は自動的なコーデック選択に適していますが、JavaScriptを使用してプログラム的にコーデック対応を検出したい場合もあります。これは、ブラウザの対応状況に応じて条件付きの処理を行いたい場合に有効です。

canPlayType() メソッドを使用すると、動画を読み込む前に、特定のメディアタイプやコーデックをブラウザが再生できるかどうかを確認できます。

このメソッドは以下の3つの値を返します。

  • "probably" — 再生できる可能性が高い
  • "maybe" — 再生できる可能性がある
  • ""（空文字） — 再生できない

以下は、異なるコーデックの対応状況を検出する例です。

const video = document.createElement('video')
 
// Check AV1 support
const av1Support = video.canPlayType('video/mp4; codecs=av01.0.05M.08')
console.log('AV1 support:', av1Support) // "probably", "maybe", or ""
 
// Check H.265/HEVC support
const h265Support = video.canPlayType('video/mp4; codecs=hev1.2.4.L120.B0')
console.log('H.265 support:', h265Support)
 
// Check H.264 support
const h264Support = video.canPlayType('video/mp4; codecs=avc1.42E01E')
console.log('H.264 support:', h264Support)

これを利用して、最適な動画ソースをプログラム的に選択できます。

const video = document.querySelector('video')
const baseUrl = 'https://assets.imgix.net/videos/girl-reading-book-in-library.mp4'
 
// Create a temporary video element for testing
const testVideo = document.createElement('video')
 
// Determine the best supported codec
let videoUrl
if (testVideo.canPlayType('video/mp4; codecs=av01.0.05M.08')) {
  videoUrl = `${baseUrl}?fm=mp4&video-codec=av1`
  console.log('Using AV1 codec')
} else if (testVideo.canPlayType('video/mp4; codecs=hev1.2.4.L120.B0')) {
  videoUrl = `${baseUrl}?fm=mp4&video-codec=h265`
  console.log('Using H.265 codec')
} else {
  videoUrl = `${baseUrl}?fm=mp4&video-codec=h264`
  console.log('Using H.264 codec')
}
 
// Set the video source
video.src = videoUrl
video.load()

この方法は、以下のようなケースで特に有用です。

  • ユーザーのブラウザが対応しているコーデックを分析用に記録したい場合
  • 動画要素を作成する前に動画配信の判断を行いたい場合
  • ブラウザの機能に関するフィードバックをユーザーに提供したい場合
  • コーデック対応状況に応じて異なる動画プレーヤーやライブラリを条件付きで読み込みたい場合

自動再生の設定

Warning

Autoplay is never guaranteed to work for every user or every browser.

動画を自動再生することで、ユーザーにコンテンツへの関心を持ってもらいやすくなります。一方で、アプリやWebページを開くたびに動画が自動再生されると、ユーザー体験を損なう可能性もあります。

ChromeやSafariなどのすべてのブラウザベンダーは、動画の自動再生を許可するかどうかを判断するために、それぞれ異なるポリシーやアルゴリズムを採用しています。要件はブラウザごとに異なりますが、一般的に以下の条件を満たすと自動再生されやすくなります。

  • 動画要素に muted 属性が指定されている
  • ユーザーがページ内のどこかをクリックしている
  • （Chrome - デスクトップ）ユーザーの Media Engagement Index が一定以上である
  • （Chrome - モバイル）ユーザーがサイトをホーム画面に追加している
  • （Safari）デバイスが省電力モードでない

autoplay が許可されない場合、ユーザーは動画をクリックして再生を開始する必要があります。

autoplay 属性を使用する

autoplay 属性は、動画の自動再生を有効にする最も一般的で簡単な方法です。以下は、スタイル設定用の属性も含めた完全なHTML例です。動画が自動再生されるかどうかは、使用しているブラウザによって異なります。

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
 
<video
  id="my-autoplay-player"
  autoplay
  controls
  loop="loop"
  muted="muted"
  style="width: 100%; max-width: 1500px;"
  crossorigin="anonymous"
>
  <script>
    const video = document.querySelector("#my-autoplay-player")
    const src =
      "https://assets.imgix.net/videos/girl-reading-book-in-library.mp4?fm=hls"
    if (video.canPlayType("application/vnd.apple.mpegurl")) {
 video.src = src
    } else if (Hls.isSupported()) {
      const hls = new Hls()
 hls.loadSource(src)
 hls.attachMedia(video)
    } else {
 console.error(
        "This is a legacy browser that doesn't support Media Source Extensions",
 )
    }
  </script>
</video>

これにより、以下の動画プレーヤーが作成されます。

こちらをクリック して、Codepen上で変更できます。

これは自動再生を有効にする最も簡単な方法ですが、最適とは言えません。autoplay 属性は、動画が「どうあるべきか」をブラウザに伝えるだけで、フォールバック動作を定義したり記録したりするものではありません。

多くの場合、ユーザー操作を必要とする再生にフォールバックされるため問題になりませんが、背景動画のようなケースでは、ユーザー操作を必要としない代替動作（例：背景画像の表示）を定義したい場合があります。そのような場合は、autoplay 属性の代わりにJavaScriptを使用して自動再生を開始できます。

video.play() を使用する

JavaScriptが有効な場合は、動画属性を使用する代わりに video.play() メソッドを使って動画を再生します。

以下は video.play() の使用例です。

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video
  id="my-player"
  controls="controls"
  style="width: 100%; max-width: 1500px;"
  crossorigin="anonymous"
/>
<script>
  let video = document.querySelector("#my-player")
  let src =
    "https://assets.imgix.net/videos/girl-reading-book-in-library.mp4?fm=hls"
 
  if (video.canPlayType("application/vnd.apple.mpegurl")) {
 video.src = src
  } else if (Hls.isSupported()) {
    let hls = new Hls()
 
 hls.loadSource(src)
 hls.attachMedia(video)
  } else {
 console.error(
      "This is a legacy browser that doesn't support Media Source Extensions",
 )
  }
 video
    .play()
    .then(function () {
      // autoplay was successful!
    })
    .catch(function (error) {
      // do something if you want to handle or track this error});
    })
</script>

This will create the video player below:

Click here to modify this in a Codepen.

背景動画を作成することが目的である場合、上記のコードは自動再生が許可されていれば動画を自動的に再生します。許可されていない場合は、.catch() 関数を使用して自動再生エラーを記録したり、<video> 要素を <image> 要素に置き換えたりできます。

自動再生を使用するタイミング

自動再生の主なユースケースは、Webページ上でユーザーの注意を即座に引くことです。また、コンテンツがユーザーにとって関連性が高い場合、クリックを省略できるという利点もあります。

一方で、自動再生はユーザー体験を損ない、サイト全体が騒がしくなることでエンゲージメントを低下させる可能性もあります。

そのため、自動再生は以下のようなシナリオで使用することを推奨します。

  • デザインの一部として背景動画を作成する場合
  • ユーザーが確実にクリックすることが分かっている動画を自動再生して体験を向上させる場合
  • ページ読み込み時にすぐ表示される動画を再生する場合
  • ユーザーが必ず視聴すべき重要な動画を再生する場合

自動再生を使用する際は、以下を避けてください。

  • ファーストビュー外の動画を自動再生しない
  • ユーザーに見えない動画を自動再生しない
  • 複数の動画を同時に自動再生しない
Retinaデザインとimgixでの展開PDFからブランドアセットを管理する