颤动的视频轮播滑块

时间:2019-10-08 05:34:14

标签: flutter flutter-layout

我知道有图像轮播滑块,但是我需要的是视频轮播滑块。我设法使用chewie将视频添加到旋转木马滑块,但不知道当当前视频播放完后如何自动传输到下一个视频。

        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,);}

在小部件构建中

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

我正在考虑这种解决方案:获取视频的持续时间并将其放入autoPlayInterval,每次幻灯片更改时将持续时间更改为当前视频。

autoPlayInterval: Duration(seconds: duration),

有onPageChanged:callbackFunction,但是我不明白它是如何工作的,我在那里更改了持续时间,但没有任何影响。

视频结束时自动更改幻灯片的代码。

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 ));
}

1 个答案:

答案 0 :(得分:1)

当前视频结束时,您可以告诉滑块转到下一页。