使用angular获取本地视频的持续时间

时间:2016-02-05 15:57:33

标签: angularjs video duration

是否可以使用角度输入的文件验证用户选择的本地视频的持续时间?

我有以下html将所选视频绑定到我的模型。

<input type="file" ng-model='video.videoToUpload' accept="video/*" required>

控制器中视频的属性包括filesize和filetype但没有持续时间。我想避免将视频提交到Web服务器以仅验证持续时间的开销。

1 个答案:

答案 0 :(得分:3)

这不适合Angular--但它有效!!我试过用mp4格式。

var myVideos = [];
window.URL = window.URL || window.webkitURL;
function setFileInfo(files) {
  myVideos.push(files[0]);
  var video = document.createElement('video');
  video.preload = 'metadata';
  video.onloadedmetadata = function() {
    window.URL.revokeObjectURL(this.src)
    var duration = video.duration;
    myVideos[myVideos.length-1].duration = duration;
    updateInfos();
  }
  video.src = URL.createObjectURL(files[0]);;
}

function updateInfos(){
      document.querySelector('#infos').innerHTML="";
  for(i=0;i<myVideos.length;i++){
      document.querySelector('#infos').innerHTML += "<div>"+myVideos[i].name+" duration: "+myVideos[i].duration+'</div>';
     }
  }
<div id="input-upload-file" class="box-shadow">
  <span>- Try Upload -</span> 
  <input type="file" class="upload" id="fileUp" name="fileUpload" onchange="setFileInfo(this.files)">
</div>
<div id="infos"></div>

快乐帮助!