美文网首页
js上传视频时获取视频的时长等视频元信息

js上传视频时获取视频的时长等视频元信息

作者: 4ea0af17fd67 | 来源:发表于2019-03-26 11:11 被阅读0次

现代浏览器中,您可以使用URL.createObjectURL()带有非附加视频元素的URL API 来加载文件的内容。

URL.CreateObjectURL()详细介绍见:https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL#Browser_Compatibility

上代码


var myVideos = [];

window.URL = window.URL || window.webkitURL;

document.getElementById('fileUp').onchange = setFileInfo;

function setFileInfo() {
  var files = this.files;
  myVideos.push(files[0]);
  var video = document.createElement('video');
  video.preload = 'metadata';

  video.onloadedmetadata = function() {
    window.URL.revokeObjectURL(video.src);
    var duration = video.duration;
    myVideos[myVideos.length - 1].duration = duration;
    updateInfos();
  }

  video.src = URL.createObjectURL(files[0]);;
}


function updateInfos() {
  var infos = document.getElementById('infos');
  infos.textContent = "";
  for (var i = 0; i < myVideos.length; i++) {
    infos.textContent += myVideos[i].name + " duration: " + myVideos[i].duration + '\n';
  }
}
<div id="input-upload-file" class="box-shadow">
  <span>upload! (ღ˘⌣˘ღ)</span>
  <input type="file" class="upload" id="fileUp" name="fileUpload">
</div>
<pre id="infos"></pre>

相关文章

网友评论

      本文标题:js上传视频时获取视频的时长等视频元信息

      本文链接:https://www.haomeiwen.com/subject/ibxgvqtx.html