当我使用 filereader 读取视频文件时,如何获取视频的持续时间?
How to get duration of video when I am using filereader to read the video file?
我正在尝试将视频上传到服务器和客户端。我正在使用 FileReader 的 readAsBinaryString()
.
阅读它
现在,我的问题是,我不知道如何读取这个视频文件的持续时间。
如果我尝试读取文件,并将 reader 的数据分配给视频标签的源,那么 none 与视频标签关联的事件将被触发。我需要找到客户端上传文件的持续时间。
有人可以给我一些建议吗?
你可以做这样的事情来让它工作:
- 将文件读取为 ArrayBuffer(稍后可以将其作为二进制流直接发送到服务器)
- 将其包装在 Blob 对象中
- 为 blob
创建对象 URL
- 最后设置url为视频源
当视频对象触发 loadedmetadata
事件时,您应该能够读取持续时间。
您也可以使用 data-uri,但请注意,浏览器可能会为它们应用 size limits (as well as other disadvantages),这对于视频文件来说是必不可少的,并且由于Base-64 进程。
例子
Select 您知道浏览器可以处理的视频文件(在生产中您当然应该根据 video.canPlayType()
过滤接受的文件类型)。
执行完上述步骤后会显示持续时间(示例中未包含错误处理,请根据需要进行调整)。
var fileEl = document.querySelector("input");
fileEl.onchange = function(e) {
var file = e.target.files[0], // selected file
mime = file.type, // store mime for later
rd = new FileReader(); // create a FileReader
rd.onload = function(e) { // when file has read:
var blob = new Blob([e.target.result], {type: mime}), // create a blob of buffer
url = (URL || webkitURL).createObjectURL(blob), // create o-URL of blob
video = document.createElement("video"); // create video element
video.preload = "metadata"; // preload setting
video.addEventListener("loadedmetadata", function() { // when enough data loads
document.querySelector("div")
.innerHTML = "Duration: " + video.duration + "s"; // show duration
(URL || webkitURL).revokeObjectURL(url); // clean up
// ... continue from here ...
});
video.src = url; // start video load
};
rd.readAsArrayBuffer(file); // read file object
};
<input type="file"><br><div></div>
你可以像下面那样做,诀窍是使用 readAsDataURL
:
var reader = new FileReader();
reader.onload = function() {
var media = new Audio(reader.result);
media.onloadedmetadata = function(){
media.duration; // this would give duration of the video/audio file
};
};
reader.readAsDataURL(file);
Fiddle Demo
我正在尝试将视频上传到服务器和客户端。我正在使用 FileReader 的 readAsBinaryString()
.
现在,我的问题是,我不知道如何读取这个视频文件的持续时间。
如果我尝试读取文件,并将 reader 的数据分配给视频标签的源,那么 none 与视频标签关联的事件将被触发。我需要找到客户端上传文件的持续时间。
有人可以给我一些建议吗?
你可以做这样的事情来让它工作:
- 将文件读取为 ArrayBuffer(稍后可以将其作为二进制流直接发送到服务器)
- 将其包装在 Blob 对象中
- 为 blob 创建对象 URL
- 最后设置url为视频源
当视频对象触发 loadedmetadata
事件时,您应该能够读取持续时间。
您也可以使用 data-uri,但请注意,浏览器可能会为它们应用 size limits (as well as other disadvantages),这对于视频文件来说是必不可少的,并且由于Base-64 进程。
例子
Select 您知道浏览器可以处理的视频文件(在生产中您当然应该根据 video.canPlayType()
过滤接受的文件类型)。
执行完上述步骤后会显示持续时间(示例中未包含错误处理,请根据需要进行调整)。
var fileEl = document.querySelector("input");
fileEl.onchange = function(e) {
var file = e.target.files[0], // selected file
mime = file.type, // store mime for later
rd = new FileReader(); // create a FileReader
rd.onload = function(e) { // when file has read:
var blob = new Blob([e.target.result], {type: mime}), // create a blob of buffer
url = (URL || webkitURL).createObjectURL(blob), // create o-URL of blob
video = document.createElement("video"); // create video element
video.preload = "metadata"; // preload setting
video.addEventListener("loadedmetadata", function() { // when enough data loads
document.querySelector("div")
.innerHTML = "Duration: " + video.duration + "s"; // show duration
(URL || webkitURL).revokeObjectURL(url); // clean up
// ... continue from here ...
});
video.src = url; // start video load
};
rd.readAsArrayBuffer(file); // read file object
};
<input type="file"><br><div></div>
你可以像下面那样做,诀窍是使用 readAsDataURL
:
var reader = new FileReader();
reader.onload = function() {
var media = new Audio(reader.result);
media.onloadedmetadata = function(){
media.duration; // this would give duration of the video/audio file
};
};
reader.readAsDataURL(file);