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 an argument.

Example

Copy
// 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
    );
  } catch (e) {
    console.error("Failed to add the video", e);
  }
});
Copied to your clipboard
// 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
    );
  } 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.

Copy
// 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
Copied to your clipboard
// 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

FAQs

Q: How do I add video to a page?

A: Call addOnUISdk.app.document.addVideo(blob) with a video blob object.

Q: What parameter does addVideo require?

A: Only a Blob object containing the video data.

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.

Last updated 7/30/2025

Was this helpful?

Yes

No