Flutter视频播放、Flutter VideoPlayer 视频播放组件精要

在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天、每周,都会留下一些脚印,就是这些创作的内容,有一种执着,就是不知为什么,如果你迷茫,不妨来瞅瞅码农的轨迹。


1 添加依赖

pub仓库地址在这里:点击查看pub仓库

  # 视频播放
  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(() {});
      });
    }

视频信息如下:

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
已标记关键词 清除标记
<p> 本课程将使用 flutter 实现类似抖音首页面效果 </p> <p> <br /></p> <p> </p><ol><li> <span style="color:#64451D;"> </span><span style="color:#64451D;">通过</span><span style="color:#64451D;font-size:13px;"> TabBar </span><span style="color:#64451D;font-size:13px;">与</span><span style="color:#64451D;font-size:13px;"> TabBarView </span><span style="color:#64451D;font-size:13px;">结合使用</span><span style="color:#5F70A8;font-size:13px;"> </span><span style="color:#64451D;font-size:13px;">实现仿抖音</span><span style="color:#64451D;font-size:13px;">APP</span><span style="color:#64451D;font-size:13px;">首页面</span><span style="color:#5F70A8;font-size:13px;"> </span><span style="color:#64451D;font-size:13px;">关注</span><span style="color:#5F70A8;font-size:13px;"> </span><span style="color:#64451D;font-size:13px;">与推荐</span><span style="color:#5F70A8;font-size:13px;"> </span><span style="color:#64451D;font-size:13px;">页面左右滑动</span><span style="color:#64451D;font-size:13px;">ui</span><span style="color:#64451D;font-size:13px;">构建</span> </li> <li> <span style="color:#64451D;">通过</span><span style="font-size:13px;color:#64451D;"> PageView </span><span>来实现上下整屏切换效果</span> </li> <li> <span style="color:#5F70A8;font-size:13px;"><span style="color:#64451D;">使用 </span><span style="color:#64451D;">VideoPlayer</span><span>组件实现视频播放功能</span></span> </li> <li> <span><span style="font-size:13px;color:#64451D;">通过 CircularProgressIndicator实现 </span></span><span style="color:#64451D;">有圆形背景样式的按钮浮在视频列表上方来实现控制视频播放与暂停,并会综述一个</span><span style="font-size:13px;color:#64451D;"> Align </span><span>在手机坐标系中的对齐方式</span> </li> <li> <span style="color:#64451D;">通过</span><span style="color:#64451D;font-size:13px;"> ClipOval</span><span style="color:#64451D;font-size:13px;">、</span><span style="color:#64451D;font-size:13px;">CachedNetworkImage </span><span style="color:#64451D;font-size:13px;">实现圆形头像</span> </li> <li> <span style="color:#5F70A8;font-size:13px;"><span style="color:#64451D;">通过</span><span style="color:#64451D;"> showModalBottomSheet </span><span>实现从页面底部上滑的弹框,结合</span><span style="color:#64451D;"> ListView </span><span>实现弹框显示评论列表功能</span></span> </li> <li> <span style="color:#64451D;">通过</span><span style="color:#64451D;font-size:13px;"> showModalBottomSheet </span><span style="color:#64451D;font-size:13px;">实现从页面底部上滑的弹框,结合</span><span style="color:#64451D;font-size:13px;"> GridView </span><span style="color:#64451D;font-size:13px;">实现弹框显示九宫格列表功能</span> </li> </ol>
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页