无法在 addEventListener 函数之外获取视频持续时间答案

【问题标题】：Cannot get video duration outside addEventListener function无法在 addEventListener 函数之外获取视频持续时间
【发布时间】：2018-06-06 13:58:42
【问题描述】：

我有一个功能，可以在上传视频之前将视频持续时间记录到控制台中。但是，我无法在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);

如果我在addEventListener 函数之外将变量duration 设置为video.duration，它会返回NaN。
总而言之，如何将变量 duration 设置为实际的视频时长，以便以后在脚本中使用？

【问题讨论】：

可能重复：stackoverflow.com/questions/19592009/…
与您的问题无关的其他一些问题：您将 video.src 设置在创建视频元素的代码块之外。此外，revokeObjectURL 在设置 video.src 之前（以及在加载视频之前）运行，因此它实际上什么都不做。

标签： javascript variables video html5-video duration

【解决方案1】：

您在此代码中将 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

【讨论】：