如何为YouTube播放列表实现分页？附banking.html代码示例

兄弟，我来帮你搞定YouTube播放列表分页的问题！当播放列表视频超过50个时，核心要用到YouTube Data API的分页令牌机制，下面是结合你现有代码的完整实现方案：

一、核心逻辑说明 #

YouTube Data API的playlistItems.list接口单次最多返回50条视频数据。当结果总数超过50时，API会返回nextPageToken（下一页令牌）和prevPageToken（上一页令牌），我们通过这两个令牌发起后续请求，就能实现分页加载。

二、修改HTML结构 #

先在你的视频列表容器下方添加分页控件，用于切换上下页：

<div class="category-section">
  <div class="header">
    <h1>Banking</h1><span>Latest Upload</span>
  </div>
  <div class="content">
    <ul id="videoList"></ul> <!-- 假设你的视频列表挂载在这个ul下 -->
  </div>
  <!-- 新增分页控件 -->
  <div class="pagination-controls">
    <button id="prevPageBtn" disabled>上一页</button>
    <button id="nextPageBtn">下一页</button>
  </div>
</div>

三、JavaScript分页实现代码 #

下面是处理API请求、分页切换和视频渲染的完整JS代码：

// 配置核心参数（记得替换成你自己的信息）
const YOUTUBE_API_KEY = '你的YouTube Data API密钥';
const TARGET_PLAYLIST_ID = '你的目标播放列表ID';
const PER_PAGE_LIMIT = 50; // 单次请求最大返回数

// 分页状态变量
let currentNextToken = null;
let currentPrevToken = null;

// 加载视频列表的核心函数
async function loadVideoList(pageToken = '') {
  try {
    // 发起API请求
    const apiUrl = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=${TARGET_PLAYLIST_ID}&maxResults=${PER_PAGE_LIMIT}&pageToken=${pageToken}&key=${YOUTUBE_API_KEY}`;
    const response = await fetch(apiUrl);
    const data = await response.json();

    // 更新分页令牌
    currentPrevToken = data.prevPageToken;
    currentNextToken = data.nextPageToken;

    // 更新分页按钮状态
    document.getElementById('prevPageBtn').disabled = !currentPrevToken;
    document.getElementById('nextPageBtn').disabled = !currentNextToken;

    // 渲染视频到页面
    renderVideos(data.items);
  } catch (error) {
    console.error('加载视频失败:', error);
    // 这里可以添加用户可见的错误提示，比如：
    // document.getElementById('videoList').innerHTML = '<li>视频加载失败，请稍后重试</li>';
  }
}

// 渲染视频列表到DOM
function renderVideos(videoItems) {
  const videoList = document.getElementById('videoList');
  videoList.innerHTML = ''; // 清空现有列表

  videoItems.forEach(item => {
    const videoId = item.snippet.resourceId.videoId;
    const videoTitle = item.snippet.title;
    const videoThumbnail = item.snippet.thumbnails.medium.url;

    // 创建单个视频列表项
    const listItem = document.createElement('li');
    listItem.innerHTML = `
      <a href="https://www.youtube.com/watch?v=${videoId}" target="_blank">
        <img src="${videoThumbnail}" alt="${videoTitle}">
        <h4>${videoTitle}</h4>
      </a>
    `;
    videoList.appendChild(listItem);
  });
}

// 绑定分页按钮点击事件
document.getElementById('prevPageBtn').addEventListener('click', () => {
  loadVideoList(currentPrevToken);
});

document.getElementById('nextPageBtn').addEventListener('click', () => {
  loadVideoList(currentNextToken);
});

// 页面加载时初始化第一页
window.addEventListener('load', () => {
  loadVideoList();
});

四、关键注意事项 #

• API密钥获取：需要去Google Cloud控制台创建项目，启用YouTube Data API v3，然后生成专属API密钥。
• 播放列表ID提取：从YouTube播放列表URL中获取，比如URL为https://www.youtube.com/playlist?list=PLxxxxxxx，PLxxxxxxx就是播放列表ID。
• 样式优化：可以给分页按钮添加CSS样式，比如禁用状态置灰、鼠标悬停效果，提升用户体验。
• 扩展优化：可以添加当前页码显示、跳转到指定页的功能，或者实现滚动加载（无限滚动）替代按钮分页。

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