插件
在手机上播放视频的需求越来越多，因此有必要学习这方面的内容。
这方面，Flutter官方提供了一个插件，没有特殊情况，一般会用它。
视频播放插件
步骤 1: 将视频文件添加到assets目录
- 一般会创建一个video子目录，和图片，字体，html等其他资源分开。
视频资源
- 在你的pubspec.yaml文件中，添加对assets目录的引用，并确保列出了你的视频文件。
flutter:
assets:
- assets/video/hjj_720p_mid.mp4
步骤 2: 使用VideoPlayerController加载并播放视频
/// 播放背景视频
late VideoPlayerController videoController;
@override
void onInit() {
super.onInit();
/// 加载本地视频
videoController = VideoPlayerController.asset('assets/video/hjj_720p_mid.mp4')
..initialize().then((_) {
/// 视频加载完成后，可以在这里设置是否自动播放等
/// 这里需要更新界面，不然视频组件的尺寸会有异常
LogUtil.log("背景视频加载完成");
update();
});
/// 如果你想视频一开始就播放，可以取消注释下面的代码
videoController.play();
/// 设置循环播放
videoController.setLooping(true);
}
步骤3：使用VideoPlayer
在界面上使用VideoPlayer组件，并且和VideoPlayerController对象关联。
可以把VideoPlayer组件当成视频显示的界面，就像一个普通的Container一样，只是记得要和VideoPlayerController对象关联，不然没法控制视频的播放和暂停等等。
背景视频，就要用到Stack组件，将VideoPlayer组件放在最底层。
@override
Widget build(BuildContext context) {
return GetBuilder<LoginLogic>(builder: (get) {
return Material(
child: GestureDetector(
onTap: () {
FocusScope.of(context).requestFocus(FocusNode());
},
child: Stack(
children: [
/// 视频播放器
AspectRatio(
aspectRatio: logic.videoController.value.aspectRatio,
child: VideoPlayer(logic.videoController),
),
Positioned.fill(
child: SingleChildScrollView(
child: SizedBox(
width: ScreenUtil().screenWidth,
height: ScreenUtil().screenHeight,
child: Container(
padding: EdgeInsets.only(left: 20.w, right: 20.w),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
topModule(),
bottomModule(),
],
),
),
),
),
),
],
),
),
);
});
}
