Flutter开发YouTube Shorts页面遇视频加载失败问题求助

可能的问题点及修复步骤 #

1. 确认包版本与Shorts兼容性 #

确保使用最新版的youtube_player_flutter，旧版本可能对YouTube Shorts的视频格式支持不足。在pubspec.yaml中更新依赖：

youtube_player_flutter: ^latest_version

执行flutter pub get完成更新。

2. 手动验证视频ID提取 #

YoutubePlayer.convertUrlToId对部分Shorts URL可能处理异常，直接手动提取视频ID测试。比如你的Shorts链接对应的ID是SXHMnicI6Pg，直接赋值：

_videoId = 'SXHMnicI6Pg';

3. 调整控制器初始化与状态监听逻辑 #

原代码的监听逻辑可能未正确捕获播放器就绪状态，改为结合onReady回调和更全面的状态监听，同时添加错误捕获：

@override
void initState() {
  super.initState();
  // 手动设置Shorts视频ID
  _videoId = 'SXHMnicI6Pg';
  if (_videoId == null) {
    print('Error: Could not extract video ID.');
  } else {
    _controller = YoutubePlayerController(
      initialVideoId: _videoId!,
      flags: YoutubePlayerFlags(
        autoPlay: true,
        mute: false,
        isLive: false,
      ),
    )..addListener(_videoPlayerListener);
  }
}

void _videoPlayerListener() {
  // 捕获播放器错误信息
  if (_controller.value.errorCode != null) {
    print('Player Error Code: ${_controller.value.errorCode}');
    print('Player Error Message: ${_controller.value.errorMessage}');
    setState(() => _isPlayerReady = false);
    return;
  }

  setState(() {
    _playerState = _controller.value.playerState;
    // 当播放器就绪时更新状态
    if (_controller.value.isReady) {
      _isPlayerReady = true;
    }
  });
}

同时在YoutubePlayer组件的onReady回调中同步更新状态：

YoutubePlayer(
  controller: _controller,
  showVideoProgressIndicator: true,
  progressIndicatorColor: Colors.red,
  onReady: () {
    print('Player is ready.');
    setState(() => _isPlayerReady = true);
  },
  onEnded: (metadata) {
    print('Video Ended');
  },
)

4. 检查网络权限配置 #

• Android：在android/app/src/main/AndroidManifest.xml中添加网络权限：

<uses-permission android:name="android.permission.INTERNET"/>

• iOS：在ios/Runner/Info.plist中确保允许网络请求（默认已开启，若有ATS限制需调整）：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

5. 验证网络环境 #

确保测试设备能正常访问YouTube，部分地区网络限制会导致视频无法加载，可尝试切换网络环境测试。

修改后的完整代码 #

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

class MiddlePage extends StatefulWidget {
  @override
  _MiddlePageState createState() => _MiddlePageState();
}

class _MiddlePageState extends State<MiddlePage> {
  late YoutubePlayerController _controller;
  bool _isPlayerReady = false;
  String? _videoId;
  PlayerState _playerState = PlayerState.unknown;

  @override
  void initState() {
    super.initState();
    // 手动提取Shorts视频ID
    _videoId = 'SXHMnicI6Pg';
    if (_videoId == null) {
      print('Error: Could not extract video ID.');
    } else {
      _controller = YoutubePlayerController(
        initialVideoId: _videoId!,
        flags: YoutubePlayerFlags(
          autoPlay: true,
          mute: false,
          isLive: false,
        ),
      )..addListener(_videoPlayerListener);
    }
  }

  void _videoPlayerListener() {
    // 捕获播放器错误
    if (_controller.value.errorCode != null) {
      print('Player Error Code: ${_controller.value.errorCode}');
      print('Player Error Message: ${_controller.value.errorMessage}');
      setState(() => _isPlayerReady = false);
      return;
    }

    setState(() {
      _playerState = _controller.value.playerState;
      // 当播放器就绪时更新状态
      if (_controller.value.isReady) {
        _isPlayerReady = true;
      }
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Stack(
          children: [
            Center(
              child: _videoId == null
                  ? Text(
                      'Could not load video',
                      style: TextStyle(color: Colors.white),
                    )
                  : YoutubePlayer(
                      controller: _controller,
                      showVideoProgressIndicator: true,
                      progressIndicatorColor: Colors.red,
                      onReady: () {
                        print('Player is ready.');
                        setState(() => _isPlayerReady = true);
                      },
                      onEnded: (metadata) {
                        print('Video Ended');
                      },
                      onError: (error) {
                        print('On Error: $error');
                        return Center(
                          child: Text(
                            'Failed to load video',
                            style: TextStyle(color: Colors.white),
                          ),
                        );
                      },
                    ),
            ),
            if (!_isPlayerReady && _videoId != null)
              Align(
                alignment: Alignment.bottomLeft,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        'Video Title',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      SizedBox(height: 4),
                      Text(
                        'Username',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 16,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            // 加载中显示进度指示器
            if (!_isPlayerReady && _videoId != null)
              Center(child: CircularProgressIndicator()),
          ],
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者STupid