美文网首页iOS 技巧
Flutter视频播放、Flutter VideoPlayer

Flutter视频播放、Flutter VideoPlayer

作者: 易含 | 来源:发表于2022-02-08 17:54 被阅读0次

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

    相关文章

      网友评论

        本文标题:Flutter视频播放、Flutter VideoPlayer

        本文链接:https://www.haomeiwen.com/subject/fkzbkrtx.html