所以我在这里有一个项目,显示大量的图像和视频,问题是,当用户滚动和视频同时播放时,它真的会破坏整个应用程序的性能,FPS从60下降到30左右。我认为解决这个问题的方法就是在用户滚动的时候暂停视频。我怎么才能让它做到这一点呢?
我使用这个插件的视频:https://pub.dev/packages/video_player
这是父组件,其中包含视频小部件,如您所见,它只是循环遍历数组并显示图片和图像。我想知道的是:如何让视频widget知道用户是否在滚动,视频widget内部有暂停和播放方法,因此根据用户是否在滚动,它将暂停/播放
(FeedVideoItem =视频小部件)
父控件:
@override
Widget build(BuildContext context) {
return SafeArea(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
if (loaded)
if (_feedDatas.length > 1)
for (var item in _feedDatas)
if (item.isImage)
FeedImageItem(
item: item,
)
else
// VIDEO WIDGET
new FeedVideoItem(videoData: item)
else
Center(child: Text('Loading, do hot restart to display')),
],
),
),
);
}
视频控件(FeedVideoItem):
class FeedVideoItem extends StatefulWidget {
final videoData;
FeedVideoItem({this.videoData}) : super();
@override
_FeedVideoItemState createState() => _FeedVideoItemState(videoData);
}
class _FeedVideoItemState extends State<FeedVideoItem> {
FeedItem item;
_FeedVideoItemState(this.item);
VideoPlayerController _controller;
bool startedPlaying = false;
Future<void> initialiseVideoPlayerFuture;
@override
void initState() {
_controller = VideoPlayerController.network(item.url);
initialiseVideoPlayerFuture = _controller.initialize();
_controller.setLooping(true);
_controller.setVolume(1.0);
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 15.0),
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
FutureBuilder(
future: initialiseVideoPlayerFuture,
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return InkWell(
onTap: () {
setState(() {
if (_controller.value.isPlaying) {
_controller.pause();
} else {
_controller.play();
}
});
},
child: AspectRatio(
aspectRatio: _controller.value.aspectRatio,
child: VideoPlayer(_controller),
),
);
} else {
//TODO: Add placeholder image
}
},
),
InkWell(
child: Icon(
_controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
color: Colors.white,
),
)
],
),
],
),
);
}
}
1条答案
按热度按时间e4yzc0pl1#
我使用VisibilityDetector()解决了这个问题,如果视频(Widget)超过60%,我暂停它,否则我播放它。它工作得很好,给予一试。