full screen logo and not preview image

10 posts | return to the Setup Problems forum | get the rss feed for this thread

Oct. 29, 2009Shaq015

Hi!

Is it possible to choose an image(logo, fullscreen) that is show when page is loaded. But when you click on player or play button on FLV Player video starts, when you pause it, image comes again?

Oct. 29, 2009hobbs

 
See: http://www.longtailvideo.com/support/forum/Setup-Problems/20301/New-Ver-Config-Problems

Oct. 30, 2009Shaq015

Thanks for link!

I read whole thread, but i could not found a way to work...


css
img.overlay {position:absolute;top:0px;left:0pxz-index:1;height:215px;width:255px;}
div.playercontainer{position:abolute;top:0px;left:0px;z-index:0;}

in head of my joomla site...
<script src="http://www.google.com/jsapi"></script>

<script>
google.load('swfobject', '2.2');
</script>

<script type="text/javascript">
var flashvars =
{
'file': 'http://gdata.youtube.com/feeds/api/users/kevjumba/uploads',
'frontcolor': '0D507A',
'lightcolor': '0000CC',
'screencolor': '0000CC',
'playlist': 'bottom',
'playlistsize': '180',
'id': 'playerID'
};

var params =
{
'allowscriptaccess': 'always',
'allowfullscreen': 'true',
'wmode': 'opaque'
};

var attributes =
{
'id': 'playerID',
'name': 'playerID'
};

swfobject.embedSWF('http://new.vzmd.si/player/player.swf', 'player', '255', '395', '9.0.124', false, flashvars, params, attributes);
</script>
<script><select name="sel1" style="width:300px" onchange="gid('overlay').style.visibility='hidden'; gid('playerID').sendEvent('LOAD', document.theForm2.sel1.value);"></script>


in module of my joomla site...
<img id="overlay" class="overlay" src="http://willswonders.myip.org:8074/images/Grande%20Parade%20Overlay.jpg" width="255" height="210" />
<div id="playercontainer" class="playercontainer" ><a id="player" class="player" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Adobe Flash Player to see this video.</a></div>

The image shows where it should, in video box, but when i click play image stays. And is there a way, that when you click on image, it will start playing?

Oct. 30, 2009hobbs

The page in the other thread is using a form to select the playlist.

The code for an anchor would be:
<a href="#" onclick="gid('overlay').style.visibility='hidden'; gid('playerID').sendEvent('ITEM', 0); return false;">Click to Play</a>


1) Hide the overlaid image: gid('overlay').style.visibility='hidden';

2) Select and play the first track: gid('playerID').sendEvent('ITEM', 0);

You also need the utility function gid():
    <script type="text/javascript">
      function gid(name)
      {
        return document.getElementById(name);
      };
    </script>



Oct. 30, 2009Shaq015

That works perfect! I would never figure this out on myself.

I have another question...Picture is only over video, but not over playlist... So when i click on playlist, image stays. How can i make, that even if you click on playlist, image would dissapear.

And is it possible, that when you click pause, image stays visible again?

Thanks for helping!

Oct. 30, 2009hobbs

To interact with the player, you would have to use the JavaScript API, which isn't very difficult.

Let's say that you want the picture removed if the player is playing and the picture covering the displayarea if the player isn't playing.

    <script type="text/javascript">
      var player    =  null;
      var playlist  =  null;
      var timeout   =  null;


      function playerReady(obj)
      {
        player = gid(obj.id);
        addListeners();
      };


      function addListeners()
      {
        playlist = player.getPlaylist();

        if(playlist.length > 0)
        {
          player.addModelListener('STATE', 'stateMonitor');
        }
        else
        {
          setTimeout("addListeners();", 50);
        }
      };


      function stateMonitor(obj)
      {
        if((obj.newstate == 'PLAYING') || (obj.newstate == 'BUFFERING'))
        {
          clearTimeout(timeout);
          gid('overlay').style.visibility = 'hidden';
        }
        else if(obj.newstate == 'IDLE')
        {
          timeout = setTimeout("gid('overlay').style.visibility = 'visible';", 250);
        }
        else // PAUSED & COMPLETED states
        {
          gid('overlay').style.visibility = 'visible';
        }
      };


      function gid(name)
      {
        return document.getElementById(name);
      };
    </script>


This gets a little tricky because when the player switches tracks, the state is momentarily IDLE, yet we don't want the picture covering the player, so I have included a timeout of 250ms before the image becomes visible AND if the player returns to the PLAYING or BUFFERING state before the timeout expires, we don't want it to fire, which would cover the displayarea, so whenever state is PLAYING or BUFFERING, we clear the timeout just in case it hasn't fired yet.

This could also be done by adding more Listeners, such as the ControllerEvent.STOP Listener, but then it becomes dependent on the sequence that the Listeners fire in, and that is not always usable.

Oct. 31, 2009Shaq015

wow, amazing... once again this works perfect!
Thanks Hobbs, i've never experience such a good response on any support forum!

I would ask you 1 final thing!
When i click on 5th video on playlist it starts as it should, when i pause it, picture comes visible as it should... When i click play, it plays normaly forward, but if i click on picture while its pause it starts playing 1st video on the list.

Thanks once again!

Oct. 31, 2009hobbs

OK, I'll check the code to see why it is jumping to the 1st video.

One thing I don't understand is, if the player is paused and the picture is covering all but the playlist, how do you click on Play? Or is your picture not covering the control bar?

Do you have this code in your image element? It tells the player to index to item 0 (the first track) and play.
<a href="#" onclick="gid('overlay').style.visibility='hidden'; gid('playerID').sendEvent('ITEM', 0); return false;">Click to Play</a>


Maybe you should change to:
<a href="#" onclick="gid('overlay').style.visibility='hidden'; gid('playerID').sendEvent('PLAY', 'true'); return false;">Click to Play</a>


Anyway, please post the code in your image element or anchor element that is being executed when you click on the image.

I do this for entertainmnt, so as long as it is entertaining — for me — you will get a good response.    

Oct. 31, 2009Shaq015

yes i have image only over video frame and not over control bar.

So here is all code, if anyone would like to get the same that i did, but dont know how:

HEAD
<script src="http://www.google.com/jsapi"></script>

<script>
google.load('swfobject', '2.2');
</script>

<script type="text/javascript">
var flashvars =
{
'file': 'http://gdata.youtube.com/feeds/api/users/vzmdpilot/uploads',
'frontcolor': '0D507A',
'lightcolor': '0000CC',
'screencolor': '0000CC',
'playlist': 'bottom',
'playlistsize': '180',
'id': 'playerID'
};

var params =
{
'allowscriptaccess': 'always',
'allowfullscreen': 'true',
'wmode': 'opaque'
};

var attributes =
{
'id': 'playerID',
'name': 'playerID'
};

swfobject.embedSWF('http://new.vzmd.si/player/player.swf', 'player', '255', '394', '9.0.124', false, flashvars, params, attributes);
</script>
<script type="text/javascript">
function gid(name)
{
return document.getElementById(name);
};
</script>
<script type="text/javascript">
var player = null;
var playlist = null;
var timeout = null;


function playerReady(obj)
{
player = gid(obj.id);
addListeners();
};


function addListeners()
{
playlist = player.getPlaylist();

if(playlist.length > 0)
{
player.addModelListener('STATE', 'stateMonitor');
}
else
{
setTimeout("addListeners();", 50);
}
};


function stateMonitor(obj)
{
if((obj.newstate == 'PLAYING') || (obj.newstate == 'BUFFERING'))
{
clearTimeout(timeout);
gid('overlay').style.visibility = 'hidden';
}
else if(obj.newstate == 'IDLE')
{
timeout = setTimeout("gid('overlay').style.visibility = 'visible';", 250);
}
else // PAUSED & COMPLETED states
{
gid('overlay').style.visibility = 'visible';
}
};


function gid(name)
{
return document.getElementById(name);
};
</script>

HTML:
<a href="#" onclick="gid('overlay').style.visibility='hidden'; gid('playerID').sendEvent('PLAY', 'true'); return false;"><img id="overlay" class="overlay" src="http://new.vzmd.si/images/vzmd-tv1.jpg" width="255" height="185" /></a>

<div id="playercontainer" class="playercontainer" ><div id="overlay"><a id="player" class="player" href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">Get the Adobe Flash Player to see this video.</a></div></div>

css
img.overlay {position:absolute;top:0px;left:15px;z-index:1;height:215px;width:255px;}
div.playercontainer{position:abolute;top:0px;left:0px;z-index:0;}

I think this is something that should be built in jw player, but as it's not, we have here hobbs, that makes this possible!!!

Oct. 31, 2009hobbs

 
Nice! Thanks for posting your full code for other users.

Image elements are "clickable", so you could simplify your code like this:
<img id="overlay" class="overlay" src="http://new.vzmd.si/images/vzmd-tv1.jpg" width="255" height="185" onclick="gid('overlay').style.visibility='hidden'; gid('playerID').sendEvent('PLAY', 'true');" />

"Clickable" elements: http://www.w3schools.com/jsref/event_onclick.asp

Add a reaction

You can also return to the category or try this search for related threads.

Your name *

Supported codes:

 

submit