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

Forums

JW Player
/
JavaScript Interaction

Javascript control: "sendEvent is not a function"

14 replies [Last post]
Posted: Thu, 2008-08-21 11:50 Aethaelwaerd
Anonymous's picture

I have got two players in a test page. The one is included with an embed tag:

<embed
src="player.swf"
width="480"
height="360"
allowscriptaccess="always"
allowfullscreen="true"
wmode="opaque"
id="zzz"
name="zzz"
flashvars="file=items/05_atletico_seat_believe.flv&autostart=false&controlbar=over"
/>

The other is embedded with Swfobject:

<span id="video_08_content3">Sorry, you need Adobe Flash to view this video. Please install it.</span>

<script type="text/javascript">
/* Filename, ID, width, height, Flash version */
var so = new SWFObject('player.swf','xxx','480','360','8');
/* Allow full screen */
so.addParam("allowfullscreen","true");
/* Allow other layers to appear above Flash */
so.addParam("wmode", "opaque");
/* Media file to display */
so.addVariable("file","items/05_atletico_seat_believe.flv");
/* Start playing on load */
so.addVariable("autostart","false");
/* false - play only one playlist item, list - play all once, true - loop all */
so.addVariable("repeat","false");
/* Height and width again for IE */
so.addVariable("height","360");
so.addVariable("width","480");
/* Video display area - minus playlist */
so.addVariable("displayheight","360");
/* Number of seconds of video to buffer - default 3 */
so.addVariable("bufferlength","6");
/* Number of seconds images are shown */
so.addVariable("rotatetime","5");
/* Control bar appears over video */
so.addVariable("controlbar","over");
/* Hide play icon in middle of screen */
so.addVariable("showicons","false");
/* Don't shuffle playlist items */
so.addVariable("shuffle","false");
/* Default image when flvplayer inactive */
so.addVariable("image","items/05_atletico_seat_believe.jpg");
so.write('video_08_content3');
</script>

I'm telling each player to stop using a pair of links. For one, I'm getting the player element first with var mplayer = document.getElementById('xxx'); and then using it in the link <a href="javascript:mplayer.sendEvent('stop');">Stop 1</a>. For the other I'm putting the whole reference directly in the link: <a href="javascript:document.getElementById('xxx').sendEvent('stop');">Stop 2</a>.

Neither of these links works in Firefox 3 or IE7. In Firefox I get the Javascript error document.getElementById("xxx").sendEvent is not a function.

Can anybody please suggest what I am doing wrong?

Thanks!
Aethaelwaerd

Posted: Thu, 2008-08-21 11:59 kLink  
Anonymous's picture

Please see this thread http://www.jeroenwijering.com/?thread=12482 for a tested and proven method for getting the reference object for two or more v4.x players.

The embed element should have the "name" attribute only, not the "id" attribute. Reference: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_12701

Posted: Thu, 2008-08-21 12:30 Aethaelwaerd  
Anonymous's picture

Thanks very much for the quick reply! That code seems to do the trick for me.

I included "name" attribute because I read this

Note you must add both the id and name attributes in the <embed> in order to get back an ID in all browsers.

here http://code.jeroenwijering.com/trac/wiki/FlashAPI, but I will do as you suggest.

Cheers
Aethaelwaerd

Posted: Thu, 2008-08-21 12:47 Aethaelwaerd  
Anonymous's picture

Uh sorry kLink, I spoke too soon.. I'm having a problem getting that other solution to work. I have:

<script>

var X = null;
var Z = null;

function playerReady(obj)
{
console.log('id: ' + id);
  if(obj.id == 'xxx')
  {
X = document.getElementsByName(obj.id)[0];
console.log("X");
  }
  else if(obj.id == 'zzz')
  {
Z = document.getElementsByName(obj.id)[0];
console.log("Z");
  }
};

</script>

and my link says: <a href="javascript:X.sendEvent('stop');Z.sendEvent('stop');">Stop 1</a>. The Firebug console.logs aren't showing up at all when I load the page. Am I right in thinking each player is supposed to call playerReady() when it loads into the DOM? When I click the link I get "X is null", so it seems playerReady() isn't being called.

Ae.

Posted: Thu, 2008-08-21 13:22 kLink  
Anonymous's picture

Yes, each player should call playerReady() when it is instantiated.

I'll test the code later today, since I want a tested and working version to use myself.

Posted: Thu, 2008-08-21 23:33 kLink  
Anonymous's picture

Tested & Working...

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

<html lang="en">

  <head>

    <title>Control Multiple Players - JWMP v4</title>

    <style type="text/css">
      div.playercontainer
      {
        float:             left;
      }

      div.buttoncontainer
      {
        clear:             left;
      }

      button
      {
        width:            241px;
      }
    </style>

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

    <script type="text/javascript">
      var flashvars =
      {
        autostart:            'false',
        quality:              'true',
        file:                 'playlist_four_songs.xml',
        skin:                 'snel.swf',
        playlist:             'bottom',
        playlistsize:         '120'
      };

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

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

      swfobject.embedSWF('player-4.1.60.swf', 'Xplayer', '480', '480', '9.0.124', false, flashvars, params, attributes);

      var flashvars =
      {
        autostart:            'false',
        quality:              'true',
        file:                 'playlist_four_songs.xml',
        skin:                 'snel.swf',
        playlist:             'bottom',
        playlistsize:         '120'
      };

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

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

      swfobject.embedSWF('player-4.1.60.swf', 'Yplayer', '480', '480', '9.0.124', false, flashvars, params, attributes);

    </script>

    <script type="text/javascript">
      var playerX = null;
      var playerY = null;

      function playerReady(obj)
      {
        if(obj.id == 'mediaplayerX')
        {
//alert('mediaplayerX: ' + obj.id);
          playerX = document.getElementsByName(obj.id)[0];
        }
        else if(obj.id == 'mediaplayerY')
        {
//alert('mediaplayerY: ' + obj.id);
          playerY = document.getElementsByName(obj.id)[0];
        }
      };

      function playSong(pid, idx)
      {
        pid.sendEvent('ITEM', idx);
      };
    </script>

  </head>

  <body>

    <div id="playercontainer" class="playercontainer">
      <a id="Xplayer" 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>
      <a id="Yplayer" 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 id="buttons" class="buttoncontainer">
      <button onclick="playSong(playerX, 1);">PlayerX Play Song 2</button>
      <button onclick="playSong(playerX, 3);">PlayerX Play Song 4</button>
      <button onclick="playSong(playerY, 0);">PlayerY Play Song 1</button>
      <button onclick="playSong(playerY, 2);">PlayerY Play Song 3</button>
    </div>

  </body>

</html>

Posted: Fri, 2008-08-22 09:18 Aethaelwaerd  
Anonymous's picture

kLink thanks so much for all this help, very generous! I've got this working in FF nicely.

I'm currently having trouble getting swfobject to embed in IE (may just be a Flash player version issue) but I will persevere - you've set me on the right path. Much appreciated!

Cheers
Ae.

Posted: Fri, 2008-08-22 10:11 kLink  
Anonymous's picture

@Aethaelwaerd,

You're welcome. Good Luck!

Post a link if you get stuck.

Posted: Fri, 2008-08-22 10:20 Aethaelwaerd  
Anonymous's picture

Hahar!! Got it right in both browsers! As I thought, I had a different Flash player versions in each. Many thanks mate!

Ae.

Posted: Fri, 2009-05-01 20:39 Maagda  
Anonymous's picture

I saw that this was "the definitive thread for multiple players," so...

My client likes the look of his player, and wants several instances of it on each page. Each player is also a playlist, as the playlist part is also integral to his design. I was going to have all players instantiated initially, but then I've found several threads claiming that this is not the best method. So I'm investigating using mutex playlists, but am having trouble visualizing the code myself.

For example, the playlist is very simple and streamlined and can be easliy replicated with a table, so I was imagining creating a table headed by a simple play button followed by a single column of text with a row for each song title, each with a href="#" so as to become clickable in order to call the player. However, if each song is to call the player, the player would need to be called in the position that is occupied by the play button, and the player would need to start with the song clicked. Part of the design is to also have the active song highlighted, which could possibly be achieved through some kind of javascript linked to calling the player, but I'm not sure.

Does this sound at all possible? I think the main sticking point is making one tablecell or div play the same player but have it called from different tablecells/divs and start at different songs.

Posted: Fri, 2009-05-01 23:57 rick  
Anonymous's picture

Search for "Mulitple Players".

There is a lot more information and code posted for doing this.

Posted: Tue, 2009-05-05 15:42 Maagda  
Anonymous's picture

eta: It is of course right here in this very thread in kLink's code. I spent all of last week combing through these forums, using the code I found here, only to find out the code was for v3, and I have the v4 player. So I thought I would be smart and avoid all things v3 if I just looked at posts after the release of v4, which I thought was October 2008, so I totally ignored that Aug. 21 post.

Posted: Tue, 2009-05-05 17:56 rick  
Anonymous's picture

@Maagda,

The first v4 player that is have is dated 05-13-08.

It's a better "learning experience" if you do this yourself, but we're here if you get really stuck.

Posted: Thu, 2009-05-28 15:02 Maagda  
Anonymous's picture

Turns out kLink's code is only part of what I need. I can't seem to combine the playSong function with the createPlayer function from this code: http://home5.inet.tele.dk/nyboe/flash/mediaplayer4/JW_API_xmpl_1-1-3-0.html even though I think I've tried everything a dozen times over. I still don't know if it's even possible. But those two bits of code seemed the most promising.

Anyway, it's been about 2 months, about 5 weeks longer than I expected to mess around with this, so I'm just sticking with multiple instantiated players, but if I ever have enough time to revisit this, I'll certainly post any more findings.

Posted: Thu, 2009-05-28 18:15 BaP  
Anonymous's picture

With swfobject v2.x, you shouldn't be using player embedding code that is wrapped in a function — unless you need to re-instantiate the player to change one or more of the "unchangeable" lfashvars.

  • Locked