AngularJS嵌入超大型YouTube播放列表遇200条上限问题求助

嘿，我太懂你这种被熟悉框架的小问题卡壳的感觉了！其实你遇到的核心问题是YouTube Data API的分页机制——默认情况下PlaylistItems.list接口单次最多返回50条内容，而且不会自动返回全部条目，必须手动处理分页才能拿到那1500条数据。结合你用的angular-youtube-embed库，我给你一套完整的解决方案：

核心思路 #

YouTube Data API通过pageToken参数实现分页，每次请求拿到当前页数据后，如果响应里有nextPageToken，就继续请求下一页，直到没有更多页面为止。我们可以封装一个服务来处理这个递归请求，把所有条目整合后再传给angular-youtube-embed渲染。

步骤1：创建API请求服务 #

首先在你的AngularJS应用里创建一个服务，专门用来获取完整的播放列表数据：

angular.module('你的应用模块名')
  .service('youtubePlaylistService', ['$http', function($http) {
    // 替换成你自己的YouTube Data API密钥
    const YOUR_API_KEY = '这里填你的API密钥';
    const API_BASE_URL = 'https://www.googleapis.com/youtube/v3/playlistItems';

    // 获取指定播放列表的所有条目
    this.getAllVideos = function(playlistId) {
      let allVideos = [];

      // 递归获取分页数据
      const fetchPage = (pageToken = '') => {
        const requestParams = {
          part: 'snippet',
          playlistId: playlistId,
          maxResults: 50, // API允许的单次最大返回数
          key: YOUR_API_KEY,
          pageToken: pageToken
        };

        return $http.get(API_BASE_URL, { params: requestParams })
          .then(response => {
            // 合并当前页数据到总列表
            allVideos = allVideos.concat(response.data.items);
            // 如果有下一页，继续请求
            if (response.data.nextPageToken) {
              return fetchPage(response.data.nextPageToken);
            } else {
              // 所有数据获取完成，返回整理后的视频信息
              return allVideos.map(item => ({
                videoId: item.snippet.resourceId.videoId,
                title: item.snippet.title,
                thumbnail: item.snippet.thumbnails.medium.url
              }));
            }
          })
          .catch(error => {
            console.error('获取播放列表数据出错:', error);
            throw error;
          });
      };

      return fetchPage();
    };
  }]);

步骤2：在控制器中调用服务 #

接下来在你的控制器里调用这个服务，拿到所有视频数据后传给视图：

angular.module('你的应用模块名')
  .controller('PlaylistController', ['$scope', 'youtubePlaylistService', function($scope, youtubePlaylistService) {
    // 替换成你的目标播放列表ID
    const TARGET_PLAYLIST_ID = '这里填你的播放列表ID';

    // 初始化视频列表
    $scope.playlistVideos = [];

    // 获取完整播放列表
    youtubePlaylistService.getAllVideos(TARGET_PLAYLIST_ID)
      .then(videos => {
        $scope.playlistVideos = videos;
        console.log('成功获取全部视频，总数:', videos.length);
      })
      .catch(error => {
        // 这里可以添加错误提示逻辑
        alert('加载播放列表失败，请稍后重试');
      });
  }]);

步骤3：用angular-youtube-embed渲染视频 #

最后在HTML模板里使用angular-youtube-embed的指令渲染视频，这里建议加上懒加载优化，避免一次性加载1500个iframe导致页面卡顿：

<div ng-controller="PlaylistController">
  <div class="video-card" ng-repeat="video in playlistVideos">
    <h4>{{ video.title }}</h4>
    <!-- 懒加载：只有当元素进入视口时才渲染视频 -->
    <youtube-video 
      video-id="video.videoId" 
      ng-if="isVideoVisible($index)"
      class="youtube-embed">
    </youtube-video>
  </div>
</div>

可选：添加懒加载逻辑 #

为了优化性能，在控制器里实现isVideoVisible函数，结合滚动监听判断元素是否在视口内：

// 在PlaylistController里添加
$scope.isVideoVisible = function(index) {
  const element = document.querySelectorAll('.video-card')[index];
  if (!element) return false;
  const rect = element.getBoundingClientRect();
  return rect.top <= window.innerHeight && rect.bottom >= 0;
};

// 监听滚动事件更新视图
angular.element(window).on('scroll', () => {
  $scope.$apply();
});

重要注意事项 #

1. API密钥配置：确保你已经在Google Cloud Console中启用了YouTube Data API v3，并且创建了正确的API密钥（不要设置不必要的IP限制，除非你确定访问来源）。
2. API配额：YouTube Data API的免费配额是每天10000单位，每次PlaylistItems.list调用消耗1单位，1500条视频只需要30次调用，完全在配额范围内。
3. 模块依赖：确保你的应用模块已经注入了youtube-embed：

angular.module('你的应用模块名', ['youtube-embed']);

这样处理后，你就能完整获取并渲染1500条视频的播放列表了。

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