How can I create subtitles using the HtmlAsset instead of the TitleAsset with style “subtitles”?
You can use the HTML asset to create a large variety of different subtitle styles. You can find two example styles below:
Fixed width
You can find this style on the templates page.
Variable width
This subtitle style uses a variable width in a similar way to how the subtitle title asset works.
{
"timeline": {
"background": "#000000",
"fonts": [
{
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/fonts/OpenSans-Regular.ttf"
}
],
"tracks": [
{
"clips": [
{
"asset": {
"type": "html",
"html": "<p><span class='background'>Hi, my name's Scott Ko, as an entrepreneur,</span></p>",
"css": ".background { background-color: #000000; } p { width: 100%; font-family: \"Open Sans\"; font-size: 24px; color: #ffffff; }",
"position": "bottom"
},
"start": 0.54,
"length": 2.48,
"position": "bottom",
"offset": {
"x": 0,
"y": 0.1
}
},
{
"asset": {
"type": "html",
"html": "<p><span class='background'>I cannot overstate how important it is these days to use video as a tool to</span></p>",
"css": ".background { background-color: #000000; } p { width: 100%; font-family: \"Open Sans\"; font-size: 24px; color: #ffffff; }",
"position": "bottom"
},
"start": 3.18,
"length": 4.399,
"position": "bottom",
"offset": {
"x": 0,
"y": 0.1
}
}
]
},
{
"clips": [
{
"asset": {
"type": "video",
"src": "https://github.com/shotstack/test-media/raw/main/captioning/scott-ko.mp4",
"volume": 1
},
"start": 0,
"length": 5
}
]
}
]
},
"output": {
"format": "mp4",
"resolution": "sd"
}
}