HTML リファレンスマニュアル

HTML タグ全解

HTML Audio/Video DOM timeupdate イベント

currentTimeが更新されたときにtimeupdateイベントがトリガーされます。このイベントのトリガーフレーク率はシステムによって決定されますが、毎秒トリガーされることを保証します。4-66回（各イベント処理が1回以上の処理時間を超えない前提で）250ms）。ユーザーエージェントは、システムの負荷とイベント処理の平均コストに基づいてイベントの頻度を変更し、UIの更新がビデオのデコードに影響を与えないようにするように促されます。

HTML オーディオ/ビデオ DOM リファレンスマニュアル

オンラインサンプル

ビデオの再生位置が変更された後、秒単位でビデオの現在位置を表示します：

例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　オーディオ/video　ontimeupdate　イベントの使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<p>この例では、HTML DOM を使用して video 要素に "ontimeupdate" イベントを追加しました。
ユーザーがビデオを再生し始めたり、再生位置を移動するときに関数がトリガーされ、ビデオの再生位置を表示します。</p>
<video　id="myVideo"　width="320"　height="176"　controls>
　　<source　src="movie.mp4"　type="video/mp4">
　　<source　src="movie.ogg"　type="video/ogg">
　　あなたのブラウザは HTML をサポートしていません5　video タグ。
</video>
<p>再生位置:　＜span　id="demo"＞＜/span></p>
<script>
//　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;
}
</script>
</body>
</html>

テストを試してみる ‹/›

定義と使用法

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

このイベントは以下の状況で呼び出されます：

再生/ビデオ（オーディオ/ビデオ
オーディオ/ビデオ（オーディオ/の再生位置

ヒント： 　timeupdate イベントは通常オーディオ/ビデオオブジェクトのcurrentTime 属性と一緒に使用し、その属性はオーディオ/ビデオ（オーディオ/の再生位置（秒で表される）。

ブラウザの互換性

IEFirefoxOperaChromeSafari

文法

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 オブジェクト：	オーディオ、ビデオ

オンラインサンプル

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

例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　オーディオ/video　ontimeupdate　イベントの使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<p>このサンプルでは、HTML DOMを使用してaudio要素に"ontimeupdate"イベントを追加しています。
ユーザーがビデオを再生し始めたとき、またはオーディオの再生位置を移動したときに関数がトリガーされ、ビデオの再生位置を表示します。/p>
<audio　id="myAudio"　controls>
　　<source　src="horse.ogg"　type="audio/ogg">
　　<source　src="horse.mp3"　type="audio/mpeg">
　　　あなたのブラウザはaudio要素をサポートしていません。
</audio>
<p>再生位置:　＜span　id="demo"＞＜/span></p>
<script>
//　id="myAudio"のaudioを取得します
var　aud　=　document.getElementById("myAudio");
//　audio要素にontimeupdateイベントを追加し、再生位置が変更されたときに関数を実行します　
aud.ontimeupdate　=　function()　
{
　　　　myFunction()
};
function　myFunction()　
{
　　　　//　id="demo"の＜p＞要素に音声の再生位置を表示します
　　　　document.getElementById("demo").innerHTML　=　aud.currentTime;
}
</script>
</body>
</html>

テストを試してみる ‹/›

オンラインサンプル

currentTime属性を使用して再生位置を設定します。 5 秒:

例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">
<title>HTML　オーディオ/video　ontimeupdate　イベントの使用-基本チュートリアル(oldtoolbag.com)</title>
</head>
<body>
<video　id="myVideo"　width="320"　height="240"　controls>
　　<source　src="movie.mp4"　type="video/mp4">
　　<source　src="movie.ogg"　type="video/ogg">
　　あなたのブラウザはvideoタグをサポートしていません。
</video><br>
<button　onclick="setCurTime()"　type="button">設定再生位置に　5　秒</button>
<p　id="demo"></p>
<script>
//　id="myVideo"のvideo要素を取得します
var　vid　=　document.getElementById("myVideo");
//　videoに"timeupdate"イベントを追加します
vid.addEventListener("timeupdate",　getCurTime);
//　id="demo"のp要素内のビデオの再生位置を表示します　
function　getCurTime()　
{　
　　　　document.getElementById("demo").innerHTML　=　"現在の再生位置は　"　+　vid.currentTime　+　"　秒。";
}　
//　再生位置を設定します　5　秒
function　setCurTime()　
{　
　　　　vid.currentTime　=　5;
}　
</script>　
</body>
</html>

テストを試してみる ‹/›

HTML オーディオ/ビデオ DOM リファレンスマニュアル

HTML: <template> タグ