HTML Audio/Video DOM timeupdate イベント

❮ HTML オーディオ/ビデオ DOM リファレンス

ビデオの再生位置が変った場合に、秒単位でビデオの現在位置を表示します:

// 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;
}
Try it Yourself ❯

他の "Try it Yourself" の例が下にあります。


定義と用法

timeupdate イベントは、オーディオ/ビデオの再生位置が変更されたときにが発生します。

このイベントは、次により呼び出されます:

チップ: 多くの場合、この timeupdate イベントは、秒単位でオーディオ/ビデオの再生の現在位置を返す Audio/Video オブジェクトの currentTime プロパティと一緒に使用されます。


ブラウザ・サポート

表中の数字は、イベントを完全にサポートした最初のブラウザ・バージョンを指定しています。

イベント
timeupdate Yes 9.0 Yes Yes Yes

構文

HTML の場合:

<audio|video ontimeupdate="myScript">Try it

JavaScript の場合:

audio|video.ontimeupdate=function(){myScript};Try it

JavaScriptで、addEventListener() メソッドを使用する場合:

audio|video.addEventListener("timeupdate", myScript);Try it

注: addEventListener() メソッドは、 Internet Explorer 8 以前のバージョンではサポートしていません。


技術的詳細

サポートする HTML タグ: <audio> および <video>
サポートするJavaScript オブジェクト: Audio, Video

Examples

その他の例

オーディオの再生位置が変った場合には、秒単位でオーディオの現在位置を表示します:

// 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;
}
Try it Yourself ❯

currentTime プロパティを使用して 5秒 に現在の再生位置を設定します:

document.getElementById("myVideo").currentTime = 5;
Try it Yourself ❯

HTML audio Tag Reference HTML オーディオ/ビデオ DOM リファレンス