A video element is a type of element that renders a video file. Apps can use the Design Interaction capability to add video elements to a user's design.
User experience
When an app creates a video element, the underlying video file is uploaded to the user's media library.
While the video is being uploaded, a lower-resolution version of the video is shown to the user. If the app hasn't provided a lower-resolution version of the video, a static image is shown as a fallback.
All users have a storage limit for their media library. If they reach this limit, they will encounter errors when attempting to upload further videos.
Creating video elements
To create a video element, apps must first use the Content capability to upload the underlying video file to the user's media library. The following snippet demonstrates how to do this:
const content = getContent();const designInteraction = getDesignInteraction();const upload = await content.queueMediaUpload({type: "VIDEO",mimeType: "video/mp4",id: "video",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",});if (upload.type === "done") {await designInteraction.addNativeElement({type: "VIDEO",ref: upload.ref,});}
To learn more, see:
Limitations
- All media must comply with Canva's Acceptable Use Policy.
- All media must comply with Canva's Upload formats and requirements.