You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

youtube_player_iframe(5.1.2)在iOS端无法显示播放器,求原因与解决方案

iOS端youtube_player_iframe无法显示播放器的问题排查与解决

可能原因

  • iOS的App Transport Security(ATS)限制了YouTube资源加载
  • 播放器组件未设置明确尺寸约束,iOS端WebView无法自适应布局
  • 控制器在build方法中重复创建,导致WebView初始化异常
  • WKWebView配置未适配YouTube加载需求

解决方案

1. 配置ATS允许YouTube相关域名

在iOS项目的Info.plist中添加以下配置,确保YouTube资源可正常加载:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoadsInWebContent</key>
    <true/>
    <key>NSExceptionDomains</key>
    <dict>
        <key>youtube.com</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSAllowsArbitraryLoads</key>
            <true/>
        </dict>
        <key>googlevideo.com</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSAllowsArbitraryLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

2. 给播放器设置明确尺寸约束

原代码中YoutubePlayerScaffold直接放在Column里,iOS端可能无法确定尺寸导致不显示,可通过SizedBox指定高度:

// 修改后的body部分
body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      SizedBox(
        height: 250, // 设置固定高度
        child: YoutubePlayerScaffold(
          controller: _controller,
          builder: (context, player) {
            return player;
          },
        ),
      ),
    ],
  ),
),

3. 正确初始化控制器,避免重复创建

将控制器初始化移到initState中,避免build方法重复执行时创建多实例:

class _MyHomePageState extends State<MyHomePage> {
  late YoutubePlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = YoutubePlayerController.fromVideoId(
      videoId: 'jNQXAC9IVRw',
      autoPlay: true,
      params: const YoutubePlayerParams(
        showVideoAnnotations: false,
        strictRelatedVideos: true,
        color: 'red',
      ),
    );
  }

  @override
  void dispose() {
    _controller.close(); // 销毁控制器释放资源
    super.dispose();
  }

  // 其余build代码保持不变
}

4. 更新依赖并验证WebView配置

确保webview_flutter(youtube_player_iframe依赖插件)适配当前Flutter版本,执行以下命令更新:

flutter pub upgrade
cd ios
pod install

同时在Xcode中确认Runner目标未禁用WKWebView相关权限。

内容的提问来源于stack exchange,提问作者beginner T

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.20 19:38:14