閉じる

videoタグのcontrols属性で動画コントロールを表示・制御する方法と実装解説

広告

Webサイトにおける動画コンテンツの重要性は年々高まっており、2026年現在では背景動画や製品紹介、教育コンテンツなど、あらゆる場面でvideoタグが活用されています。

ブラウザの標準機能だけで動画プレイヤーのUIを表示できるcontrols属性は、最もシンプルかつ強力な機能の一つです。

ユーザーが動画を再生、一時停止、音量調節、またはシークバーで好きな場面へ移動するためには、適切なコントロールインターフェースが欠かせません。

本記事では、HTMLのvideoタグに備わっているcontrols属性の基本から、特定の機能を制限する詳細な設定、そしてJavaScriptを用いたカスタム制御の実装までを詳しく解説します。

目次 [ close ]
  1. videoタグとcontrols属性の基本概念
    1. 基本的な記述方法
    2. ブラウザごとのデザイン差異
  2. 動画制御を最適化する関連属性
    1. 主要な属性とその役割
    2. 自動再生とコントロールの相性
  3. 特定のコントロール項目を非表示にする方法
    1. controlsList属性による制限
    2. ピクチャーインピクチャーの無効化
  4. CSSによるコントロールUIのカスタマイズ
    1. 疑似要素を使用したスタイリング
  5. JavaScriptを用いた動画コントロールの実装
    1. 再生と一時停止の切り替え
    2. プログレスバー（進捗状況）の更新
  6. アクセシビリティとユーザー体験への配慮
    1. キーボードナビゲーションの確保
    2. 代替テキストと字幕の提供
  7. 実装時のトラブルシューティング
    1. コントロールが表示されない原因
    2. モバイル端末での挙動の違い
  8. まとめ

videoタグとcontrols属性の基本概念

HTML5から導入されたvideoタグは、外部プラグインを使用せずにブラウザ上で直接動画を再生することを可能にしました。

その中でもcontrols属性は、ブラウザ標準の再生コントローラーを表示するための論理属性です。

この属性を記述するだけで、再生・一時停止ボタン、進捗バー、音量コントロール、フルスクリーン切り替えボタンなどが自動的に生成されます。

デフォルトの状態では、この属性を指定しない限りユーザーは動画を操作することができず、静止画のように表示されるか、自動再生設定に頼ることになります。

基本的な記述方法

最もシンプルなvideoタグの実装例を確認してみましょう。

HTML
<!-- 基本的なvideoタグの記述 -->
<video src="movie.mp4" controls width="640" height="360">
  <p>お使いのブラウザはvideoタグをサポートしていません。</p>
</video>

上記のコードを記述するだけで、ブラウザは動画ファイルを読み込み、ユーザーが操作可能なインターフェースを付与します。

controls属性は「値を持たない属性」として記述可能ですが、XHTMLとの互換性を考慮する場合はcontrols="controls"と記述することもあります。

ブラウザごとのデザイン差異

controls属性によって表示されるUIのデザインは、閲覧しているブラウザやOSによって大きく異なります。

Chrome、Safari、Firefox、Edgeはそれぞれ独自のスタイルを持っており、ボタンの配置やシークバーの形状が統一されているわけではありません。

例えば、SafariではApple製品らしい洗練された半透明のデザインが採用され、Chromeではマテリアルデザインに近いシンプルなUIが提供されます。

サイトのデザインと完全に一致させたい場合は、後述するJavaScriptを用いたカスタムコントロールの作成が必要になりますが、アクセシビリティの観点からは標準のコントロールを使用することが推奨される場面も多いです。

動画制御を最適化する関連属性

controls属性と組み合わせて使用することで、より高度な動画体験を提供できる属性がいくつか存在します。

これらの属性を適切に組み合わせることで、ユーザーの利便性を高めつつ、不要なトラブルを防ぐことができます。

主要な属性とその役割

以下の表に、videoタグでよく使用される主要な属性をまとめました。

属性名効果・役割
autoplayページ読み込み時に動画を自動的に再生します。
muted動画の音声をデフォルトでミュート状態にします。
loop動画が終了した際、自動的に最初から再生を繰り返します。
poster動画が再生される前に表示するサムネイル画像を指定します。
preload動画データの事前読み込み設定（none, metadata, auto）を指定します。
playsinlineiOSなどのモバイルブラウザで、インライン再生（フルスクリーンにならない）を強制します。

自動再生とコントロールの相性

現代のブラウザでは、音声が流れる状態での自動再生は原則として禁止されています。

そのため、autoplayを使用する場合は必ずmuted属性を併用する必要があります。

自動再生されている動画にcontrols属性を付けておくことで、ユーザーが後から音声をオンにしたり、再生を止めたりすることが可能になり、ユーザビリティが向上します。

特定のコントロール項目を非表示にする方法

標準のcontrolsを表示させつつも、特定の機能（ダウンロードボタンやピクチャーインピクチャーなど）を制限したい場合があります。

以前はCSSで無理やり非表示にする手法が一般的でしたが、現在は属性や特定のプロパティで制御可能です。

controlsList属性による制限

controlsList属性を使用すると、ブラウザが提供する特定のコントロール機能を無効化できます。

HTML
<!-- ダウンロードボタンとフルスクリーンボタンを非表示にする -->
<video src="sample.mp4" controls controlsList="nodownload nofullscreen">
</video>

この設定により、動画の右クリックメニューや標準UIからのダウンロードを抑制することができます。

ただし、技術的に詳しいユーザーであればソースコードからURLを抽出できるため、完全なコピー防止策ではないという点に注意が必要です。

ピクチャーインピクチャーの無効化

動画を小さなウィンドウでフローティング表示させる「ピクチャーインピクチャー（PiP）」機能を無効にするには、disablePictureInPicture属性を追加します。

HTML
<video src="sample.mp4" controls disablePictureInPicture>
</video>

同様に、リモート再生（AirPlayやChromecastなど）を制限したい場合は、disableRemotePlayback属性を使用します。

CSSによるコントロールUIのカスタマイズ

標準のcontrolsはそのままでも便利ですが、CSSを適用することで一部の見た目を変更することが可能です。

Webkit系ブラウザ（Chrome, Safari, Edgeなど）では、疑似要素を使用して各パーツにアクセスできます。

疑似要素を使用したスタイリング

以下のコードは、動画コントロールの背景色やプログレスバーの色を変更する例です。

CSS
/* Webkit系ブラウザでのコントロールバーのカスタマイズ例 */
video::-webkit-media-controls-panel {
  background-color: rgba(0, 0, 0, 0.7);
}

video::-webkit-media-controls-play-button {
  background-color: #ff0000;
  border-radius: 50%;
}

video::-webkit-media-controls-current-time-display {
  color: #ffffff;
}

ただし、これらの疑似要素は非標準であるため、将来的なブラウザのアップデートにより動作しなくなるリスクがあります。

本格的なデザインカスタマイズを行うのであれば、controls属性を外し、自前でボタンを作成してJavaScriptで制御する手法が最も確実です。

JavaScriptを用いた動画コントロールの実装

標準のcontrols属性を使用せず、JavaScriptのHTMLVideoElementインターフェースを使用して、独自の再生ボタンやシークバーを作成する方法を解説します。

再生と一時停止の切り替え

まずは、最も基本的な再生・一時停止の制御コードを見てみましょう。

JavaScript
// HTML要素を取得
const video = document.querySelector('video');
const playBtn = document.getElementById('play-btn');

// ボタンクリック時のイベント
playBtn.addEventListener('click', () => {
  if (video.paused) {
    video.play(); // 再生
    playBtn.textContent = '一時停止';
  } else {
    video.pause(); // 一時停止
    playBtn.textContent = '再生';
  }
});

このコードでは、ビデオの状態がpaused（停止中）であるかどうかを判定し、適切なメソッドを呼び出しています。

プログレスバー（進捗状況）の更新

動画の再生状況に合わせてシークバーを動かすには、timeupdateイベントを利用します。

JavaScript
video.addEventListener('timeupdate', () => {
  const progress = (video.currentTime / video.duration) * 100;
  progressBar.style.width = `${progress}%`;
});

currentTimeプロパティは現在の再生時間、durationは動画の総時間を秒単位で返します。

これらを組み合わせることで、独自のUIでも標準コントロールと同等の機能を再現できます。

アクセシビリティとユーザー体験への配慮

動画コントロールを実装する際、最も重要なのは「誰もが使いやすいこと」です。

キーボード操作やスクリーンリーダーへの対応を怠ると、特定のユーザーがコンテンツを視聴できなくなる恐れがあります。

キーボードナビゲーションの確保

標準のcontrols属性を使用している場合、ブラウザが自動的にタブ順序（Tabキーでの移動）にコントロールパーツを含めてくれます。

独自にボタンを作成する場合は、<button>タグを使用するか、tabindex="0"を設定してキーボードでフォーカスできるようにしてください。

また、スペースキーで再生・一時停止ができるようなイベントリスナーの追加も検討すべきです。

代替テキストと字幕の提供

動画の内容を理解できないユーザーのために、<track>タグを使用して字幕（VTTファイル）を提供することが望ましいです。

HTML
<video src="movie.mp4" controls>
  <track src="subtitles_ja.vtt" kind="subtitles" srclang="ja" label="日本語" default>
</video>

字幕が表示されることで、音声を出すことができない環境のユーザーや、聴覚に障害を持つユーザーに対しても情報を正確に伝えることができます。

実装時のトラブルシューティング

videoタグの実装において、コントロールが表示されない、あるいは正しく動作しないという問題が頻繁に発生します。

その多くは、ファイルのパス指定ミスや、サーバー側のMIMEタイプ設定に起因します。

コントロールが表示されない原因

controls属性を記述しているのにUIが現れない場合、以下の点を確認してください。

  • videoタグのsrc属性に指定したパスが正しいか
  • 動画ファイルが破損していないか
  • CSSでpointer-events: none;などが指定されていないか
  • ブラウザが動画形式（mp4, webmなど）をサポートしているか

特に、新しいコーデック（AV1など）を使用している場合、古いブラウザでは再生できず、コントロールも表示されないことがあります。

モバイル端末での挙動の違い

iPhoneなどのiOSデバイスでは、低電力モードが有効な場合に自動再生が制限されたり、コントロールの表示がOS標準のものに強制的に上書きされたりすることがあります。

この挙動を制御することは難しいため、モバイル端末ではOS標準の挙動を許容する設計にすることが、最もエラーの少ないアプローチとなります。

まとめ

HTMLのvideoタグにおけるcontrols属性は、Webサイトに動画を組み込む上で最も基本的かつ重要な機能です。

たった一つの属性を追加するだけで、高度な再生インターフェースをユーザーに提供できる点は、Web標準の大きな利点と言えます。

属性の組み合わせによってダウンロードの制限や自動再生の制御も可能ですが、ブラウザごとの挙動の差異やアクセシビリティへの配慮を忘れてはいけません。

標準機能で不足を感じる場合にはJavaScript APIを活用し、よりブランドイメージに合致したカスタムプレイヤーの構築に挑戦してみてください。

適切な動画コントロールの実装は、コンテンツの価値を最大化し、訪れるユーザーに快適な視聴体験を届けるための第一歩となるでしょう。

URLをコピーしました！