HTML Audio/Video DOM timeupdateイベント

HTML audio/video 标签参考手册 HTML オーディオ/ビデオ DOM リファレンス

例

ビデオの再生位置が変更されたとき、ビデオの現在の再生位置（秒単位）を表示します:

// id="myVideo" の <video> 要素を取得
var vid = document.getElementById("myVideo");

// <video> 要素に ontimeupdate イベントを追加し、再生位置が変わったら関数を実行
vid.ontimeupdate = function() {myFunction()};

function myFunction() {
// id="demo" の <p> 要素にビデオの再生位置を表示
document.getElementById("demo").innerHTML = vid.currentTime;
}

試してみる »

この記事の下部には、さらに多くの例があります。

定義と使い方

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

このイベントは以下の場合に呼び出されます:

オーディオ/ビデオ（audio/video）の再生
オーディオ/ビデオ（audio/video）の再生位置の移動

ヒント：timeupdate イベントは通常、Audio/Video オブジェクトのcurrentTime属性と一緒に使用されます。この属性は、オーディオ/ビデオ（audio/video）の再生位置（秒単位）を返します。

ブラウザサポート

表内の数字は、このイベントをサポートする最初のブラウザのバージョン番号を示します。

イベント
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);試してみる

注意：Internet Explorer 8 およびそれ以前の IE バージョンはサポートしていませんaddEventListener()メソッド。

技術詳細

サポートされている HTML タグ:	<audio> と <video>
サポートされている JavaScript オブジェクト:	Audio, Video

その他の例

例

オーディオの再生位置が変更されたとき、現在のオーディオの再生位置（秒単位）を表示します:

// id="myVideo" の <audio> 要素を取得
var aud = document.getElementById("myVideo");

// <audio> 要素に ontimeupdate イベントを追加し、再生位置が変わったら関数を実行
aud.ontimeupdate = function() {myFunction()};

function myFunction() {
// id="demo" の <p> 要素にオーディオの再生位置を表示
document.getElementById("demo").innerHTML = aud.currentTime;
}

試してみる »