javascript - 检查 div 是否在幻灯片上有图像

Question

我有一个简单的幻灯片。

我想检查幻灯片是图片还是视频。如果是视频播放它，当视频结束时自动播放 slider 。

现在。我正在使用 Snook 的 slider 。

HTML:

<ul>
    <li><img></li>
    <li><video></li>
    <li><img></li>
    <li><video></li>
    <li><img></li>
</ul>

JS

function startSlider(duration){
    setInterval(function() { 
        jQuery('#slideshow > li:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    }, duration);
}
    if (jQuery("#slideshow li").has('img') == true) {
        startSlider(4000);


     }else{
      myVideoPlayer.addEventListener('loadedmetadata', function() {

        var ddur =  Math.round(myVideoPlayer.duration) * 1000;
        console.log(ddur);
        startSlider(ddur);
        });
    }

但是当下一张幻灯片更改时，它会保持与视频相同的持续时间。如何检查视频是否获取持续时间并将其设置为 4000？

谢谢。

更新:http://jsfiddle.net/nbK2S/1/

Answer 1

做你要求做的事情，根据它是否是视频改变间隔时间，可以通过这种方式完成:

$("#slideshow > div:gt(0)").hide();
var intervalTime = 3000;

function runInterval () {
    if($('#slideshow > div:first').next().has('img').length == 0)
    {
        intervalTime = Math.round($('video').attr('duration') * 1000);
        clearInterval(s);
        s = setInterval(runInterval, intervalTime);        
    }
    else {
        if(intervalTime != 3000)
        {
            intervalTime = 3000;
            clearInterval(s);
            s = setInterval(runInterval, intervalTime);
        }
    }
    $('#slideshow > div:first')
        .fadeOut(1000)        
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
}

var s = setInterval(runInterval, intervalTime);

Here's the fiddle for that

不过，我建议仅在视频暂停时才停止间隔，以减少错误并允许用户进行更多控制。这可以通过这种方式完成:

$("#slideshow > div:gt(0)").hide();
var intervalTime = 3000;

function runInterval() {
    $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
}

var s = setInterval(runInterval, intervalTime);

$('video:eq(0)').bind('play', function () {
    clearInterval(s);
    $('video:eq(0)').attr('duration', '7')
    alert($('video:eq(0)').attr('duration'));
});

$('video:eq(0)').bind('pause ended', function () {
     s = setInterval(runInterval, intervalTime);
});

和here is that Fiddle .这也可以防止视频被切断或播放之前出现一些可能的错误(我第一次打开你的 jsfiddle 我正在查看另一个页面并且不知道声音来自哪里 - 这可以防止这种情况发生)

注意 这些解决方案仅在有 1 个或 0 个视频时才有效。必须对代码进行一些编辑以适应更多