Video plays when video is shown, when video is hidden, it pauses?

Question

Please see http://jsfiddle.net/rabelais/DW5CV/15/

Here there is a kind of slideshow of art work that contains divs with images and videos. When the user clicks on the full screen image or video it hides and shows the next in line, and continues on a loop. The videos are set at auto play, however I want them to auto play when they are shown and pause when they are hidden?

$(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

You won't want each video to play as soon as they're loaded on the page. So, I took autoplay out from the <video> elements.

Here's what I came up with to play/pause videos on each of your "slides" ('.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);
});

It's not the most elegant solution, but it works. You might look into using an existing jQuery slideshow solution.