onscroll事件重复触发函数问题修复及视频play()权限报错咨询

Let's tackle the two problems you're facing with your scroll-triggered video playback one by one:

1. Making the scrollfunc Execute Only Once #

Your initial code had two key issues causing repeated triggers:

• You used the assignment operator (=) instead of the strict equality operator (===) in your condition. This meant every scroll event was setting the video's display to none instead of checking its current state, so the block kept running.
• There was no guardrail to stop the function from running after it had done its job once.

Here's the fixed code with clear safeguards:

// Flag to track if the video has already played
let hasVideoPlayed = false;

window.onscroll = scrollfunc;

function scrollfunc() {
  // Check three conditions: video hasn't played, and it's currently hidden
  if (!hasVideoPlayed && document.getElementById("vidhero").style.display === "none") {
    // Mark the video as played to prevent re-execution
    hasVideoPlayed = true;
    
    const videoElement = document.getElementById("vidhero");
    videoElement.style.display = "block";
    videoElement.play().catch(error => console.error("Playback error:", error));
    
    // Optional: Unbind the scroll event entirely after execution
    window.onscroll = null;
  }
}

• The === operator correctly checks the video's current display state instead of overwriting it.
• The hasVideoPlayed flag ensures the core logic runs only once. Unbinding the scroll event with window.onscroll = null is an extra step to clean up after execution.

2. Fixing the "play() failed because the user didn't interact with the document first" Error #

This error stems from modern browser autoplay policies, which block media playback triggered by non-user-initiated events (like scroll) to avoid unexpected audio interruptions. Here are two reliable fixes:

Option 1: Require a User Interaction First #

Ask the user to interact with the page (e.g., click) before enabling scroll-triggered playback. This aligns with browser rules and ensures playback works consistently:

let userHasInteracted = false;
let hasVideoPlayed = false;

// Listen for any user click to mark interaction as complete
document.addEventListener("click", () => {
  userHasInteracted = true;
});

window.onscroll = scrollfunc;

function scrollfunc() {
  if (userHasInteracted && !hasVideoPlayed && document.getElementById("vidhero").style.display === "none") {
    hasVideoPlayed = true;
    const videoElement = document.getElementById("vidhero");
    videoElement.style.display = "block";
    videoElement.play().catch(error => console.error("Playback error:", error));
    window.onscroll = null;
  }
}

You can add a visual prompt (like a "Click to enable video playback" banner) to guide users if needed.

Option 2: Use a Muted Video #

Browsers allow autoplay for muted videos even without prior user interaction. If your video doesn't require audio, add the muted attribute to your video tag:

<video id="vidhero" width="320" height="240" style="display:none" src="https://www.w3schools.com/tags/movie.mp4" muted>
Your browser does not support the video tag.
</video>

With this attribute, your scroll-triggered playback code (after fixing the equality operator) will work without the interaction error.

内容的提问来源于stack exchange，提问作者Richmon Santos