HTML5 Video突然无法播放求助（此前运行正常）

Hey Chris, let's work through this frustrating video playback problem you're hitting with your portfolio's hero section. You mentioned swapping to a more dynamic video broke playback (showing only a static frame), and even reverting to the original video didn't fix it. Let's break down the most likely fixes based on your code and issue description:

1. Fix Browser Autoplay Restrictions (Most Likely Culprit) #

Modern browsers have strict autoplay policies to prevent unwanted media playback—videos without sound are far more likely to autoplay successfully. Your current <video> tag doesn't include the muted attribute, which is probably why it's stuck on a static frame.

Update your HTML video tag like this:

<video autoplay loop muted playsinline class="fillWidth">
  <source src="./assets/video/portfolio-cover-2.mp4" type="video/mp4">
  Your browser does not support the video tag. I suggest you upgrade your browser.
</video>

• muted: Satisfies browser autoplay rules for silent videos
• playsinline: Ensures proper playback on iOS devices (prevents fullscreen auto-launch)

If you need audio later, you can add a button to toggle sound, but for a hero cover, muted autoplay is standard practice.

2. Verify Video File Integrity & Compatibility #

Even if you swapped back to the original video, file corruption or encoding issues could be the problem:

• Test direct playback: Paste your video's full URL (e.g., http://localhost:3000/assets/video/portfolio-cover-2.mp4) into your browser's address bar. If it doesn't play here, the file itself is the issue.
• Re-encode the video: Use a tool like HandBrake to convert the video to a browser-friendly format:
  • Video codec: H.264
  • Audio codec: AAC
  • Container: MP4
• Re-copy the file: Sometimes files get corrupted during transfer—replicate the original working video file into your assets/video directory again.

3. Fix CSS Z-Index & Layout Issues #

Your CSS has multiple z-index: -1 declarations, which could be pushing the video behind the viewport or other elements, making it appear static:

• Adjust your CSS to clarify layer order and ensure proper video sizing:

.homepage-hero-module { 
  border-right: none; 
  border-left: none; 
  position: relative; 
  z-index: 0; /* Bring the hero module into the visible layer stack */
  min-height: 100vh; /* Ensure the hero takes full viewport height */
} 

.video-container { 
  position: relative; 
  height: 100%; 
  width: 100%; 
  overflow: hidden; 
  background: #000; 
  z-index: 0;
} 

.video-container .filter { 
  z-index: 100; 
  position: absolute; 
  background: rgba(0, 0, 0, 0.4); 
  width: 100%; 
  height: 100%; /* Ensure filter covers the entire video */
} 

.video-container video { 
  position: absolute; 
  top: 50%; /* Center video vertically */
  left: 50%; /* Center video horizontally */
  transform: translate(-50%, -50%); /* Perfect centering */
  z-index: -1; 
  object-fit: cover; /* Ensure video scales without distortion */
  min-width: 100%;
  min-height: 100%;
}

• The object-fit: cover property ensures your video fills the container without stretching, and the centering fixes any awkward positioning from your original top: -30px rule.

4. Clear Deep Caches & Restart Your Dev Server #

Sometimes browser cache clearing isn't enough—try these steps:

• Hard refresh your browser: Ctrl + Shift + R (Windows/Linux) or Cmd + Shift + R (Mac)
• Restart your local development server (e.g., Live Server, Vite, etc.) to clear any server-side caching
• Check your server's MIME type configuration: Ensure it's serving .mp4 files with the video/mp4 content type (most modern dev servers do this automatically, but it's worth verifying)

Start with adding the muted attribute—this is the most common fix for autoplay issues like yours. If that doesn't work, move on to verifying the video file itself, then adjusting your CSS layout.

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