Flutter youtube_player_iframe 未在移动设备上显示

Question

我正在尝试使用 youtube_player_iframe 在我的 flutter 应用程序中显示内嵌的 YouTube 视频。 如果满足以下条件，则会显示视频：

• 我在 Android APK 上启动应用程序
• 我从 Android Studio 模拟器启动应用程序

但是，在以下情况下会显示空白页面：

• 我从 ios 手机打开 web.app
• 我从 Android 手机打开 web.app
• 我从 PC 上的 Chrome 打开 web.app

谁能指出问题所在吗？

我也尝试使用 youtube_player_flutter，但在这种情况下，当我从 ios/Android 移动设备和 Chrome PC 打开 web.app 时，视频无法启动并且陷入无限循环。

这是应用程序的代码：

class YoutubeAppDemo extends StatefulWidget {
  @override
  _YoutubeAppDemoState createState() => _YoutubeAppDemoState();
}

class _YoutubeAppDemoState extends State<YoutubeAppDemo> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = YoutubePlayerController(
      params: const YoutubePlayerParams(
        showControls: true,
        mute: true,
        showFullscreenButton: false,
        loop: false,
      ),
    );

    _controller.loadVideoById(
      videoId: 'egMWlD3fLJ8',
      startSeconds: 0,
    );
  }

  @override
  Widget build(BuildContext context) {
    /*return YoutubePlayerScaffold(
      controller: _controller,
      builder: (context, player) {*/
        return Scaffold(
          appBar: AppBar(
            title: const Text('Youtube Player IFrame Demo'),
          ),
          body: ListView(
            children: [
            YoutubePlayer(controller: _controller),
            const Controls(),
            ],
          )
        );
     // },
    //);
  }

  @override
  void dispose() {
    _controller.close();
    super.dispose();
  }
}

///
class Controls extends StatelessWidget {
  ///
  const Controls();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text("MetaDataSection"),
          _space,
          Text("SourceInputSection"),
          _space,
          Text("PlayPauseButtonBar"),
          _space,
          const Text("VideoPositionSeeker"),
          _space,
          Text("PlayerStateSection"),
        ],
      ),
    );
  }

  Widget get _space => const SizedBox(height: 10);
}

Answer 1

尝试将

super.initState();

放在

initState()

的末尾。

这是一个对我有用的代码示例：

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: YoutubeAppDemo(),
    );
  }
}

class YoutubeAppDemo extends StatefulWidget {
  const YoutubeAppDemo({super.key});

  @override
  YoutubeAppDemoState createState() => YoutubeAppDemoState();
}

class YoutubeAppDemoState extends State<YoutubeAppDemo> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    _controller = YoutubePlayerController(
      params: const YoutubePlayerParams(
        showControls: true,
        mute: true,
        showFullscreenButton: false,
        loop: false,
      ),
    );

    _controller.loadVideoById(
      videoId: 'egMWlD3fLJ8',
      startSeconds: 0,
    );
    super.initState();

  }

  @override
  Widget build(BuildContext context) {
    /*return YoutubePlayerScaffold(
      controller: _controller,
      builder: (context, player) {*/
    return Scaffold(
        appBar: AppBar(
          title: const Text('Youtube Player IFrame Demo'),
        ),
        body: ListView(
          children: [
            YoutubePlayer(controller: _controller),
            const Controls(),
          ],
        ));
    // },
    //);
  }

  @override
  void dispose() {
    _controller.close();
    super.dispose();
  }
}

///
class Controls extends StatelessWidget {
  ///
  const Controls({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text("MetaDataSection"),
          _space,
          const Text("SourceInputSection"),
          _space,
          const Text("PlayPauseButtonBar"),
          _space,
          const Text("VideoPositionSeeker"),
          _space,
          const Text("PlayerStateSection"),
        ],
      ),
    );
  }

  Widget get _space => const SizedBox(height: 10);
}