技术问询：如何将YouTube视频加载至独立HTML页面

嘿，我来帮你搞定把YouTube视频加载到独立HTML页面的需求！结合你已经有的播放列表代码，这里有一套完整的可落地方案：

1. 先改造首页的播放列表脚本，添加跳转链接 #

你现有的播放列表加载逻辑里，需要给每个视频项加上指向独立播放页面的链接，同时通过URL参数传递视频ID。补全并修改你的脚本如下：

var apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38';
// 假设你有多个播放列表需要处理
var playlists = [
  { playlistId: 'PLJYHm_ZxWCKnQmapkDs7x47jkr-nw3l50', el: '#youtube-playlist-feed_1' },
  { playlistId: 'PLBhKKjnUR0XBVrHvtDOylN5XREHh9X1nt', el: '#youtube-playlist-feed_2' },
  // 第三个播放列表配置...
];

// 遍历加载每个播放列表
playlists.forEach(playlist => {
  fetch(`https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=${playlist.playlistId}&maxResults=7&key=${apiKey}`)
    .then(response => response.json())
    .then(data => {
      let htmlString = "";
      data.items.forEach(item => {
        const videoId = item.snippet.resourceId.videoId;
        const title = item.snippet.title;
        const thumbnail = item.snippet.thumbnails.medium.url;
        
        // 生成带跳转链接的视频项
        htmlString += `
          <div class="playlist-video-item">
            <a href="video-player.html?v=${videoId}" target="_blank">
              <img src="${thumbnail}" alt="${title}">
              <h3>${title}</h3>
            </a>
          </div>
        `;
      });
      document.querySelector(playlist.el).innerHTML = htmlString;
    })
    .catch(error => console.error(`加载播放列表${playlist.playlistId}失败:`, error));
});

这样用户点击播放列表里的任意视频，就会跳转到独立的video-player.html页面，同时把目标视频的ID通过URL参数传过去。

2. 创建独立的视频播放页面（video-player.html） #

这个页面负责接收URL里的视频ID，加载并播放YouTube视频，基础结构和逻辑如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>视频播放页</title>
  <style>
    /* 基础响应式样式 */
    .player-container {
      max-width: 1200px;
      margin: 3rem auto;
      padding: 0 1rem;
    }
    #youtube-player {
      width: 100%;
      height: 600px;
      border: none;
      border-radius: 8px;
    }
    .video-title {
      margin-bottom: 1.5rem;
      font-size: 1.6rem;
      color: #2d2d2d;
    }
    .back-btn {
      display: inline-block;
      margin-bottom: 1rem;
      padding: 0.5rem 1.2rem;
      background: #2d2d2d;
      color: white;
      text-decoration: none;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <div class="player-container">
    <a href="index.html" class="back-btn">返回播放列表</a>
    <h1 class="video-title" id="video-title"></h1>
    <!-- YouTube播放器容器 -->
    <div id="youtube-player"></div>
  </div>

  <script>
    // 从URL中提取视频ID参数
    function getVideoIdFromUrl() {
      const params = new URLSearchParams(window.location.search);
      return params.get('v');
    }

    const videoId = getVideoIdFromUrl();
    const apiKey = 'AIzaSyDI4rWo_wVAxRZEIgF6_8sRZDj8OCOZZ38'; // 复用你的API密钥

    if (videoId) {
      // 加载YouTube IFrame Player API
      const scriptTag = document.createElement('script');
      scriptTag.src = "https://www.youtube.com/iframe_api";
      document.body.appendChild(scriptTag);

      let player;
      // API加载完成后触发的回调
      window.onYouTubeIframeAPIReady = function() {
        player = new YT.Player('youtube-player', {
          videoId: videoId,
          playerVars: {
            'controls': 1, // 显示控制栏
            'rel': 0, // 隐藏结尾的相关视频
            'modestbranding': 1, // 简化YouTube品牌标识
            'autoplay': 0 // 关闭自动播放（避免浏览器拦截）
          },
          events: {
            'onReady': () => {
              // 播放器就绪后的自定义逻辑，比如加载视频标题
              fetch(`https://www.googleapis.com/youtube/v3/videos?part=snippet&id=${videoId}&key=${apiKey}`)
                .then(res => res.json())
                .then(data => {
                  document.getElementById('video-title').textContent = data.items[0].snippet.title;
                });
            }
          }
        });
      };
    } else {
      // 没有获取到视频ID时的提示
      document.getElementById('youtube-player').innerHTML = `
        <p style="text-align:center; padding: 4rem 0; font-size:1.2rem;">
          未找到有效视频，请从播放列表页面跳转过来
        </p>
      `;
    }
  </script>
</body>
</html>

3. 关键细节说明 #

• URL参数传递：通过video-player.html?v=视频ID的方式传递视频标识，用URLSearchParams解析参数，简单且兼容性好。
• 官方API使用：采用YouTube IFrame Player API而非直接嵌入iframe，能更灵活地控制播放状态、自定义播放器样式。
• 自动播放限制：浏览器现在对自动播放有严格政策，所以默认关闭autoplay，避免被拦截影响体验。
• API权限：确保你的API密钥已启用YouTube Data API v3，且没有超出配额（可以在Google Cloud控制台查看）。

4. 可选优化方向 #

• 给独立页面添加播放列表侧边栏，支持直接切换同列表的其他视频。
• 实现响应式播放器：把播放器容器改成padding-top: 56.25%的相对高度，适配移动端屏幕。
• 添加视频播放进度记忆、画质切换等进阶功能。

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