JavaScriptでvideoタグの情報を取る際のブラウザ間挙動差異メモ

相変わらずMSは期待を裏切らない（もちろん皮肉）

前提

検証環境

chrome:57.0.2987.110 (64-bit)
Internet Explorer 11:11.953.14393.0
Microsoft Edge:38.14393.0.0

すべてWindows10上で確認

読み出し例記

hoge.html

<video controls id="hage">
  <source src="foobar.mp4" type="video/mp4" >
</video>

hoge.js

var video = $('#hage').get(0);
console.log("data:" + video.duration ); // 例として動画の総再生時間を取得

いつも通り割と適当。JavaScriptでの書き方は以前の記事参照。
http://qiita.com/honami/items/f5e2851ba281e5c155ab

先に見ておくとよいところ

これも以前の記事と同じなんだけど、一応。

https://www.w3.org/2010/05/video/mediaevents.html
http://www.antytle.com/js/video-element-attr
http://www.antytle.com/js/video-element-events

特にw3cサイトのイベント状況をブラウザごとに見比べると、あまりの差に卒倒できること請け合いなし。

ビデオデータ受信後

ＤＯＭツリー構築直後

hoge.js

$(function(){
  var video = $('#hage').get(0);
  console.log("data:" + video.duration );
});

だと流石に動画データが受信されていないのでどのブラウザでもNaNになる。さすがに予想通り。

各要素読み込み後

hoge.js

$(window).load(function(){
  var video = $('#hage').get(0);
  console.log("data:" + video.duration );
});

ページ要素の読み込み後で書けば読めると思ったのだけど、なんとEdgeの時以外はまだ動画データが読みだせない（NaN）。まぁ動画データ重いし、全部待ってたらアレだとは思うけど。
というかEdgeの時はきっちり読み込めるのがむしろ謎。

動画のメタ情報の読み込み完了時

そりゃ重い動画全部読み込み待ってたらページ動かないしね、というわけで上述のタイミングでイベントを仕込めるので、そこで呼び出してみる。

ページ要素全部読んだ後にイベント定義

hoge.js

$(window).load(function(){
  video.onloadedmetadata = function() {
    var video = $('#hage').get(0);
    console.log("data:" + video.duration );
  }
});

想定通りに値が取得できる。Chrome、IE11だとこのタイミングがおそらく最速と思われる。
ちなみにEdgeはこのイベントが発生しない。またお前か。恐らくこの時点では既にこのイベントの発生タイミングを過ぎているからと思われる。

ＤＯＭツリー構築直後にイベント定義

じゃあもっと早い段階で定義しておこう、ってことで。

hoge.js

$(function(){
  video.onloadedmetadata = function() {
    var video = $('#hage').get(0);
    console.log("data:" + video.duration );
  }
});

こっちで書くとちゃんとEdgeでもこのイベントが走るので、先の仮説が証明されることに。

まとめ

一例だけ切り出したけど、他の（特にネットワーク受信系の）イベントのタイミングも全然違ってたりする。余力ができた頃にまとめられるといいな。まぁ、最初のW3Cのイベント見比べていればわかりますが、軽く開いた口が塞がらない程度には挙動が違います。
ブラウザが違うとイベント発生タイミングのあれやこれやが全然違うので、複数ブラウザに対応しようと思ったらいろいろ対応考えなきゃいけないので、工数はそのつもりで別々にカウントした上で見積もりしてスケジュール組ませましょうね（しろめ