我正在尝试通过File API获取上传的视频文件的持续时间。我有以下HTML代码:
<div class="row">
<div class="twelve columns" style="margin:30px 0px 0px 0px; width:560px;">
<label for="fileToUpload">Select a File to Upload</label>
<input type="file" name="postedFile" id="file" onchange="previewMedia(this)"/>
<div id="progressNumber"></div>
</div>
</div>
<div id="mediaHolderDiv" hidden>
<div id ="videoHolderDiv" hidden>
<video id="videoHolder" width="640" height="360" controls><source src="#" type="video/mp4"></video>
</div>
<div id="audioHolderDiv" hidden>
<audio preload="auto" controls id="audioHolder"><source src="#" type="audio/mp3"></audio>
</div>
</div>
以下Javascript:
function previewMedia(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
//the only jQuery line. All else is the File API.
var extension = input.files[0].name.split('.').pop();
alert("YOUR EXTENSIONS IS :" + extension);
if (extension == 'mp4') {
alert("BINGO A VIDEO");
$('#mediaHolderDiv').show();
$('#audioHolderDiv').hide();
$('#videoHolderDiv').show();
$('#videoHolder').attr('src', e.target.result);
var duration = $('#videoHolder').get(0);
setTimeout(function () {
alert("File successfully chosen. Please enter required metadata below.");
var vid_duration = duration.duration;
alert(vid_duration);
var seconds = Math.floor(vid_duration % 60);
alert("SECONDS:" + seconds);
var minutes = Math.floor(vid_duration / 60);
alert("MINUTES:" + minutes);
var hours = Math.floor(vid_duration / (60 * 60));
alert("HOURS:" + hours);
var durationString = "" + hours + ":" + minutes + ":" + seconds;
alert("DURATION" + durationString);
duration.firstChild.nodeValue = vid_duration;
}, 1000);
}
else if (extension == 'mp3') {
alert("BINGO AN MP3");
$('#mediaHolderDiv').show();
$('#videoHolderDiv').hide();
$('#audioHolderDiv').show();
$('#audioHolder').attr('src', e.target.result);
var duration = $('#audioHolder').get(0);
setTimeout(function () {
alert("File successfully chosen. Please enter required metadata below.");
var vid_duration = duration.duration;
alert(vid_duration);
var seconds = Math.floor(vid_duration % 60);
alert("SECONDS:" + seconds);
var minutes = Math.floor(vid_duration / 60);
alert("MINUTES:" + minutes);
var hours = Math.floor(vid_duration / (60 * 60));
alert("HOURS:" + hours);
var durationString = "" + hours + ":" + minutes + ":" + seconds;
alert("DURATION" + durationString);
duration.firstChild.nodeValue = vid_duration;
}, 1000);
}
}
reader.readAsDataURL(input.files[0]);
}
}
这适用于Google Chrome和Firefox上预期的视频,但当我尝试在IE10中使用PreviewMedia功能时,我得到错误:不支持的视频类型或无效的文件路径文件路径是有效的,文件类型是MP4所以我无法理解这个问题。有没有人见过这个或知道这个问题的任何变通方法?