Воспроизведение видео, когда видео отображается, когда видео скрыто, оно приостанавливается?

Question

См. http://jsfiddle.net/rabelais/DW5CV/15/

Здесь есть своего рода слайд-шоу из художественной работы, которая содержит divs с изображениями и видео. Когда пользователь нажимает на полноэкранное изображение или видео, он скрывает и показывает следующий в строке, и продолжает цикл. Видеоролики устанавливаются при автоматическом воспроизведении, однако я хочу, чтобы они автоматически воспроизводились, когда они отображаются, и пауза, когда они скрыты?

$(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> элементов.

Вот что я придумал для воспроизведения/паузы видео на каждый из ваших «слайдов» («.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.