स्क्रॉल स्थिति

Question

पर आधारित एक वीडियो ऑटोप्ले को ट्रिगर करना मैं स्क्रॉल लिख रहा हूं जो scrollorama.js स्क्रिप्ट से वाइप एनीमेशन का उपयोग करता है। मैं स्क्रॉल गहराई में कुछ मार्करों पर ऑटोप्ले करने के लिए एक वीडियो को लागू करने में सक्षम होने की उम्मीद कर रहा हूं: यानी, जब एक वीडियो पेज दूसरे को मिटा देता है, और अब पूरी तरह से देखने योग्य है। मैंने स्क्रॉल गहराई को मापने के बारे में पता लगाया है, मैं इसे अपने कंसोल में सफलतापूर्वक लॉगिंग कर रहा हूं। मैंने यह पता लगाया है कि मैंने कितना गहराई से माप लिया है, लेकिन शायद मैं बहुत थक गया हूं, मुझे नहीं पता कि स्क्रॉल गहराई पर वीडियो को स्वचालित रूप से चलाने के लिए कैसे कहा जाए। मुझे आशा है कि यह एक कानूनी सवाल है, और मुझे कुछ सहायता मिल सकती है। क्या किसी ने वहां पहले कोशिश की है? इस प्रकार कोड अब तक है।

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

$ (विंडो) .scroll (समारोह (ई) {

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

मैं इसे समझ लिया, इसलिए मैं यहां अपने साथ कई अन्य उत्तरों की सहायता से अपने प्रश्न का उत्तर देता हूं!

अगर कोई रुचि है, एचटीएमएल आसान था:

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

Jquery भी आसान था:

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

बस के नीचे से स्क्रिप्ट जोड़ने और एक पृष्ठ पर कहीं भी अपने वीडियो टैग करने के लिए playonscroll परम जोड़ें।

साथ ही कुछ समय यह शरीर की तुलना में अलग स्क्रॉल कंटेनर का उपयोग करने के लिए आवश्यक है, कभी कभी अपने स्पष्ट नहीं है, तो निम्न कोड मेरे लिए एक आकर्षण की तरह काम करता है ताकि:

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

मामले में

आप हमेशा के लिए शरीर कंटेनर का उपयोग करता है, तो स्क्रॉल सिर्फ $ करने के लिए setInterval बदल (विंडो) .scroll

और भूल नहीं है वीडियो टैग तत्व के लिए संपत्ति को परिभाषित करने के:

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