← カテゴリ一覧に戻る

動画・音声の制御

play pause currentTime playbackRate

HTML の video・audio 要素をJavaScriptで制御します。カスタムプレーヤーの実装に必要な知識です。

デモ：カスタム動画コントロール

0:000:00

コード例

js
const video = document.querySelector('video');

// 再生・停止
video.play();    // Promise を返す（autoplay失敗に注意）
video.pause();

// 状態確認
video.paused;     // true/false
video.ended;      // true/false
video.readyState; // 0〜4（4=HAVE_ENOUGH_DATA）

// シーク
video.currentTime = 30;          // 30秒にジャンプ
video.currentTime += 10;         // 10秒スキップ
video.duration;                  // 総再生時間

// 音量・ミュート
video.volume = 0.5;              // 0〜1
video.muted = true;

// 再生速度
video.playbackRate = 1.5;        // 1.5倍速
video.defaultPlaybackRate = 1;   // デフォルト速度

// イベント
video.addEventListener('play', () => console.log('再生開始'));
video.addEventListener('pause', () => console.log('一時停止'));
video.addEventListener('ended', () => console.log('再生終了'));
video.addEventListener('timeupdate', () => {
  updateProgressBar(video.currentTime / video.duration);
});
video.addEventListener('loadedmetadata', () => {
  console.log('動画時間:', video.duration);
  console.log('解像度:', video.videoWidth, video.videoHeight);
});

// フルスクリーン
video.requestFullscreen();
document.exitFullscreen();

NEWPicture-in-Picture API & Media Session API

js
// Picture-in-Picture（フロートウィンドウ再生）
await video.requestPictureInPicture();
await document.exitPictureInPicture();
document.pictureInPictureEnabled; // 対応確認

// Media Session API（OSメディアコントロール対応）
// 通知バー・ロック画面にコントロールを表示
navigator.mediaSession.metadata = new MediaMetadata({
  title: '曲のタイトル',
  artist: 'アーティスト名',
  album: 'アルバム名',
  artwork: [{ src: '/cover.jpg', sizes: '300x300', type: 'image/jpeg' }]
});

navigator.mediaSession.setActionHandler('play', () => audio.play());
navigator.mediaSession.setActionHandler('pause', () => audio.pause());
navigator.mediaSession.setActionHandler('seekto', ({ seekTime }) => {
  audio.currentTime = seekTime;
});

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

以下のようなHTMLVideoElement / HTMLAudioElementのメディア制御のサンプルコードを生成してください：
- video.play() / pause()でPromiseを受け取り、autoplay失敗をハンドリングする方法
- video.currentTimeでシーク、video.durationで総再生時間を取得する実装
- volume / mutedプロパティを使った音量制御とplaybackRateによる再生速度変更
- timeupdate / loadedmetadata / endedイベントを使ったプログレスバー更新
- requestPictureInPicture()とMedia Session APIによるOSメディアコントロール対応

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

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