如何通过JS为HTML的<video>元素设置随机webm视频路径

It looks like you're so close to getting this working! Let's walk through the snags in your current code and fix them step by step.

Key Issues in Your Current Implementation #

1. Duplicate IDs: You have two buttons with id="videos"—HTML requires unique IDs, which can break element selection and interactions.
2. Undefined Function Call: The random_webm() line at the end of your JS isn't defined in your current code, causing a runtime error that might block other functionality.
3. Timing Problem: If your JS runs before the DOM finishes loading, getElementById could return null, making it impossible to set the video source.
4. Redundant Code: Earlier attempts had undefined functions like rndwebm(3) that weren't contributing to the solution.

Corrected HTML #

First, fix the duplicate IDs and clean up the video element:

<div class="window" id="videos" style="display: none;">
 <div class="header">
 <img class="icon" src="images/video.png"> gnu.3gp
 <div class="buttons">
 <button id="videos-minimize" title="minimize" class="window_content" onclick="videos()">_</button>
 <button>◽</button>
 <button id="videos-close" title="close" class="window_content" onclick="videos()">X</button>
 </div>
 </div>
 <div class="content">
 <center>
 <video controls width="500" id="random_webm">
 <source type="video/webm">
 Your browser does not support HTML5 or .webm video, gramps.
 </video>
 </center>
 </div>
</div>

Corrected JavaScript #

This code ensures the DOM is ready before running, uses a clean reusable function for random sources, and sets the video path correctly:

// Wait for all HTML elements to load before executing JS
document.addEventListener('DOMContentLoaded', function() {
  // Reusable function to grab a random webm source path
  function getRandomWebmSrc() {
    const videoSources = ["videos/ship.webm", "videos/ira.webm"];
    return videoSources[Math.floor(Math.random() * videoSources.length)];
  }

  // Get reference to the video element once (avoids repeated DOM queries)
  const videoElement = document.getElementById('random_webm');

  // Set initial random video when the page loads
  videoElement.src = getRandomWebmSrc();

  // Toggle video window visibility and set new random source on open
  window.videos = function() {
    const windowElement = document.getElementById("videos");
    
    if (windowElement.style.display === "none") {
      // Load a new random video each time the window opens
      videoElement.src = getRandomWebmSrc();
      windowElement.style.display = "block";
    } else {
      windowElement.style.display = "none";
    }
  };
});

What This Does #

• DOMContentLoaded Listener: Makes sure we only interact with HTML elements after they're fully loaded, preventing null errors.
• Reusable Random Source Function: getRandomWebmSrc() keeps your selection logic clean—just add more video paths to the videoSources array later if you want.
• Initial Source Setup: Sets a random video when the page loads, so the video is ready even if the window is opened later.
• Toggle Behavior: Each time the window opens, it loads a new random video (remove the videoElement.src = ... line inside the if block if you want the same video for the entire session).
• Fixed IDs: Unique button IDs eliminate conflicts in element selection.

Quick Testing Tips #

• Open your browser's developer tools (F12) to check the Console tab for any errors.
• Double-check your video paths are correct relative to your HTML file (e.g., if your HTML is in the root folder, videos/ship.webm should point to a file in a videos subfolder).

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