← カテゴリ一覧に戻る

動画

video source

HTML5 ネイティブの動画再生要素。複数の source でフォーマットフォールバックが可能。 ブラウザが対応している最初のフォーマットを使用する。

video 属性一覧デモ

poster 画像
▶
0:07 / 0:23
⛶
controls

ブラウザ標準のUIコントロール（再生・音量など）を表示する。

autoplay

ページ読み込み時に自動再生。muted との組み合わせが必須。

muted

音声をミュートにする。autoplay 時はブラウザポリシーで必須。

loop

動画を繰り返し再生する。背景動画などに使用。

playsinline

iOS Safariでインライン再生する（フルスクリーン抑制）。必須。

poster

再生前に表示するサムネイル画像のURL。

preload

none / metadata / auto。デフォルトはブラウザ依存。

width / height

表示サイズ。CLS 防止のため指定推奨。

コード例

<!-- 基本的な動画（複数フォーマット対応）-->
<video
  controls
  width="800"
  height="450"
  poster="/videos/thumbnail.jpg"
  preload="metadata"
>
  <source src="/videos/movie.webm" type="video/webm" />
  <source src="/videos/movie.mp4"  type="video/mp4" />
  <p>お使いのブラウザは video 要素に対応していません。</p>
</video>

<!-- 背景動画（自動再生・ループ・無音）-->
<video
  autoplay
  muted
  loop
  playsinline
  width="1920"
  height="1080"
  aria-hidden="true"
>
  <source src="/videos/bg.webm" type="video/webm" />
  <source src="/videos/bg.mp4"  type="video/mp4" />
</video>

<!-- モダン属性：PiP 無効・コントロールのダウンロードボタン非表示 -->
<video
  controls
  disablepictureinpicture
  controlslist="nodownload nofullscreen"
  width="640"
  height="360"
>
  <source src="/videos/lesson.mp4" type="video/mp4" />
</video>

モダン属性：disablepictureinpicture / controlslist

disablepictureinpicture

ピクチャーインピクチャー（PiP）機能を無効化する。DRM コンテンツや画面収録防止に使用。Chrome / Edge 対応。

controlslist

標準コントロールの一部を非表示にする。

  • nodownload — ダウンロードボタンを非表示
  • nofullscreen — フルスクリーンボタンを非表示
  • noremoteplayback — リモート再生を無効化

比較：controls 属性 vs カスタム JS コントロール

方式実装コストデザイン自由度アクセシビリティ適用場面
controls 属性低（属性一つ）低（ブラウザ依存）ブラウザが保証一般的なコンテンツ動画
カスタム JS高（ARIA 含む）高（完全自由）自前で実装が必要ブランドに合わせたプレーヤー

カスタムコントロールには role="button"、aria-label、キーボード操作の実装が必要。

Tips

  • autoplay は muted が必須：ブラウザポリシーにより、ミュートなしの自動再生はほぼすべてのモダンブラウザでブロックされる。
  • playsinline は iOS で必須：この属性がないと iOS Safari は動画を強制フルスクリーンで開く。背景動画では特に重要。
  • WebM を先に、MP4 をフォールバックに：WebM は圧縮効率が高い。ブラウザは最初に対応したフォーマットを使用する。
  • poster 画像を必ず設定：初期フレームが表示されるまでのブランク状態を防ぎ、UX を向上させる。
  • 背景動画には aria-hidden="true"：装飾目的の動画はスクリーンリーダーに読み上げられないようにする。

🤖 AIプロンプトテンプレート

以下について、AIへの質問プロンプト例を示します。

- `<video autoplay>` がモダンブラウザでブロックされる理由と、`muted` との組み合わせが必須な理由を教えてください。
- `<source>` を複数指定して WebM と MP4 にフォールバックする仕組みと、順番が重要な理由を教えてください。
- iOS Safari で背景動画をインライン再生するために `playsinline` が必要な理由を教えてください。
- `preload="none"`・`preload="metadata"`・`preload="auto"` の違いと、パフォーマンスへの影響を教えてください。
- 装飾目的の背景動画に `aria-hidden="true"` を付けるべき理由と、カスタム JS コントロールにアクセシビリティを追加する方法を教えてください。

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo