説明
HTML 5のvideoタグのイベント発生順序を調べてみました。テストに使ったコードは
白石さんのページにあるものです（白石さんのはFirefox 3.5でのテスト。このページでは3.6でテスト）。Firefox用なのでSafari 4, Chrome 4でも動作するように一部変更してテストしました。
まず、映像データが読み込まれる最初の段階では以下のようなイベントが発生します。これを見ると共通して発生するイベントはcanplay, canplaythroughの2つだけです。Firefox 3.6ではloadstartイベント自体発生しません。さらにローカル上にデータがある場合とサーバー上にある場合では発生するイベント自体が異なっています。
映像が読み込まれた時に発生するイベントと、その順序（ローカル上）
| Firefox 3.6 | Safari 4 | Chrome 4 |
|---|
| progress | loadstart | loadstart |
| progress | durationchange | durationchange |
| canplay | loadedmetadata | loadedmetadata |
| canplaythrough | loadeddata | loadeddata |
| suspend | canplay | canplay |
| canplaythrough | canplaythrough |
| load | progress |
| | load |
映像が読み込まれた時に発生するイベントと、その順序（サーバー上）
| Firefox 3.6 | Safari 4 | Chrome 4 |
|---|
| suspend | loadstart | loadstart |
| canplay | durationchange | suspend |
| progress | loadedmetadata | durationchange |
| loadeddata | loadedmetadata |
| canplay | loadeddata |
| progress | canplay |
| canplaythrough | canplaythrough |
| load | progress |
|
| suspend |
再生中の場合は以下のイベントが発生します。ローカルとサーバーにデータがある場合では発生するイベントが異なります。また、回線状況やユーザー環境によっても発生順序や回数が異なります。下表で色が付いている部分は断続的にイベントが繰り返し発生するということを示しています。これは回線状況によって発生したり発生しなかったりします。
映像再生時に発生するイベントと、その順序（ローカル上）
| Firefox 3.6 | Safari 4 | Chrome 4 |
|---|
| play | play | play |
| playing | playing | playing |
| timeupdate | timeupdate | timeupdate |
| ended | ended | ended |
映像再生時に発生するイベントと、その順序（サーバー上）
| Firefox 3.6 | Safari 4 | Chrome 4 |
|---|
| play | play | play |
| playing | playing | playing |
| timeupdate | timeupdate | timeupdate |
| progress | ended | ended
|
| waiting |
| |
| canplay |
| |
| playing |
| |
| canplaythrough |
| |
| suspend |
| |
| ended |
| |
Firefox 3.6, Safari 4, Chrome 4では再生開始を示すplay、再生中であるplaying、再生が終了したendedあたりしか使えないといいう状態になります。endedも映像のフレーム数などによっては発生しない事もあるらしいのでvideoタグとJavaScriptの組み合わせは、いろいろと注意して作成しないといけないようです。