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);
<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>