Question

请参阅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();
});

}）;

Answer 1

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

以下是我在每张幻灯片中播放/暂停视频的内容。（＆＃39;。全＆＃39）

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幻灯片解决方案。

显示视频时播放视频，视频隐藏时会暂停播放？

1 个答案: