jquery video/audio 要素 iPhone で currentTime が設定できない

CATEGORY: jQuery

2023年5月2日

video 要素や audio 要素で JavaScript を使って currentTime に0以外を設定すると、iPhone では期待通りに動作しません（0を設定する場合は問題ありません）。

例えば、以下を設定すると、PC では Chrome や Firefox、Safari では13秒の時点から再生されますが、iPhone では最初（0の位置）から再生されてしまい、ポスターフレームの画像も表示されません。また、一度再生すると、2度目以降は再生もできません。

const video = document.querySelector('video');
video.currentTime = 13;

一番簡単な解決方法は、video 要素の preload 属性に "metadata" を設定するか、JavaScript で preload プロパティに "metadata" を設定します。

<!-- preload="metadata" を追加 -->
<video src="sample.mp4" preload="metadata" controls playsinline></video>
const video = document.querySelector('video');
 
// preload プロパティに  "metadata" を設定
video.preload = 'metadata';
video.currentTime = 13;

または、loadeddata イベントを使って currentTime を設定します。

const video = document.querySelector('video');
 
//loadeddata イベントで currentTime を設定
video.addEventListener('loadeddata', ()=> {
  video.currentTime = 13;
});

詳細は以下を御覧ください。

iPhone で currentTime が設定できない（HTML video タグで動画埋め込み）