SSV - ビデオの統一規格

<video> タグは、ウェブページにマルチメディアを統合するための幅広い可能性を開きます。タスクに応じて、その実装アプローチは根本的に変わります。

この記事では、2つの主要なパラダイム、つまり音声のないバックグラウンドビデオと、操作可能なインタラクティブビデオについて見ていきます。

バックグラウンドビデオ

バックグラウンドビデオは、メインコンテンツの理解を妨げない、ダイナミックな視覚的背景を作成するために使用されます。

重要な課題は、気まぐれなモバイルブラウザを含むすべてのデバイスで、スムーズ、自動、かつ無音で再生されるようにすることです。

このために、厳密な属性セットが使用されます。

• autoplay および muted - 自動再生に必要です。これは、音声付きの自動再生をすべてブロックする Safari で特に重要です。
• loop - ビデオのループ再生を可能にします。
• playsinline - ビデオがフルスクリーンモードではなくページ上で再生されるようにするために、iOS では非常に重要です。

disablePictureInPicture や preload="auto" などの追加属性は、動作をより正確に制御し、ユーザーエクスペリエンスを向上させるのに役立ちます。

バックグラウンドビデオの例：

<video 
  autoplay
  muted
  loop
  playsinline
  disablePictureInPicture
  preload="auto"
  poster="preview.jpg"
  aria-hidden="true"
>
  <source src="bg.webm" type="video/webm">
  <source src="bg.mp4" type="video/mp4">
  <p>
    お使いのブラウザはビデオをサポートしていません。
    <a href="bg.mp4">ビデオをダウンロード</a>
  </p>
</video>

インタラクティブ動画

動画が主なコンテンツ（教育用動画、プレゼンテーション、インタビュー）である場合は、操作を完全にユーザーに委ねる必要があります。

ここでは、標準的なプレーヤーインターフェースを表示するための controls 属性と、再生時間と最初のフレームの情報のみを読み込むことでトラフィックを節約する preload="metadata" 属性が重要になります。

重要な制限事項：ほとんどのブラウザのポリシーでは、音声の自動再生は禁止されています！

音声は、ユーザーによる明示的な操作（再生ボタンのクリックなど）があった場合にのみ有効化できます。

<video
  controls
  preload="metadata"
  poster="preview.jpg"
>
  <source src="content.webm" type="video/webm">
  <source src="content.mp4" type="video/mp4">
</video>

フォーマットの選択

すべてのビデオフォーマットがブラウザで同じようにサポートされているわけではありません。戦略としては、主に 2 つのフォーマットを使用します。

1. WebM — 圧縮率の高い最新のフォーマットです。これを理解するブラウザ（Chrome、Firefox）では、最初に指定します。

2. MP4 (H.264) — ほぼ 100% のサポート率を誇る、汎用性の高い"予備"フォーマットです。

MOV (QuickTime) フォーマットは、コーデックや Apple 以外のエコシステムでの再生に関する問題があるため、避けるべきでしょう。

アクセシビリティを忘れない

ビデオコンテンツは、スクリーンリーダーを使用しているユーザーや聴覚障害のあるユーザーを含む、すべてのユーザーがアクセスできるものでなければなりません。

1. 字幕：テキストトラック <track> は必須です。これは聴覚障害のあるユーザーに役立つだけでなく、音声をオフにして視聴する場合にも有用です。

   <track 
     kind="captions" 
     src="captions.vtt" 
     srclang="ja" 
     label="字幕"
     default
   >

2. スクリーンリーダー用説明： ARIA属性（aria-label、aria-describedby）または非表示のテキストブロックを使用して、視覚障害のあるユーザー向けに動画の内容を説明してください。

3. フォールバックコンテンツ：ブラウザが要素をまったくサポートしていない場合、<video>タグ内のテキストが表示されます。

ベストプラクティスと最適化

• サイズを最適化：バックグラウンド動画は5MB以下にしてください。圧縮を使用し、再生時間とフレームレートを下げますが、やりすぎないようにしてください。

• ポスターを使用する：poster="preview.jpg" 属性は、ビデオのロード前に表示される代替画像を指定し、ページの表示速度とユーザーエクスペリエンスを向上させます。

• ビデオをレスポンシブにする：CSS を使用して、ビデオを背景として領域全体に表示させることができます。

  .bg-video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover; /* ビデオをトリミングし、アスペクト比を維持します */
    object-position: center;
  }

Safari およびモバイルブラウザの特性

Safari は自動再生に関して厳格なポリシーを採用しています。背景ビデオには常に muted + playsinline の組み合わせを使用してください。音声付きの自動再生が必要な場合（これはめったに正当化されない）、ユーザー操作（クリック、スクロール）に応じてソフトウェアで起動することしかできません。

Safari では、標準のコントロールが正しく表示されない場合があります。この問題は、多くの場合、CSS ルールを使用して解決できます。

video::-webkit-media-controls {
  display: flex !important;
}

!important の使用は、ごく限られた場合にのみ正当化されます。

まとめの例

背景動画

<video 
  class="bg-video"
  autoplay
  muted
  loop
  playsinline
  poster="sunset-preview.jpg"
  aria-hidden="true"
>
  <source src="header-bg.webm" type="video/webm">
  <source src="header-bg.mp4" type="video/mp4">
</video>

字幕と説明付きのインタラクティブビデオ

<div class="tutorial">
  <video 
    controls
    preload="metadata"
    aria-label="スケートボードの組み立て説明"
    aria-describedby="video-description"
  >
    <source src="tutorial.webm" type="video/webm">
    <source src="tutorial.mp4" type="video/mp4">
    <track label="字幕" kind="captions" srclang="ja" src="tutorial-captions.vtt" default>
    <p>
      お使いのブラウザはビデオ要素をサポートしていません。
      <a href="tutorial.mp4">説明をダウンロード</a>。
    </p>
  </video>
  <p id="video-description" hidden>
    5分間の動画で、当社の専門家が、サスペンション、ホイール、デッキなどの既製部品を使ってスケートボードを組み立てる方法をご紹介します。
  </p>
</div>