使用flutter写一个视频控制器
时间: 2023-09-10 12:09:21 浏览: 212
好的,以下是一个简单的Flutter视频控制器的实现:
```dart
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
class VideoPlayerController extends StatefulWidget {
final String videoUrl;
VideoPlayerController({required this.videoUrl});
@override
_VideoPlayerControllerState createState() => _VideoPlayerControllerState();
}
class _VideoPlayerControllerState extends State<VideoPlayerController> {
late VideoPlayerController _videoPlayerController;
late Future<void> _initializeVideoPlayerFuture;
@override
void initState() {
super.initState();
// 创建一个VideoPlayerController对象
_videoPlayerController = VideoPlayerController.network(widget.videoUrl);
// 初始化VideoPlayerController对象
_initializeVideoPlayerFuture = _videoPlayerController.initialize();
// 开始播放视频
_videoPlayerController.play();
}
@override
void dispose() {
// 释放VideoPlayerController对象
_videoPlayerController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: FutureBuilder(
future: _initializeVideoPlayerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return AspectRatio(
aspectRatio: _videoPlayerController.value.aspectRatio,
// 创建一个VideoPlayer对象
child: VideoPlayer(_videoPlayerController),
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
),
bottomNavigationBar: BottomAppBar(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: Icon(
_videoPlayerController.value.isPlaying
? Icons.pause
: Icons.play_arrow,
),
onPressed: () {
setState(() {
if (_videoPlayerController.value.isPlaying) {
_videoPlayerController.pause();
} else {
_videoPlayerController.play();
}
});
},
),
IconButton(
icon: Icon(Icons.fullscreen),
onPressed: () {
// 进入全屏模式
_videoPlayerController.pause();
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FullScreenVideoPlayer(
videoPlayerController: _videoPlayerController,
),
),
);
},
),
IconButton(
icon: Icon(Icons.volume_up),
onPressed: () {
setState(() {
_videoPlayerController.setVolume(1.0);
});
},
),
],
),
),
);
}
}
class FullScreenVideoPlayer extends StatefulWidget {
final VideoPlayerController videoPlayerController;
FullScreenVideoPlayer({required this.videoPlayerController});
@override
_FullScreenVideoPlayerState createState() => _FullScreenVideoPlayerState();
}
class _FullScreenVideoPlayerState extends State<FullScreenVideoPlayer> {
late VideoPlayerController _videoPlayerController;
late Future<void> _initializeVideoPlayerFuture;
@override
void initState() {
super.initState();
// 初始化VideoPlayerController对象
_videoPlayerController = widget.videoPlayerController;
_initializeVideoPlayerFuture = _videoPlayerController.initialize();
// 开始播放视频
_videoPlayerController.play();
}
@override
void dispose() {
// 释放VideoPlayerController对象
_videoPlayerController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: FutureBuilder(
future: _initializeVideoPlayerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return AspectRatio(
aspectRatio: _videoPlayerController.value.aspectRatio,
// 创建一个VideoPlayer对象
child: VideoPlayer(_videoPlayerController),
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
),
bottomNavigationBar: BottomAppBar(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
icon: Icon(
_videoPlayerController.value.isPlaying
? Icons.pause
: Icons.play_arrow,
),
onPressed: () {
setState(() {
if (_videoPlayerController.value.isPlaying) {
_videoPlayerController.pause();
} else {
_videoPlayerController.play();
}
});
},
),
IconButton(
icon: Icon(Icons.fullscreen_exit),
onPressed: () {
// 退出全屏模式
_videoPlayerController.pause();
Navigator.pop(context);
},
),
IconButton(
icon: Icon(Icons.volume_up),
onPressed: () {
setState(() {
_videoPlayerController.setVolume(1.0);
});
},
),
],
),
),
);
}
}
```
以上代码创建了一个包含视频播放器的页面,并在底部添加了一些控制按钮。在底部导航栏中,有一个“全屏”按钮,可以让用户进入全屏模式观看视频。同时,该页面也为竖屏模式做了适配,保证用户在不同设备上都能获得良好的观看体验。
阅读全文