input type="file"で動画ファイルを選択した際に動画の長さを取得したい

Question

ローカルにある動画ファイルをアップロードする前に、ファイルを選択するタイミングでその動画ファイルの情報を取得したいのですが、name/size/typeは取得できましたが動画の長さ(duration)が取得できません。videoタグでないのでdurationで取得できないようなのですが。どのように書くと取得できるのでしょうか？

    <input id="video" type="file" multiple><br>
    <div id="info"></div>

    window.onload = function(){
    	$("#video").addEventListener(
    	'change', video_changeHandler);
    }

    function video_changeHandler(evt){
    	var files = evt.target.files;
    	var info = "";
    	for(var i = 0; i < files.length; i++){
    		var f = files[i];
    		info +=
    		 'name; ' + escape(f.name) + '<br>' +
    		 'size; ' + f.size + ' Bytes<br>' +
    		 'type; ' + f.type + '<br>' +
                 'duration; ' + f.duration + '<hr>';
    		}
    	$('#info').innerHTML = info;
    }

結果
name; sample.mp4
size; 986115 Bytes
type; video/mp4
duration; undefined

Answer 1

実際にやってはいませんが、以下のような流れになると思います。

1. 見えない<video>要素を生成する
2. その<video>要素のloadedmetadataイベントで長さなどを取得するハンドラを入れておく
3. <video>要素にファイルからcreateObjectURLで生成したURLをsrcにセットする

Comments

[milkif]

少々書き方に迷ってしまいましたが、ご回答を参考に無事動画ファイルの長さを取得できました。有難うございました！