滚动控制视频播放时,视频自带暂停按钮失效问题求助
Solution for Video Auto-Play/Pause with User Manual Control Respect
Got it, let's fix this issue for you! The core problem with your current code is that it ignores the user's manual pause action—every time you scroll past 13500px, it forces the video to play no matter what. We can solve this by adding a flag to track whether the user has manually paused the video, and only let the scroll-based auto-control work when the user hasn't taken over.
Here's the revised code with explanations:
$(document).ready(function() { // Flag to track if user manually paused the video let userPaused = false; const vid = document.getElementById("video_1"); // Listen for user's manual pause action vid.addEventListener('pause', function() { // Only set the flag if the pause wasn't triggered by scroll logic if ($(document).scrollTop() > 13500) { userPaused = true; } }); // Listen for user's manual play action vid.addEventListener('play', function() { userPaused = false; }); $(window).scroll(function() { const scrollPos = $(document).scrollTop(); // Only apply auto-play/pause if user hasn't manually paused if (!userPaused) { if (scrollPos > 13500) { vid.play(); } else { vid.pause(); } } }); });
Key Changes Explained:
userPausedFlag: This variable keeps track of whether the user has intentionally paused the video. It starts asfalse(meaning auto-control is active by default).- Video
pauseEvent Listener: When the video is paused, we check if we're in the scroll range where auto-play would normally trigger. If yes, we assume this pause was a manual user action and setuserPausedtotrue. - Video
playEvent Listener: If the user manually plays the video again, we resetuserPausedtofalse, letting the scroll-based auto-control take over again. - Scroll Event Logic: We now wrap the auto-play/pause code in a check for
!userPaused—so if the user has manually paused, the scroll event won't interfere with their choice.
This way, the video follows scroll-based auto-control until the user takes manual control (pauses it), and if they play it again manually, the auto-control resumes working.
内容的提问来源于stack exchange,提问作者Rob
相关产品推荐
相关产品推荐

