Flutter：youtube_player_flutter 无法获取元数据

Question

如何获取视频元数据？

当我启动应用程序时，视频可以正常播放，但 元数据 就像 '作者'或'标题'总是从'[=31=开始]null'。只有当我“Hot Reload”应用程序时，它们才会使用正确的值进行初始化。

我是 flutter 的新手，我认为这可以通过一些异步函数来解决，但我不知道应该把它放在哪里

代码：

import 'package:flutter/material.dart';
import 'package:youtube_player_flutter/youtube_player_flutter.dart';

class YoutubePlayerContainer extends StatefulWidget {
  const YoutubePlayerContainer({Key? key}) : super(key: key);

  @override
  State<YoutubePlayerContainer> createState() => _YoutubePlayerContainerState();
}

class _YoutubePlayerContainerState extends State<YoutubePlayerContainer> {
  late YoutubePlayerController controller;

  @override
  void initState() {
    super.initState();

    const url = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ';

    controller = YoutubePlayerController(
      initialVideoId: YoutubePlayer.convertUrlToId(url)!,
      flags: const YoutubePlayerFlags(),
    );
  }

  @override
  Widget build(BuildContext context) => YoutubePlayerBuilder(
        player: YoutubePlayer(
          controller: controller,
        ),
        builder: (context, player) => Scaffold(
          appBar: AppBar(title: const Text('Video MetaData')),
          body: Padding(
            padding: EdgeInsets.all(8),
            child: Column(
              children: [
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(3),
                    color: const Color(0xFF434D58),
                  ),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(
                          controller.metadata.author,
                          style: const TextStyle(
                            fontWeight: FontWeight.w600,
                            fontSize: 12,
                            color: Colors.white,
                          ),
                        ),
                      ),
                      Container(
                        child: player,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8),
                        child: Text(
                          controller.metadata.title,
                          style: const TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 12,
                            color: Colors.white,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      );
}

我在这里错过了什么？

Answer 1

查看包的 documentation，很明显可以看出调用是异步的，您需要为其添加一个侦听器。

YoutubePlayer(
    controller: _controller,
    showVideoProgressIndicator: true,
    videoProgressIndicatorColor: Colors.amber,
    progressColors: ProgressColors(
        playedColor: Colors.amber,
        handleColor: Colors.amberAccent,
    ),
    onReady () {
        _controller.addListener(listener);
    },
),

在您提供的代码中，没有 YoutubePlayer 的监听器，因此，第一次查看时，元数据为 null，因为调用尚未完成。

 void listener() {
    if (_isPlayerReady && mounted && !_controller.value.isFullScreen) {
      setState(() {
        _playerState = _controller.value.playerState;
        _videoMetaData = _controller.metadata;
      });
    }
  }

我建议只在调用完成后显示数据。您可以使用布尔标志并显示微调器来执行此操作。

Flutter：youtube_player_flutter 无法获取元数据

Flutter: youtube_player_flutter Unable to fetch the metadata

metadata

flutter

flutter-video-player