Triggering a video autoplay based on scroll position

Question

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 d

Answer 1

just add the script from below and add playonscroll param to your video tag anywhere on a page.

As well some times it's required to use different scroll container than body, sometimes its not obvious, so the following code works like a charm for 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);

in case if you always use body container for scroll just change setInterval to $(window).scroll

And don't forget to define property for Video tag element:

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