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 に答える