What if I told you a specific feature I wanted made for OBS and StreamLabs OBS for a LONG
time was implemented recently, and only required a HTML file?
Using HTML files as sources in OBS Studio unlocks a ton of potential functionality that
I think we're only scratching the surface of so far, and I think the next couple years
will see an explosion of tools built this way.
I'm EposVox, the Stream Professor, and I've made countless tutorials on streaming and
OBS Studio over the years, and we're tackling a lot more cool creative projects within OBS
coming up - so hit the subscribe and notification buttons to stay informed.
Today we're taking a look at a free resource released by one of our recurring sponsors,
Nerd or Die.
Shoutout to them for sponsoring this video.
This is called Media Looper.
It takes any combination of WEBM, MP4, PNG, JPEG, GIF and SVG graphics and clips and loops
them in your streaming software.
It supports any streaming program that can load a Browser source - including OBS Studio,
StreamLabs OBS, and XSplit.
Ever since seeing Kitboga's minimal lower-thirds that alternate a tiny little badge on his
stream to showcase his social media profile, I've wanted a plugin or script for OBS to
do this exact thing - even asking the people at Nerd or Die if they had found one - but
there wasn't any sign of one being publicly available.
So they got to work.
To do this manually would require setting up a timed loop multi-action on a stream deck
and remembering to press it each reset, and just a whole mess.
To set this up, download the Media Looper package from their website.
This gives you a zip file.
Extract it to a local drive in your system - wherever you keep your stream assets.
Open up the folder.
The Media folder comes with some default lower-third assets already in there, as an example.
You can find more freebies in the "PSD Template & Defaults" folder - where you can use the
ones they've already made, or edit the PSD to make your own - or just bring in your own
assets, of course.
I used their "Ultimate Social Media Pop-ups Package" for this demo - which gives you project
files to render out video versions of the freebies they provided here, which look a
little bit better, IMO.
Place your graphics in the media folder, deleting the default ones if desired, and give them
numbered names based on the order you want them to show.
My big complaint about the only real limitation here is you can't have it shuffle the order.
I would like this to display highlights clips or something on a Be Right Back screen, but
currently they have to play in order.
Not a huge deal!
You can mix images, gifs, and video clips, and different formats.
Media Looper doesn't care.
For video clips, they just play for the duration of the video clip.
Images are displayed for 5 seconds by default, but you can change that by editing the image
duration text file in the Options folder.
Once your files are ready, you have two different philosophies for how they display: Either
a set delay between each file being played, or to loop straight through each file and
*then* have a delay before starting the loop again.
That way the graphics aren't just showing nonstop - though there are 0 delay choices
if you do want that.
In the "Loops" folder, there's 2 subfolders, one for delay between each file being played
and one for a delay between looping all the files.
Choose which one you want, then choose what delay you want.
The built-in options are 0 delay, 5 seconds, 10 seconds, 30 seconds, 1 minute, 5 minutes,
10 minutes, or 30 minutes - though you can edit the HTML file and make your own custom
delay if you'd like.
From there, we just need to add this HTML file to OBS or your streaming program.
If you're NOT running OBS as admin you can just drag the HTML file onto your canvas and
it will add it - otherwise add a new browser source, browse and select your HTML file with
delay of your choice, and set the resolution based on how big you want it to be.
Drag to where you'd like on your scene, lock it in place, and enjoy awesome looping graphics!
If you want more sick graphics for your stream, be sure to check out everything else Nerd
or Die has on offer.
Their new Boosted alerts pack can help encourage viewers to get a sub train going, and they
have full layouts packages to fit any style.
They're high quality, customizable, and have one-click setup in OBS Studio, StreamLabs
OBS, and StreamElements.
Check them out at EposVox.gg/NerdorDie and use coupon code EPOSVOX to save 15% at checkout.
What I really like about the Media Looper is just how easy it is to use, but also how
easy it is to update graphics.
At any point in time you can slot in new graphics - such as for merch or upcoming events - without
changing anything but the media files themselves.
Plus, you can use them for lots of different graphics, not just lower-thirds.
I'll be using it to showcase highlights clips and such on my streams over at twitch.tv/EposVox
and here on YouTube.
Hit the like button if you enjoyed, get subscribed for more tech education & Stream Guides.
Remember: Be Kind, Rewind.