javascript - 无法在 addEventListener 函数之外获取视频持续时间
问题描述
我有一个功能可以在上传视频之前将视频持续时间记录到控制台中。但是,我无法在addEventListener
函数之外获取视频持续时间,因为它会返回NaN
。尽管如此,在函数内部它成功地记录了正确的视频持续时间,但如果我将它保存到一个变量中,它不会得到正确的值。
视频时长功能
var duration = 0; // Set default variable for storing video duration
if(vfile.type == "video/webm" || vfile.type == "video/mp4" || vfile.type == "video/ogg" || vfile.type == "video/mov"){
var video = document.createElement('video'); // Create video element
video.preload = 'metadata'; // Set preload attribute to metadata
window.URL.revokeObjectURL(video.src);
video.addEventListener('durationchange', function() { // Check for duration
console.log('Duration change', video.duration); // Successfully logs video duration into console e.g.: 13.012
duration = video.duration; // Set duration variable to video.duration
});
console.log("Duration: ", duration); // Returns back 0
}
video.src = URL.createObjectURL(vfile);
如果我将变量设置duration
在函数video.duration
之外,addEventListener
它会返回NaN
.
总而言之,我如何将变量设置duration
为实际的视频持续时间,以便以后在脚本中使用?
解决方案
您在此代码中将 video.duration 分配给持续时间:
video.addEventListener('durationchange', function() { // Check for duration
console.log('Duration change', video.duration); // Successfully logs video duration into console e.g.: 13.012
duration = video.duration; // Set duration variable to video.duration
});
console.log("Duration: ", duration); // Returns back 0
问题是在之前console.log("Duration: ", duration);
运行,因为不会立即运行它的功能。如果您确实需要对持续时间做一些事情,您可以在分配持续时间后运行它,如下所示: duration = video.duration;
video.addEventListener
video.addEventListener('durationchange', function() { // Check for duration
duration = video.duration; // Set duration variable to video.duration
someOtherFunction();
});
您还可以使用其他异步数据管理技术之一:https ://stackoverflow.com/a/14220323/6184972
推荐阅读
- kendo-ui-angular2 - 如何在kendo ui angular2中实现目录上传?
- android - 在文本视图中从常规文本动画到粗体
- c# - 由于版本号不匹配,无法加载程序集
- c# - C# WinForms,具有半透明背景的工具提示
- sql - 将一个字段等分为2
- java - 蓝牙数据传输
- google-cloud-platform - 带有授权 API 密钥的 Google URL Shorter API 返回 403
- ios - WKWebView 从 Bundle 和 Document 目录加载文件
- grafana - 如何关闭表grafana中的自动生成列
- selenium - 如何在一个浏览器中运行相同功能文件的所有场景?使用硒,Java,黄瓜