简体   繁体   中英

Video Carousel slider for flutter

I know there is image carousel slider, but what I need is video carousel slider. I manage to add video to carousel slider using chewie but don't know how to auto transfer to next video when the present video finish playing.

        class _ChewieDemoState extends State<ChewieDemo> {
          TargetPlatform _platform;
          VideoPlayerController _videoPlayerController1;
          VideoPlayerController _videoPlayerController2;
          ChewieController _chewieController;
          ChewieController _chewieController2;
          void initState() {
          super.initState();
          _videoPlayerController1 = VideoPlayerController.network(
            'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4');
          _videoPlayerController2 = VideoPlayerController.network(
            'https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4');

          _chewieController = ChewieController(
          videoPlayerController: _videoPlayerController1,
          aspectRatio: 4 / 3,
          autoPlay: true,
          looping: false,
          );

          _chewieController2 = ChewieController(
          videoPlayerController: _videoPlayerController2,
          aspectRatio: 4 / 3,
          autoPlay: true,
          looping: false,);}

In widget build

body: CarouselSlider(
      items: [Chewie( controller: _chewieController,),Chewie(controller: _chewieController2,)],
      autoPlay: true,
      autoPlayInterval: Duration(seconds: 1),
      autoPlayAnimationDuration: Duration(milliseconds: 800),
        ),

I'm thinking of this solution: get duration time of video and put it in autoPlayInterval, change duration to the present video everytime slide change.

autoPlayInterval: Duration(seconds: duration),

there is onPageChanged: callbackFunction, but i don't understand how it work, i change duration in there but not affect anything.

Code for auto change slide when video end.

goToNext() {
    carouselSlider.nextPage(
        duration: Duration(seconds: 1), curve: Curves.decelerate);
  }
void checkVideo(){

    if(_videoPlayerController1.value.position == _videoPlayerController1.value.duration){
      print('video Ended');
      _videoPlayerController1.seekTo(Duration(seconds:0 )); // If i don't put this here it will keep transfer to nextpage.
      goToNext();
      _videoPlayerController2.seekTo(Duration(seconds:0 ));
}

When the current video ends, you could tell the slider to go to the next page.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM