Video abspielen auf Bildlauf aber nur einmal

Question

Ich habe dieses Skript, das Video abspielen würde, wenn es eine bestimmte Position erreicht (auf Bildlauf), aber das Problem ist, wenn Sie es anhalten und weiter scrollen würde es wieder spielen ... Ich habe versucht tun „eins“ auf Scroll-Funktion, aber das würde nicht funktionieren, da es es für blättern zu überprüfen erlauben würde, nur ein einziges Mal der nur auf dem Bildschirm sein würde ...

$(window).scroll(function() { 

$('.video-panel').each(function(){ 
    var imagePos = $(this).offset().top; 
    var topOfWindow = $(window).scrollTop(); 
    var myVideo = document.getElementById("lunar-video"); 



    if (imagePos < topOfWindow+$(window).height()/1.4) { 
     $(".video-panel video").fadeIn(); 
     $("#lunar-video").prop('play'); 
     console.log('blejacki'); 
     // $(".video-panel").addClass('blejacki'); 
    } 

}); 

});

Answer 1

Fügen Sie einfach eine Klasse zum Element hinzu und prüfen Sie, ob diese Klasse bereits existiert.

if (imagePos < topOfWindow+$(window).height()/1.4) { 
    $(".video-panel video").fadeIn(); 
    var $lv = $('#lunar-video'); 

    if(!$lv.hasClass('is-playing')){ 
     $lv.prop('play'); 
     $lv.addClass('is-playing'); 
    } 

}