Question

我有一个简单的幻灯片。

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

现在。我正在使用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/

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个视频时才有效。代码必须稍微编辑以适应更多

检查div是否在幻灯片上显示图像

1 个答案: