WordPress组件视频仅Firefox可播放，多浏览器播放失败求助

Hey there! Let's figure out why your video autoplay is only working in Firefox and get it fixed for all browsers.

First, let's break down the core issues: #

1. Browser autoplay policies: Chrome, Safari, Opera, and most modern browsers have strict rules for autoplay—they only allow it if the video is muted, or the user has already interacted with the page (like clicking somewhere). Firefox is a bit more lenient in some cases, but other browsers won't autoplay an unmuted video by default.
2. Your JavaScript is targeting the wrong element: You used $( "#v-id" ).load(function() to trigger play, but the load event doesn't fire on <div> elements. That code never runs, which is why it does nothing.

Fix 1: Update your video tag to meet browser requirements #

Add the muted attribute (critical for autoplay) and fix the typo in your existing attributes (loopplaysinline should be two separate attributes: loop playsinline). Here's the corrected code:

<div id="v-id">
  <video id="myvideo" autoplay muted playsinline loop controls width="100%" height="100%" class="video-background">
    <source src="https://ridgebackbusinessservices.com/wp-content/uploads/2018/04/TDME-Project-1-final-v2.mp4" type="video/mp4" />
    <source src="movie.ogg" type="video/ogg" />
    Your browser does not support the video tag.
  </video>
</div>

• muted: Tells browsers it's safe to autoplay (since there's no unexpected sound)
• playsinline: Ensures iOS devices play the video within the page (not fullscreen) and helps with autoplay triggers
• autoplay: Modern browsers just need the attribute name, no value like autoplay="autoplay"

Fix 2: Rewrite your JavaScript to work correctly #

Instead of targeting the div, listen for the video's load events or try to play directly (with error handling for cases where autoplay is still blocked). Here are two reliable options:

Option A: Play when the video is ready to stream

$(document).ready(function() {
  const myVideo = document.getElementById('myvideo');
  
  // Wait until the video has enough data to play
  myVideo.addEventListener('canplay', function() {
    // Try to play, and handle cases where autoplay is blocked
    myVideo.play().catch(function(error) {
      console.log("Autoplay blocked—adding a click fallback");
      // Optional: Show a play button here for users to click
      // Example: $('#manual-play-btn').show();
    });
  });
});

Option B: Play immediately (with fallback for blocked autoplay)

If your video is likely cached, you can try playing right when the page loads, and if it fails, wait for a user click to trigger playback:

$(document).ready(function() {
  const myVideo = document.getElementById('myvideo');
  
  // Try autoplay first
  myVideo.play().catch(function(error) {
    console.log("Autoplay blocked—waiting for user interaction");
    // Listen for the first click anywhere on the page to play
    document.body.addEventListener('click', function playOnClick() {
      myVideo.play();
      // Remove the listener after the first click
      document.body.removeEventListener('click', playOnClick);
    });
  });
});

Extra tips for WordPress: #

• Clear your WordPress cache (plugin, server, or CDN) after making changes—old code often gets stuck in cache and prevents fixes from showing up.
• Double-check your MP4 encoding: Make sure it's using H.264 (the universal standard for web video) to avoid compatibility issues.

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