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

Answer 2

So in this case we can use an integrated JavaScript API namely Intersection Observer. Now our main task is to play the video at an particular position, so for this task we will set up a trigger on the intersectionRatio value.

const images = document.querySelectorAll(".mydivTriggerClass");

vid = document.getElementById("myVideoId");

observer = new IntersectionObserver((entries) => {
  console.log(entries);

  if (entry.intersectionRatio > 0.34) {
    vid.play();
  } else {
    entry.target.style.animation = "none";
  }
});

observer.observe(image);

NOTE: Please note that the console log entries are optional - its just so that when you inspect you get the info showing where this intersection ratio came from.

For a perfect working example please visit this link.

Answer 3

I figured this out, so i answer my own question with the help of a lot of other answers patched together here!

If anyone is interested, the html was simple:

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

Jquery was also simple:

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