0

请参见http://jsfiddle.net/rabelais/DW5CV/15/

这里有一种艺术作品的幻灯片，其中包含带有图像和视频的 div。当用户单击全屏图像或视频时，它会隐藏并显示下一行，并继续循环。视频设置为自动播放，但是我希望它们在显示时自动播放并在隐藏时暂停？

$(function () {

 var win = $(window),
    fullscreen = $('.full'),
    image = fullscreen.find('img, video'),
    imageWidth = image.width(),
    imageHeight = image.height(),
    imageRatio = imageWidth / imageHeight;

function resizeImage() {
    var winWidth = win.width(),
        winHeight = win.height(),
        winRatio = winWidth / winHeight;

    if (winRatio > imageRatio) {
        image.css({
            width: winWidth,
            height: Math.round(winWidth / imageRatio)
        });
    } else {
        image.css({
            width: Math.round(winHeight * imageRatio),
            height: winHeight
        });
    }
}

$('.full').click(function () {
    $(this).hide();
    if($(this).next('.full').length === 1)
        $(this).next('.full').show();
    else
        $('.full').eq(0).show();
});

});

4

1 回答 1

1

您不希望每个视频在页面加载后立即播放。所以，我autoplay从<video>元素中取出。

这是我想出的在您的每个“幻灯片”（'.full'）上播放/暂停视频的方法

http://jsfiddle.net/zyglobe/DW5CV/22/

function advanceToSlide(slidePos){
    slide = $('.full').eq(slidePos);
    slide.show();
    var video = $('video', slide);

    $('video').each(function(){
        $(this).get(0).pause();
    })

    if(video.length){
        console.log(video.get(0).play());
    }


}

$('.full').on('click', function(){
    $('.full').hide();
    if(currentSlide < numSlides - 1){
        currentSlide = currentSlide + 1;
    } else{
        currentSlide = 0;
    }
    advanceToSlide(currentSlide);
});

这不是最优雅的解决方案，但它确实有效。您可能会考虑使用现有的 jQuery 幻灯片解决方案。

于 2013-10-05T02:12:38.670 回答