UTD Market

Guide développeur des articles numériques

Tous les formats de la marketplace UTD Market, avec la bibliothèque de lecture officielle et un extrait prêt à coller pour Android, iOS, Web et Flutter.

Parcourir la marketplace

Formats

Formats pris en charge et bibliothèques de lecture

Choisissez votre plateforme sous chaque format — les noms de bibliothèques renvoient aux dépôts officiels.

SVGA

.svga

Un format d'animation compact exporté directement depuis After Effects, largement utilisé pour les cadeaux de streaming en direct. Se lit avec accélération matérielle grâce à la famille SVGAPlayer.

AndroidSVGAPlayer-Android

GiftView.kt

val parser = SVGAParser(context)
parser.decodeFromURL(URL(itemUrl)) { videoItem ->
    svgaImageView.setVideoItem(videoItem)
    svgaImageView.startAnimation()
}

iOSSVGAPlayer-iOS

GiftView.swift

let player = SVGAPlayer(frame: view.bounds)
SVGAParser().parse(with: URL(string: itemUrl)!) { entity in
    player.videoItem = entity
    player.startAnimation()
}

Websvgaplayerweb

gift.js

import SVGA from "svgaplayerweb";

const player = new SVGA.Player("#canvas");
new SVGA.Parser().load(itemUrl, (videoItem) => {
  player.setVideoItem(videoItem);
  player.startAnimation();
});

Fluttersvgaplayer_flutter

gift_view.dart

SVGASimpleImage(resUrl: itemUrl);

WebP

.webp

Des images WebP animées avec transparence alpha complète dans un seul petit fichier. Prises en charge nativement sur la plupart des plateformes — peu ou pas de runtime supplémentaire nécessaire.

AndroidGlide

GiftView.kt

// Animated WebP plays out of the box
Glide.with(context).load(itemUrl).into(imageView)

iOSSDWebImage + SDWebImageWebPCoder

GiftView.swift

SDImageCodersManager.shared.addCoder(SDImageWebPCoder.shared)
imageView.sd_setImage(with: URL(string: itemUrl))

WebNative <img>

gift.html

<!-- Animated WebP is supported natively -->
<img src="item.webp" alt="" />

FlutterImage (built-in)

gift_view.dart

// Animated WebP is supported natively
Image.network(itemUrl);

VAP

.mp4

Le format Video Animation Player de Tencent : un MP4 portant une piste de couleur, une piste alpha et une boîte de configuration vapc, pour un compositing au pixel près d'effets de cadeaux riches.

AndroidTencent VAP

GiftView.kt

// AnimView from the VAP SDK
animView.setLoop(1)
animView.startPlay(File(itemPath))

iOSTencent VAP (QGVAPlayer)

GiftView.m

// QGVAPWrapView from the VAP SDK
[wrapView playHWDMP4:itemPath repeatCount:0 delegate:self];

Webvideo-animation-player

gift.js

import Vap from "video-animation-player";

new Vap({ container, src: itemUrl, config: vapcJson }).play();

Flutterflutter_vap

gift_view.dart

VapView();
await VapController.playPath(itemPath);

MP4 Alpha

.mp4

Un MP4 classique dont l'image contient la moitié couleur à côté d'une moitié alpha en niveaux de gris. Votre lecteur échantillonne les deux moitiés et compose une animation entièrement transparente.

Androidalpha-movie

GiftView.kt

// Side-by-side color/alpha video
alphaMovieView.setVideoFromUrl(itemUrl)
alphaMovieView.start()

iOSBDAlphaPlayer

GiftView.m

BDAlphaPlayerMetalConfiguration *config =
    [BDAlphaPlayerMetalConfiguration defaultConfiguration];
config.directory = itemDirectory;
[self.playerView playWithMetalConfiguration:config];

Web<video> + WebGL compositing

gift.js

// Upload each <video> frame as a texture, then in the
// fragment shader: rgb from the color half x alpha from
// the alpha half -> draw on a transparent canvas.
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA,
  gl.UNSIGNED_BYTE, video);

Fluttervideo_player + FragmentShader

gift_view.dart

// Play the mp4, sample color/alpha halves in a
// custom FragmentShader and paint the composited frame.
final controller = VideoPlayerController.networkUrl(Uri.parse(itemUrl));
await controller.initialize();
controller.play();

PAG

.pag

Le format PAG (Portable Animated Graphics) de Tencent : des animations After Effects dans un minuscule fichier binaire, rendues par le runtime multiplateforme libpag (WASM sur le web).

Androidlibpag

GiftView.kt

val pagView = PAGView(context)
pagView.composition = PAGFile.Load(itemPath)
pagView.setRepeatCount(0)
pagView.play()

iOSlibpag

GiftView.swift

let pagView = PAGView()
pagView.setComposition(PAGFile.load(itemPath))
pagView.setRepeatCount(0)
pagView.play()

Weblibpag (npm)

gift.js

import { PAGInit } from "libpag";

const PAG = await PAGInit();
const file = await PAG.PAGFile.load(buffer);
const view = await PAG.PAGView.init(file, canvas);
view.setRepeatCount(0);
await view.play();

Flutterpag

gift_view.dart

PAGView.network(
  itemUrl,
  repeatCount: PAGView.REPEAT_COUNT_LOOP,
  autoPlay: true,
);

Lottie

.json / .lottie

Lottie d'Airbnb : des animations After Effects exportées en JSON (ou un bundle dotLottie .lottie) et rendues nativement sur toutes les plateformes.

Androidlottie-android

GiftView.kt

lottieView.setAnimationFromUrl(itemUrl)
lottieView.repeatCount = LottieDrawable.INFINITE
lottieView.playAnimation()

iOSlottie-ios

GiftView.swift

let view = LottieAnimationView(url: URL(string: itemUrl)!) { _ in }
view.loopMode = .loop
view.play()

Weblottie-web

gift.js

import lottie from "lottie-web";

lottie.loadAnimation({
  container,
  path: itemUrl,
  renderer: "svg",
  loop: true,
  autoplay: true,
});

Flutterlottie

gift_view.dart

Lottie.network(itemUrl);

APNG

.png

Animated PNG — le format PNG standard doté d'un chunk de contrôle d'animation, conservant une qualité sans perte et un alpha complet. Les fichiers PNG statiques sont refusés par la marketplace.

AndroidAPNG4Android

GiftView.kt

val drawable = APNGDrawable.fromFile(itemPath)
imageView.setImageDrawable(drawable)

iOSSDWebImage

GiftView.swift

// APNG plays out of the box
imageView.sd_setImage(with: URL(string: itemUrl))

WebNative <img>

gift.html

<!-- APNG is supported natively -->
<img src="item.png" alt="" />

FlutterImage (built-in)

gift_view.dart

// APNG is supported natively
Image.network(itemUrl);