Flutter透明视频动画插件flutter_vap的使用

Flutter透明视频动画插件flutter_vap的使用

透明视频动画

透明视频动画是当前较为流行的动画实现方式之一。各大厂商也开源了自己的框架。最终，我们选择了腾讯的VAP（Video Animation Player），它支持Android、iOS和Web，并且为我们封装flutter_vap提供了便利。此外，它还提供了一个工具，可以从帧图像生成带有Alpha通道的视频，非常实用。

VAP（Video Animation Player）由Penguin E-sports开发，用于播放酷炫的动画。

• 与Webp和Apng动画解决方案相比，它具有更高的压缩率（更小的素材）和硬件解码（更快的解码速度）的优势。
• 与Lottie相比，它可以实现更复杂的动画效果（如粒子效果）。

预览

Youtube 视频

七牛云视频

APK 下载

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_vap: ${last_version}

如何使用

导入必要的包：

import 'package:flutter_vap/flutter_vap.dart';

基本使用示例：

// VapView可以通过外层包Container()设置宽高来限制弹出视频的宽高
IgnorePointer(
  child: VapView(),
),

1. 播放本地视频

Future<Map<dynamic, dynamic>> _playFile(String path) async {
  if (path == null) {
    return null;
  }
  var res = await VapController.playPath(path);
  if (res["status"] == "failure") {
    showToast(res["errorMsg"]);
  }
  return res;
}

2. 播放资源文件中的视频

Future<Map<dynamic, dynamic>> _playAsset(String asset) async {
  if (asset == null) {
    return null;
  }
  var res = await VapController.playAsset(asset);
  if (res["status"] == "failure") {
    showToast(res["errorMsg"]);
  }
  return res;
}

3. 停止播放

VapController.stop();

4. 队列播放

_queuePlay() async {
  // 模拟多个地方同时调用播放,使得队列执行播放。
  QueueUtil.get("vapQueue").addTask(() => VapController.playPath(downloadPathList[0]));
  QueueUtil.get("vapQueue").addTask(() => VapController.playPath(downloadPathList[1]));
}

5. 取消队列播放

_queueCancelPlay() {
  QueueUtil.get("vapQueue").cancelTask();
}

示例代码

以下是完整的示例代码，演示了如何使用flutter_vap插件。

import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:dio/dio.dart';

import 'package:flutter_vap/flutter_vap.dart';
import 'package:oktoast/oktoast.dart';
import 'package:path_provider/path_provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<String> downloadPathList = [];
  bool isDownload = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    initDownloadPath();
  }

  Future<void> initDownloadPath() async {
    Directory appDocDir = await getApplicationDocumentsDirectory();
    String rootPath = appDocDir.path;
    downloadPathList = ["$rootPath/vap_demo1.mp4", "$rootPath/vap_demo2.mp4"];
    print("downloadPathList:$downloadPathList");
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return OKToast(
      child: MaterialApp(
        home: Scaffold(
          body: Container(
            width: double.infinity,
            height: double.infinity,
            decoration: BoxDecoration(
              color: Color.fromARGB(255, 140, 41, 43),
              image: DecorationImage(image: AssetImage("static/bg.jpeg")),
            ),
            child: Stack(
              alignment: Alignment.bottomCenter,
              children: [
                Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    CupertinoButton(
                      color: Colors.purple,
                      child: Text("download video source${isDownload ? "(✅)" : ""}"),
                      onPressed: _download,
                    ),
                    CupertinoButton(
                      color: Colors.purple,
                      child: Text("File1 play"),
                      onPressed: () => _playFile(downloadPathList[0]),
                    ),
                    CupertinoButton(
                      color: Colors.purple,
                      child: Text("File2 play"),
                      onPressed: () => _playFile(downloadPathList[1]),
                    ),
                    CupertinoButton(
                      color: Colors.purple,
                      child: Text("asset play"),
                      onPressed: () => _playAsset("static/demo.mp4"),
                    ),
                    CupertinoButton(
                      color: Colors.purple,
                      child: Text("stop play"),
                      onPressed: () => VapController.stop(),
                    ),
                    CupertinoButton(
                      color: Colors.purple,
                      child: Text("queue play"),
                      onPressed: _queuePlay,
                    ),
                    CupertinoButton(
                      color: Colors.purple,
                      child: Text("cancel queue play"),
                      onPressed: _cancelQueuePlay,
                    ),
                  ],
                ),
                IgnorePointer(
                  // VapView可以通过外层包Container()设置宽高来限制弹出视频的宽高
                  child: VapView(),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  _download() async {
    await Dio().download(
        "http://file.jinxianyun.com/vap_demo1.mp4", downloadPathList[0]);
    await Dio().download(
        "http://file.jinxianyun.com/vap_demo2.mp4", downloadPathList[1]);
    setState(() {
      isDownload = true;
    });
  }

  Future<Map<dynamic, dynamic>?> _playFile(String path) async {
    if (path == null) {
      return null;
    }
    var res = await VapController.playPath(path);
    if (res!["status"] == "failure") {
      showToast(res["errorMsg"]);
    }
    return res;
  }

  Future<Map<dynamic, dynamic>?> _playAsset(String asset) async {
    if (asset == null) {
      return null;
    }
    var res = await VapController.playAsset(asset);
    if (res!["status"] == "failure") {
      showToast(res["errorMsg"]);
    }
    return res;
  }

  _queuePlay() async {
    // 模拟多个地方同时调用播放,使得队列执行播放。
    QueueUtil.get("vapQueue")
        ?.addTask(() => VapController.playPath(downloadPathList[0]));
    QueueUtil.get("vapQueue")
        ?.addTask(() => VapController.playPath(downloadPathList[1]));
  }

  _cancelQueuePlay() {
    QueueUtil.get("vapQueue")?.cancelTask();
  }
}