Flutter Web播放HoloLens分块MP4直播流遇错误求助

你当前的实现存在几个核心问题，导致HoloLens的分块MP4直播流无法正常播放：

1. 重复创建视频控制器：onProgress事件每次触发都会生成新的Blob、ObjectURL和VideoPlayerController，这会导致资源泄漏，且播放器频繁重置，根本无法持续播放流数据。
2. FutureBuilder未正确绑定初始化状态：videoPlayerFuture变量始终为null，导致FutureBuilder永远停在加载状态，不会渲染视频组件。
3. 分块MP4的处理方式错误：直接将当前获取到的部分响应转为Blob无法实现渐进式播放，需要让播放器原生支持分块流的加载。

修正方案 #

方案1：直接给VideoPlayerController添加认证头（推荐） #

如果video_player_web插件支持在网络请求中自定义headers，可以直接通过VideoPlayerController.network的headers参数传入Basic认证信息，让播放器原生处理分块MP4的流式加载：

getVideo3() async {
  String username = 'username';
  String password = 'password';
  String basicAuth = 'Basic ' + base64.encode(utf8.encode('$username:$password'));

  final controller = VideoPlayerController.network(
    'https://158.37.238.9/api/holographic/stream/live.mp4',
    headers: {'authorization': basicAuth},
  );

  setState(() {
    _controller?.dispose();
    _controller = controller;
    videoPlayerFuture = _controller!.initialize();
  });

  await videoPlayerFuture;
  _controller!.play();
}

完整修正后的State代码 #

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

  @override
  State<StreamTest> createState() => _StreamTestState();
}

class _StreamTestState extends State<StreamTest> {
  VideoPlayerController? _controller;
  Future<void>? videoPlayerFuture;

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

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

  getVideo3() async {
    String username = 'username';
    String password = 'password';
    String basicAuth = 'Basic ' + base64.encode(utf8.encode('$username:$password'));

    final controller = VideoPlayerController.network(
      'https://158.37.238.9/api/holographic/stream/live.mp4',
      headers: {'authorization': basicAuth},
    );

    setState(() {
      _controller?.dispose();
      _controller = controller;
      videoPlayerFuture = _controller!.initialize();
    });

    await videoPlayerFuture;
    _controller!.play();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          leading: IconButton(
            onPressed: () => Navigator.of(context).pop(),
            icon: const Icon(Icons.arrow_back, color: Colors.white),
          ),
          title: const Text('Livestream'),
        ),
        body: FutureBuilder(
          future: videoPlayerFuture,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              if (_controller != null && _controller!.value.isInitialized) {
                return AspectRatio(
                  aspectRatio: _controller!.value.aspectRatio,
                  child: VideoPlayer(_controller!),
                );
              } else {
                return const Center(child: Text('视频初始化失败'));
              }
            } else {
              return const Center(child: CircularProgressIndicator());
            }
          },
        ),
      ),
    );
  }
}

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