How To Mute A Html5 Video On Scrollposition

I want a html5 video being muted when the user scrolls to a div container (#scroll). Therefore I tried to use this code: $(document).ready(function(){ $(window).scroll(functi

Solution 1:

1- This first simple example (plain javascript, no jQuery) mutes the video if you scrolls the scrollbar 450px down (and unmutes it when you get back to the top);

window.addEventListener("scroll", myFunction);

function myFunction() {
    if (document.documentElement.scrollTop > 450 || document.documentElement.scrollTop > 450) {
        document.getElementById("player").volume = 0.0;
    } else {
        document.getElementById("player").volume = 1.0;
    }
}

body, p {
  color: cyan;
  line-height: 50px;
}

video {
  position: fixed;
  z-index: -1;
}

<video height="200" controls autoplay loop id=player>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<p>scroll 50</p><p>scroll 100</p><p>scroll 150</p><p>scroll 200</p><p>scroll 250</p><p>scroll 300</p><p>scroll 350</p><p>scroll 400</p><p>scroll 450</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p>

2- This next example mutes the video while you scrolls the scrollbar over the target div's position (and unmutes it when you leave it);

ps: It uses the div's top position and height; so it must be executed after the page get fully loaded;

window.addEventListener("scroll", myFunction);

function myFunction() {

  var thetarget = document.getElementById("target");
  var targetpos = thetarget.offsetTop;
  var targetheight = thetarget.offsetHeight;
  var targetpostwo = targetpos + targetheight;
  
    if (document.documentElement.scrollTop > targetpos && document.documentElement.scrollTop < targetpostwo || document.documentElement.scrollTop > targetpos &&  document.documentElement.scrollTop < targetpostwo ) {
        document.getElementById("player").volume = 0.0;
    } else {
        document.getElementById("player").volume = 1.0;
    }
}

#target {
  text-align: center;
  line-height: 400px;
  background: tomato;
  height: 400px;
  width: 100%;
  opacity: 0.4;
}

video {
  position: fixed;
  z-index: -1;
}

<video width="400" controls autoplay loop id=player>
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
<p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p>
<div id=target>MUTED TARGET</div>
<p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p><p>scroll</p>

video source: techslides