JavaScriptでファイルアップロード時に動画ファイルの総再生時間を取得する
動画ファイルをアップロードする際に、チェック等の用途で総再生時間が取得できないか検証してみました。
検証内容について
最初は、JavaScriptのFile APIで簡単に取得できるものだと思っていましたが、試してみたところ出来ませんでした。
そこで、色々調べてみた結果一度videoタグに展開して、ondurationchangeイベントで取得できることが判明しました。
durationchange イベント developer.mozilla.org
また、実装方法は以下の通りです。
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$('.file').on('change', function (e) {
var file = e.target.files[0];
var element = document.createElement( "video" ) ;
var fileURL = URL.createObjectURL(file);
element.src = fileURL;
element.ondurationchange = function() {
$('.message').text(this.duration);
URL.revokeObjectURL(this.src);
}
});
});
</script>
<head>
<meta charset="utf-8">
<title>upload</title>
</head>
<body>
<input class="file" type="file" name="file" />
<div class="message"></div>
</body>
</html>
検証結果
各動画ファイルで検証した結果、mov/mp4については取得出来ましたが、その他（wmv/avi/flv）は取得出来ませんでした。
またURL.createObjectURLで一度ローカルに展開する為、大きいファイルを扱った時にフリーズや遅延の懸念がありましたが、1GB程度のファイルでは問題無く取得することができました。
今回は、ファイルの種類やサイズをある程度制限すれば利用出来そうなことが分かりましたが、チェックの用途だと今回取得できなかったファイル（wmv/avi/flv）についても対応する必要がある為、引き続き検証していきたいです。
