Hi,
I am trying to include a html slide to my video. I need to generate the first slide of the video as below
how can i achieve this ? any help would be much appreciated
regards
By using the image and HTML asset you should be able to achieve what you’re looking to do. You can switch out the placeholder urls below, position the elements to your liking and change up the CSS to style it the way you want.
{
"timeline": {
"background": "#FFFFFF",
"fonts": [
{
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/OpenSans-Regular.ttf"
}
],
"tracks": [
{
"clips": [
{
"asset": {
"type": "image",
"src": "https://via.placeholder.com/100"
},
"start": 0,
"length": 5,
"fit": "none",
"offset": {
"x": -0.05,
"y": -0.15
}
},
{
"asset": {
"type": "image",
"src": "https://via.placeholder.com/100"
},
"start": 0,
"length": 5,
"fit": "none",
"offset": {
"x": 0.05,
"y": -0.15
}
}
]
},
{
"clips": [
{
"asset": {
"type": "html",
"html": "<p>THIS VIDEO IS BROUGHT TO YOU BY</p>",
"css": "p { font-family: 'Open Sans'; color: #000000; font-size: 42px; text-align: center; } b { color: #21bcb9; font-weight: normal; } u { color: #e784ff; text-decoration: none; }",
"width": 800,
"height": 72
},
"start": 0,
"length": 5,
"offset": {
"y": 0.3
}
},
{
"asset": {
"type": "html",
"html": "<p>JOHN DOE</p>",
"css": "p { font-family: 'Open Sans'; color: #000000; font-size: 42px; text-align: center; } b { color: #21bcb9; font-weight: normal; } u { color: #e784ff; text-decoration: none; }",
"width": 600,
"height": 72
},
"start": 0,
"length": 5,
"offset": {
"y": 0.2
}
},
{
"asset": {
"type": "html",
"html": "<p>TEL: 1234567890</p>",
"css": "p { font-family: 'Open Sans'; color: #000000; font-size: 42px; text-align: center; } b { color: #21bcb9; font-weight: normal; } u { color: #e784ff; text-decoration: none; }",
"width": 600,
"height": 72
},
"start": 0,
"length": 5,
"offset": {
"y": 0.1
}
},
{
"asset": {
"type": "html",
"html": "<p>johndoe123@gmail.com</p>",
"css": "p { font-family: 'Open Sans'; color: #000000; font-size: 42px; text-align: center; } b { color: #21bcb9; font-weight: normal; } u { color: #e784ff; text-decoration: none; }",
"width": 600,
"height": 72
},
"start": 0,
"length": 5
}
]
},
{
"clips": [
{
"asset": {
"type": "html",
"html": "<p>Produced by JCO.ltd</p>",
"css": "p { font-family: 'Open Sans'; color: #000000; font-size: 42px; text-align: center; } b { color: #21bcb9; font-weight: normal; } u { color: #e784ff; text-decoration: none; }",
"width": 600,
"height": 72
},
"start": 0,
"length": 5,
"offset": {
"y": -0.3
}
}
]
}
]
},
"output": {
"format": "mp4",
"resolution": "hd"
}
}
1 Like