Question / Help Browser Source doesn't use all the html

G

Giblix

New Member
Hi,

In order to prevent my stream screen getting bogged up with tons of overlay messages I've written a webpage. It is fairly simple HTML with some CSS for animated effects and markups. All of the code seems to work fine. The image slides in and folds out with the accompanying content. However part of the code states that this action needs to refresh and thus repeat itself at steady intervals. This however doesn't happen.

<meta http-equiv="refresh" content="14">

That line is from the test document. So it would repeat about 3-4 seconds after the first appearance. When I open the file in any webbrowser it keeps repeating non-stop. In the latest OBS Studio, where I added this as Browser Source >> Local File... it only happens once. It does reset if I switch scenes and return to the scene including the Browser Source.

What can I do too make this auto refresh happen?

greets,
 
An idea:

Copy file in Dropbox Public directory (Providing you se Dropbox)
Copy public Dropbox link and use it in OBS.

Maybe it works, maybe not.
 
I think it will have the same possible result.

Maybe it works or maybe not. (About refreshing in OBS, I mean)

Try!
 
Try adding this code:

<head>
<script>
function reload(){
location.href=location.href
}
setInterval('reload()',14000)
</script>
</head>
 
sorry Brito. Didn't have a chance too try. Swamped at work :S

As a quick question.
Location.Href = Location.href
the second 1 needs to be replaced by my file location?
 
well the webbrowser doesn't need the reload. when i load the page in there everything works.
however when i use BrowserSource in OBS...that does NOT do the reloads.

by the way. the suggested code didn't change anything :(
 
@Xaymar Maybe you have to check this. It seems browser source has a little bug.
Thank you.

(I think you are in charge of Browser Source in Mantis. Isn´t it?)
 
the full code i'm using, which works in Chrome. But only shows once on stream, but doesn't repeat when using the browser source...

I've written it in notepad++ and saved it locally as an HTML file. in OBS Studio 17.0.0 I added a Browser Source and had it use the localized file.

Hope this gives usefull feedback to help find a solution.

<html>
<head>
<title>Mijn stream slide ins</title>
<meta http-equiv="refresh" content="600">
<style>
@font-face {
font-family: 'Dolce Vita';
src: url('fonts/Dolce Vita.ttf');
}
#reminderContainer {
width: 0px;
height: 0px;
background: #769272;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
color: white;
font-family: 'Dolce Vita';
-webkit-box-shadow: 0px 0px 20px #4d6849;
-webkit-animation: animateReminder 10s 24s 1;
}
#reminderHeader {
width: 300px;
height: 26px;
background: #4d6849;
position: relative;
overflow: hidden;
text-align: center;
font-size: 24px;
}
#reminderContent {
width: 300px;
height: 94px;
background: #769272;
position: relative;
overflow: hidden;
color: white;
}
#twitterLogo {
width: 90px;
height: 90px;
float: left;
}

@-webkit-keyframes animateReminder {
0%, 100% {
width: 0px;
height: 24px;
}
20%, 80% {
width: 300px;
height: 24px;
}
30%, 70% {
width: 300px;
height: 120px;
}
}
</style>
</head>
<body>
<div id="reminderContainer">
<div id="reminderHeader">
<span>Follow</span>
</div>

<div id="reminderContent">

<div="reminderContentText">
<span>
<br>
<font size="5">
If you're having a good time<br>
then love tap that button
</font>
</span>
</div>
</div>
</div>
</body>
</html>
 
Tested both OBS 32 and 64 bits.

Shows message first time, but never again.
Chrome, Edge, and Firefox work fine
Explorer does not show either the first time
 
Change the iterations value at the end of your "-webkit-animation" line from "1" to "infinite". You'll need to adjust the timings so that the animation includes the pause you want to include.
 
Saved as test.html
@Giblix change test.html with your file name


Load, wait 20 sec and show 10 sec animation
30 seconds refresh

So to refresh every 5 minutes ---- mistake: this is 2 minutes 30 seconds
setTimeout("location.href = 'test.html';",150000);


-webkit-animation-duration: 10s;
-webkit-animation-delay: 140s;

EDIT:
============
10 Minutes

setTimeout("location.href = 'test.html';",600000);


-webkit-animation-duration: 10s;
-webkit-animation-delay: 590s;
==================




=============
<html>
<head>
<title>Mijn stream slide ins</title>
<script type="text/JavaScript">
setTimeout("location.href = 'test.html';",30000);
</script>
<style>
@font-face {
font-family: 'Dolce Vita';
src: url('fonts/Dolce Vita.ttf');
}
#reminderContainer {
width: 0px;
height: 0px;
background: #769272;
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
color: white;
font-family: 'Dolce Vita';
-webkit-box-shadow: 0px 0px 20px #4d6849;
-webkit-animation-name: animateReminder;
-webkit-animation-duration: 10s;
-webkit-animation-delay: 20s;
-webkit-animation-iteration-count: 1;

}
#reminderHeader {
width: 300px;
height: 26px;
background: #4d6849;
position: relative;
overflow: hidden;
text-align: center;
font-size: 24px;
}
#reminderContent {
width: 300px;
height: 94px;
background: #769272;
position: relative;
overflow: hidden;
color: white;
}
#twitterLogo {
width: 90px;
height: 90px;
float: left;
}

@-webkit-keyframes animateReminder {
0%, 100% {
width: 0px;
height: 24px;
}
20%, 80% {
width: 300px;
height: 24px;
}
30%, 70% {
width: 300px;
height: 120px;
}
}
</style>
</head>
<body>
<div id="reminderContainer">
<div id="reminderHeader">
<span>Follow</span>
</div>

<div id="reminderContent">

<div="reminderContentText">
<span>
<br>
<font size="5">
If you're having a good time<br>
then love tap that button
</font>
</span>
</div>
</div>
</div>
</body>
</html>
===================
 
Last edited:
thank for the help thusfar.
will try this tomorrow. its 1.am and need to get up early for work again. hopefully i can use it tomorrow evening during a The Witcher 3 Stream :D

-edit-
couldn't wait. tried it quickly. seems to be repeating itself now. need to work with the variables now.
it loads immediately, there is about 10sec delay before it repeats. so time to find out where you have that mentioned in the code. because the times mentioned do not correspond with what i'm seeing.
 
Last edited:
I've set the delay to 5seconds. that is the time I want the first one to pop-up. after that repeat it every 10minutes.
seems to be working now.
can't wait to get the others adjusted as well and take them for a test ride.

Thanks guys :)
 
You must log in or register to reply here.
Back
Top