Script doesn't do what it's supposed to

JavaScript
1

Hello, everyone,

Unfortunately, since I am not really competent in JavaScript, I have problems with the following code. I found the code snippet on the Internet and installed it. It should cause a video to start as soon as it becomes visible on the screen when scrolling. Unfortunately, my code doesn’t work - the video won’t start.

I have to admit that I no longer know if the code is generic JavaScript or belongs to JQuery or some other collection, maybe JS Bin. To be on the safe side, I integrated JQuery. Since I urgently need the function for commissioned work, I would be very grateful if you could take a look at it. It would be even better if I could get some code for JavaScript or JQuery from you that does this job. Would it be possible? Here is the code, for a better overview the whole HTML page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="javascript/jquery-3.6.0.js" type="text/javascript"></script>.

<style>
#header{
/*  height:500px;
  background-color: #000;  */
}

#video1 {
	position: absolute;
	left: 200px;
	top: 1000px;
}
</style>

<script language="JavaScript" type="text/JavaScript">
<!--
$(window).scroll(function(e)
  {
    var offsetRange = $(window).height() / 3,
        offsetTop = $(window).scrollTop() + offsetRange + $("#header").outerHeight(true),
        offsetBottom = offsetTop + offsetRange;

    $("#video1").each(function () { 
      var y1 = $(this).offset().top;
      var y2 = offsetTop;
      if (y1 + $(this).outerHeight(true) < y2 || y1 > offsetBottom) {
        this.pause(); 
      } else {
        this.play();
      }
    });
});
}
//-->
</script>

</head>

<body style="width: 4000px; height: 4000px;">
<div id="header"></div>
<div id="info"></div>
<div id="down">scroll down please...</div>

<div>
<video id="video1" source src="test1.mp4" width="30%"></video>
</div>

</body>
</html>

I would be very grateful for your help.

1 Like
2

this is not something that we do, but we can help you reach your goal.

First thing, you have downloaded jQuery and added it in the “javascript” folder, is that correct?

you may also want to check your html with a validator, there are some issues Validation Results - W3C Markup Validator

3

Copying and pasting code from the internet you do not understand is usually a bad idea.

I cleaned it up a bit, move the script code to after the page content, and added jQuery from a CDN instead. Just be aware that the autoplay is likely to get blocked by the browser but if you play the video (I added controls to the element) and then scroll it should pause/play as expected.

Summary 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <style>
      body {
        height: 4000px;
      }

      #video1 {
        position: absolute;
        left: 200px;
        top: 1000px;
      }
    </style>

    <div id="header"></div>
    <div id="info"></div>
    <div id="down">scroll down please...</div>

    <div>
      <video id="video1" src="test1.mp4" width="30%" controls></video>
    </div>

    <script>
      $(window).scroll(function (e) {
        var offsetRange = $(window).height() / 3,
          offsetTop =
            $(window).scrollTop() +
            offsetRange +
            $('#header').outerHeight(true),
          offsetBottom = offsetTop + offsetRange;

        $('#video1').each(function () {
          var y1 = $(this).offset().top;
          var y2 = offsetTop;
          if (y1 + $(this).outerHeight(true) < y2 || y1 > offsetBottom) {
            this.pause();
          } else {
            this.play();
          }
        });
      });
    </script>
  </body>
</html>
4

Working perfect! :grinning: Thanks a lot, lasjorg, you saved my day (and more).

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.