javascript - 即使设置了滚动功能，暂停按钮也会暂停

Question

我已经能够让视频在超过特定像素高度时暂停并滚动播放。但我现在的问题是，当距离顶部超过 13500 像素时，我编写的代码会自动使其在任何滚动条上播放。我想知道您是否可以做到这样，当您通过视频自己的控制按钮暂停时，即使您滚动它也不会播放。因为现在即使您暂停了视频，它也会播放。

 $(document).ready(function() {

                $(window).scroll(function() {

                    var vid = document.getElementById("video_1");

                        if($(document).scrollTop() > 13500) { 

                            vid.play(); 

                        }

                        else {



                         vid.pause(); 
                        }

                });
        });

Answer 1

您已经监听了用户对视频的“暂停”和“播放”事件。因此，无论用户是否暂停，您都可以保持状态。以下代码可以解决问题。

var isPaused = false;
var vid;
$(document).ready(function() {
          vid = document.getElementById("video_1");
          vid.onpause = function() {
             isPaused = true;
          };
          vid.onplaying = function() {
             isPaused = false;
          }
                $(window).scroll(function() {



                        if($(document).scrollTop() > 13500 && !isPaused) { 

                            vid.play(); 

                        }

                        else {



                         vid.pause();
                         isPaused = true;
                        }

                });
        });