实现的功能如下:
视频播放完成之后自动切换到图片,图片隔5秒之后继续播放视频。
控件选型:PageView、Image、VideoPlayer(添加VideoPlayer的包,如果不知道如何添加可以参考我的这篇文章flutter实现视频轮播_王小二的博客-CSDN博客)。
实现思路:
- 初始化视频控制器,并在初始化完成之后添加视频监听事件
- 在视频监听事件中判断当前播放进度大于等于视频总时长,如果满足则切换图片页,
- 在图片也展示时启动一个timer,用来控制5s之后切换到视频页
- 在切换到视频页之后需要取消timer,为了防止视频没有播放完成时就切换了页面。
完成代码如下:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
///视频和图片轮播组件
///
class VideoImageShufflingWidget extends StatefulWidget {
const VideoImageShufflingWidget({Key? key}) : super(key: key);
@override
_VideoImageShufflingWidgetState createState() =>
_VideoImageShufflingWidgetState();
}
class _VideoImageShufflingWidgetState extends State<VideoImageShufflingWidget> {
late VideoPlayerController _controller;
///定义PageController来控制PageView的切换以及其它属性
late PageController _pageController;
///播放视频
void playVideo1(int index) async {
if (_timer != null) {
_timer?.cancel();
}
_controller = VideoPlayerController.network(
'http://192.168.30.34/ims/resource/17d87da3-4021-48b8-9c68-0d53d0c349df.mp4');
bool isFirst = false;
_controller.initialize().then((value) {
_controller.addListener(() async {
Duration? res = await _controller.position;
setState(() {
if (res! >= _controller.value.duration) {
if (!isFirst) {
isFirst = true;
// printLogByFlag(true, '视频1播放完成');
// _controller.pause();
_controller.removeListener(() {});
_controller.dispose();
int i = index + 1;
// playVideo1(i);
_pageController.jumpToPage(1);
startTimer();
}
}
});
});
_controller.setLooping(false);
});
_controller.play();
}
///启动Timer
void startTimer() {
//间隔五秒时间
_timer = new Timer.periodic(Duration(milliseconds: 5000), (value) {
print("定时器");
currentIndex++;
//触发轮播切换
_pageController.animateToPage(0,
duration: Duration(milliseconds: 200), curve: Curves.ease);
_timer?.cancel();
//刷新
setState(() {
playVideo1(0);
});
});
}
@override
void dispose() {
super.dispose();
_timer?.cancel();
}
@override
void initState() {
// TODO: implement initState
super.initState();
_pageController = new PageController(
initialPage: currentIndex,
);
_controller = VideoPlayerController.network(
'http://192.168.30.34/ims/resource/17d87da3-4021-48b8-9c68-0d53d0c349df.mp4');
playVideo1(0);
}
//定时器自动轮播
Timer? _timer;
//本地资源图片
List<String> imageList = [
"assets/lake.jpg",
];
//当前显示的索引
int currentIndex = 0;
//轮播显示图片
buildPageViewItemWidget(int index) {
if (currentIndex == 0) {
return VideoPlayer(_controller);
} else {
return Image.asset(
imageList[0],
fit: BoxFit.fill,
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("视频图片轮播"),
),
body: Container(
height: double.infinity,
width: double.infinity,
child: Stack(
children: [
//轮播图片
PageView.builder(
//构建每一个子Item的布局
itemBuilder: (BuildContext context, int index) {
// printLogByFlag(true, 'index:${index}');
return buildPageViewItemWidget(index);
},
onPageChanged: (index) {
setState(() {
currentIndex = index;
});
},
//控制器
controller: _pageController,
itemCount: 2,
),
],
),
),
);
}
}
感谢阅读,欢迎点赞收藏。