Resource icon

Free Lower thirds in HTML/CSS

Overview Reviews (3) Discussion
V

vjccruz

New Member
vjccruz submitted a new resource:

Lower thirds in HTML/CSS - Lower thirds for OBS Studio using HTML, Javascript and CSS

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.

Can customize the lower thirds on url via parameters. For example...
Click to expand...

Read more about this resource...
 
No.

You need a script to load the content of file.

I write a script example: lower-thirds-read-file.lua

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
 
Hiya, this looks really well done! Unfortunately, in the instructions you say "
  • Open OBS Studio
  • Add new source of type Browser
  • URL"
I don't see an option for that. I am running OBS 28.05 on Linux. How do I add a new source of type Browser. The closest I have is a Window with a browser in it but that does not have the option to change the parameters you show. Sorry for the Nooby question if this is a basic lack of unerstanding but I don't see an icon of a globe which I guess represents the web. is this a plugin I need to add?

Thanks for any help.
 
BrynGerard said:
Hiya, this looks really well done! Unfortunately, in the instructions you say "
  • Open OBS Studio
  • Add new source of type Browser
  • URL"
I don't see an option for that. I am running OBS 28.05 on Linux. How do I add a new source of type Browser. The closest I have is a Window with a browser in it but that does not have the option to change the parameters you show. Sorry for the Nooby question if this is a basic lack of unerstanding but I don't see an icon of a globe which I guess represents the web. is this a plugin I need to add?

Thanks for any help.
Click to expand...
Apparently the 'Browser Source' has not been included in the latest release for Ubuntu 18.04 :( which is a real bummer and I'm left without words :O)
 
vjccruz said:
No.

You need a script to load the content of file.

I write a script example: lower-thirds-read-file.lua

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
Click to expand...

I had the same question like him. I found the file in the folder, but I am just a bit stupid and don't know how I can connect a textfile with this script, so that it can be used. Maybe you could help me? That would be great. :)
 
I added a new section on github page. I hope it helps.

Steps to install and configure the script:
  • 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
 
vjccruz said:
  • Add new script, select the lower-thirds-read-file.lua file
  • Select the new script lower-thirds-read-file.lua
Click to expand...

At this point I get this message and error:

[lower-thirds-read-file.lua] Error loading file: ...wer-thirds-obs-master/scripts/lower-thirds-read-file.lua:200: unfinished string near '"Load text lines from a file. Hotkeys can be set for next/previous line and to the reset line position. File template:

I fixed it by my own. Only a small hint. But it seems to be a bit that it has bugs.

One question: Is it possible that my mods in the chat can do this lower thirds? I have a command where they can update a textfile, but will it be possible that after updating the textfile, the lower third will be visible in OBS? So, that I don't have to do anything?
 
DerHusky said:
At this point I get this message and error:

[lower-thirds-read-file.lua] Error loading file: ...wer-thirds-obs-master/scripts/lower-thirds-read-file.lua:200: unfinished string near '"Load text lines from a file. Hotkeys can be set for next/previous line and to the reset line position. File template:

I fixed it by my own. Only a small hint. But it seems to be a bit that it has bugs.

One question: Is it possible that my mods in the chat can do this lower thirds? I have a command where they can update a textfile, but will it be possible that after updating the textfile, the lower third will be visible in OBS? So, that I don't have to do anything?
Click to expand...

I got the following error can you help me to fix it
[lower-thirds-read-file.lua] Error loading file: ...udio/data/obs-scripting/64bit/lower-thirds-read-file.lua:7: unexpected symbol near '<'


Thanks in advance
 
mosyria said:
I got the following error can you help me to fix it
[lower-thirds-read-file.lua] Error loading file: ...udio/data/obs-scripting/64bit/lower-thirds-read-file.lua:7: unexpected symbol near '<'


Thanks in advance
Click to expand...
Fixed. Go to https://www.tutorialspoint.com/execute_lua_online.php, paste the file content and execute. You´ll get an error in line 200

Captura de pantalla 2020-05-11 a las 18.15.59.png

patch it doing this:
Captura de pantalla 2020-05-11 a las 18.18.18.png

Done!

Captura de pantalla 2020-05-11 a las 18.19.10.png
 
I was visualizing another Tool. Maybe you can share the knowledge, and try to develop a system that reads the comments of a YouTube live and show on OBS. When you click on an "update" button and a table with recent comments appears, save or modify the browser address for some query, just as you developed the lower third.

Based on the program ...

Free - Beta Simple Youtube Title Reader

Hello OBS Comunity I introduce you to a new tool of mine . This tool reads the title of the browser that called her can play a song and the tool invites it to a text file . In OBS as usual simply select text file . In YouTube video everything is...
obsproject.com

I may be talking nonsense, but I found the possibility interesting.
Regards...
 
mosyria said:
I got the following error can you help me to fix it
[lower-thirds-read-file.lua] Error loading file: ...udio/data/obs-scripting/64bit/lower-thirds-read-file.lua:7: unexpected symbol near '<'
Thanks in advance
Click to expand...
Sorry for the delay, but already fixed the problem.

GameeMotion said:
maybe i'm dumb but.. i have no idea how the heck i could change the colored line/bar in id 4.. it's still default
Click to expand...
Problem resolved.
 
You must log in or register to reply here.
Back
Top