Read <video> duration from <input type="file" />

by hugogo7646

HTML

<div>Choose a browser supported video file to load video duration.</div>
<input id="fileUploader" type="file" />
<div>Video length : <span id="videoLengthDisplayer"></span> (s)</div>

JavaScript

var fileUploader = document.getElementById("fileUploader");
var videoLengthDisplayer = document.getElementById("videoLengthDisplayer");
//用來讀取file資料的FileReader
var fileReader = new FileReader();

//監控#fileUploader的值變化
fileUploader.addEventListener("change", function(event) {
  if (this.files.length > 0) {
  	//有選取file時，使用fileReader讀取file資料
    //readAsDataURL可以將讀取到的file資料轉成
		//data:......的URL型式
    fileReader.readAsDataURL(this.files[0]);
  }else{
  	
  }
}, false);

fileReader.addEventListener("load", function(event) {
	var video = document.createElement('video');
  video.src = this.result;
  video.load();
  video.addEventListener("loadeddata", function(){
  	videoLengthDisplayer.innerHTML = video.duration;
  });
  
}, false);