Base on Vap to play alpha video animation

Last update: Jun 13, 2022

中文文档

Backdrop

Transparent video animation is currently one of the more popular implementations of animation. Major manufacturers have also open sourced their own frameworks. In the end, we chose Tencent vap, which supports Android, IOS, and Web, and provides natural convenience for us to encapsulate flutter_vap. Provides a tool to generate a video with an alpha channel from a frame picture, which is simply awesome.

VAP(Video Animation Player)is developed by Penguin E-sports and is used to play cool animations.

  • Compared with Webp and Apng animation solutions, it has the advantages of high compression rate (smaller material) and hardware decoding (faster decoding)
  • Compared with Lottie, it can achieve more complex animation effects (such as particle effects)

Preview

image

video for youtube

video for qiniu

apk download

Setup

flutter_vap: ${last_version}

How to use

import 'package:flutter_vap/flutter_vap.dart';

IgnorePointer(
  // VapView can set the width and height through the outer package Container() to limit the width and height of the pop-up video
  child: VapView(),
),
  1. Play local video
> _playFile(String path) async { if (path == null) { return null; } var res = await VapController.playPath(path); if (res["status"] == "failure") { showToast(res["errorMsg"]); } return res; } ">
  import 'package:flutter_vap/flutter_vap.dart';

  /// return: play error:       {"status": "failure", "errorMsg": ""}
  ///         play complete:    {"status": "complete"}
  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;
  }
  1. Play asset video
  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;
  }
  1. Stop play
  VapController.stop()
  1. Queue play
VapController.playPath(downloadPathList[0])); QueueUtil.get("vapQueue").addTask(() => VapController.playPath(downloadPathList[1])); } ">
  _queuePlay() async {。
    // Simultaneously call playback in multiple places, making the queue perform playback.
    QueueUtil.get("vapQueue").addTask(() => VapController.playPath(downloadPathList[0]));
    QueueUtil.get("vapQueue").addTask(() => VapController.playPath(downloadPathList[1]));
  }
  1. Cancel queue playback
  QueueUtil.get("vapQueue").cancelTask();

Example

github

GitHub

https://github.com/qq326646683/flutter_vap
You might also like...

Better video player for Flutter, with multiple configuration options. Solving typical use cases!

Better video player for Flutter, with multiple configuration options. Solving typical use cases!

Better video player for Flutter, with multiple configuration options. Solving typical use cases!

Aug 11, 2022

video call with WebRTC and Flutter

video call with WebRTC and Flutter

Video Call Flutter App 📱 Description: This is sandbox video call application using Flutter and WebRTC, you can call from browser to browser, phone to

Aug 13, 2022

A fully-functional video streaming app made in Flutter using Custom Nodejs backend.

A fully-functional video streaming app  made in Flutter using Custom Nodejs backend.

LAVENDER 📺 A fully-functional video streaming app like netflix made in Flutter using Custom Nodejs backend. How To Run This Project 🏃‍♂️ Clone the r

Aug 8, 2022

Open source geo based video sharing social app created with Flutter, Supabase and lots of love 💙💙💙

Open source geo based video sharing social app created with Flutter, Supabase and lots of love 💙💙💙

Spot Take a virtual journey around the world with Spot. Spot is a geo-tagged video sharing app, meaning every video recorded in Spot is saved on a loc

Aug 11, 2022

A cloudinatry video url sample project

cloudinary_media_sample A new Flutter project for Cloudinary video url. Getting Started This project is a starting point for a Flutter application. A

Nov 4, 2021

Video call with WebRTC and Flutter

Video call with WebRTC and Flutter

This is sandbox video call application using Flutter and WebRTC, you can call from browser to browser, phone to phone, browser to phone and opposite.

Apr 27, 2022

Flutter plugin for use Video.js in flutter web

Flutter plugin for use Video.js in flutter web

Flutter Video.js player Flutter plugin for use Video.js in flutter web Installation Add it to your package's pubspec.yaml file dependencies: video_j

Aug 9, 2022

Fleo - A video calling application developed using flutter🤠

Fleo - A video calling application developed using flutter🤠

Fleo 📸 Video Calling Application developed using flutter Light and Dark Modes 👁 Join using Room Codes 👽 One room can accomodate upto 4 persons Powe

May 5, 2022

Advanced video player based on video_player and Chewie for flutter

Advanced video player based on video_player and Chewie for flutter

Better Player Advanced video player based on video_player and Chewie. It's solves many typical use cases and it's easy to run. Introduction This plugi

Dec 22, 2021
Comments
  • 1. Jump to frame and Play repeat feature

    Thank you for your great work! Can you make a new function to start animation from specific frame or duration, also a feature to repeat video feature. It will be highly appreciated

    Reviewed by nizwar at 2022-06-27 23:30

Related

Play simultaneously music/audio from assets/network/file directly from Flutter, compatible with android / ios / web / macos, displays notifications
Play simultaneously music/audio from assets/network/file directly from Flutter, compatible with android / ios / web / macos, displays notifications

?? assets_audio_player ?? Play music/audio stored in assets files (simultaneously) directly from Flutter (android / ios / web / macos). You can also u

Aug 6, 2022
You can play various sounds using this app
You can play various sounds using this app

Xylophone ?? Our Goal In this tutorial we will be diving into more Dart programming concepts and learning how to use open source Flutter packages. By

Oct 23, 2021
Playify is a Flutter plugin for play/pause/seek songs, fetching music metadata, and browsing music library.
Playify is a Flutter plugin for play/pause/seek songs, fetching music metadata, and browsing music library.

Playify Playify is a Flutter plugin for play/pause/seek songs, fetching music metadata, and browsing music library. Playify was built using iOS's Medi

Jul 18, 2022
A Flutter music player to play songs (mp3).
A Flutter music player to play songs (mp3).

?? ?? Flutter Music A Flutter music player to play songs (mp3). Please star ⭐ the repo if you like what you see ?? . ?? Requirements Any Operating Sys

Aug 9, 2022
Flutter-Music-Player - A simple music player app that let you play mp3 songs with some customization feature with a rich user interface
Flutter-Music-Player - A simple music player app that let you play mp3 songs with some customization feature with a rich user interface

Flutter-Music-Player - A simple music player app that let you play mp3 songs with some customization feature with a rich user interface

Feb 10, 2022
A Flutter audio plugin (Swift/Java) to play remote or local audio files on iOS / Android / MacOS and Web
A Flutter audio plugin (Swift/Java) to play remote or local audio files on iOS / Android / MacOS and Web

AudioPlayer A Flutter audio plugin (Swift/Java) to play remote or local audio files on iOS / Android / MacOS and Web. Online demo Features Android / i

Aug 1, 2022
WazPlay is just a music app written in flutter and service to download song and play it.
WazPlay is just a music app written in flutter and service to download song and play it.

wazplay Introduction WazPlay is just a music app written in flutter and service to download song and play it. WazPlay is the first product for Waz and

May 11, 2022
The video player for Flutter with a heart of gold

chewie The video player for Flutter with a heart of gold. The video_player plugin provides low-level access to video playback. Chewie uses the video_p

Aug 11, 2022
Flutter video trimmer package
Flutter video trimmer package

A Flutter package for trimming videos Features Customizable video trimmer Video playback control Retrieving and storing video file Also, supports conv

Aug 7, 2022
Official Flutter SDK for LiveKit. Easily add real-time video and audio to your Flutter apps.

LiveKit Flutter SDK Official Flutter SDK for LiveKit. Easily add real-time video and audio to your Flutter apps. This package is published to pub.dev

Aug 9, 2022