I’m still trying to get my head around all that you can do with css.
Here’s my dilemma –
jw player can either playback video in flash/html5. I use a countdown timer in my app between certain videos. Right now the countdown timer is being displayed in a div beneath the jw player.
I need to get that timer displayed in a div that covers the entire jw player interface.
Here is the html:
src="videos/set2_first_5min.flv"
height="390"
id="container"
poster="thumbs/set2_first.png"
width="720">
…and css
#bottomRestTimer {
margin-top: 2%;
}
#bottomRestTimer p {
font-size: 3em;
color: @color;
}
Here is some of the javascript code that I am using (among other things) to display the ‘countdown’ in the referenced DIV.
Again, I am trying to find a way to have this DIV cover the height and width of the jw player when it’s called.
jwplayer("container").setup({
'file': 'devplaylist.xml',
'flashplayer': 'js/player.swf',
'plugins': {
'./countdown.js': {}
},
'repeat': 'list',
'autostart': true,
'height': 390,
'width': 720,
events: {
onPlaylist: function(event){
...
...
}
onPlaylistItem: function(event){
...
...
var minutes = (Math.floor(time/60 ));
var seconds = time % 60;
if (seconds < 10) seconds = "0" + seconds;
var text = minutes + ":" + seconds;
document.getElementById('resttimer').innerHTML = text;
//I need to have a DIV display the value of text (the countdown time)
//directly over the jw player
time--;
}, 1000);
...
...}
Any suggestions?
