Attivazione di una riproduzione automatica del video in base alla posizione di scorrimento

Question

Sto scrivendo uno script che utilizza l'animazione di Wipe dallo script scrollorama.js. Spero di essere in grado di implementare un video per l'autoplay su determinati marker nella profondità di scorrimento: cioè, quando una pagina video ne ha cancellato un'altra e ora è completamente visualizzabile. Ho capito come misurare la profondità di scorrimento, sto registrando con successo nella mia console. Ho capito come misurare quanto profondo ho fatto scorrere, ma forse sono così stanco, non so come chiedere al video di giocare automaticamente alla profondità di scorrimento. Spero che questa sia una domanda legale e che posso ottenere assistenza. Qualcuno là fuori ci ha provato prima? Ecco il codice fino ad ora.

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

$ (window) (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 capito, quindi rispondo alla mia stessa domanda con l'aiuto di molte altre risposte rattoppate qui!

Se qualcuno è interessato, l'HTML è stato semplice:

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

Jquery è stato anche semplice:

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

basta aggiungere lo script dal basso e aggiungere playonscroll param al tag video in qualsiasi punto di una pagina.

Così alcune volte è necessario per utilizzare il contenitore di scorrimento diverso da quello del corpo, a volte il suo non è evidente, quindi il seguente codice funziona come un fascino per me:

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); 

nel caso in cui se si usa sempre il contenitore del corpo per scroll basta cambiare setInterval a $ (window) .scroll

E non dimenticare di definire la proprietà per l'elemento di tag video:

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