输入视频文件时获取视频时长
输入视频文件时获取视频时长
提问于 2015-03-27 01:27:52
我正在用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);
}有没有办法做到这一点？如果没有，有哪些替代方案可以帮助我？
回答 4
Stack Overflow用户
回答已采纳
发布于 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>
Stack Overflow用户
发布于 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);
}Stack Overflow用户
发布于 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)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29285056
复制相关文章
相似问题