Canva Developers logo
App UI Kit
Action
Typography
App UI Kit

DraggableVideo

API reference for the DraggableVideo component.

Usage

import React from "react";
import { DraggableVideo } from "components/draggable_video";
import { upload } from "@canva/asset";


export function App() {
  return (
    <DraggableVideo
      mimeType="video/mp4"
      durationInSeconds={7}
      thumbnailImageSrc="https://www.canva.dev/example-assets/video-import/thumbnail-image.jpg"
      thumbnailVideoSrc="https://www.canva.dev/example-assets/video-import/thumbnail-video.mp4"
      resolveVideoRef={() => {
        return upload({
          type: "VIDEO",
          id: "uniqueidgoeshere",
          mimeType: "video/mp4",
          url: "https://www.canva.dev/example-assets/video-import/video.mp4",
          thumbnailImageUrl:
            "https://www.canva.dev/example-assets/video-import/thumbnail-image.jpg",
          thumbnailVideoUrl:
            "https://www.canva.dev/example-assets/video-import/thumbnail-video.mp4",
        });
      }}
    />
  );
}

Props

#mimeTypestring
Required

The MIME type of the full-size video file.

#resolveVideoReffunction
Required

A function that returns the result of the upload method.

#thumbnailImageSrcstring
Required

A thumbnail image to display in the object panel of the Canva editor.

#thumbnailVideoSrcstring
Optional

A low-resolution version of the full video with a maximum duration of 10 seconds. This can be omitted when the mimeType is "video/gif".

#durationnumber
Optional

The duration of the full video, in seconds.

#widthnumber
Optional

The width of the thumbnail, in pixels.

#heightnumber
Optional

The height of the thumbnail, in pixels.

#previewSrcstring
Optional

The URL or data URL of the image to use for the drag preview. This image will appear under the user's cursor as they during the drag event.

If omitted, thumbnailImageSrc will be used as a fallback.

#previewSizeobject
Optional

The dimensions of the drag preview. The dimensions should have the same aspect ratio as the full-size video.

If omitted, the width and height will be used as a fallback.

#previewSize.widthnumber
Required

The width of the drag preview, in pixels.

#previewSize.heightnumber
Required

The height of the drag preview, in pixels.

#fullSizeobject
Optional

The dimensions of the full-size video, in pixels.

If omitted, the dimensions of the drag preview will be used.

#fullSize.widthnumber
Required

The width of the full-size video, in pixels.

#fullSize.heightnumber
Required

The height of the full-size video, in pixels.