页面加载时模拟点击vjs-mute-control报错click is undefined的原因

Hey there, let's break down why you're seeing that click is undefined error and get your audio auto-playing properly.

The Root Cause of the Error #

When you run document.getElementsByClassName("vjs-mute-control"), it doesn't return a single DOM element—it gives you an HTMLCollection (a list-like object holding all elements with that class). This collection itself doesn't have a click() method, which is exactly why you're getting the error. You're trying to call a button-specific method on a group of elements instead of one specific button.

Fix 1: Target the Exact Mute Button Element #

You need to grab the first (and likely only) mute control from the collection before calling click(). Here's how to do it safely:

// Grab the first mute button and trigger click (with safety check for missing elements)
document.getElementsByClassName("vjs-mute-control")[0]?.click();

The ?. optional chain operator prevents errors if the element hasn't loaded yet (like if the player is still initializing).

A cleaner alternative is using querySelector, which directly returns the first matching element:

document.querySelector(".vjs-mute-control")?.click();

Fix 2: Use Video.js's Official API (More Reliable Than Simulating Clicks) #

Instead of manually clicking the button, it's better to use Video.js's built-in methods to control the player. This avoids issues with selectors changing or elements not loading in time.

1. First, get your Video.js player instance (replace your-player-id with the ID of your video element):

const player = videojs('your-player-id');

2. Then, modify the mute state directly once the player is ready:

// Wait for the player to finish loading before making changes
player.ready(function() {
  // Unmute the audio
  this.muted(false);
  // Explicitly trigger playback if needed for audio
  this.play();
});

Key Note on Browser Auto-Play Policies #

Even with fixed code, modern browsers have strict auto-play rules to stop unwanted audio. For audio to auto-play without user interaction, it usually needs to load muted first—then you can unmute it after the page loads. If your stream starts with unmuted audio, the browser might block it, so you may need to configure your stream to load muted initially, then use the code above to unmute it once the page is ready.

Also, always make sure your code runs after the player is fully loaded. Wrapping it in DOMContentLoaded or the Video.js ready callback (like the example above) prevents errors from accessing elements that don't exist yet.

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