如何整合YouTube直播与播放列表iframe，实现自动切换播放

嘿，要实现直播活跃时显示直播流、直播结束后自动切换到播放列表的需求，咱们得借助YouTube官方的IFrame Player API才行——原生iframe根本没法监听直播状态变化，必须用API来做状态检测和动态切换。话不多说，直接上具体的实现方案：

1. 引入YouTube IFrame Player API #

首先在页面里引入官方的API脚本，这是咱们能控制播放器、监听状态的基础：

<script src="https://www.youtube.com/iframe_api"></script>

2. 创建播放器容器 #

别直接写死iframe，用一个div当容器，让API帮咱们生成播放器，方便后续动态切换源：

<div id="youtube-player" style="width: 100%; height: 500px;"></div>

3. 编写核心JavaScript逻辑 #

核心是初始化播放器、监听直播状态，当直播结束/不可用时自动切到播放列表：

let player;
// 提前定义直播流和播放列表的地址
const LIVE_STREAM_URL = "https://www.youtube.com/embed/live_stream?channel=UCSrZ3UV4jOidv8ppoVuvW9Q&autoplay=1&controls=1&loop=1&mute=0";
const PLAYLIST_URL = "https://www.youtube.com/embed/videoseries?list=PL9tY0BWXOZFsN7SmajqI2TZ0WWzJYQVsI&autoplay=1&controls=1&loop=1&mute=0";

// API加载完成后自动执行这个函数，初始化播放器
function onYouTubeIframeAPIReady() {
  player = new YT.Player('youtube-player', {
    playerVars: {
      channel: 'UCSrZ3UV4jOidv8ppoVuvW9Q',
      autoplay: 1,
      controls: 1,
      loop: 1,
      mute: 0,
      enablejsapi: 1 // 必须开这个才能监听播放器状态
    },
    events: {
      'onReady': () => console.log("播放器准备就绪"),
      'onStateChange': handlePlayerStateChange,
      'onError': handlePlayerError
    }
  });
}

// 监听播放器状态变化
function handlePlayerStateChange(event) {
  // 状态码说明：
  // 0 = 播放结束（直播结束后会触发这个状态）
  // 1 = 正在播放, 2 = 暂停, 3 = 缓冲中
  if (event.data === 0) {
    console.log("直播已结束，切换到播放列表");
    switchToPlaylist();
  }
}

// 处理播放器错误（比如直播一开始就不在线）
function handlePlayerError(event) {
  // 常见错误码：
  // 100 = 视频不存在/已删除（直播离线时大概率触发这个）
  // 101/150 = 视频不允许嵌入
  console.log("直播不可用，切换到播放列表，错误码：", event.data);
  switchToPlaylist();
}

// 切换到播放列表的函数
function switchToPlaylist() {
  player.loadVideoByUrl({
    url: PLAYLIST_URL,
    autoplay: 1
  });
}

关键触发条件说明 #

• 直播结束触发：当直播流播放结束时，播放器会触发状态码0，咱们就调用切换函数加载播放列表。
• 直播离线触发：如果直播一开始就不在线，播放器会抛出错误（比如错误码100），此时也自动切换到播放列表。
• 注意：确保你的页面没有跨域限制，能正常加载YouTube的API脚本，不然状态监听会失效。

额外优化建议 #

• 可以加个重试机制：如果直播短暂离线，先重试2-3次再切播放列表，避免误切换。
• 切换时可以加个过渡动画，比如淡入淡出，提升用户体验。
• 如果需要更精准的直播状态预判（比如提前知道直播是否在线），可以结合YouTube Data API的liveBroadcasts.list接口查询频道直播状态，但这个需要申请API密钥，步骤会更复杂些。

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