Hi
i develop a Progressbar to display how long a Region is shown till it change.
First i place a new region. For me i want to display how long a Video is running, so i placed the “Prograssbar-Region” as a small, long Region under my "MainRegion where the Video is displayed.
MainRegion = 1396 x 759, ProgressbarRegion = 1396 x 30
In the ProgressbarRegion i placed a “Embedded” Widget.
The originalcode of the progressbar is from here: https://codepen.io/jankiatyantik03/pen/GdmOgb
I modified it, to fit my own needs.
HTML:
<div class="progress-bar">
<div id="bar" class="progress-value" style="width: 1%;">
<!-- <span id="value">1%</span> --><!-- Hide the Percentage-->
</div>
</div>
CSS:
<style type="text/css">
.progress-bar {
background-color: lightgray;
//border-radius: 1.25em;
width: 100%;
height: 16px;
display: inline-block;
}
.progress-value {
color: #fff;
text-align: center;
background-color: #673ab7;
transition: .3s all linear;
//border-radius: 1.25em;
height: 16px;
display: inline-block;
}
</style>
JS:
script type="text/javascript">
function EmbedInit()
{
// Init will be called when this page is loaded in the client.
var elem = document.getElementById("bar");
var width = 1;
var id = setInterval(frame, 910); //910 = 91 Seconds that the Progressbar is running
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("value").innerHTML = width + '%';
}
}
return;
}
</script>
It is importend that the durationtime of the Widget is set to the same Value like the progressbar runs.
Otherwise there is no synchronicity between the Progressbar an the Video in my “MainRegion”.
For me i set it 1 second longer an it works better with the region-change
For me, it runs very good and the People can see how long the Videos shown on the Display.
Sunny Greetings
Torsten