YouTube播放器页面获取发布日期与分类名及报错问题求助

看起来你已经搞定了基础的视频跳转播放功能，现在卡在了两个关键点：获取视频发布日期/分类，还有控制台弹出的Uncaught TypeError错误，我来一步步帮你梳理解决思路。

第一步：修复控制台的TypeError错误 #

这个Cannot read property 'length' of undefined错误，本质是你代码里尝试访问一个未初始化或API返回不存在的对象/数组的length属性。常见的触发场景有两种：

• 你在YouTube Player API的回调函数之外就急着访问视频数据，此时API还没完成初始化
• 调用数据接口时，请求参数出错或者返回的结构和你预期的不一样，导致某个属性变成了undefined

具体排查与修复： #

• 先检查你获取视频标题的代码位置，是不是没放在Player就绪的回调里？比如这种错误写法：

  // 错误示例：API还没准备好就调用数据
  const player = new YT.Player('player');
  const title = player.getVideoData().title; // 此时player未就绪，getVideoData()返回undefined
  

  正确的做法是把数据逻辑放在onReady回调里，确保API加载完成：

  const player = new YT.Player('player', {
    videoId: '当前视频ID',
    events: {
      'onReady': onPlayerReady
    }
  });
  
  function onPlayerReady(event) {
    const videoData = event.target.getVideoData();
    if (videoData) { // 先判断数据是否存在，避免报错
      const title = videoData.title;
      document.getElementById('title-container').textContent = title;
    }
  }
  

• 如果是调用数据API时出错，检查请求URL是否正确（比如有没有漏加API密钥、视频ID是否正确），返回的JSON里你要访问的数组（比如items）是否真的存在。

第二步：获取视频的发布日期与分类名称 #

YouTube Player API本身只能提供有限的基础数据（比如标题、作者ID），要拿到发布日期、分类这类元数据，得调用YouTube Data API的Videos.list接口。

实现步骤： #

1. 先去Google Cloud平台创建项目，启用YouTube Data API v3，获取一个API密钥（免费额度足够个人使用，跟着指引操作就行）
2. 在player.html的Player就绪回调里，获取当前视频ID，然后请求Data API拿元数据：

   function onPlayerReady(event) {
     const player = event.target;
     const videoId = player.getVideoData().video_id;
     const apiKey = '你的API密钥';
     // 请求视频基础元数据
     const videoMetaUrl = `https://www.googleapis.com/youtube/v3/videos?id=${videoId}&key=${apiKey}&part=snippet`;
   
     fetch(videoMetaUrl)
       .then(res => res.json())
       .then(data => {
         if (data.items && data.items.length > 0) { // 先校验数据结构
           const snippet = data.items[0].snippet;
           // 处理发布日期（可选格式化）
           const publishDate = new Date(snippet.publishedAt).toLocaleDateString();
           // 渲染发布日期
           document.getElementById('publish-date').textContent = `发布日期：${publishDate}`;
           // 渲染标题（整合之前的逻辑）
           document.getElementById('title-container').textContent = snippet.title;
           // 调用分类名称接口
           getVideoCategory(snippet.categoryId, apiKey);
         }
       })
       .catch(err => console.error('获取视频元数据失败：', err));
   }
   
   // 获取分类名称的辅助函数
   function getVideoCategory(categoryId, apiKey) {
     const categoryUrl = `https://www.googleapis.com/youtube/v3/videoCategories?id=${categoryId}&key=${apiKey}&part=snippet`;
     fetch(categoryUrl)
       .then(res => res.json())
       .then(data => {
         if (data.items && data.items.length > 0) {
           const categoryName = data.items[0].snippet.title;
           document.getElementById('category').textContent = `分类：${categoryName}`;
         }
       })
       .catch(err => console.error('获取分类失败：', err));
   }
   

3. 在player.html的HTML里添加对应的展示容器：

   <div class="video-info">
     <div id="title-container"></div>
     <div id="publish-date"></div>
     <div id="category"></div>
   </div>
   

小提示： #

• 为了防止API密钥被滥用，可以在Google Cloud控制台给密钥设置HTTP来源限制，只允许你的域名调用。
• 如果index.html是通过URL参数传递视频ID给player.html的，记得在player.html里正确获取参数：

  const urlParams = new URLSearchParams(window.location.search);
  const videoId = urlParams.get('v');
  // 把videoId传给YT.Player的配置项
  

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