I am writing a script that uses the Wipe animation from the scrollorama.js script. I am hoping to be able to implement a video to autoplay at certain markers in the scroll depth: ie, when a video page has wiped out another, and is now fully viewable. I have figured out how to measure scroll depth, i am successfully logging it in my console. I have figured out how to measure how deep i have scrolled, but maybe i am so tired, i don't know how to ask the video to play automatically at the scroll depth. I hope this is a legal question, and that I can get some assistance. Has anyone out there tried this before? Here is the code thus far.

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

$(window).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');

    }





});



});