autoplay

1. Abstract

When you set autoplay: true for a video but encounter silent playback, it is usually due to autoplay policy restrictions in modern browsers like Chrome. This article explains the cause of this policy and introduces how to configure appropriate autoplay behavior for different scenarios such as surveillance, advertising, and educational training using zwplayer's autoplay, muted, and disableMutedConfirm configuration options.

2. Why Does Autoplay Have No Sound? Understanding Browser Policies

To enhance user experience and prevent sudden audio interference when pages load, mainstream browsers like Chrome and Safari have established strict autoplay policies. Simply put: unless users have had positive interactions with your website (such as frequent clicks or video viewing), browsers will prohibit videos from autoplaying with sound. For specific details, please refer to the Chrome Autoplay Policy.

You can view your website's "Media Engagement" score by entering chrome://media-engagement in the Chrome address bar. The higher the score, the greater the likelihood that your website will be granted permission to "autoplay with sound."

For Safari browser, you can configure website permissions to authorize autoplay with sound. Specific settings are as follows: [Right-click on address bar] => [Settings for This Website] => [Autoplay]

3. ZWPlayer's Smart Solutions: Three Scenario-Based Configurations

The zwplayer kernel detects the browser's autoplay capabilities. Developers can easily handle various business scenarios through simple parameter combinations.

Scenario 1: Surveillance/Background Stream (No Sound Needed)

Applicable Scenarios: Security monitoring, background video rotation, silent advertisements, etc. The core goal is to ensure stable and smooth autoplay of video footage; sound is irrelevant.Recommended Configuration:

new ZWPlayer({
    autoplay: true,
    muted: true, // Force muted playback, bypass browser restrictions, ensure autoplay success rate.
});

Configuration Explanation: By actively setting muted: true, you explicitly inform the browser that this video is in silent mode, thereby complying with its autoplay policy and achieving uninterrupted smooth playback.

Scenario 2: Immersive Experience (Sound Secondary, Fluency Primary)

Applicable Scenarios: Corporate website background hero videos, art exhibition pages, etc. Sound can enhance the experience, but extreme immersion and smooth visual experience are more important.Recommended Configuration:

new ZWPlayer({
    autoplay: true,
    disableMutedConfirm: true, // Key setting: suppress muted playback confirmation dialog.
});

Configuration Explanation: zwplayer will attempt to autoplay with sound. If blocked by the browser, it will automatically degrade to muted playback, and because disableMutedConfirm: true is set, no prompt dialog will appear, ensuring a complete and smooth page experience.

Scenario 3: Main Site Player (Sound is Crucial)

Applicable Scenarios: Online video platforms, news media, educational courses, etc. Here, video content is the core, sound is crucial, and it is necessary to clearly inform users of the current status.Recommended Configuration (Default Mode):

new ZWPlayer({
    autoplay: true,
    // Do not set muted and disableMutedConfirm; use zwplayer's default behavior.
});

Configuration Explanation: This is the default recommended mode for zwplayer. If autoplay with sound fails, the player will switch to muted playback and clearly display a prompt to the user: "Due to browser restrictions, playback is now muted. Please click 'Enable Sound'." This effectively avoids user confusion and allows users to restore sound with one click for a complete experience.

The autoplay muted prompt dialog interface is as follows:

• Click Enable Sound to restore audio playback;

• Click the Close button to keep muted playback;

• Click Browser Restrictions to display restriction explanation: When you visit this website infrequently or often mute playback, the browser may restrict the website's volume, preventing the website from autoplaying with sound. The restriction explanation interface is as follows:

  

4. Configuration Summary

5. Conclusion

Browser autoplay policies are a long-term situation developers need to face. zwplayer aims to resolve this complexity through simple configuration. The above solutions can help you quickly adapt to different scenarios; we recommend configuring according to your specific needs.