第二百八十七回

news2024/10/7 6:54:13

文章目录

1. 概念介绍
2. 使用方法
- 2.1 实现步骤
- 2.2 具体细节
3. 示例代码
4. 内容总结

我们在上一章回中介绍了"如何获取文件类型"相关的内容，本章回中将介绍如何播放视频.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

播放视频是我们常用的功能，不过Flutter官方SDK中没有提供这样的API，怎么办呢？官方也想到了这点，因此提供了video_player包供开发人员使用，本章回中将
详细介绍如何通过该包提供的API来播放视频。

2. 使用方法

2.1 实现步骤

下面是使用video_palyer包播放视频的详细步骤，请大家参考：

在yaml配置文件中添加包，并且获取包到项目中；
创建控制器对象，也就是包中提供的VideoPlayerController类的实例；
使用控制器对象初始化，并且设置声音等视频播放参数；
使用控制器对象创建视频播放器对象，也就是包中提供的VideoPlayer类的实例；
通过控制器对象操作视频，比较播放视频，暂停播放视频等；
视频播放完成后释放控制器相关资源；

2.2 具体细节

在上面介绍的步骤中还有一些细节需要说明，主要是创建控制器对象和创建视频播放器对象这两个步骤：

创建控制器对象需要使用VideoPlayerController的file()或者networkUrl()方法。这两个方法用来把本地存储中的视频文件，或者网络上的视频文件转换成
控制器对象，方法的参数是本地视频文件的绝对地址或者网络视频文件的链接，此外，播放网络视频时还需要在配置文件中添加网络权限；
创建视频播放器对象时直接使用VideoPlayer类的构造方法就可以，该方法只有一个控制器类型的参数，把控制器对象传递给该方法就可以；
视频播放时有一定宽高比，最好在视频播放器外层嵌套一个AspectRatio组件，这样可以限制视频播放器的宽高比，进而达到良好的播放效果；
我们先用文本介绍这些细节内容，在后面的小节中将通过示例代码来演示。

3. 示例代码

///创建控制器对象并且进行初始化操作
  VideoPlayerController? _controller = VideoPlayerController.file(File(file_path));
  await _controller?.setVolume(0.0);
  await _controller?.initialize();
  await _controller?.setLooping(true);

///创建视频播放器对象
  Center(
    ///控制视频的宽高比
    child: AspectRatio(
      aspectRatio: controller!.value.aspectRatio,
      child: VideoPlayer(controller!),
    ),
  );

///通过按钮播放、暂停视频
Container(
  width: 64,
  color: Colors.green,
  child: IconButton(
    onPressed: () {
      setState(() {
        _controller!.value.isPlaying
            ? _controller?.pause()
            : _controller?.play();
      });
    },
    icon: _controller == null
        ? const Icon(Icons.video_call)
        : (Icon(_controller!.value.isPlaying
            ? Icons.pause
            : Icons.play_arrow)),
  ),
),

///释放控制器相关资源
@override
void dispose() {
  _controller = null;
  super.dispose();
}