<!DOCTYPE html>
<html>
<body onload="myFunction()">
<input type="file" id="myFile" multiple size="50" onchange="myFunction()">
<p id="demo"></p>
<script>
function myFunction(){
var x = document.getElementById("myFile");
var txt = "";
if ('files' in x) {
if (x.files.length == 0) {
txt = "Select one or more files.";
} else {
for (var i = 0; i < x.files.length; i++) {
txt += "<br><strong>" + (i+1) + ". file</strong><br>";
var file = x.files[i];
if ('name' in file) {
txt += "name: " + file.name + "<br>";
}
if ('size' in file) {
txt += "size: " + file.size + " bytes <br>";
}
}
}
}
else {
if (x.value == "") {
txt += "Select one or more files.";
} else {
txt += "The files property is not supported by your browser!";
txt += "<br>The path of the selected file: " + x.value; // If the browser does not support the files property, it will return the path of the selected file instead.
}
}
document.getElementById("demo").innerHTML = txt;
}
</script>
<p><strong>Tip:</strong> Use the Control or the Shift key to select multiple files.</p>
</body>
</html>
在此，他们列出了视频文件名称和大小。但如何列出所有上传的视频的持续时间以及文件名和文件大小。我可以在上传时获取单个视频的持续时间。但很难找到多个视频。
最佳答案
您需要将文件“加载”到视频节点中，等待文件的元数据加载并从加载的节点中提取持续时间。这是一个从文件获取持续时间的函数。请注意，此函数返回一个 promise :
function getDuration(file) {
let videoNode = document.createElement("video");
let promise = new Promise(function(resolve, reject) {
videoNode.addEventListener("loadedmetadata", function() {
resolve(videoNode.duration);
});
videoNode.addEventListener("error", function() {
reject(videoNode.error.message + "(" + videoNode.error.code + ")");
});
});
const URL = window.URL || window.webkitURL;
videoNode.src = URL.createObjectURL(file);
return promise;
}
然后您可以像这样调用该函数:
getDuration(file).then((duration) => {
// duration in seconds (as float)
});
注意!您需要重新实现循环以等待 Promise 完成，然后再连接 txt 变量并输出它。
关于javascript - 如何在上传时获取多个视频的时长？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53257110/