3

我有一个简单的幻灯片。

我想检查幻灯片是图像还是视频。如果是视频播放它和视频结束时自动播放滑块。

现在。我正在使用 Snook 的滑块。

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/

4

1 回答 1

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);

这是小提琴

但是，我建议仅在视频暂停时才停止间隔，以减少错误并允许用户进行更多控制。可以这样做：

$("#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);
});

这是 Fiddle。这也可以防止视频被切断或播放之前可能出现的一些错误（我第一次打开你的 jsfiddle 时，我正在查看不同的页面并且不知道声音来自哪里 - 这可以防止这种情况发生）

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

于 2013-07-26T18:28:57.217 回答