时间戳

首页 > 解决方案 > 使用js和jq滚动播放和暂停两个或多个视频的代码

javascript - 使用js和jq滚动播放和暂停两个或多个视频的代码

问题描述

这仅适用于一个视频，但这必须适用于所有视频（两个或更多）

<html>

<head>
    <script src="https://code.jquery.com/jquery-1.8.0.min.js" integrity="sha256-jFdOCgY5bfpwZLi0YODkqNXQdIxKpm6y5O/fy0baSzE=" crossorigin="anonymous"></script>
</head>

<body>
    <video src=" https://www.w3schools.com/html/mov_bbb.mp4" id="movie1" width="400vh" style="height:100vh;" autoplay="true" controls muted>
                Your browser does not support HTML5 video.
              </video>
    <br>
    <video src=" https://www.w3schools.com/html/mov_bbb.mp4" id="movie2" width="400" style="height:100vh;" autoplay="true" controls muted>
                Your browser does not support HTML5 video.
    </video>


     </video>
    <script>
        $(document).ready(function() {
            $('#video1')[0].play();
        });

        $(document).on("scroll", function() {
            if ($(document).scrollTop() > 1) {
                $('#video1')[0].pause();
            } else {
                $('#video1')[0].play();
            }
        });
    </script>
</body>

</html>

标签： javascriptjquery

解决方案

一旦视频滚动到其高度的一半，这将暂停视频。

$(document).on("scroll", function() {
  for (let i = 1; i <= $('video').length; i++) {
    if ($(`#movie${i}`).offset().top + $(`#movie${i}`).height() / 2 < $(document).scrollTop()) {
      $(`#movie${i}`).get(0).pause();
      console.log(`#movie${i} : paused`);
    } else if ($(`#movie${i}`).offset().top < $(document).scrollTop()) {
      $(`#movie${i}`).get(0).play();
      console.log(`#movie${i} : playing`);
    } else {
      $(`#movie${i}`).get(0).pause();
    }
  }
});
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.8.0.min.js" integrity="sha256-jFdOCgY5bfpwZLi0YODkqNXQdIxKpm6y5O/fy0baSzE=" crossorigin="anonymous"></script>
</head>

<body>
  <video src=" https://www.w3schools.com/html/mov_bbb.mp4" id="movie1" width="400vh" style="height:100vh;" autoplay="true" controls muted>
                Your browser does not support HTML5 video.
              </video>
  <br>
  <video src=" https://www.w3schools.com/html/mov_bbb.mp4" id="movie2" width="400" style="height:100vh;" controls muted>
                Your browser does not support HTML5 video.
    </video>
  <br>
  <video src=" https://www.w3schools.com/html/mov_bbb.mp4" id="movie3" width="400" style="height:100vh;" controls muted>
                Your browser does not support HTML5 video.
    </video>
  <br>
  <video src=" https://www.w3schools.com/html/mov_bbb.mp4" id="movie4" width="400" style="height:100vh;" controls muted>
                Your browser does not support HTML5 video.
    </video>
  <br>
  <video src=" https://www.w3schools.com/html/mov_bbb.mp4" id="movie5" width="400" style="height:100vh;" controls muted>
                Your browser does not support HTML5 video.
    </video>
</body>

</html>

推荐阅读