دليل مطوّري العناصر الرقمية

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

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

import SVGA from "svgaplayerweb";

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

SVGASimpleImage(resUrl: itemUrl);

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

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

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

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

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

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

import Vap from "video-animation-player";

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

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

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

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

// 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);

// 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();

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

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

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();

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

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

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

import lottie from "lottie-web";

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

Lottie.network(itemUrl);

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

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

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

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