Flutter VideoPlayer from bytes

Question

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

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

根据文件，VideoPlayerController.file()不起作用，因为这需要网络上没有的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)