SSV - ビデオの統一規格

定義

SSV規格は、動画のセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています。

構造とセマンティクス

以下の属性のみが使用されます：

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>

ほとんどのブラウザでは、音声の自動再生が禁止されています！

すべての動画形式がブラウザで同等にサポートされているわけではないため、高圧縮率を誇る最新の形式であるWebMと、代替案としてのMP4を組み合わせて使用する必要があります。

MOV（QuickTime）形式は、コーデックの問題やAppleのエコシステム外での再生に問題があるため、避けるべきです。

アクセシビリティ

動画は、スクリーンリーダーを使用している方や聴覚に障害のある方を含む、すべてのユーザーが利用できるようにする必要があります。そのため、字幕、aria属性、およびブラウザが動画をサポートしていない場合（極めて稀ですが）には<video>内のテキストが使用されます:

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

インタラクティブ性と視覚的な反応

ユーザーが動画と素早く直感的にやり取りできるようにするには、動画のファイルサイズを5MB以内に抑える必要があります（ただし、サイトが動画ホスティングサービスでない場合に限ります）。また、poster="preview.jpg"属性を使用してサムネイル画像を追加し、動画をレスポンシブ対応にすることも可能です:

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

Safari

Safariには厳格な自動再生ポリシーがあります。バックグラウンド動画には常に muted と playsinline を組み合わせて使用してください。音声付きの自動再生が必要な場合（正当化されることは稀ですが）、それはユーザーの操作（クリックやスクロール）に応じて、プログラム的にのみ開始できます。

まとめの例

背景動画

<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 class="sr-only" id="video-description">
    5分間の動画で、当社の専門家が、サスペンション、ホイール、デッキなどの既製部品を使ってスケートボードを組み立てる方法をご紹介します。
  </p>
</div>

プラグイン

Next Videoプラグイン