Wywoływanie autoodtwarzania wideo na podstawie pozycji przewijania

Question

Piszę skrypt, który wykorzystuje animację Wipe ze skryptu scrollorama.js. Mam nadzieję, że uda mi się zaimplementować wideo do autoodtwarzania na niektórych znacznikach na głębokości przewijania: np. Kiedy strona wideo zlikwiduje inną i jest teraz w pełni widoczna. Zorientowałem się, jak zmierzyć głębokość przewijania, z powodzeniem loguję ją w mojej konsoli. Zorientowałem się, jak zmierzyć głębokość przewijania, ale może jestem tak zmęczony, że nie wiem, jak poprosić wideo, aby grało automatycznie na głębokości przewijania. Mam nadzieję, że jest to kwestia prawna i że mogę uzyskać pomoc. Czy ktoś wcześniej próbował tego wcześniej? Oto kod do tej pory.

enter code here $ (document) .ready (function() {

$ (okno) .scroll (function (e) {

var scrollAmount = $('body').scrollTop(); 
    console.log(scrollAmount); 

});

var controller = $.superscrollorama(); 
    var pinDur = 800; 
    // create animation timeline for pinned element 
var pinAnimations = new TimelineLite(); 

//pinAnimations.append([TweenMax.to($('#green'), .5, {css:{top:0}})], .5) 
pinAnimations.append([TweenMax.to($('#intromovie'), .5, {css:{top:0}})], .5) 
pinAnimations.append([TweenMax.to($('#red'), .5, {css:{top:0}})], .5) 
pinAnimations.append([TweenMax.to($('#blue'), .5, {css:{top:0}})], .5) 
pinAnimations.append([TweenMax.to($('#movie1'), .5, {css:{top:0}})], .5); 
pinAnimations.append([TweenMax.to($('#history1'), .5, {css:{top:0}})], .5); 
//pinAnimations.append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}})); 


controller.pin($('#content_wrapper'), pinDur, { 
    anim:pinAnimations, 
    onPin: function() { 
     $('#content_wrapper').css('height','100%'); 
    }, 
    onUnpin: function() { 
     $('#content_wrapper').css('height','1000px'); 
    } 


}); 

}); 

Answer 1

I wymyśliłem to, więc odpowiadam na własne pytanie z pomocą wielu innych poprawionych tutaj łatek!

Jeśli ktoś jest zainteresowany, html była prosta:

<div id="videoHolder"></div> 

Jquery była również prosta:

 $(function(){ 

    $(window).scroll(function(e) { 

     var scrollAmount = $('body').scrollTop(); 
     console.log(scrollAmount); 


    if(scrollAmount >="theamountyouwant" && scrollAmount <= "theotheramountyouwant") { 


     $("#videoHolder").html(
      '<video width="1200" height="700" autoplay>' + 

     '<source src="http://itp.nyu.edu/~rnr217/HTML5/Week3/video/testopen.webm" type="video/webm"></source>' + 
     '<source src="http://itp.nyu.edu/~rnr217/HTML5/Week3/video/testopen.mp4" type="video/mp4"></source>' + 

     '</video>'); 

Answer 2

wystarczy dodać skrypt od dołu i dodać playonscroll param do tagu wideo w dowolnym miejscu na stronie.

Jak dobrze czasami jest to niezbędne do korzystania z innego przewijania kontenera niż ciało, czasami jej nie oczywiste, więc następujący kod działa jak czar dla mnie:

setInterval(function() { 
    $('video[playonscroll]').each(function() { 
     var videoElement = $(this)[0]; 
     var eTop = $(this).offset().top; 
     var elementOffestY = (eTop - $(window).scrollTop()); 
     var videoOffset = [elementOffestY, elementOffestY+$(this).height()]; 
     if ((videoOffset[0] < 100) && (videoOffset[1] > 350)) { 
      console.log('play'); 
      if (!videoElement.playing) { 
       videoElement.play(); 
      } 
     } else { 
      if (videoElement.playing) { 
       videoElement.pause(); 
      } 
     } 
    }); 
},300); 

w przypadku jeśli zawsze stosować ciała dla przewiń wystarczy zmienić setInterval do $ (okno) .scroll

I nie zapomnij, aby określić właściwości dla elementu tagu video:

Object.defineProperty(HTMLMediaElement.prototype, 'playing', { 
    get: function(){ 
     return (this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2); 
    } 
})