Question / Help How to show video runtime as an overlay streaming?

Chromatic

New Member
Hi,

I'm not sure if this is a process of OBS, or the VLC software I'm using to play the media.. or perhaps yet another 3rd party program I need to add. However, I've searched the internet and it seems to elude me.

I stream to JTV, but I'm sure this applies to any such stream.

I've seen many people streaming television shows, movies, and so on that will have the name of the show/movie displayed then next to it the runtime. Generally this is placed in a corner of the stream in a smaller font.

It would say something like this:

Season 1-Episode 5 23:43/45:00mins

Essentially the point is to give the viewers the information of what they are watching, and how far into the show they are (ie: the runtime that counts up to the total video time).

With VLC I can only find a function to put an unchanging line of text.. which doesn't help. In OBS I find no option..

If it is an option or add-on of OBS please let me know.

And, if it just isn't a part of OBS, would you be so kind as to tell me how to do it? Or at least point me in the right direction?

I greatly appreciate it,
 

Jack0r

The Helping Squad
I had to check it quickly but using Media Player Classic and the Browser Plugin its actually easy to do.

For MPC, activate the WebInterface, (allow localhost only), activate "Serve pages from", now I entered E:\test, you might wanna change this to your liking. The important part is that you deploy to the same folder you chose with the browse button.
After deploying open this folder in your Windows Explorer and if all went correct, MPC saved its webinterface files there.
Now we want to edit one or two things in the "info.html" file, thats the one we will be using later.
Code:
<html>
	<head>
		<title>MPC-HC Web Server - Info</title>
		<meta http-equiv="refresh" content="1">
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<link rel="stylesheet" type="text/css" href="default.css">
		<link rel="shortcut icon" href="favicon.ico">
	</head>
	<body>
		<p id="mpchc_np">[file] &bull; [position]/[duration]</p>
[debug]
	</body>
</html>
Refresh = 1 makes your page automatically refresh each second, so the timer will work in OBS. And I changed the output line a bit, you can of course change it as you want.

Then we have to install the Browserplugin: http://obsproject.com/forum/viewtopic.php?f=11&t=3284
The URL has to be "http://localhost:13579/info.html" (without ""), test around with width and height, 1200x200 worked good for me, and I used the following CSS codes:
Code:
::-webkit-scrollbar { visibility: hidden; }
body { background-color: rgba(0, 0, 0, 0); 
text-shadow:2px 1px 1px rgba(5,255,13,1);
font-weight:normal;
text-decoration:underline overline;
color:#FFFFFF;
font-size:50px !important;
text-align:left;
font-family:impact, sans-serif;
}
Now thats it, and thats how it looks with my (not so good looking) css style ;):
insTyzCry9zRv.PNG

So better tweak the css code a bit!
Greetings
 

Chromatic

New Member
Thanks for the detailed reply.

I'd really like to stick with VLC player if possible. It has a scripting system that seems fairly easy for anyone familiar with code.

Perhaps you can help out -- I have found a simple script for VLC player that displays the time as I want.. but doesn't display the filename.. I figured the filename must be a general variable that can be pulled.

This script just needs someway to modify the font to be much smaller -- and needs the ability to place itself at the very top corner left of the stream (at 0,0) not where the video begins (as some videos, as the one you pictured, don't stretch all the way horizontally..) and this script would start the time where the actual beginning of the video was, not at the real edge of the screen.

Hope that makes sense.

Here is the code -- maybe it seems simple enough to you to figure out how to make the changes I need :

1) Have it display filename (it currently only displays time)
2) A way I can adjust font size in script, or by manually adjusting the code.
3) Having it position itself at the true edge of the screen.

Here's the code:

Code:
-- time.lua -- VLC extension --
--[[
INSTALLATION:
Put the file in the VLC subdir /lua/extensions, by default:
* Windows (all users): %ProgramFiles%\VideoLAN\VLC\lua\extensions\
* Windows (current user): %APPDATA%\VLC\lua\extensions\
* Linux (all users): /usr/share/vlc/lua/extensions/
* Linux (current user): ~/.local/share/vlc/lua/extensions/
* Mac OS X (all users): /Applications/VLC.app/Contents/MacOS/share/lua/extensions/
(create directories if they don't exist)
Restart the VLC.
Then you simply use the extension by going to the "View" menu and selecting it.
--]]

-- defaults
time_format = "[T]"  -- [T]-ime, [O]-ver, [E]-lapsed, [D]-uration, [R]-remaining
osd_position = "top-right"
-- predefined time format patterns
time_formats = {"[T]", "[T] >> [O]", "[E] / [D]", "-[R] / [D]", "-[R] ([T])"}

function descriptor()
	return {
		title = "Time";
		version = "1.0";
		author = "lubozle";
		url = 'http://addons.videolan.org/content/show.php?content=149618';
		shortdesc = "Time displayer";
		description = "<div style=\"background-color:lightgreen;\"><b>Time</b> is VLC extension (extension script \"time.lua\") that displays running time on the screen in a playing video.</div>";
		capabilities = {"input-listener"}
	}
end
function activate()
	input_callback("add")
	create_dialog()
end
function deactivate()
	input_callback("del")
end
function close()
	vlc.deactivate()
end
function input_changed()
	input_callback("toggle")
end

callback=false
function input_callback(action)  -- action=add/del/toggle
	if (action=="toggle" and callback==false) then action="add"
	elseif (action=="toggle" and callback==true) then action="del" end

	local input = vlc.object.input()
	if input and callback==false and action=="add" then
		callback=true
		vlc.var.add_callback(input, "intf-event", input_events_handler, "Hello world!")
	elseif input and callback==true and action=="del" then
		callback=false
		vlc.var.del_callback(input, "intf-event", input_events_handler, "Hello world!")
	end
end

t=0
function input_events_handler(var, old, new, data)
  tt=os.clock()
  if tt>=(t+.5) then -- OSD update approximately 2 times per second instead of 4-5 times
	t=tt

	--vlc.osd.message(tostring(var)..'\n'..tostring(old)..'\n'..tostring(new)..'\n'..tostring(data))
	--local systemTime = os.date("%H:%M:%S") -- reads and formats OS time
	if time_format~=nil or time_format~="" then
		osd_output = decode_time_format()
		vlc.osd.message(osd_output, channel1, osd_position) -- displays time on the screen in a video
	end
	--vlc.msg.info(systemTime)

  end
end

function decode_time_format()
	local input = vlc.object.input()

	local elapsed_time = vlc.var.get(input, "time")
	--local duration = vlc.var.get(input, "length")
	local duration = vlc.input.item():duration()

	local systemHour = os.date("%H")
	local systemMinute = os.date("%M")
	local systemSecond = os.date("%S")

	local elapsedHour = math.floor(elapsed_time / 3600)
	local elapsedMinute = math.floor((elapsed_time % 3600) / 60)
	local elapsedSecond = math.floor(elapsed_time % 60)

	if duration>0 then
		local durationHour = math.floor(duration / 3600)
		local durationMinute = math.floor((duration % 3600) / 60)
		local durationSecond = math.floor(duration % 60)

		remaining_time = duration - elapsed_time
		local remainingHour = math.floor(remaining_time / 3600)
		local remainingMinute = math.floor((remaining_time % 3600) / 60)
		local remainingSecond = math.floor(remaining_time % 60)

		local endingSecond = math.floor((systemSecond + remainingSecond) % 60)
		local endingMinute = math.floor(((systemSecond + remainingSecond) / 60 + (systemMinute + remainingMinute)) % 60)
		local endingHour = math.floor((((systemSecond + remainingSecond) / 60 + (systemMinute + remainingMinute)) / 60 + systemHour + remainingHour) % 24)

		duration = string.format("%02d:%02d:%02d", durationHour, durationMinute, durationSecond)
		remaining_time = string.format("%02d:%02d:%02d", remainingHour, remainingMinute, remainingSecond)
		ending_time = string.format("%02d:%02d:%02d", endingHour, endingMinute, endingSecond)
	else
		duration = "--:--"
		remaining_time = "--:--"
		ending_time = "--:--"
	end
	local elapsed_time = string.format("%02d:%02d:%02d", elapsedHour, elapsedMinute, elapsedSecond)
	--local system_time = os.date("%H:%M:%S")
	local system_time = systemHour..":"..systemMinute..":"..systemSecond

	local osd_output = string.gsub(time_format, "%[E%]", elapsed_time)
	local osd_output = string.gsub(osd_output, "%[T%]", system_time)
	local osd_output = string.gsub(osd_output, "%[D%]", duration)
	local osd_output = string.gsub(osd_output, "%[R%]", remaining_time)
	local osd_output = string.gsub(osd_output, "%[O%]", ending_time)

	return osd_output	
end

function create_dialog()
	w = vlc.dialog("Time")
	--w1 = w:add_label("Time format: \\ Position:",1,1,2,1)
	w1 = w:add_label("<b>Time format:</b>",1,1,1,1)
	w01 = w:add_label("<b>\\ Position:</b>",2,1,1,1)
	w2 = w:add_dropdown(3,1,1,1)
		w2:add_value("top-left", 1)
		w2:add_value("top", 2)
		w2:add_value("top-right", 3)
		w2:add_value("left", 4)
		w2:add_value("center", 5)
		w2:add_value("right", 6)
		w2:add_value("bottom-left", 7)
		w2:add_value("bottom", 8)
		w2:add_value("bottom-right", 9)
			w2:set_text(osd_position)
	w3 = w:add_text_input(time_format,1,2,3,1)
	w4 = w:add_dropdown(1,3,2,1)
		w4:add_value("", 1)
		for i=1,#time_formats do
			w4:add_value(time_formats[i], i+1)
		end
			w4:set_text("")
	w10 = w:add_button("START", click_START,1,4,1,1)
	w11 = w:add_button("STOP", click_STOP,2,4,1,1)
	w12 = w:add_button(">> PUT^IN", click_PUTIN,3,3,1,1)
	w13 = w:add_button("HELP", click_HELP,3,4,1,1)
end
function click_STOP()
	time_format = ""
end
function click_START()
	time_format = w3:get_text()
	osd_position = w2:get_text()
end
function click_PUTIN()
	w3:set_text(w4:get_text())
	w4:set_text("")
	w:update()
end
function click_HELP()
	local help_text=""
.."<div style=\"background-color:lightgreen;\"><b>Time</b> is VLC extension (extension script \"time.lua\") that displays running time on the screen in a playing video.</div>"
.."<hr />"
.."<center><b><a style=\"background-color:#FF7FAA;\">&nbsp;Instructions&nbsp;</a></b></center>"
.."<b><a style=\"background-color:#FF7FAA;\">1.)</a></b> Choose a desired <b><a style=\"background-color:lightblue;\">position</a></b> from the drop-down menu.<br />"
.."<b><a style=\"background-color:#FF7FAA;\">2.)</a></b> In <b><a style=\"background-color:lightblue;\">time format</a></b> input field write some time pattern containing time tags. The list of available tags is below.<br />"
.."You can use predefined pattern from the drop-down menu. Choose one and put it in the time format field by pressing <b><nobr><a style=\"background-color:silver;\">[ >> PUT^IN ]</a></nobr></b> button.<br />"
.."<b><a style=\"background-color:#FF7FAA;\">3.)</a></b> Press <b><nobr><a style=\"background-color:silver;\">[ START ]</a></nobr></b> button for changes to take effect.<br /><br />"
.."<b>Following <a style=\"background-color:#FF7FAA;\">time tags</a> can be used within time format pattern:</b>"
.."<div style=\"background-color:#FF7FAA;\">"
.."<b>&nbsp;[T]</b> - actual system time;<br />"
.."<b>&nbsp;[O]</b> - time when video will be over;<br />"
.."<b>&nbsp;[E]</b> - elapsed time (current playback position);<br />"
.."<b>&nbsp;[R]</b> - remaining time;<br />"
.."<b>&nbsp;[D]</b> - duration (length);</div>"
.." > They are automatically replaced with actual time values on the screen.<br />"
.." > If duration value is not available then [D], [R], [O] is replaced with \"--:--\".<br />"
.." > You can also use some short descriptions or put some delimiters among time tags.<br />"
.."<div style=\"background-color:#FFFF7F;\"><b>OSD text format</b> can be customised within internal VLC settings:<br />"
.."Tools > Preferences > (Show settings - Simple) > Subtitles / OSD<br />"
.."Tools > Preferences > (Show settings - All) > +Video > +Subtitles / OSD > -Text renderer<br />"
.."Do not forget to Save and restart VLC for changes to take effect!</div>"
.."<hr />"
.."<div style=\"background-color:lightblue;\">"
.."<b>Homepage:</b> <a href=\"http://forum.videolan.org/viewtopic.php?f=29&t=97639#p332364\">VLC extension: Time</a><br />"
.."<b>Forum:</b> <a href=\"http://forum.videolan.org/viewforum.php?f=29\">Scripting VLC in Lua</a><br />"
.."Please, visit us and bring some new ideas.<br />"
.."Learn how to write own scripts and share them with us.<br />"
.."Help to build happy VLC community :o)</div>"
.."<pre>     www<br />"
.."    (. .)<br />"
.."-ooo-(_)-ooo-</pre>"
	w5=w:add_html(help_text,1,5,3,1)
	w14 = w:add_button("HELP (x)", click_HELPx,3,4,1,1)
	w:update()
end
function click_HELPx()
	w:del_widget(w5)
	w:del_widget(w14)
	w5=nil
	w14=nil
	w:update()
end

Any ideas?

Thanks so much,
 

Jack0r

The Helping Squad
Hmm, sorry I checked VLC quickly, but I couldnt even find out where to use your script properly, maybe i have the wrong vlc version? So I´ll have to leave this to someone with more scripting knowledge!
 

Chromatic

New Member
For future people who search about this issue ---

I figured it out after messing with much code and going the hard route.

VLC has inherit object variables built into the client -- So as a shot in the dark I tried all $X variable.. $A through $Z -- I found that the filename, elapsed time and duration where among them! Which made the process much, much easier and requires no code or scripts -- just some settings adjustments in VLC and the addition of these variables in an Overlay effect box in VLC.

For future reference of others who are looking for the same ability in VLC without the headache I went to:

To add Filename + Playtime/Duration anywhere on your video -- go to:

Tools -- Preferences -- (all) -- >Marquee --> Now in the text box here is the key:

Enter the following: $N $T/$D --- These three variables are the key,.. the N is the a built in variable for filename,.. T = Current time elapsed,.. and D = Duration of the video file. You can format it anyway you like.

Further, I recommend adjusting the font size and color (if you wish to use something other than white) here. I personally used Font size,pixels: 10 -- (As I'm streaming, and want it non obtrusive).

Also, adjusting the Refresh period in ms is something to adjust if you wish. I changed Refresh period in ms from: 1000 to 5000. Thus, my counter updates every 5 seconds, makes it a bit less distracting while watching video. You can leave it at default 1000ms =1 sec updates.. or go higher.

Now Save.

Lastly go to Tools --> Effects and Filters -- > Video Effects -- > Now in the bottom right corner you will see "Add Text" -- Add your $N $T/$D here, and select your position (I used bottom-right).

** Note: The variables $N, $T and $D need the capitalized!

** Note: -- If you have it at the bottom right, or against an edge like I do -- Given the differing sizes of filenames,.. it will occasionally cause a shaking effect as it counts down. To remedy this you simply make sure you have a *space* after your last variable. In my case a space after $D -- This gives it some literal wiggle room, and no longer has this occasional shaking on some lengths of filenames.

This seems like a much easier solution than some scripts I've seen written just for time and so on,.. and works on the fly without a restart of VLC.

Take care,
 

Chromatic

New Member
I just wanted to update this -- I don't use this method myself I have since written code to take over for VLC's poor management of showing title, time etc.. But if you want to use this and it's not working. It's probably because you are using too "new" of a VLC version.

I would recommend downgrading to VLC version 2.0 (or somewhere in that range... go much further up and these functions no longer work properly.)
 
Top