Use Videos

Import videos into the page

Similarly to Images and Audio, you can add Videos to the page using the addVideo() method of the addOnUISdk.app.document object, which expects a Blob object as the first argument, and optionally accepts MediaAttributes and ImportAddOnData parameters.

Example

// sandbox/code.js
import addOnUISdk from "https://express.adobe.com/static/add-on-sdk/sdk.js";

addOnUISdk.ready.then(async () => {
  try {
    const videoUrl =
      "https://www.nasa.gov/wp-content/uploads/static/history/alsj/a11/a11-16mm-mag-c.mp4";
    const video = await fetch(videoUrl);
    const videoBlob = await video.blob();

    await addOnUISdk.app.document.addVideo(
      videoBlob, // 👈 Blob object
      { // Optional MediaAttributes
        title: "NASA Moon Landing",
        author: "NASA"
      },
      { // 👈 Optional ImportAddOnData - metadata that persists with the video
        nodeAddOnData: { "videoId": "nasa_moon_landing", "category": "space" },
        mediaAddOnData: { "duration": "120s", "source": "nasa.gov" }
      }
    );
  } catch (e) {
    console.error("Failed to add the video", e);
  }
});

Please note that you can use fetch() also to get videos that are local to the add-on; in this case, you can use paths relative to the add-on's root.

// sandbox/code.js
import addOnUISdk from "https://express.adobe.com/static/add-on-sdk/sdk.js";

addOnUISdk.ready.then(async () => {
  try {
    // 👇 Local video
    const videoUrl = "./7744218-uhd_2732_1440_25fps.mp4";
    const video = await fetch(videoUrl);
    // ... same as before

data-slots=header, text

data-variant=info

FAQs

Q: How do I add video to a page?

A: Call addOnUISdk.app.document.addVideo(blob, attributes, importAddOnData) with a video blob and optional metadata.

Q: What parameter does addVideo require?

A: A Blob object is required. MediaAttributes (title, author) and ImportAddOnData (custom metadata) are optional.

Q: How do I get video as a blob?

A: Use fetch(videoUrl).then(r => r.blob()) to convert video files to blob format.

Q: Can I use local video files?

A: Yes, use relative paths from add-on root with fetch() to load local video files.

Q: Can I use remote video URLs?

A: Yes, fetch remote video URLs and convert to blob before adding to document.

Q: What video formats are supported?

A: Refer to Adobe Express file format requirements page for supported video formats and size limits.

Q: How do I handle video loading errors?

A: Use try/catch blocks around fetch() and addVideo() calls to handle loading failures.