先日、あるLPサイトで複数動画を配置した実装を行った際、想定以上にややこしくて、予期しないバグに遭遇しました。
実際に経験して初めて気づけることも多かったため、この記事では複数動画実装時に重要なテスト観点を整理して共有します。
1. デフォルトのコントロールバー
HTML5の<video>要素にcontrols属性を設定した際に表示される、ブラウザ標準のコントロールバーの動作確認です。
チェックポイント
-
表示/非表示
-
controls属性の有無でコントロールバーが正しく表示・非表示されるか - hover時の表示/非表示のタイミングは適切か
-
-
各ボタンの機能確認
- 再生/一時停止ボタンが正しく機能するか
- 音量調整（ボリュームスライダー）が適切に動作するか
- フルスクリーン表示への切り替えができるか
- ピクチャーインピクチャー機能（対応ブラウザ）
-
シークバーの動作
- 動画の再生位置が視覚的に正しく表示されるか
- ドラッグ・クリックで指定位置へ移動できるか
-
再生情報
- 再生時間/総時間の表示
- バッファリング表示
2. カスタムコントロール
独自UIを実装した場合の確認。
チェックポイント
-
ボタンアイコンの表示切り替え
- 再生中は「一時停止」アイコンが表示されるか
- 停止中は「再生」アイコンが表示されるか
- ミュート中は「ミュート解除」アイコンが表示されるか
- 音声出力中は「ミュート」アイコンが表示されるか
-
再生/一時停止の制御
- カスタムボタンで動画の再生・停止ができるか
- 状態変更時にアイコンが即座に切り替わるか
- video要素のイベント（
play,pause）が正しく発火するか
-
音声制御
- カスタムボタンでミュート・ミュート解除ができるか
- 状態変更時にアイコンが即座に切り替わるか
- video要素の
mutedプロパティが正しく更新されるか
-
補足
- キーボード操作（スペースキーなど）との整合性
- アクセシビリティ属性（
aria-label等）
3. リサイズ時のソース切替
レスポンシブ対応で動画ソースを切り替える場合の確認。
チェックポイント
-
ブレークポイントでの切り替え
- 設定したブレークポイント（例：768px）で動画ソースが正しく切り替わるか
- PC用とSP用の動画が同時にレンダリングしてしまうと、動画の音声二重問題が起こりがち
- PC用（高解像度）とモバイル用（軽量版）の動画が適切に選択されるか
-
再生状態の維持
- ソース切り替え後も現在の再生位置が維持されるか
- または、仕様に応じて0秒位置にリセットされるか
- 一時停止状態が維持されるか
参考: HTMLMediaElement.currentTime
-
パフォーマンス
- 切替時の途切れやフリーズ防止
- 不要なダウンロードが発生しないか
4. ループ再生と音声制御
自動再生やループ再生時の音声挙動はブラウザのAutoplayポリシーの影響を受けやすい。
チェックポイント
-
初回再生
- 1回目の再生で音声が正しく出力されるか
- 自動再生設定時に音声が適切に制御されるか
-
ループ再生時の音声制御
- 2回目以降のループ再生時に音声が意図通りミュートされるか（特にChrome）
- 各ブラウザ（Chrome, Safari, Firefox, Edge）での動作確認
-
手動操作との連携
- ループ中にユーザーがミュート解除操作をした際、音声が正しく出力されるか
Chrome: ループ2回目以降で音声が出ない問題（Autoplay Policy差異による）
参考：
https://stackoverflow.com/questions/70719678/html5-video-autoplay-with-sound-unmuted
対策例：
const handleTimeUpdate = () => {
if (!videoMuted && video.muted) {
video.muted = false;
}
};
video.addEventListener("timeupdate", handleTimeUpdate);
5. 複数動画コンポーネント
同一ページ内に複数の動画が存在する場合は、最も多くの問題が発生しました。
チェックポイント
-
再生位置の独立性
- 一方の動画の操作が、他の動画の再生位置に影響しないか
- 各動画が独立した再生状態を維持できているか
-
再生の競合確認
- 複数の動画を同時に再生した際の動作確認
- 意図しない動作（他の動画の自動停止など）が発生しないか
- システムリソースの使用状況確認
-
状態管理の独立性
- 各動画コンポーネントが独自の状態を保持できているか
バグ例: 1つ目の動画を4秒で停止後、2つ目の動画を再生すると、2つ目の動画が4秒の位置から開始される
推奨テスト環境
- PC: Chrome / Safari / Firefox / Edge（最新版）
- モバイル: iOS Safari / Android Chrome
- 画面サイズ: 320px〜1920px+
- ネットワーク: 高速・低速回線
パフォーマンス監視
- CPU使用率
- メモリ使用量
- ネットワーク帯域
- バッテリー消費（モバイル）
終わりに
テストするときにこちらの観点をご参考になれば幸いです。