Info

Lower thirds for OBS Studio using HTML, Javascript and CSS.

This project is based on After Effects template by Amaksi http://videohive.net/item/lower-thirds/10338608, and Matt Chestnut https://codepen.io/mattchestnut/pen/dMrONe.

More information can be found on https://obs.infor-r.com.

OBS Script

lower-thirds-read-file.lua

Can load a file with a list of texts to use on lower thirds.

Steps to install and configure:

Download lower-thirds-read-file.lua
Open OBS Studio
If necessary, create a new scene
Add new source of type Browser with name "Lower Thirds"
Go to menu Tools > Scripts
Add new script, select the lower-thirds-read-file.lua file
Select the new script lower-thirds-read-file.lua
- Parameters:
  - Browser name: select from list the browser source or write the name "Lower Thirds"
  - File: select the file with titles (can use the example: lower-thirds-read-file_sample.txt)
  - If necessary, change the default template, color1 and color2
Click "next line" for read the next line from file and update the url of browser source

Each file line has 3 columns separated by a |:

template id
text of line 1
text of line 2

File example:

Line 1: 5|Frederic|Colins
Line 2: 2|John Doe|Motion Designer