HTMLオーディオ/ビデオDOMtimeupdateイベント
例
ビデオの再生位置が変更されたら、ビデオの現在の位置を秒単位で表示します。
// Get the <video> element with id="myVideo"
var vid = document.getElementById("myVideo");
// Assign an ontimeupdate event to the <video> element, and execute a function if the current playback position has changed
vid.ontimeupdate = function() {myFunction()};
function myFunction() {
// Display the current position of the video in a <p> element with id="demo"
document.getElementById("demo").innerHTML = vid.currentTime;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
timeupdateイベントは、オーディオ/ビデオの再生位置が変更されたときに発生します。
このイベントは、次のユーザーによって呼び出されます。
- オーディオ/ビデオの再生
- 再生位置の移動（ユーザーがオーディオ/ビデオの別のポイントに早送りする場合など）
ヒント：このtimeupdateイベントは、オーディオ/ビデオ再生の現在の位置を秒単位で返すオーディオ/ビデオオブジェクトのcurrentTimeプロパティと一緒に使用されることがよく あります。
ブラウザのサポート
表の数字は、イベントを完全にサポートする最初のブラウザーバージョンを示しています。
| Event | |||||
|---|---|---|---|---|---|
| timeupdate | Yes | 9.0 | Yes | Yes | Yes |
構文
HTMLの場合：
<audio|video ontimeupdate="myScript">
JavaScriptの場合：
audio|video.ontimeupdate=function(){myScript};
JavaScriptでは、addEventListener（）メソッドを使用します。
audio|video.addEventListener("timeupdate", myScript);
技術的な詳細
| サポートされているHTMLタグ： | <オーディオ>と<ビデオ> |
|---|---|
| サポートされているJavaScriptオブジェクト： | オーディオビデオ |
その他の例
例
オーディオの再生位置が変更されたら、オーディオの現在の位置を秒単位で表示します。
// Get the <audio> element with id="myVideo"
var aud = document.getElementById("myVideo");
// Assign an ontimeupdate event to the <audio> element, and execute a function if the current playback position has changed
aud.ontimeupdate = function() {myFunction()};
function myFunction() {
// Display the current position of the audio in a <p> element with id="demo"
document.getElementById("demo").innerHTML = aud.currentTime;
}
例
currentTimeプロパティを使用して、現在の再生位置を5秒に設定します。
document.getElementById("myVideo").currentTime = 5;
❮HTMLオーディオ/ビデオDOMリファレンス