Resource icon

Free Lower thirds in HTML/CSS

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...
Read more about this resource...
 

vjccruz

New Member
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
 

BrynGerard

New Member
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

New Member
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.
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)
 

DerHusky

New Member
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
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. :)
 

vjccruz

New Member
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
 

DerHusky

New Member
  • Add new script, select the lower-thirds-read-file.lua file
  • Select the new script lower-thirds-read-file.lua
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?
 

mosyria

New Member
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?
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
 

w32doido

New Member
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 ...

I may be talking nonsense, but I found the possibility interesting.
Regards...
 

vjccruz

New Member
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
Sorry for the delay, but already fixed the problem.

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
Problem resolved.
 
Top