SSV - ビデオの統一規格

SSV標準は、セマンティクス、バックグラウンドおよびインタラクティブ動画の設定、Safariの属性、アクセシビリティルール、動画の重量に関する要件を定義しています。

バックグラウンドビデオ

バックグラウンド動画は、メインコンテンツの閲覧の妨げになってはいけません。

重要な課題は、すべてのデバイスで、中断なく、自動的に、かつ音を出さずに再生できるようにすることです。

そのためには、以下の厳格な属性セットが使用されます：

1. autoplay および muted - 自動再生に必要です。特に、音声付きの自動再生をすべてブロックする Safari では重要です。
2. loop - 動画のループ再生を可能にします。
3. 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>タグ内のテキストが表示されます。

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

1. サイズを最適化 - バックグラウンド動画のサイズは5MBを超えないようにしてください。圧縮を行い、再生時間やフレームレートを調整しますが、やりすぎには注意してください。

2. ポスター画像を使用する - poster="preview.jpg" 属性は、動画の読み込み完了前に表示される代替画像を指定し、ユーザー体験とページの描画速度を向上させます。

3. 動画をレスポンシブにする - 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>

記事は随時更新されます