javascript - 如何获取 HTML5 视频持续时间值的变量

Question

我有这个结构，当要求控制台在“loadedmetadata”内记录 var 时，我总是得到正确的持续时间数字，但在这些监听器之外，dur1 和 dur2 始终为 0。

$(document).ready(function() {
    var dur1 = dur2 = dur3 = 0,
        video1 = $('.video1'),
        video2 = $('.video2');

    (function(){
        video1.on('loadedmetadata', function() {
            var dur1 = video1[0].duration;
            console.log(dur1); // getting the right value
        });
        video2.on('loadedmetadata', function() {
            var dur2 = video2[0].duration;
            console.log(dur2); // geting the right value
        });

        console.log(dur1, dur2); // always getting 0  

    }());
});

代码示例:http://cdpn.io/e/dXomLX

显然，我通常想在这些事件监听器之外使用变量。我怎样才能实现这一目标？

Answer 1

您需要进行三项更改...

1. 将 dur1 和 dur2 的 var 声明移到文档就绪函数之外，以便它们在任何地方都可用:

   var dur1 = dur2 = dur3 = 0;
   $(document).ready(function() {
       var video1 = $('.video1'),
       video2 = $('.video2');
   

2. 不要在 loadedmetadata 函数中将它们声明为 var:

   dur1 = video1[0].duration;
   

3. 不要尝试立即显示它们(就像您当前的“外部”所做的那样)，因为它会在元数据加载函数有机会运行之前到达该代码并显示初始值。您可能想要设置一个标志来指示元数据已加载，或者只是依赖于计时器

   setTimeout('console.log(\'outside: \' + dur1, dur2)', 1000);