Flutter視頻播放、Flutter VideoPlayer 視頻播放組件精要

1 添加依賴

  # 視頻播放
  video_player: ^1.0.1

2 播放視頻前的准備
2.1 網絡訪問權限
在 ios 目錄下的 info.plist 清單文件中配置 iOS設置的http網絡訪問權限 ：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

如下圖所示

在 android 目錄下的 AndroidManifest.xml 清單文件中配置網絡請求權限以及http的訪問權限

    <!--    網絡請求權限-->
    <uses-permission android:name="android.permission.INTERNET" />
    <!--外部文件存儲權限-->
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

networkSecurityConfig 配置的是 http訪問權限

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true" />
</network-security-config>

3 視頻播放
視頻資源的加載以及播放控制全部是通過 VideoPlayerController來操作的

3.1 視頻資源的加載

VideoPlayerController  _playerController ;
  @override
  void initState() {
    super.initState();

    //網絡鏈接
    //VideoPlayerController.network(url);
    //VideoPlayerController.file(File(url));
    //本地鏈接
    _videoPlayerController =
        VideoPlayerController.asset("asset資源路徑");

   //調用初始化方法
   _videoPlayerController.initialize()
     //異步執行完的回調
     ..whenComplete(() {
       //刷新頁面
       setState(() {});
     });

  }

3.2 視頻播放組件

AspectRatio(
   //設置視頻的大小 寬高比。長寬比表示為寬高比。例如，16:9寬高比的值為16.0/9.0
   aspectRatio: _videoPlayerController.value.aspectRatio,
   //播放視頻的組件
   child: VideoPlayer(_videoPlayerController),
 ),
)

3.3 視頻播放相關控制

    //獲取當前視頻播放的信息
    VideoPlayerValue videoPlayerValue = _videoPlayerController.value;

    //是否初始化完成
    bool initialized = videoPlayerValue.initialized;
    //是否正在播放
    bool isPlaying = videoPlayerValue.isPlaying;
    //當前播放的視頻的寬高比例
    double aspectRatio = videoPlayerValue.aspectRatio;
    //當前視頻是否緩存
    bool isBuffer = videoPlayerValue.isBuffering;
    //當前視頻是否循環
    bool isLoop = videoPlayerValue.isLooping;
    //當前播放視頻的總時長
    Duration totalDuration = videoPlayerValue.duration;
    //當前播放視頻的位置
    Duration currentDuration = videoPlayerValue.position;
    if (initialized) {
      // 視頻已初始化
      if (isPlaying) {
        // 正播放 --- 暫停
        _videoPlayerController.pause();
      } else {
        //暫停 ----播放
        _videoPlayerController.play();
      }
      setState(() {});
    } else {
      //未初始化
      _videoPlayerController.initialize().then((_) {
        // videoPlayerController.play();
        // setState(() {});
      });
    }