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

怼烎@ 2023-10-07 15:19 57阅读 0赞

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

*  [优美的音乐节奏带你浏览这个效果的编码过程][Link 1]
 *  [坚持每一天，是每个有理想青年的追求][Link 2]
 *  [追寻年轻人的脚步，也许你的答案就在这里][Link 3]

--------------------

##### 1 添加依赖 #####

pub仓库地址在这里：[点击查看pub仓库][pub]

# 视频播放
      video_player: ^1.0.1

##### 2 播放视频前的准备 #####

###### 2.1 网络访问权限 ######

在 ios 目录下的 info.plist 清单文件中配置 iOS设置的http网络访问权限 ：

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

如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70]

在 android 目录下的 AndroidManifest.xml 清单文件中配置网络请求权限以及http的访问权限

<uses-permission android:name="android.permission.INTERNET" />
        
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70 1]  
networkSecurityConfig 配置的是 http访问权限

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

目录结构如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70 2]

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

视频信息如下：

[Link 1]: https://www.zhihu.com/zvideo/1313903176165351424
[Link 2]: https://www.ixigua.com/6906483262659494404/
[Link 3]: https://www.bilibili.com/video/BV16T4y1M7wh/
[pub]: https://pub.flutter-io.cn/packages/video_player
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/202012172009443.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201217201141882.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201217201243343.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI=,size_16,color_FFFFFF,t_70