Flutter：显示来自 API 提供商的 YouTube 视频

Question

我正在使用 API with provider 从数据库中获取数据，我有一个 YouTube 视频链接列表，我想用它来展示视频。但是由于错误，我无法将链接列表放入 _controllers 中：

The instance member 'serviceProvider' can't be accessed in an initializer.
Try replacing the reference to the instance member with a different expression.

这是我的代码：

static List<YoutubePlayerController> _controllers =
   ['uEZAT3YJvDw', 'zMPfxQunIRw', 'uEZAT3YJvDw'] //I want to replace this line with the api list of links
          .map<YoutubePlayerController>(
            (videoId) => YoutubePlayerController(
              initialVideoId: videoId,
              flags: const YoutubePlayerFlags(
                autoPlay: false,
              ),
            ),
          )
          .toList();

ListView.separated(
                            scrollDirection: Axis.horizontal,
                            shrinkWrap: true,
                        itemBuilder: (context, index) {
                          return Card(
                            child: YoutubePlayer(
                              key: ObjectKey(_controllers[index]),
                              controller: _controllers[index],
                              actionsPadding: const EdgeInsets.only(left: 16.0),
                              bottomActions: [
                                CurrentPosition(),
                                ProgressBar(isExpanded: true),
                                const SizedBox(width: 10.0),
                                RemainingDuration(),
                                FullScreenButton(),
                              ],
                            ),
                          );
                        },
                        itemCount: _controllers.length,
                      )

class HomeDatum {
  HomeDatum({
    this.attachment,
  });
  var attachment; // this json carry the link

  factory HomeDatum.fromJson(Map<String, dynamic> json) => HomeDatum(
        attachment: json["attachment"],
      );}

Future<dynamic> getVideosList() async {

    http.Response response = await http
        .get(url, headers: headers);

    Map<dynamic, dynamic> responseData = json.decode(response.body);
    var results;
    if (responseData['status'] == 1) {
      _homeDatum = [];
      responseData['data'].forEach((element) {
        _homeDatum.add(HomeDatum.fromJson(element));
      });
      results = true;
    } 
    _isLoading = false;
    notifyListeners();
    return results;
  }

Answer 1

如果您正在调用 API 并且您想要从 API 获取数据并在同一页面上显示数据。首先你需要初始化

  final List _controllers = [];   // This for your video id's
  static List<YoutubePlayerController> _controllersYoutube; // this is your YouTube Controller data
  var videoData; // This for store API response

然后您需要创建 API 调用方法并将您的 ID 设置为 _controllersYoutube

  Future getVideos() async {
    var url = "$baseUrl/api/videos";  // Your API
    var response = await http.get(url);
    videoData = json.decode(response.body);
    if (this.mounted) {
      setState(() {
        for (var myAllData in videoData) {
          _controllers.add(myAllData['youtube_video_id']);
        }
        _controllersYoutube = _controllers.map<YoutubePlayerController>((videoId) {

         `// eodZS9Wkab0  yc9JIvamDm4  9Ty_qqvhiI4  Te862nM7mJ0 I'm getting this id's from API`

          return YoutubePlayerController(
            initialVideoId: videoId,
            flags: const YoutubePlayerFlags(
              autoPlay: false,
            ),
          );
        }).toList();
        // loading = false;
      });
    }
  }

然后简单地创建一个 UI 用于显示列表视图，其中包含如下 YouTube 视频

     body: ListView.builder(
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        itemBuilder: (context, index) {
          return Container(
            height: 150,
            child: YoutubePlayer(
              key: ObjectKey(_controllersYoutube[index]),
              controller: _controllersYoutube[index],
              actionsPadding: const EdgeInsets.only(left: 16.0),
              bottomActions: [
                CurrentPosition(),
                ProgressBar(isExpanded: true),
                const SizedBox(width: 10.0),
                RemainingDuration(),
                FullScreenButton(),
              ],
            ),
          );
        },
        itemCount: _controllers.length,
      )

我希望这个答案对你有用。

Flutter：显示来自 API 提供商的 YouTube 视频

Flutter: display YouTube videos from API provider

youtube-api

dart

flutter