Flutter视频和图片轮播

Posted 2021-12-23 阳光照不到的王国

实现的功能如下：

视频播放完成之后自动切换到图片，图片隔5秒之后继续播放视频。

控件选型:PageView、Image、VideoPlayer(添加VideoPlayer的包，如果不知道如何添加可以参考我的这篇文章flutter实现视频轮播_王小二的博客-CSDN博客)。

实现思路：

1. 初始化视频控制器，并在初始化完成之后添加视频监听事件
2. 在视频监听事件中判断当前播放进度大于等于视频总时长,如果满足则切换图片页,
3. 在图片也展示时启动一个timer,用来控制5s之后切换到视频页
4. 在切换到视频页之后需要取消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,
            ),
          ],
        ),
      ),
    );
  

感谢阅读，欢迎点赞收藏。