javascript - 使用 popcorn.js 迭代 cue 方法

Question

我正在尝试在视频中设置多个提示点。我不想写出每个提示，而是想遍历一个包含我需要的数据的对象，例如提示时间和有关如何处理回调的一些信息。

问题是，当我尝试遍历对象时，它会覆盖除最后一个提示之外的所有提示。

var products = myVideo.products;
var video = Popcorn('#mainVideo');

    for (product in products){
        var obj   = products[product],
            start = obj.start,
            img   = obj.image,
            $targetDiv  = $("#"+obj.targetDiv);

        video.cue( start, function(){
            $('<img>', {
            class : "isImage",
            src : 'images/' + img
            }).prependTo( $targetDiv );
        })

    }

如有任何帮助，我们将不胜感激。

Answer 1

在这段代码中，每个cue都有自己的回调函数，但每个函数都引用同一个变量img和同一个$targetDiv。在它们运行时，这些变量将被设置为它们在 products 中最后一项的各自值。

如果您曾经通过 jslint 运行过代码并看到警告，不要在循环中创建函数，这就是原因。做你想做的事情的一个好方法是将这些变量放在一个函数中，该函数立即被调用并返回另一个函数，这是你的回调。像这样:

function makeCallback(obj) {
    return function() {
        $('<img>', {
        class : "isImage",
        src : 'images/' + obj.img
        }).prependTo( $("#"+obj.targetDiv) );
    };
}

for (var product in products) {
    var obj = products[product];
    video.cue( obj.start, makeCallback( obj ) );
}

或者，您可以使用 forEach ，它在引擎盖下做同样的事情。 (Popcorn 提供了 its own version ，它同时处理数组和对象。)

Popcorn.forEach(products, function(obj) {
    video.cue( start, function(){
        $('<img>', {
        class : "isImage",
        src : 'images/' + obj.img
        }).prependTo( $("#"+obj.targetDiv) );
    });
});

我应该注意到您在这段代码中还有另一个问题，那就是您每次通过提示点时都会让 Popcorn 创建一个新图像。因此，如果用户跳回重播某些视频，图像就会开始堆积。此外，图像直到它们可见时才会开始加载，因此如果网络连接速度较慢，图像可能不会显示，直到为时已晚。

处理这些问题的最佳方法通常是提前创建图像，但使用 CSS 使它们不可见，然后让 Popcorn 事件在正确的时间使它们可见。您可以考虑使用 image插件，它将为您完成大部分繁重的工作。