Video elements are type of Element that allow you to add a video in a scene or a movie. You must specify a URL to the video file (for example, an MP4 file) and the properties that define the behaviour of the video. You can read the full schema specification for the video elements in the API documentation.

Simple video

The following JSON creates a simple movie with one scene and one video.

{
    "project": "tutorial",
    "resolution": "full-hd",
    "scenes": [
        {
            "elements": [
                {
                    "type": "video",
                    "src": "https:\/\/assets.json2video.com\/assets\/videos\/beach-01.mp4"
                }
            ]
        }
    ]
}

This JSON relies on the defaults:

You can check all defaults in the API Documentation.

The resulting video won't be really interesting as it will be exactly as the original one 😏. So, let's do something a little more interesting in the next example.

Concatenating 2 videos

In this example, we will create a movie that concatenates 2 videos. We can do it in different ways, for example:

  1. Adding the 2 source videos in the same scene, one after the other; or
  2. Adding 2 scenes, one source video in each scene

Although the result may seem very similar, the second option is recommended as it has some advantages that we will see in the following examples.

Two videos in the same scene

{
    "project": "tutorial",
    "resolution": "full-hd",
    "scenes": [
        {
            "comment": "Scene #1",
            "elements": [
                {
                    "type": "video",
                    "src": "https:\/\/assets.json2video.com\/assets\/videos\/beach-01.mp4"
                },
                {
                    "type": "video",
                    "src": "https:\/\/assets.json2video.com\/assets\/videos\/beach-02.mp4",
                    "start": 11
                }
            ]
        }
    ]
}

The movie resulting of rendering the previous JSON is:

The problem with this approach is that we need to know in advance the length of the first video, so we can specify it in the start property in line 12. Another downside is that we can not apply a video transition between the two videos.

Two scenes, one video in each scene

{
    "project": "tutorial",
    "resolution": "full-hd",
    "scenes": [
        {
            "comment": "Scene #1",
            "elements": [
                {
                    "type": "video",
                    "src": "https:\/\/assets.json2video.com\/assets\/videos\/beach-01.mp4"
                }
            ]
        },
        {
            "comment": "Scene #2",
            "elements": [
                {
                    "type": "video",
                    "src": "https:\/\/assets.json2video.com\/assets\/videos\/beach-02.mp4"
                }
            ]
        }
    ]
}

The video output of the JSON above is exactly the same than in the example 2.1, but with this approach we do not need to know the duration of the first video beforehand because the duration of each scene is the calculated duration of all the elements contained in it, and the scenes are chained one after the other.

Additionally, using this approach we can take advantage of the scene transitions, something not available for the video elements.

Three videos with transitions

In this example, we will create a movie chaining 3 videos and adding transitions between the videos. To achieve this, we will use 3 scenes, one video in each, applying different transitions between Scene #1 - Scene #2, and between Scene #2 - Scene #3.

{
    "project": "tutorial",
    "resolution": "full-hd",
    "scenes": [
        {
            "comment": "Scene #1",
            "elements": [
                {
                    "type": "video",
                    "src": "https:\/\/assets.json2video.com\/assets\/videos\/beach-01.mp4"
                }
            ]
        },
        {
            "comment": "Scene #2",
            "transition": {
                "style": "circleopen",
                "duration": 1.5
            },
            "elements": [
                {
                    "type": "video",
                    "src": "https:\/\/assets.json2video.com\/assets\/videos\/beach-02.mp4"
                }
            ]
        },
        {
            "comment": "Scene #3",
            "transition": {
                "style": "fade",
                "duration": 2
            },
            "elements": [
                {
                    "type": "video",
                    "src": "https:\/\/assets.json2video.com\/assets\/videos\/beach-03.mp4"
                }
            ]
        }
    ]
}

Again, by using scenes instead of chaining videos, we don't need to know the length of the source videos.

Video wall

The following example shows how to create a video wall that plays 4 videos side by side. To do this, we add the 4 videos in the same scene, scale them down and position them in different coordinates. Finally, we trim the scene to 10 seconds, so the movie will also be 10 seconds long.

Unlike the other examples, in this case we will generate the movie in high quality using the setting "quality": "high" in the Movie object.

{
    "project": "tutorial",
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "duration": 10,
            "elements": [
                {
                    "type": "video",
                    "src": "https:\/\/assets.json2video.com\/assets\/videos\/beach-01.mp4",
                    "scale": {
                        "width": 960,
                        "height": 540
                    }
                },
                {
                    "type": "video",
                    "src": "https:\/\/assets.json2video.com\/assets\/videos\/beach-02.mp4",
                    "scale": {
                        "width": 960,
                        "height": 540
                    },
                    "x": 960
                },
                {
                    "type": "video",
                    "src": "https:\/\/assets.json2video.com\/assets\/videos\/beach-03.mp4",
                    "scale": {
                        "width": 960,
                        "height": 540
                    },
                    "y": 540
                },
                {
                    "type": "video",
                    "src": "https:\/\/assets.json2video.com\/assets\/videos\/beach-04.mp4",
                    "scale": {
                        "width": 960,
                        "height": 540
                    },
                    "x": 960,
                    "y": 540
                }
            ]
        }
    ]
}

The scale property allows us to scale down to half the width (1920/2=960) and half the height (1080/2=540), and the x and y properties sets the video element in the correct position. A missing or omitted x or y implies a value of 0.