Introduction
Welcome to the WeVideo video creation API! You can use our API to access WeVideo API endpoints that can render videos based on XML/JSON timeline templates.
You can view code examples in the dark area to the right.
API Calls
Authentication
For all API calls you must include your API secret in the authorization header like this:
Authorization: WEVSIMPLE <YOUR API SECRET>
Make sure to also set the Content-Type header to application/json for all POST requests.
Create video
POST /api/3/videos/create
Creates and queues a new video. POST data should be a JSON object with the following properties:
* version: Schema version. Only valid value at the moment is “1”
* content: XML string as specced in version1.xsd
* resolution (optional): 240p, 360p, 480p, 720p, 1080p or 2160p. Defaults to 480p. All of these will render a video with 16:9 aspect ratio, but you can also send in the resolution as a widthxheight string. For example 1000x1000 or 720x1280
* thumbnailTime (optional): A timestamp in milliseconds for where to generate the thumbnail.
* crf (optional): Sets the visual quality of the video. A lower value will result in higher quality, but also a large file size and longer processing time. Defaults to 20. See https://trac.ffmpeg.org/wiki/Encode/H.264 for more information.
* fps (optional): Sets the frame rate of the export, defaults to 25
* startTime (optional) and endTime (optional): Timestamps in milliseconds. Allows for rendering only a subset of the entire timeline, for example from 2000ms to 3000ms
Publishing to Youtube
You can publish your videos directly to Youtube. In order to do this you first need to log in to your WeVideo account, and connect to Youtube at https://www.wevideo.com/hub#account. Make sure your Youtube account has a channel created, otherwise the upload will fail. Then you can add a youtube property to the /api/3/videos/create call. This should be an object with the following optional fields:
* title: The title on Youtube
* description: The description on Youtube
* categoryId: The numeric category ID. 22 is for example People & Blogs
* keywords: A comma-separated list of keywords associated with the video. For example
* privacy: The privacy status: public, private, or unlisted
Get video status
GET /api/3/videos/status/{jobId}
Returns the status of a job. If completed a URL to the finished file will be included as well as the URL to the video thumbnail
Get thumbnail
GET /api/3/videos/thumbnail/{jobId}
If the processing has completed this will redirect to the video thumbnail.
Convert an editor video
POST /api/3/videos/convert/{timelineId}
Attempts to convert a timeline created in the editor to the API XML format. This method only supports a relatively small subset of the features available in the editor.
XML format
XML is a useful format for creating videos due to its flexibility and readability.
Layers
Layers are the platform that contain your media elements. The priority of the layers is top down. The first layer encountered in the XML is the top layer, last layer is the bottom layer. Keep this in mind when overlapping layers for which layer you want on top. At least one layer required.
Elements
- All elements require a duration
- If no begin attribute is set then the element will begin right after the previous element on the same layer (or at time 0 if it is the first element on the layer)
- Elements on the same layer should not overlap
Common attributes
| Attribute name | Description |
|---|---|
| duration | The items duration on the timeline in milliseconds |
| inPoint | Where in the file to start playback. A video with inPoint 2000 will start the playback 2 seconds into the file. |
| loopable | (Videos only). Default value is true. By setting this to false a video will not loop, even if the video file itself has a shorter duration than the video tag. |
Media
A media element is represented by a <video>, <image> or <audio> tag. They all require a src attribute that should be a URL pointing to the file itself.
We scale the size up/down to fit inside the frame, and place it in the center.
#A very basic video with a single image lasting for 5 seconds
<timeline version="1">
<layers>
<layer>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/goldenGate.jpg" duration="5000" />
</layer>
</layers>
</timeline>
#Rendering seconds 2-4 of the input video
<timeline version="1">
<layers>
<layer>
<video src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4" duration="2000" inPoint="2000" />
</layer>
</layers>
</timeline>
Size and position
You can use the left, top, right, bottom, width and height attributes to position and scale a media item.
- If no position (left/top/right/bottom) attribute is provided the image will be centered.
- If no scale (width/height) attribute is provided then the image will be scaled to fit inside of the frame.
- If a single scale attribute is set then the other value will be calculated based on the aspect ratio of the image.
- If both
leftandrightis defined, or bothtopandbottomis defined, thenrightandbottomwill be ignored.
#Scale and position
<timeline version="1">
<layers>
<layer>
<video duration="520" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4" />
<video duration="520" width="960" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4" />
<video duration="520" width="960" height="960" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4" />
<video duration="520" width="960" height="960" left="-480" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4" />
<video duration="520" width="960" height="960" left="960" top="120" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4" />
<video duration="520" width="1920" height="540" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4" />
</layer>
</layers>
</timeline>
Text
Simple text
<text> tag. Duration is required. Optional attributes:
| Name | Description | Default value | Allowed values |
|---|---|---|---|
| width | The width of the text area in pixels | 1920 | |
| height | The height of the text area in pixels | 1080 | |
| left | 0 | ||
| top | 0 | ||
| align | Horizontal alignment of the text | center | left | center | right |
| valign | Vertical alignment of the text | center | top | center | bottom |
| fontSize | Size of the text in pixels | 172 | |
| font | Font | Roboto | TODO |
| color | Font color | white | Any valid CSS color value |
| backgroundColor | The background color of the text area | none (transparent) | Any valid CSS color value |
#Basic text example
<timeline version="1">
<layers>
<layer>
<text duration="3000">Simple text</text>
</layer>
<layer>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/goldenGate.jpg" duration="3000" />
</layer>
</layers>
</timeline>
HTML text
You can also include HTML directly in the text content.
#Using custom HTML
<timeline version="1">
<layers>
<layer>
<text duration="3000"><![CDATA[<span style="font-size: 135px;">NORMAL <i>ITALIC</i> <u>UNDERLINE</u><br />And a new line</span>]]></text>
</layer>
</layers>
</timeline>
Text encoding
If you’re using any kind of special characters in your text, make sure to send the XML string as a UTF-8 string. Alternatively you can set the encoded attribute of the text element to true and URL encode the content (window.encodeURIComponent in JavaScript, URLEncode.encode in Java etc.).
#Encoded text
<timeline version="1">
<layers>
<layer>
<text duration="1000" encoded="true">%3Cstrong%3ETHIS%20IS%20MY%20ENCODED%20STRING%20WITH%20FANCY%20LETTERS%3A%20%C3%86%C3%98%C3%85%E6%97%A5%E6%9C%AC%E8%AA%9E%3C%2Fstrong%3E</text>
</layer>
</layers>
</timeline>
Included fonts
Our included fonts are: 2Dumb, 3Dumb, AlfaSlabOne, Alike, AnticSlab, Asap, BEARPAW, Bangers, Cabin, CantataOne, Cinzel, College, Distant Galaxy, DoppioOne, Electrolize, Existence Stencil, Existence, Flux Architect, Habibi, LearningCurve, Neo Retro, PROMESH, Playball, Roboto, Secret Typewriter, True Crimes
#Included fonts
<timeline version="1">
<layers>
<layer>
<text duration="1000" font="2Dumb">2Dumb</text>
<text duration="1000" font="3Dumb">3Dumb</text>
<text duration="1000" font="AlfaSlabOne">AlfaSlabOne</text>
<text duration="1000" font="Alike">Alike</text>
<text duration="1000" font="AnticSlab">AnticSlab</text>
<text duration="1000" font="Asap">Asap</text>
<text duration="1000" font="BEARPAW">BEARPAW</text>
<text duration="1000" font="Bangers">Bangers</text>
<text duration="1000" font="Cabin">Cabin</text>
<text duration="1000" font="CantataOne">CantataOne</text>
<text duration="1000" font="Cinzel">Cinzel</text>
<text duration="1000" font="College">College</text>
<text duration="1000" font="Distant Galaxy">Distant Galaxy</text>
<text duration="1000" font="DoppioOne">DoppioOne</text>
<text duration="1000" font="Electrolize">Electrolize</text>
<text duration="1000" font="Existence Stencil">Existence Stencil</text>
<text duration="1000" font="Existence">Existence</text>
<text duration="1000" font="Flux Architect">Flux Architect</text>
<text duration="1000" font="Habibi">Habibi</text>
<text duration="1000" font="LearningCurve">LearningCurve</text>
<text duration="1000" font="Neo Retro">Neo Retro</text>
<text duration="1000" font="PROMESH">PROMESH</text>
<text duration="1000" font="Playball">Playball</text>
<text duration="1000" font="Roboto">Roboto</text>
<text duration="1000" font="Secret Typewriter">Secret Typewriter</text>
<text duration="1000" font="True Crimes">True Crimes</text>
</layer>
</layers>
</timeline>
Custom fonts
You can use custom fonts (.ttf files only) by including a list of font elements in your XML.
#Custom font
<timeline version="1">
<fonts>
<font name="MyTestFont" src="https://s3.amazonaws.com/wevideo-static/APIdocs/VideoCreationAPI/assets/MyCustomFont.ttf" />
</fonts>
<layers>
<layer>
<text duration="3000" font="MyTestFont">Hello world</text>
</layer>
</layers>
</timeline>
Google fonts
Google fonts (from https://fonts.google.com/) are also supported (note the href instead of the src attribute in the example to the right).
#Google font
<timeline version="1">
<fonts>
<font name="Ravi Prakash" href="https://fonts.googleapis.com/css?family=Ravi+Prakash" />
</fonts>
<layers>
<layer>
<text duration="3000" font="Ravi Prakash">A Google Font</text>
</layer>
</layers>
</timeline>
HTML
You can render pure HTML by using the HTML tag. The HTML will be rendered on a 1920x1080 screen.
#HTML
<timeline version="1">
<layers>
<layer>
<html duration="5000"><![CDATA[<html> <head><style>body{background:green;}</style></head><body><h1>Hello world</h1><img src="https://d3tvj3lw2y3r4c.cloudfront.net/webpage/prod3/img/bannerImages/EditorScreenshot.png" /></body></html>]]></html>
</layer>
</layers>
</timeline>
Motion titles
A motion title entry
{
"thumbnail": "https://s3.amazonaws.com/wevideo-test-thumbnails/1motiontitles/apr2017final/LineWipe.jpg",
"id": 87405583,
"title": "Line wipe - Title",
"lines": [
{
"text": "Primary text",
"colors": [0],
"font": "AlfaSlabOne",
"size": 105,
"uppercase": true
},
{
"text": "Secondary text",
"colors": [0],
"font": "AnticSlab",
"size": 75,
"uppercase": false
}
],
"colors": {
"1": "rgba(255,200,30,1)",
"0": "rgba(255,255,255,1)"
},
"introDuration": 2000,
"outroDuration": 2000,
"textFields": 2
}
Motion titles are predefined text animations with some customizable elements. The available motion titles are listed at /api/3/videos/content/motiontitles, and the same motion titles are also available in the WeVideo editor.
| Field | Description |
|---|---|
| id | The ID of the motion title, you’ll need to include this in your XML |
| introDuration/outroDuration | The duration of the intro and outro animations. The duration of the motion title item should not be shorter than the sum of these values |
| lines | This array has an entry for each text field in the motion title. Each line can have a different font, font size and color |
| colors | These are the colors used in the motion title. They are used both by the text itself and by other animation elements such as backgrounds and transitions |
#A basic motion title using mostly default values
<timeline version="1">
<layers>
<layer>
<motionTitle duration="5000" id="87405583">
<lines>
<line>First line</line>
<line>Second line</line>
</lines>
</motionTitle>
</layer>
</layers>
</timeline>
#The same motion title with customized values
<timeline version="1">
<layers>
<layer>
<motionTitle duration="10000" id="87405583">
<lines>
<line font="Bangers" fontSize="150">First line</line>
<line font="Helvetica" fontSize="50">Second line</line>
</lines>
<colors>
<color key="0" value="rgba(255,0,0,1)"/>
<color key="1" value="rgba(255,0,255,1)"/>
</colors>
</motionTitle>
</layer>
</layers>
</timeline>
Transitions
Transitions are designed to be place in between two images or videos. Transitions will shorten the connected clips to create the transition effect, whether it be a cross-fade or other transition effect. If you want the audio in the videos next to transition to fade to silent through the transition, set the attribute fadeAudio to true for the transition item.
All the examples below are based on the same template, just with different type attributes.
#Transition template
<timeline version="1">
<layers>
<layer>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/goldenGate.jpg" duration="1000" />
<transition type="wipeRight" duration="2000"/>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/field.jpg" duration="1000" />
</layer>
</layers>
</timeline>
Filters
Color correction
Colors can be tweaked by the color correction filter. Available parameters:
* brightness: -100 to 100
* saturation: -100 to 100
* contrast: -100 to 100
* hue: -180 to 180
* temperature: 3000 to 25000. Defaults to 6500
* tint: -100 to 100
#Color correction
<?xml version="1.0" encoding="UTF-8"?>
<timeline version="1">
<layers>
<layer>
<video begin="0" duration="5000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4">
<filter brightness="24" contrast="0" hue="-76" saturation="0" type="colorCorrection" />
</video>
</layer>
</layers>
</timeline>
Blur
Adds a blur effect to the clip. Available parameters:
* strength: The amount of blurring. Default value is 0.03
#Blur
<timeline version="1">
<layers>
<layer>
<video duration="1000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4" />
<video duration="1000" inPoint="1000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4" >
<filter type="blur" strength="0.015"/>
</video>
<video duration="1000" inPoint="2000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4" >
<filter type="blur"/>
</video>
<video duration="1000" inPoint="3000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4" >
<filter type="blur" strength="0.1"/>
</video>
</layer>
</layers>
</timeline>
Sepia
#Sepia
<?xml version="1.0" encoding="UTF-8"?>
<timeline version="1">
<layers>
<layer>
<video begin="0" duration="5000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4">
<filter type="sepia" />
</video>
</layer>
</layers>
</timeline>
Sharpen
#Sharpen
<?xml version="1.0" encoding="UTF-8"?>
<timeline version="1">
<layers>
<layer>
<video begin="0" duration="5000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4">
<filter type="sharpen" />
</video>
</layer>
</layers>
</timeline>
Black and white
#Black and white
<?xml version="1.0" encoding="UTF-8"?>
<timeline version="1">
<layers>
<layer>
<video begin="0" duration="5000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4">
<filter type="blackAndWhite" />
</video>
</layer>
</layers>
</timeline>
Vignette
Available parameters:
* alpha:Default value is 0.5
* radius:Default value is 0.75
* softness:Default value is 0.45
#Vignette
<?xml version="1.0" encoding="UTF-8"?>
<timeline version="1">
<layers>
<layer>
<video begin="0" duration="5000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4">
<filter type="vignette" />
</video>
</layer>
</layers>
</timeline>
Scanlines
#Scanlines
<?xml version="1.0" encoding="UTF-8"?>
<timeline version="1">
<layers>
<layer>
<video begin="0" duration="5000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4">
<filter type="scanlines" />
</video>
</layer>
</layers>
</timeline>
Invert colors
#Invert colors
<?xml version="1.0" encoding="UTF-8"?>
<timeline version="1">
<layers>
<layer>
<video begin="0" duration="5000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4">
<filter type="invertColors" />
</video>
</layer>
</layers>
</timeline>
Dream
#Dream
<?xml version="1.0" encoding="UTF-8"?>
<timeline version="1">
<layers>
<layer>
<video begin="0" duration="5000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4">
<filter type="dream" />
</video>
</layer>
</layers>
</timeline>
Audio ducking (beta)
Ducking is an effect that lowers the volume on other tracks when the volume/loudness on the ducked item reaches a threshold value. Available parameters, all optional:
* threshold: The loudness level to reach before the ducking kicks in. Defaults to 50
* duckingLevel: The volume level the other tracks will be lowered to. 0 to 1 (where 0 is completely muted and 1 is the original volume)
* attack: The time in milliseconds it takes for the volume to be reduced to the target level. Defaults to 520
* decay: The time in milliseconds it takes for the volume to return to the normal level. Defaults to 520
* sensitivity: The minimum interval between two ducking periods. Defaults to attack + decay
#Ducking
<timeline version="1">
<layers>
<layer>
<video duration="9000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/justdoit.mp4">
<filter type="audioDucking"/>
</video>
</layer>
<layer>
<audio duration="9000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/audio/typisk.wav"/>
</layer>
</layers>
</timeline>
Speed
You can adjust the playback speed of a video clip by using the speed filter. Supported values are 0.1 to 10. Remember to adjust the duration of the video item as well. A 5 seconds long video will only have enough content for 0.5 seconds of 10x speed.
#Speed
<timeline version="1">
<layers>
<layer>
<video duration="20000" src="http://wevideo-test-original-videos.s3.amazonaws.com/2017_07_27_92464996-c7bd-492c-9b5d-a6cd5193fb3b">
<filter speed="0.25" type="speed"/>
</video>
</layer>
</layers>
</timeline>
Color overlay
The color overlay filter allows you to add a color on top of an image or a video. The color will be blended with the image/video using the specified blending method. Parameters:
* color: A hex RGB(A) value
* blendingMode: normal, multiply, screen, overlay, darken, lighten, colordodge, colorburn, hardlight, softlight, difference or exclusion.
#Color overlay
<timeline version='1'>
<layers>
<layer>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/colors.png" duration="1000">
</image>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/colors.png" duration="1000">
<filter color="#FF0000FF" type="colorOverlay" blendingMode="normal"/>
</image>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/colors.png" duration="1000">
<filter color="#FF0000FF" type="colorOverlay" blendingMode="multiply"/>
</image>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/colors.png" duration="1000">
<filter color="#FF0000FF" type="colorOverlay" blendingMode="screen"/>
</image>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/colors.png" duration="1000">
<filter color="#FF0000FF" type="colorOverlay" blendingMode="overlay"/>
</image>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/colors.png" duration="1000">
<filter color="#FF0000FF" type="colorOverlay" blendingMode="darken"/>
</image>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/colors.png" duration="1000">
<filter color="#FF0000FF" type="colorOverlay" blendingMode="lighten"/>
</image>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/colors.png" duration="1000">
<filter color="#FF0000FF" type="colorOverlay" blendingMode="colordodge"/>
</image>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/colors.png" duration="1000">
<filter color="#FF0000FF" type="colorOverlay" blendingMode="colorburn"/>
</image>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/colors.png" duration="1000">
<filter color="#FF0000FF" type="colorOverlay" blendingMode="hardlight"/>
</image>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/colors.png" duration="1000">
<filter color="#FF0000FF" type="colorOverlay" blendingMode="softlight"/>
</image>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/colors.png" duration="1000">
<filter color="#FF0000FF" type="colorOverlay" blendingMode="difference"/>
</image>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/colors.png" duration="1000">
<filter color="#FF0000FF" type="colorOverlay" blendingMode="exclusion"/>
</image>
</layer>
</layers>
</timeline>
Animations
Certain properties can be animated.
Position
The position of an element can be animated through the left, right, top and bottom animations.
#Moving a video across the screen
<timeline version="1">
<layers>
<layer>
<video duration="5000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4">
<animation type="left" startValue="-1920" endValue="1920"/>
<animation type="top" startValue="-1080" endValue="1080"/>
</video>
</layer>
</layers>
</timeline>
Scale
The size of an element can be animated with the scale animation.
The easiest way to do this is to just set a startValue and endValue. After being scaled to fit the screen, like all media, the size will be multiplied by these values.
#Basic scaling
<timeline version="1">
<layers>
<layer>
<video duration="5000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4">
<animation type="scale" startValue="0.5" endValue="2"/>
</video>
</layer>
</layers>
</timeline>
You can also scale each dimension separately.
#Width and height scaling
<timeline version="1">
<layers>
<layer>
<video duration="5000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4">
<animation type="scale" startWidth="0.5" endWidth="1" startHeight="2" endHeight="1"/>
</video>
</layer>
</layers>
</timeline>
Or define the values in pixels instead of relative to the input size.
#Values defined in pixels
<timeline version="1">
<layers>
<layer>
<video duration="5000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4">
<animation type="scale" startValue="500" endValue="1000" unit="px"/>
</video>
</layer>
</layers>
</timeline>
By default the scaled image will be centered, but you can change this by setting the gravity attribute to one of the following values: NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast.
#Gravity attribute
<timeline version="1">
<layers>
<layer>
<video duration="5000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4">
<animation type="scale" startValue="1" endValue="0.3" gravity="SouthEast"/>
</video>
</layer>
</layers>
</timeline>
Easing functions
Each animated property can have a different easing function (if no easing attribute is provided it will default to linear). Below is a table of the supported easing functions, with an example video of a clip moving across the screen.
#Easing example
<timeline version="1">
<layers>
<layer>
<video duration="5000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4">
<animation type="left" startValue="0" endValue="1920" easing="linear"/>
</video>
</layer>
</layers>
</timeline>
Opacity
You can also adjust the opacity of an item by including a list of opacity entry elements. The opacity will scale linearly between each of these timestamps.
#Controlling opacity
<timeline version="1">
<layers>
<layer>
<image duration="5000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/goldenGate.jpg">
<opacity>
<entry time="0" value="0" />
<entry time="1000" value="1" />
<entry time="1500" value="0.5" />
<entry time="4000" value="0.5" />
<entry time="5000" value="0" />
</opacity>
</image>
</layer>
<layer>
<video duration="5000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/frameCounter.mp4" />
</layer>
</layers>
</timeline>
Examples
Single Image
<!-- Single Image -->
<timeline version="1">
<layers>
<layer>
<image src="http://wevideo-test-images.s3.amazonaws.com/2017_01_30_97ee7dda-ad24-4fd9-bfb7-76fe001de476" duration="1000" />
</layer>
</layers>
</timeline>
Image, pause then video
<!-- Image, pause then video -->
<timeline version="1">
<layers>
<layer>
<image src="http://wevideo-test-images.s3.amazonaws.com/2016_12_02_ed64dc5c-d14c-4499-ab4a-611abe3a4433" duration="2000" />
<video src="http://wevideo-test-proxy-videos.s3.amazonaws.com/2017_01_17_38613d64-73f4-4c42-aab2-aac6728d5e2f" duration="2000" begin="3000" inPoint="2000"/>
</layer>
</layers>
</timeline>
Image on top of video, with music
<!-- Image on top of video, with music -->
<timeline version="1">
<layers>
<layer>
<image src="http://wevideo-test-images.s3.amazonaws.com/2016_12_02_ed64dc5c-d14c-4499-ab4a-611abe3a4433" duration="5000" />
</layer>
<layer>
<video src="http://wevideo-test-proxy-videos.s3.amazonaws.com/2017_01_17_38613d64-73f4-4c42-aab2-aac6728d5e2f" duration="5000" />
</layer>
<layer>
<audio src="http://wevideo-test-audio.s3.amazonaws.com/2016_10_31_e7c7fbd0-ed48-49dc-91d9-6647107bd25d" duration="5000" />
</layer>
</layers>
</timeline>
Transition
<!-- Transition -->
<timeline version="1">
<layers>
<layer>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/goldenGate.jpg" duration="1000" />
<transition type="wipeRight" duration="2000"/>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/field.jpg" duration="1000" />
</layer>
</layers>
</timeline>
Basic text
<!-- Basic text -->
<timeline version="1">
<layers>
<layer>
<text duration="3000">Simple text</text>
</layer>
<layer>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/goldenGate.jpg" duration="3000" />
</layer>
</layers>
</timeline>
Super basic text with a default size, color, font and position
Styled text
<!-- Styled text -->
<timeline version="1">
<layers>
<layer>
<text left="100" top="100" height="880" width="1720" duration="3000" font="Bangers" fontSize="180" backgroundColor="red" fadeIn="1000" fadeOut="1000">Styled and fading text</text>
</layer>
<layer>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/goldenGate.jpg" duration="3000" />
</layer>
</layers>
</timeline>
Styled text that fades in and out
HTML text
<!-- HTML text -->
<timeline version="1">
<layers>
<layer>
<text duration="3000"><![CDATA[<span style="font-size: 36px;">NORMAL <i>ITALIC</i> <u>UNDERLINE</u><br />And a new line</span>]]></text>
</layer>
</layers>
</timeline>
You can also include HTML directly in the text content
SVG text
#Using custom HTML with SVG
<timeline version="1">
<layers>
<layer>
<html duration="1000"><![CDATA[
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: 'Open Sans', sans-serif;
}
svg {
width: 1000px;
height: 200px;
}
svg #overlay {
fill: white;
opacity: 0.7;
}
svg #text {
font-size: 100px;
font-weight: bold;
text-anchor: middle;
}
svg #r {
fill: white;
mask: url(#mask);
}
</style>
</head>
<body>
<svg>
<defs>
<mask id="mask" x="0" y="0" width="100%" height="100%">
<rect id="overlay" x="0" y="0" width="100%" height="100%" />
<text id="text" x="50%" y="0" dy="130px">HELLO SVG</text>
</mask>
</defs>
<rect id="r" x="0" y="0" width="100%" height="100%" />
</svg>
</body>
</html>
]]></html>
</layer>
<layer>
<image src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/images/goldenGate.jpg" duration="1000" />
</layer>
</layers>
</timeline>
SVG elements can be used to achieve things that are difficult to do with pure HTML, such as having a knockout text effect that is transparent to the layer below.
Volume
#Volume
<timeline version="1">
<layers>
<layer>
<text duration="3000">Simple text</text>
</layer>
<layer volume="1">
<video volume="0" src="https://s3.amazonaws.com/wevideo-static/jontest/0428_011.mov" duration="5000"/>
</layer>
</layers>
</timeline>
Both layers and media items can have a volume attribute. 1 is full volume and the default value, 0 is muted. The final volume for a media item is the layer volume multiplied with the item volume.
Volume graphs
#Volume
<timeline version="1">
<layers>
<layer>
<image duration="10000" src="http://wevideo-test-images.s3.amazonaws.com/2017_01_30_97ee7dda-ad24-4fd9-bfb7-76fe001de476" />
</layer>
<layer>
<audio duration="10000" src="http://wevideo-test-audio.s3.amazonaws.com/2016_05_25_4da4e694-cb70-4157-8590-b6d575743fc0">
<volume>
<entry time="0" value="0" />
<entry time="1000" value="1" />
<entry time="2000" value="0" />
<entry time="3000" value="1" />
<entry time="9000" value="0" />
</volume>
</audio>
</layer>
</layers>
</timeline>
You can also control the volume by including a list of volume entry elements. The volume will scale linearly between each of these timestamps.
Keying and Masking
Keying
Keying out a color is very useful for composing a variety of different videos such as making a news clip or weather forecast or just to add special effects to a background.
<!-- Keying out the Green background -->
<timeline version="1">
<layers>
<layer>
<video duration="9000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/justdoit.mp4">
<filter type="chromaKey" color="#599c6a" />
</video>
</layer>
<layer>
<video duration="9000" src="https://s3.amazonaws.com/wevideo-static/assets/apidemo/videos/purptiles.mp4" />
</layer>
</layers>
</timeline>
<!-- Masking -->
<timeline version="1">
<layers>
<layer>
<video duration="4000" src="http://wevideo-test-proxy-videos.s3.amazonaws.com/2016_12_09_f22f56c8-acc2-4d98-90f4-b2028361250d">
<filter type="mask" src="https://s3.amazonaws.com/wevideo-exporter-files/transitions/v2/transition_grid_sequential.mov" />
</video>
</layer>
<layer>
<image duration="4000" src="http://wevideo-test-images.s3.amazonaws.com/2016_05_24_69ac6d6c-8327-4c2d-ad94-84832cdfbb0a" />
</layer>
</layers>
</timeline>
When keying out a color, the API automatically generates the mask when rendering on-the-fly. All you have to do is simply define the color that is being keyed out.
In our example video justdoit.mp4 the color of the background is #599c6a so we set that filter for chromaKey.
We place the desired background video in a layer beneath the chromakey layer to follow layer priority. In this case, our background video is purptiles.mp4
Masking
Mask should be a black and white image or video. Optional parameter to the filter: invert=true to invert the mask.
Errors
The WeVideo Video Creation API uses the following error codes:
| Error Code | Meaning |
|---|---|
| 400 | Bad Request – Check your authorization and method of sending HTTP calls. Check your JSON/XML for any errors. |
| 401 | Unauthorized – Your API key is wrong. |
| 405 | Method Not Allowed – You tried to access with an invalid method. |
| 406 | Not Acceptable – You requested a format that is invalid. |
| 500 | Internal Server Error – We had a problem with our server. Try again later. |
| 503 | Service Unavailable – We’re temporarially offline for maintanance. Please try again later. |
Preview tool
You can use this basic preview tool to quickly test API functionality.