[Flutter Desktop] Flutter桌面开发初体验 | 调个包就能做个视频播放器？

我正在参加「掘金·启航计划」

1.前言

今天突发奇想，想用Flutter写一个Windows平台上的视频播放器。结果发现已经有人做出了能在Windows平台上面运行的视频播放器插件。那看来我只要引入一下别人开发的插件就可以短短几行代码实现播放视频的功能。那这篇文章，就带大家一起体验一下这个插件好不好用，顺带体验一下Flutter对Windows的支持如何。

2.dart_vlc

我们使用dart_vlc这个插件，看这个项目给出的demo感觉效果还是不错的。那就创建一个项目看看具体的效果如何吧。

3.创建项目

创建项目的时候很快就遇到了一个小坑，下图中Windows那个勾选框是勾选不上。我的Flutter SDK是支持桌面端开发的，那大概率是因为我的Android Studio版本太低了。不过没有关系，直接点击下一步，使用命令行给项目添加Windows支持就好。

命令行如下：

flutter create --platforms=windows,macos,linux .

同时，为了调试Windows应用要在Windows设置中打开开发者模式，我用的是Win11，设置如下：

运行成功之后效果如下，到此为止一切都非常顺利。

4.动手写播放器

引入dart_vlc的依赖，按照文档一步一步来。首先创建一个Player,充当控制播放的句柄。然后在initState()中指定要播放视频的路径。

final _player1 = Player(id: 1);

//...
@override
void initState() {
  super.initState();
  _player1.open(Media.file(File('C:/Users/Videos/test/test.mp4')),autoStart:true);

}

Video就是视频播放的窗口，我们Player传给他：

Video(
  player: _player1,
),

5.运行效果

很快啊，我们就可以看看播放效果如何了，直观感觉上效果相当不错。

我们不妨来和Windows自带的播放器比较一下：

左边是我们用插件写的播放器，右边是windows11自带的播放器，可以说一个是卧龙一个是凤雏了，有点难分伯仲。但是，当我打开文件资源管理器查看二者的内存占用的时候，区别就来了。可以看到Windows自带的视频播放器占用的内存只有200兆不到，我们在播放器却有400多兆。显然这个内存占用是偏高的，这有可能是因为我们的视频播放器是处在debug模式下运行的，但是时间有限我就没有测试release模式下的性能如何。

6.多窗口播放测试

前面说到用这个插件播放视频内存占用是偏高的，这里再来测试一下打开多个窗口内存的升高情况。如果升高不多的话， 400多兆其实也能接受。布局如下：

Row(
  children: [
    Expanded(
      child: Video(
        player: _player1,
      ),
    ),
    Expanded(child: Column(
      children: [
        Expanded(
          child: Video(
            player: _player2,
          ),
        ),
        Expanded(
          child: Video(
            player: _player3,
          ),
        ),              ],
    )
    ),

  ],
),

运行一下:

还是能流畅播放的，效果相当不错，但是此时的内存已经快900兆了。在有些电脑上或许就开始卡顿了。

于是我翻了一下文档，看有没有优化的方法，结果发现这样一句话。意思是用NativeVideo替换Video会获得更好的效果。

NOTE:  This will cause additional CPU-load due to conversion of video frames to RGBA/BGRA > pixel-buffers & Texture interop. For better performance, use NativeVideo

可惜有bug，换上NativeVieo后无法播放视频

Gee~