Flutter之播放视频

通过本篇博文你可以了解如下知识点:
1、VideoPlayerController播放视频的简单使用
2、Flutter状态理念认知的巩固
3、AspectRatio的简单使用

本篇博文demo的功能(demo源码点此查看):
1、加载播放视频,并且点击视频区域可以对视频start/pause
2、网络状态发生变化的时候相关处理:当是wifi状态下直接播放视频,当断网的时候暂停视频播放,并且显示一个圆形加载框

是的,功能很简单,但是着手写这个demo的时候倒是体会到了不少东西。闲言少叙,开车吧。

项目需要的第三方库需要在pubspec.yaml里面配置:

Flutter之播放视频_第1张图片

  • VideoPlayerController的简单说明
    VideoPlayerController顾名思义,就是对视频进行播放控制的,它提供了三个视频播放源:从网络播放,从assets文件里面播放,
    从file播放,比如本博文使用的是assets文件里的视频进行播放的,代码如下:
 //通过asset文件进行播放
  VideoPlayerController  controller=VideoPlayerController.asset(
      'videos/butterfly.mp4',
      package: 'flutter_gallery_assets',
    )

如果想要播放网络视频的话就使用network方法:

static const String beeUri = 'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4';
  final VideoPlayerController beeController = VideoPlayerController.network(beeUri);

在播放视频的时候需要先调用initialize()方法初始化,该方法为异步方法,返回一个Future对象。在initialize()调用之前调用play()方法是没法播放的,initialize()初始化完成后会自动播放。 那么完成了initialize之后怎么让视频渲染出来呢?就需要将controller对象交给VideoPlayer(controller) 。另外Controller对象还提供了对视频的pause()和seekTo等常规方法。


上面说过初始化的过程的过程是一个异步过程,完成初始化可能需要耗费一定的时间,那么在这个时间端内我们肯定要展示用户展示一个提示,不如加载框的提示。所以demo中提供了如下代码来标识视频正在初始化:


  ///视频正在加载的界面
  Widget _buildInitingWidget(){
    return AspectRatio(
      aspectRatio: 3 / 2,
      child: Stack(
        children: [
          VideoPlayer(controller),
          ///健在进度框
          const Center(child: CircularProgressIndicator()),
        ],
        fit: StackFit.expand,
      ),
    );
  }

上述代码中使用了AspectRatio这个组件,这个组件可以某个UI展示固定的宽高比,在这里我们让视频的宽高比定义为3/2.运行效果如下:
Flutter之播放视频_第2张图片
当初始化完毕后就改变状态,不展示加载框就行了,核心代码如下:

  @override
  void initState() {
    super.initState();
    controller.initialize().then((value){
       ///调用setState方法重绘UI
        setState(() {
          ///判断是否初始化
          _isInit = controller.value.initialized;

        });
    });
  }

重写State的build方法:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('点击视频可暂停和播放'),
      ),
      body:  Center(
        child: _isInit? _buildPlayingWidget():_buildInitingWidget()
      ),
    );

  }

核心主要是这句child: _isInit? _buildPlayingWidget():_buildInitingWidget()
如果是初始化完毕,则显示播放界面,否则展示初始化的页面。如果要相应点击视频页面对视频进行暂停和播放的话,可以套一个GestureDetector组件(主要代码点此查看):

  child: GestureDetector(
          onTap: () {
            if (controller.value.isPlaying) {
              controller.pause();
            } else {
              controller.play();
            }
          },
          child: VideoPlayer(controller),
        ));

当然,如果要考虑到监听网络变化的话而对视频进行播放暂停控制,可以参考博主的Flutter网络状态变化监听和demo源码,此处不再赘述,主要方法还是build方法:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('监听网络变化'),
      ),
      body:  Center(
          child: _isInit?ConnectWidget(
              ///wifi网络环境
               wifiConnectWidget:PlayInWifiStatelessWidget(controller: controller,),
               ///移动网络
               mobileConnectWidget: PlayInMobileStatefulWidget(controller: controller,),
               ///无网络
               noneConnectWidget: PlayNonConnectStatelessWidget(controller: controller,)
          ):PlayNonConnectStatelessWidget(controller: controller,)
      ),
    );

博客项目demo源码
参考资料:Flutter官方视频播放资料
Flutter网络状态变化监听

你可能感兴趣的:(flutter,Flutter)