如何用JavaScript获取YouTube热门榜第1名视频？

当然可以用JavaScript实现，以下是两种可行方案：

官方推荐：使用YouTube Data API #

这是最稳定、合规的方式，步骤如下：

1. 前往Google Cloud平台申请API密钥，并启用YouTube Data API v3
2. 调用videos.list接口，通过指定参数获取热门榜第一的视频数据
3. 示例代码：

// 替换为你自己的API密钥
const API_KEY = 'YOUR_API_KEY';
const requestUrl = `https://www.googleapis.com/youtube/v3/videos?part=snippet,statistics&chart=mostPopular&maxResults=1&regionCode=CN&key=${API_KEY}`;

fetch(requestUrl)
  .then(res => res.json())
  .then(data => {
    if (data.items.length) {
      const topVideo = data.items[0];
      console.log('视频标题:', topVideo.snippet.title);
      console.log('视频ID:', topVideo.id);
      console.log('观看量:', topVideo.statistics.viewCount);
      // 可将数据渲染到你的作业网站页面中
    }
  })
  .catch(err => console.error('数据获取失败:', err));

注意：API有免费调用配额，完全满足学校作业的需求。

非官方：前端网页爬取（不推荐） #

这种方式依赖YouTube的页面DOM结构，存在不稳定和反爬风险，且需要解决浏览器跨域问题：

1. 搭建或使用代理服务器转发请求（绕过跨域限制）
2. 解析返回的HTML页面提取视频信息
3. 示例代码（假设已有代理服务器）：

const proxyUrl = 'https://你的代理服务器地址/proxy?url=https://www.youtube.com/feed/trending?bp=6gQJRkVleHBsb3Jl';

fetch(proxyUrl)
  .then(res => res.text())
  .then(html => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');
    // YouTube的DOM结构可能随时变化，此选择器仅作示例
    const topVideoTitle = doc.querySelector('ytd-video-renderer #video-title')?.textContent.trim();
    console.log('热门第一视频标题:', topVideoTitle);
  })
  .catch(err => console.error('爬取失败:', err));

注意：YouTube会频繁更新页面结构，代码可能随时失效，且容易触发反爬机制导致请求被拦截。

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