flutter chewie 視頻播放

1.下載插件

chewie: ^0.9.8+1
video_player: ^0.10.10

 

2.在使用頁面引入

import 'package:chewie/chewie.dart';
import 'package:video_player/video_player.dart';

 3.定義

  VideoPlayerController videoPlayerController;
  ChewieController chewieController;

 

 

4.初始化在 initState() 中

    videoPlayerController = VideoPlayerController.network(
        'https://www.runoob.com/try/demo_source/mov_bbb.mp4');
    
    videoPlayerController.initialize(); // 初始化
    
    chewieController = ChewieController(
      videoPlayerController: videoPlayerController,
      aspectRatio: 3 / 2, //寬高比
      autoPlay: false, //自動播放
      looping: false, //循環播放
    );

 

5.在 dispose()中卸載

videoPlayerController.dispose();

 

 

6.使用

Container(
                    height: 200,
                    child: Chewie(
                        controller: ChewieController(
                            videoPlayerController:videoPlayerController
                        )
                    ),
                  )

 

6.成功啦

 

 

如果想獲取請求的視頻鏈接，那就在builder里初始化，這樣的話就可以刪掉initState() 中的初始化設置，就是第三步不要

   // 判斷視頻是否存在
    if(data["videoUrl"] != null ) {
      videoPlayerController = VideoPlayerController.network(
          data["videoUrl"]
      );
      videoPlayerController.initialize(); // 初始化

      chewieController = ChewieController(
        videoPlayerController: videoPlayerController,
//        aspectRatio: 3 / 2, //寬高比
        autoPlay: false, //自動播放
        looping: false, //循環播放
      );
    }