技术求助：HTML5视频仅能在Safari播放，其余浏览器无法播放

Hey there, let's work through this video playback problem step by step—since you've already tried some common fixes, let's dig into more targeted checks:

• Verify actual video encoding details
  Even if you used Miro to convert files, converter presets don't always guarantee perfect compatibility. Grab a tool like MediaInfo to inspect your video files:

  • For MP4: Ensure it uses the H.264 baseline/main profile with AAC-LC audio (match the codecs value you specified: avc1.42E01E, mp4a.40.2)
  • For WebM/OGG: Double-check that VP8/Theora video and Vorbis audio are properly embedded. Mismatched codecs can cause silent failures in non-Safari browsers.

• Fix invalid autoplay attribute syntax
  Your code has autoplay="no-repeat"—this is incorrect! The autoplay attribute is a boolean property; it should either be written as <video autoplay> or omitted entirely. no-repeat belongs to CSS background properties, not video tags. This syntax error might be throwing off browser parsing—remove the invalid value first.

• Check server MIME types and file paths
  Non-Safari browsers are strict about correct MIME types for video files:

  • Use your browser's DevTools > Network tab to check video requests:
    • Confirm the status code is 200 (not 404 or 403)
    • Verify the Content-Type header matches: video/mp4 for MP4, video/webm for WebM, video/ogg for OGG
  • Also, double-check file path case sensitivity (Linux servers care about this!)—if your server is Linux, videos/Site_Intro.mp4 vs Videos/site_intro.mp4 will cause a 404.

• Simplify your video tag for testing
  Strip back the code to the basics to isolate the issue. Try this minimal version first:

  <video class="videoIntro" id="SiteIntro" poster="VMF_MENU.png" controls>
    <source src="videos/Site_Intro.mp4" type="video/mp4">
    <source src="videos/Site_Intro.webm" type="video/webm">
  </video>
  

  Adding controls lets you manually trigger playback, ruling out auto-play restrictions. If this works, gradually re-add attributes (plays-inline, codecs) to find which one was causing problems.

• Account for browser auto-play policies
  Modern browsers (Chrome, Firefox, Edge) block auto-play for videos with sound unless the user has interacted with the page. Try adding the muted attribute if you need auto-play, or add a play button to let users trigger playback manually.

• Test in a server environment (not just local files)
  Playing videos via the file:// protocol (opening the HTML file directly from your computer) can cause cross-origin or MIME type issues that don't appear on a live server. Upload your files to a web server or use a local dev server (like Python's http.server) to test.

If none of these work, share the details from your DevTools Network tab (video request status, Content-Type) and the encoding info from your video files, and we can dig deeper!

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