我正在用HTML和Javascript做一个项目,它将与本地文件一起运行。我需要通过输入选择一个文件,获取它的信息,然后决定是否将其添加到我的列表中并重新生成。如果我决定使用它,我将不得不将它放在队列中,以便稍后使用。否则,我将放弃并选择另一个文件。
我面临的问题是,我不能找到一种方法来获得视频的持续时间,仅仅通过在输入时选择它。
我已经搜索了很多,但我没有找到任何方法来获得持续时间。在下面的代码中,我尝试使用'file.duration‘,但它不起作用,它只是返回'undefined’。
这是我的输入,如你所见,很正常。
<div id="input-upload-file" class="box-shadow">
<span>upload! (ღ˘⌣˘ღ)</span> <!--ignore the text face lol -->
<input type="file" class="upload" id="fileUp" name="fileUpload" onchange="setFileInfo()">
</div>
这是我用来获取所有信息的函数。
function setFileInfo(){
showInfo(); //change div content
var file = document.getElementById("fileUp").files[0];
var pid = 1;
var Pname = file.name;
Pname = Pname.slice(0, Pname.indexOf(".")); //get filename without extension
var Ptype = file.type;
var Psize = bytesToSize(file.size); //turns into KB,MB, etc...
var Pprior = setPriority(Ptype); //returns 1, 2 or 3
var Pdur = file.duration;
var Pmem = getMemory(Psize); //returns size * (100 || 10 || 1)
var Pown = 'user';
/* a lot of stuff throwing this info to the HTML */
console.log(Pdur);
}
有没有办法做到这一点?如果没有,有哪些替代方案可以帮助我?
发布于 2015-03-27 01:57:33
在modern browsers中,您可以使用带有非附加视频元素的URL API的URL.createObjectURL()
来加载文件的内容。
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>
发布于 2018-07-17 06:51:24
在继续执行更多代码之前,我需要验证单个文件,这是我在Kaiido回答的帮助下的方法!
用户上传文件时的onchange事件:
$("input[type=file]").on("change", function(e) {
var file = this.files[0]; // Get uploaded file
validateFile(file) // Validate Duration
e.target.value = ''; // Clear value to allow new uploads
})
现在验证持续时间:
function validateFile(file) {
var video = document.createElement('video');
video.preload = 'metadata';
video.onloadedmetadata = function() {
window.URL.revokeObjectURL(video.src);
if (video.duration < 1) {
console.log("Invalid Video! video is less than 1 second");
return;
}
methodToCallIfValid();
}
video.src = URL.createObjectURL(file);
}
发布于 2020-06-04 01:20:55
以下是async/await Promise版本:
const loadVideo = file => new Promise((resolve, reject) => {
try {
let video = document.createElement('video')
video.preload = 'metadata'
video.onloadedmetadata = function () {
resolve(this)
}
video.onerror = function () {
reject("Invalid video. Please select a video file.")
}
video.src = window.URL.createObjectURL(file)
} catch (e) {
reject(e)
}
})
可按如下方式使用:
const video = await loadVideo(e.currentTarget.files[0])
console.log(video.duration)
https://stackoverflow.com/questions/29285056
复制相似问题