Flutter VAP2协议支持插件flutter_vap2的使用

Flutter VAP2协议支持插件flutter_vap2的使用

中文文档

Backdrop

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

VAP（Video Animation Player）是由企鹅电竞开发的，用于播放酷炫动画。

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

Preview

Youtube 视频

七牛云视频

APK 下载

Setup

dependencies:
  flutter_vap2: ${last_version}

如何使用

import 'package:flutter_vap2/flutter_vap.dart';

VapViewController vapViewController;

// VapView可以通过外层包Container()，设置宽高来限制弹出视频的宽高
IgnorePointer(
  child: VapView(
    onVapViewCreated: (controller) {
        vapViewController = controller;
    }
  ),
),

1. 播放本地视频

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

1. 播放资源文件

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

1. 停止播放

VapController.stop()

1. 队列播放

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

1. 取消队列播放

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

示例代码

import 'dart:async';
import 'dart:io';

import 'package:dio/dio.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_vap2/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;
  VapViewController vapViewController;

  [@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("下载视频源${isDownload ? "(✅)" : ""}"),
                      onPressed: _download,
                    ),
                    CupertinoButton(
                      color: Colors.purple,
                      child: Text("File1 播放"),
                      onPressed: () => _playFile(downloadPathList[0]),
                    ),
                    CupertinoButton(
                      color: Colors.purple,
                      child: Text("File2 播放"),
                      onPressed: () => _playFile(downloadPathList[1]),
                    ),
                    CupertinoButton(
                      color: Colors.purple,
                      child: Text("资源播放"),
                      onPressed: () => _playAsset("static/demo.mp4"),
                    ),
                    CupertinoButton(
                      color: Colors.purple,
                      child: Text("停止播放"),
                      onPressed: () => vapViewController?.stop(),
                    ),
                    CupertinoButton(
                      color: Colors.purple,
                      child: Text("队列播放"),
                      onPressed: _queuePlay,
                    ),
                    CupertinoButton(
                      color: Colors.purple,
                      child: Text("取消队列播放"),
                      onPressed: _cancelQueuePlay,
                    ),
                  ],
                ),
                IgnorePointer(
                  // VapView可以通过外层包Container()，设置宽高来限制弹出视频的宽高
                  child: Container(
                    width: 414,
                    height: 736,
                    child: VapView(
                      onVapViewCreated: (controller) {
                        vapViewController = controller;
                      },
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  _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 vapViewController?.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 vapViewController?.playAsset(asset);
    if (res?["status"] == "failure") {
      showToast(res?["errorMsg"]);
    }
    return res;
  }

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

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