progress ( onprogress )イベント
progress ( onprogress )イベントは、<audio> または <video> におけるメディアリソースファイルのダウンロード中に定期的に発生するイベントです。
FileReader や XMLHttpRequest といったファイルのダウンロードにおいても使用できます。
document.getElementById("example_video").onprogress = ( event )=>{
console.log( event );
};
詳しくはExample
を参照してください。
このイベントはページの遷移、エレメントや画像の読み込みでは機能しないようです。
JavaScript における <audio> については HTMLAudioElement インターフェイスを、<video> についてはHTMLVideoElement インターフェイスを参照してください。
ページ内 Index
構文（Syntax）
in HTML
<tagelement onprogress="function()">
in JavaScript
object.onprogress = function(){ };
object.addEventListener("progress", script_);
備考（Remarks）
| Bubbles | No |
| Cancelable | No |
| Interface | UiEvent（ユーザーインターフェイスから生成された場合）,Event |
| Supported HTML Elements | 全般 |
Example
progress ( onprogress )イベントの例です。
以下に例では、動画のダウンロード中に progress イベントが発生しアラートが表示されます。
XMLHttpRequest での例
XMLHttpRequest での例です。src/test.html ファイルを読み込んでページの遷移をしないで内容を追加表示します。
ファイルのダウンロードの間、progress イベントが発生します。
FileReader での例
FileReader での例です。
FileReader によるファイルの読み込みが始まったら progress イベントを捉えてアラートを表示します。
関連するイベント
読み込みに使用するイベントです。エレメントのロード、ファイルのダウンロード、動画や音声といったメディデータのダウンロードと用途によって機能する／しないイベントがあります。
| イベント | 概要 |
|---|---|
| onabort | 読み込みが途中でキャンセルされたら |
| onerror | リソースの読み込みの失敗または実行時にエラーが発生したら |
| onload | ファイルやエレメントのロードに時に発生。window でページの初期設定に使用 |
| onloadeddata | メディアデータの読み込みが終了したら |
| onloadedmetadata | メディアのメタデータの読み込みが完了したら |
| onloadend | 読み込みが終了したら |
| onloadstart | メディアデータのダウンロードプロセスが始まったら |
| onprogress | ファイルやメディアデータをダウンロードをしている間 |
| onstalled | ダウンロードをしたデータが利用できない |
| onsuspend | ダウンロードデータがないと |