Flutter Web (3.7.5) - 平台视图类型的高度/宽度 - youtube_player_iframe

Fox*_*nut 5 youtube-iframe-api flutter youtube-player-flutter

我一直在我的网络项目中使用youtube_player_iframe包,并一直在尝试理解和修复以下问题:

Height of Platform View type: [youtube-0] may not be set. Defaulting to `height: 100%`.
Set `style.height` to any appropriate value to stop this message.
Width of Platform View type: [youtube-0] may not be set. Defaulting to `width: 100%`.
Set `style.width` to any appropriate value to stop this message.
Run Code Online (Sandbox Code Playgroud)

一切似乎都按原样工作正常,但看到这条消息出现却很麻烦。这么说,我确实想确定并解决根本原因。在 Flutter 2.5 版本中,平台处理调整大小和定位视图的方式发生了变化。可以在此处找到更改的文档和迁移指南。不过,即使有指南,我似乎也缺乏利用它的能力。

以下是 Flutter 页面的迁移代码:

ui.platformViewRegistry.registerViewFactory(viewType, (int viewId) {
  final html.Element htmlElement = html.DivElement()
    // ..other props
    ..style.width = '100%'
    ..style.height = '100%';
  // ...
  return htmlElement;
});
Run Code Online (Sandbox Code Playgroud)

我将提供一些代码片段,但如果您有什么特别想看的内容,请询问。

自定义YouTubePlayer类(StatefulWidget)

// YoutubePlayerController - Instantiated in initState();
late YoutubePlayerController _youtubePlayerController;

// Marks the currently played video
String currentVideo = "";

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

  @override
  void dispose() {
    super.dispose();
    // Close the YouTube Player
    _youtubePlayerController.close();
    // Cancel the subscription to the stream
    _streamSubscription.cancel();
  }

  // Instantiate the YoutubePlayerController controller
  youtubePlayerInit() {
    _youtubePlayerController = YoutubePlayerController(
      params: const YoutubePlayerParams(
        showControls: true,
        mute: false,
        showFullscreenButton: true,
        loop: false,
        strictRelatedVideos: true,
      ),
    )..listen((event) {
        playerState = event.playerState;
        if (event.hasError) {
          widget.updateParent(false, event.error.toString());
        }
      });
  }
Run Code Online (Sandbox Code Playgroud)

我如何加载视频的示例(我也有暂停和恢复)

  // Loads the video by Url, and records the Url as the "Current" video
  void loadVideo(String url) {
    _youtubePlayerController.loadVideo(url);
    currentVideo = url;
  }
Run Code Online (Sandbox Code Playgroud)

构建播放器

  @override
  Widget build(BuildContext context) {
    return kIsWeb
        ? YoutubePlayerScaffold(
            controller: _youtubePlayerController,
            builder: (context, player) {
              return player;
            },
          )
        // ToDo - Implement Mobile Support
        : Container();
  }
Run Code Online (Sandbox Code Playgroud)

任何帮助将不胜感激。先感谢您!

编辑:我尝试使用 YoutubePlayerController.setSize(width, height) 方法。我注意到它是 Future<void> 的函数。知道这一点后,我认为我没有异步设置大小可能是我的错误。我尝试了下面的方法,其中将构建一个空容器来代替 YoutubePlayerScaffold,直到我的 playerSizeSet 布尔值为 true。然而,该函数从未返回......只是超时。

  Future<void> setSize() async {
    await _youtubePlayerController.setSize(480, 270).then((_) {
      setState(() {
        playerSizeSet = true;
        return;
      });
    }).onError((error, stackTrace) {
      print("error");
      return;
    }).whenComplete(() {
      print("complete");
      return;
    }).timeout(const Duration(seconds: 1), onTimeout: () {
      print("timed out");
      return;
    });
  }
Run Code Online (Sandbox Code Playgroud)

想知道接下来要尝试什么吗?