Youtube Iframe API：autoplay:1无法触发即将上线直播视频的onStateChange事件

I’ve run into this exact edge case with the YouTube Iframe API, and it’s definitely a tricky one. Here’s what’s happening:

When embedding an upcoming YouTube live stream:

• Without setting autoplay: 1, the player fires the onStateChange event as expected during load (usually with state -1 or 5, which indicates the "upcoming live" placeholder state).
• With autoplay: 1 enabled, the player loads the live stream’s placeholder screen, but the onStateChange event never triggers—even once the stream goes live.

Why This Happens #

This appears to be a bug in the YouTube API’s handling of autoplay for unstarted live streams. When autoplay is enabled, the player’s initialization skips the state notification flow for upcoming streams, since autoplay can’t actually start the stream yet. The player enters a "silent" loaded state without broadcasting any state changes.

Workarounds to Fix This #

If you need to track state changes or ensure your code reacts to the stream going live, try these solutions:

1. Use onReady for Initialization Triggers
   If you just need to know when the player is loaded and ready, rely on the onReady event instead—it fires reliably even with autoplay enabled.

2. Manual State Polling
   For tracking when the stream goes live, set up a periodic check using getPlayerState() after onReady fires. This bypasses the missing onStateChange event:

   function onPlayerReady(event) {
     // Check player state every 3 seconds
     const stateChecker = setInterval(() => {
       const currentState = event.target.getPlayerState();
       console.log("Current stream state:", currentState);
       
       // When stream goes live (state = 1), run your logic
       if (currentState === 1) {
         console.log("Live stream has started!");
         clearInterval(stateChecker); // Stop polling once live
       }
     }, 3000);
   }
   

3. Delay Autoplay Until Stream is Live
   If your use case allows, skip setting autoplay: 1 initially. Wait for onStateChange to detect the stream is live, then trigger playback manually:

   function onPlayerStateChange(event) {
     // State 1 = stream is active
     if (event.data === 1) {
       event.target.play(); // Start playback once live
     }
   }
   

Note on Browser Autoplay Policies #

Keep in mind that modern browsers restrict autoplay for media with audio. Even with autoplay: 1 set, the player may not start playback unless the user has interacted with the page. Combining manual playback triggers with user interactions (like a button click) will make your implementation more reliable.

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