来自字节的 Flutter VideoPlayer

Question

我正在尝试构建一个应用程序，其中后端生成一个短视频并将其作为响应中的文件返回。在 Flutter 前端中，我正在解析响应对象以获取表示视频的字节。使用这些字节，我想创建一个Video Player。

这是我的问题：如何初始化VideoPlayerController从响应中收到的字节数组？

根据文档，VideoPlayerController.file()无法正常工作，因为这需要 dart.io，而 dart.io 在网络上不可用。这只剩下network或asset选项。

Answer 1

这是相同的一个小代码实现。

class VideoPlayerWidget extends StatefulWidget {
  final Uint8List videoBytes;

  const VideoPlayerWidget({super.key, required this.videoBytes});

  @override
  State<VideoPlayerWidget> createState() => _VideoPlayerWidgetState();
}

class _VideoPlayerWidgetState extends State<VideoPlayerWidget> {
  late VideoPlayerController _controller;
  late html.VideoElement _videoElement;

  @override
  void initState() {
    super.initState();
    _videoElement = html.VideoElement();

    // Register an event listener to track when the video has loaded
    _videoElement.addEventListener('loaded metadata', (_) {
      _initializeVideoPlayer();
    });

    // Convert the byte array to a blob and set it as the video source
    final blob = html.Blob([widget.videoBytes]);
    final url = html.Url.createObjectUrl(blob);
    _videoElement.src = url;
  }

  @override
  void dispose() {
    _controller.dispose();
    _videoElement.pause();
    _videoElement.removeAttribute('src');
    html.Url.revokeObjectUrl(_videoElement.src);
    super.dispose();
  }

  Future<void> _initializeVideoPlayer() async {
    _controller = VideoPlayerController.network(_videoElement.currentSrc!);
    await _controller.initialize();
    await _controller.setLooping(true);
    _controller.play();
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    if (_controller.value.isInitialized) {
      return AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        child: VideoPlayer(_controller),
      );
    } else {
      return Container();
    }
  }
}

您可以将此小部件用作

final Uint8List videobytes; // initalize your video bytes here
VideoPlayerWidget(videoBytes: videoBytes)