Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Small Player and Big Player Link

23 replies [Last post]

Hello,

This may be a noob question :$ . But I am really noob at programming and I don't know how to do it. I really like that player.

Okie. Please let me fill out my question.

Please Imagine that. We got 2 player in One Page.

One page is small player and another one is Big Player.

When page is load, small player will auto run. When I click that Small Player screen, Big Player will run that video also.

How can i link that two together ? It may be really stupid question. But I really don't know how to do it.

Please help and point out.

Thank you.

@tawthar,

First, a few questions to clarify things.

When the page initially loads, are both the small and the large players visible?

When the user clicks on the small player and the big player starts, what happens with the small player?

a) does it continue to run, meaning that the video will have to be synchronized,

b) does the small player stop

c) ?????

The basic method will be to enable 'linkfromdisplay' in the small player with a 'linktarget' of '_self' and a 'link' to a JavaScript function that will handle the sequence of events.

If you want the two players synchronized, then we will have to get the current position of the small player and scrub the large player to that position + some small amount to make up for the startup and scrubbing delays.

@Will

Thanks for your concern. I really appreciate it.

Will: When the page initially loads, are both the small and the large players visible?

Me: Yes, when the page initially loads, it will show both player. But only small player will auto play the video. Then when i click that small player, that video will show on the big player also.

Will: When the user clicks on the small player and the big player starts, what happens with the small player?

Me:It will continue to run, meaning that the video will have to be synchronized.

It's the same logically of that sample

http://home5.inet.tele.dk/nyboe/flash/mediaplayer/linkplaylist.htm

That demo show with text link there. I want to use small player instead of text link.

Big player will like that demo page and whenever I click the small player one, it will open at big player also. But small player going won't stop also.

Is it too hard ? Or my thinking is too strange ? If it is possible, I really want it.

Also if i can't get like that one,

I want to get like the said from your conclusions.

"The basic method will be to enable 'linkfromdisplay' in the small player with a 'linktarget' of '_self' and a 'link' to a JavaScript function that will handle the sequence of events."

I know the flasvars of linkfromdisplay, linktarget, and link , but I tried with that and link doesn't work. If i can know the handle of javascript function, it will be so great.

Please help me with that one if my first mention will not possible. Thank you.

With Regards,

@tawthar,

One more question. Are you using a playlist or just a single file.

Starting the large player when you click on the smaller player is quite simple; I'll give you that code first to play with.

Meanwhile, I'll figure out the synchronization of the large player and then give you that ocde.

wow wow wow. Thank you. I will be waiting for it.

Playlist and single file is like ? Playlist mean using with xml ? Single file mean embedding the file manually? Sorry for my lacking experience :( .

@tawthar,

Here's your code. Substitute the name of your video file for 'video.flv' in these two lines. Change the size in those same two lines.

      createPlayer('mpl1', '240', '180', 'video.flv', 'true',  'smallplayer');
      createPlayer('mpl2', '640', '480', 'video.flv', 'muted', 'largeplayer');

Right now the code has instrumentation five places so you can see how it works. Later you can remove that code. In five places, remove these three lines (the comment and the next two lines):

        // instrumentation for debug
        var ps = document.getElementById('positionsmall');
        ps.innerHTML = 'Small Player Position: ' + currentPositionSmall;

Also remove the five <div>s at the end of the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>

  <title>Simple JW Player</title>

  <style type="text/css">
    div.instrumentation
    {
      font-style:             normal;
      font-variant:           normal;
      font-weight:               300;
      font-size:               0.8em;
      font-family:  arial,sans-serif;
      color:                 #4040FF;
      text-align:               left;
    }
  </style>

  <script type="text/javascript" src="swfobject.js"></script>

  <script type='text/javascript'>
    function createPlayer(aId, aWidth, aHeight, aFile, aStart, aPlayer)
    {
      var s1 = new SWFObject('mediaplayer.swf', aId, aWidth, aHeight, '7');
          s1.addVariable('width',               aWidth);
          s1.addVariable('height',              aHeight);
          s1.addVariable('file',                aFile);
          s1.addVariable('autostart',           aStart);
          s1.addVariable('javascriptid',        aId);
          s1.addVariable('enablejs',           'true');
          s1.addVariable('overstretch',        'false');
          s1.addVariable('showdigits',         'true');
          s1.addVariable('showicons',          'false');
          s1.addVariable('backcolor',          '0xFFFFFF'); // face of buttons
          s1.addVariable('frontcolor',         '0x404040'); // button symbols & playlist text
          s1.addVariable('lightcolor',         '0x808080'); // highlighted playlist item
          s1.addVariable('screencolor',        '0x000000'); // screen background color
        if(aId == 'mpl1')
        {
          s1.addVariable('linkfromdisplay',    'true');  
          s1.addVariable('linktarget',         '_self');
          s1.addVariable('link',               'javascript:startLarge();');
        }
          s1.write(aPlayer);
    };
  </script>

  <script type='text/javascript'>
    var currentStateSmall;
    var currentStateLarge;
    var currentPositionSmall;
    var currentPositionLarge;

    function getUpdate(typ, pr1, pr2, pid)
    {
      if((pid == 'mpl1') && (typ == 'time'))
      {
        currentPositionSmall = pr1;

        // instrumentation for debug
        var ps = document.getElementById('positionsmall');
        ps.innerHTML = 'Small Player Position: ' + currentPositionSmall;
      }
      else if((pid == 'mpl2') && (typ == 'time'))
      {
        currentPositionLarge = pr1;

        // instrumentation for debug
        var pl = document.getElementById('positionlarge');
        pl.innerHTML = 'Large Player Position: ' + currentPositionLarge;
      }
      else if((pid == 'mpl1') && (typ == 'state'))
      {
        currentStateSmall = pr1;

        // instrumentation for debug
        var ss = document.getElementById('statesmall');
        ss.innerHTML = 'Small Player State: ' + currentStateSmall;
      }
      else if((pid == 'mpl2') && (typ == 'state'))
      {
        currentStateLarge = pr1;

        // instrumentation for debug
        var sl = document.getElementById('statelarge');
        sl.innerHTML = 'Large Player State: ' + currentStateLarge;
          
        if(currentStateLarge == 2)
        {
          thisMovie('mpl1').sendEvent('scrub', currentPositionSmall);
          thisMovie('mpl2').sendEvent('scrub', currentPositionSmall);

          // instrumentation for debug
          var sp = document.getElementById('scrubposition');
          sp.innerHTML = 'Scrub Position: ' + currentPositionSmall;
        }
      }
    };

    function startLarge()
    {
      thisMovie('mpl2').sendEvent('playpause');
    };

    function thisMovie(movieName)
    {
      if(navigator.appName.indexOf("Microsoft") != -1)
      {
        return window[movieName];
      }
      else
      {
        return document[movieName];
      }
    };

    function loadPlayers()
    {
      createPlayer('mpl1', '240', '180', 'Blondie - Heart of Glass.flv', 'true',  'smallplayer');
      createPlayer('mpl2', '640', '480', 'Blondie - Heart of Glass.flv', 'muted', 'largeplayer');
      setTimeout("thisMovie('mpl2').sendEvent('playpause')", 100);
    };
  </script>

</head>

<body onload="loadPlayers();">

  <div id="smallplayer">
    <a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Plugin</a> 
    to see this gallery.
  </div>

  <div id="largeplayer">
    <a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Plugin</a> 
    to see this gallery.
  </div>

  <div id="positionsmall" class="instrumentation">
    Small Player Position: 
  </div>
  <div id="statesmall" class="instrumentation">
    Small Player State: 
  </div>
  <div id="positionlarge" class="instrumentation">
    Large Player Position: 
  </div>
  <div id="statelarge" class="instrumentation">
    Large Player State: 
  </div>
  <div id="scrubposition" class="instrumentation">
    Scrub Position: 
  </div>

</body>

</html>

wow . Thanks. Please let me try. Now I will try that one and let you know. Thanks Will. You are the best !! (b)

@Will,

I tested it and it's working perfectly. But one thing is that, I know what is the playlist now.

I want that one with playlist. Like now is adding manually like

createPlayer('mpl2', '640', '480', 'Blondie - Heart of Glass.flv', 'muted', 'largeplayer');

I want to use playlist at there.

If that is possible ? If that so, please help me out again.

Also another question is,

When small player is buffering the video, I can't click that one to play video at big screen. I have to wait till finished buffering rite ? If i don't want to wait finished buffering , is there a way to do ? If not, it's okie too.

Please help me with playlist also. Thank you. I will wait for this. Thanks Thanks.

@tawthar,

To use a playlist, just put the filename in place of the video name.

createPlayer('mpl2', '640', '480', 'playlist.xml', 'muted', 'largeplayer');

Be sure that you use a properly constructed XSFP playlist:
<?xml version='1.0' encoding='UTF-8'?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
    <track>
      <creator>tawthar</creator>
      <title>Music Video</title>
      <location>play-1.flv</location>
    </track>
    <track>
      <creator>tawthar</creator>
      <title>Music Video</title>
      <location>play-2.flv</location>
    </track>
    <track>
      <creator>tawthar</creator>
      <title>Movie Trailer</title>
      <location>play-3.flv</location>
    </track>
  </trackList>
</playlist>

Put whatever you want in the creator and title elements. The location can be anything from a filename to a full URL.

If you use a playlist, add these two flashvars:

s1.addVariable('shuffle', 'false');
s1.addVariable('repeat', 'false');

And to make the player height enough to show the playlist,
we have to add a new variable:

function createPlayer(aId, aWidth, aHeight, aDisplayheight, aFile, aStart, aPlayer)

and here:
s1.addVariable('height',              aHeight);
s1.addVariable('displayheight',    aDisplayheight);
s1.addVariable('file',                aFile);
s1.addVariable('autostart',           aStart);
s1.addVariable('javascriptid',        aId);

and here:
function loadPlayers()
{
createPlayer('mpl1', '240', '292', '180', 'playlist.xml', 'true',  'smallplayer');
createPlayer('mpl2', '640', '592', '480', 'playlist.xml', 'muted', 'largeplayer');
setTimeout("thisMovie('mpl2').sendEvent('playpause')", 100);
};

height = 20px (control bar) + (23 * 4) = 180 + 20 + 92 = 292 Each playlist item is 23px.

The JW Players weren't exactly meant to be used this way, so the behavior isn't perfect.

We're starting the large player 'muted' so you don't hear the "echo effect" of the audio slightly out of sync.

And the large player is started on load, then paused after 50 milliseconds so that it loads the video file and is ready to play when you click on the small layer. Otherwise there is a great delay while it loads the file from your local cache to RAM.

And, yes, the behavior is better if you let the video file fully buffer, but it does work OK before then.

Great support Will really.
I've taken back my work with the player finally. I get into this topic to add some more "noob" questions myself :)
The problem that I'm facing is this one... I have the video included in articles in a small size format, to fit well in the page.
The video format is 230x172.
I would like to add a button somewhere to switch to a bigger video format (320x or even more) opening in a floating div or such.
It would be great to obtain the same effect that you get when you go full screen with flash 9.0 so that the video doesn't start from scratch.
I did not understand if the solution above would be suitable for this. If it means to have 2 streams active and both downloading (with redundant bandwith usage).
Any hint?

@Will,

You are the best man. Very great and quick response. I really appreciate it. Thanks Will, Thanks.

One thing, I want to say is that, I think i mentioned wrongly. The one I mean about playlist is not with xml. I don't know how it's called :( (sorry noob again). But the one I want is like that below link.

http://home5.inet.tele.dk/nyboe/flash/mediaplayer/linkplaylist.htm

At there, it's called link playlist. That's why. I told you that I want play list. Okie, please explain me something about it.

There are three links there and only one player. Whenever I click , Video 1 or 2 or 3 link, video appeared in the below player.

Yes, the one I want is same logic way of that demo. There will be three small video player (that's in the link, instead of link in demo there), and only one big video player. Whenever, I click that 3 small video player, it will appear in the one big player. Means that, Big Player is static.

Like, 1st Small player have video file called video1.flv. 2nd small player have video file called video2.flv.

When i lick the 1st Small player, video1.flv will play in the big player. Then, I decided to click the 2nd Small player, video2.flv will play in that big screen (Means that, playing of video1.flv sill stop and changing to video2.flv in big player).

At that time, I don't know it can be done like the synchronization above like that or not. But If i can get like that, It will be very nice.

Sorry for asking you to question again and again Mr.Will. I really appreciate your support and quick response. Thanks Thanks.

With Fully Regards,

@Terni,

There are a number of techniques for making a player appear and disappear.

Basically, they involve writing the player to a div to make it appear and then writing blank content to that same div to make it disappear.

Here's an example: [url=http://willswonders.myip.org:8085/php/SWFObject%20InnerHTML-3.html]SWFObject InnerHTML[/url]

I didn't come up with that one, it's from pipwerks.

You could just write a larger player to the same div as the small one is in, then when you are through with it, write the small one back to the div.

Or you can make it completely invisible, then have the user click on an image to make it appear, floating over the content, like this: [url=http://willswonders.myip.org:8085/php/SWFObject%20InnerHTML-4.html#]SWFObject InnerHTML - Floating[/url]

Using this technique, the possibilities are endless.

If you want two players, the smaller already running, then use the technique above, but float the larger one if the user clicks on the displayarea of the smaller one. For your usage, it would probably make sense to stop the smaller one if the larger one is launched. They both use the same file, so your bandwidth doesn't take a hit.

@tawthar,

More questions...

When the page first loads, are all three of the small video players playing a video?

If not, how does one of the small players start?

Next, if a user clicks on one of the small players, you want the large player to start playing that same video.

Next, if one of the small players and the large player are playing a video, and the user clicks on another of the small players, you want that new video to start playing in the large player and you want the other small player, that was playing, to stop.

With three different files, there will be a long pause before the large player starts because it has to load the file into RAM. With just one small player, I was pre-loading the file into the large player so it was ready to play when the user clicked on the small player.

@Will ,

Thanks for the great great response and support.

Will: When the page first loads, are all three of the small video players playing a video?

Me: Yes,when the page first loads, all the player will start playing a video.

Will: Next, if a user clicks on one of the small players, you want the large player to start playing that same video.

Me: Yes, absolutely right. When user click on one of the small player, large player will start playing the same video that he clicked on the small player.

Will: Next, if one of the small players and the large player are playing a video, and the user clicks on another of the small players, you want that new video to start playing in the large player and you want the other small player, that was playing, to stop.

Me: Yes,if one of the small players and the large player are playing a video, and the user clicks on another of the small players, I want that new video to start playing in the large player and I want that other player, that ways playing to still playing. (Is it possible ?)

Will: With three different files, there will be a long pause before the large player starts because it has to load the file into RAM. With just one small player, I was pre-loading the file into the large player so it was ready to play when the user clicked on the small player.

Me: Yes, I will take like what you do. I am lacking in that experiences so if you think that's the good way, just do it Will. I will really appreciate it.

Thank you very much Will.

With Best of Regards,

Will: When the page first loads, are all three of the small video players playing a video?

Me: Yes,when the page first loads, all the player will start playing a video.

Sorry for that, I mean , all the small player will start playing a video when the page first loads.

@tawthar,

With three small players, ALL playing a video, what do you want to do with the audio? It will be mixed together in a mess of sound!!

And when the large layer starts, it is muted (no audio), so it when it is started, what do you want to do with the audio for the large movie?

So, do you want to initially have all three small players muted (silent) and only have audio from the large player when it is started?

This has gotten quite complicated to keep track of the movies, what is playing, what needs to be loaded, etc. It's going to take me a while to figure this out. :)

@Will,

I know .. my request are too weird :( .

Yes, all the small player will be muted when the page loads (forever). Only the large player will have audio when it is started.

If it's that too hard, which is the best way? Sorry for making trouble to you. :( .

@Will,

Any news ?

Not finished yet... I haven't had too much time to work on it. :)

oh okie. Thanks. I will wait till you finished.

@Will

The first one you made for me (with and without playlist), the big player is auto start ? Or Am i did it wrong ?

In the first player code, the large player is 'autostart', 'muted' then it is paused after 100 milliseconds.

This is to make it load the video into memory, so it is ready to play when you click on the small player.

With three small players, we can't do this anymore, so I have to work out a method of getting the video loaded and ready to play.

i might abandon the large player and just make the small player that has been selected popup much larger. That looks like it would be much easier to do. Then I don't have to sync the video. Seems like once the large player is playing the video, there is no reason to have the small player running anymore.

Okie, please let say,

I don't want to sychronize those things anymore. Just only like,

All small three player is playing when page load.

When i click one of small player which is playing video.flv, will play on the big player from start (not synchronizing).

Like that also, I click another small player which is playing video.2flv, that one will play on the big player from start (not synchronizing), means like, currently playing video.flv will stop and video2.flv will play on Large Player.

Like i mentioned before,

http://home5.inet.tele.dk/nyboe/flash/mediaplayer/linkplaylist.htm

I want to use player instead of using link in demo.

I think synchronization process is make you buzy. If it is like that i mentioned, how ? Is it more easy ?

With Regards

Ijust want .big file supporter player
Pls help me!

Post new comment

  • Allowed HTML tags: <code> <blockquote> <em> <strong> <strike> <ul> <li> <ol>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic).

More information about formatting options