视频播放完毕后页面未自动跳转的技术问题咨询

Let’s break down what’s likely causing your video to finish playing without redirecting to eve_4.html, and walk through actionable fixes:

1. Missing ended Event Listener (Most Common Culprit) #

The core issue is probably that your video element isn’t set up to detect when playback finishes. Browsers don’t auto-redirect on video end by default—you need to add a JavaScript listener for the ended event.

Here’s how to implement this correctly:

<!-- Add an ID to your video element first (if you haven’t already) -->
<video id="featuredVideo" controls>
  <source src="your-video-file.mp4" type="video/mp4">
  <!-- Fallback text for unsupported browsers -->
  Your browser does not support HTML5 video.
</video>

<!-- Place this script either at the end of your <body> tag, or wrap it in DOMContentLoaded -->
<script>
  // Wait for the page to fully load before accessing elements
  document.addEventListener('DOMContentLoaded', () => {
    const video = document.getElementById('featuredVideo');
    if (video) {
      // Trigger redirect when video ends
      video.addEventListener('ended', () => {
        window.location.href = 'eve_4.html';
      });
    }
  });
</script>

2. Double-Check Redirect URL & Path #

Since both pages are in the same root directory, using the relative path eve_4.html should work. But verify:

• No typos in the filename (e.g., eve_4.html vs. eve4.html)
• If you’re using an absolute URL, ensure it matches exactly (relative paths are cleaner here)

3. Debug Script Execution Issues #

• Check the browser console: Hit F12 > Console tab to look for errors (e.g., "video element not found" means your script is running before the video loads, or the ID is wrong).
• Test the redirect manually: Run window.location.href = 'eve_4.html'; directly in the console. If this works, the problem is definitely with the ended event listener setup.

4. Rule Out Video Configuration Conflicts #

Make sure your video element doesn’t have attributes that block the ended event:

• Remove loop if present (it makes the video repeat indefinitely instead of ending)
• Ensure autoplay isn’t causing unexpected behavior (autoplay alone won’t break the ended event, but combined with other issues it might)

Quick Debugging Tip #

Right-click your video on eve_3.html > Inspect to check if the ended event listener is attached. In the dev tools’ "Elements" tab, look for the video element, then go to the "Event Listeners" panel to confirm the listener exists.

内容的提问来源于stack exchange，提问作者B.Ashcroft