New Ver. Config Problems

14 replies [Last post]

Posted: Sun, 2009-10-25 09:15 WardB

My videos using an earlier version have become choppy. A test of the latest version displays the clips properly again. I have been trying to upgrade for a day now without any success. The basic works but the playlist is really confusing. All configurations are different and I can not find samples to show me how to get the new one configured the same as the earlier one. The old config is at: http://tosaband.com/Pages/events/paris/paristrip.php - the new version is at: http://www.tosaband.com/JWplayer/jwplayer.htm - I hope someone will help get my configuration back.

Thank You.

Posted: Sun, 2009-10-25 10:30 WardB

I guess the confusion comes from the fact that the new version does not use the same 'embed' code as the old one:
<p id='preview'>The player will show in this paragraph</p>
<script type='text/javascript' src='swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=video.flv');
s1.write('preview');
</script>

All examples use this but the one I put on the site does not.

Posted: Sun, 2009-10-25 11:31 hobbs

Since you're upgrading, you should upgrade all the way to swfobject v2.2 loaded from Google's CDN.

See: http://willswonders.myip.org:8074/WardB.html

The advantages of using swfobject v2.x loaded from Google's CDN:

Loading from Google AJAX Libraries API:

http://pipwerks.com/journal/2008/11/11/swfobjectjs-finds-a-home-on-google-servers/

How & Why You Should Use Google CDN:

http://webmuch.com/how-why-you-should-use-google-cdn/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>WardB - JWMP v4.6.x - swfobject v2.2</title>
    <script src="http://www.google.com/jsapi"></script>
    <script>
      google.load('swfobject', '2.2');
    </script>
    <script type="text/javascript">
      var flashvars =
      {
        'file':                 'http://www.tosaband.com/movies1/08video/Wind Symphony II.mp4',
        'image':                'http://www.tosaband.com/movies1/08video/preview.jpg',
        'frontcolor':           '86C29D',  // text & icons                  (green)
        'backcolor':            '003367',  // playlist background           (blue)
        'lightcolor':           'C286BA',  // selected text/track highlight (red)
        'screencolor':          '000000',  // screen background             (white)
        'id':                   'playerID',
        'autostart':            'false'
      };
      var params =
      {
        'allowfullscreen':                       'true',
        'allowscriptaccess':    'always',
        'bgcolor':              '#000000'
      };
      var attributes =
      {
        'name':                 'playerID',
        'id':                   'playerID'
      };
      swfobject.embedSWF('player.swf', 'player', '320', '260', '9.0.124', false, flashvars, params, attributes);
    </script>
  </head>
  <body>
    <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>
</body>
</html>

Posted: Sun, 2009-10-25 11:48 WardB

Hobbs, thanks for the info. I never saw that before. The problem however is still the same: I can not get the configuration set up the way I used to. I am presently trying to use an xml playlist.

----------------------------------

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
<trackList>

<track>
<title>Macy's Parade Practice - City Park (2:14)</title>
<creator>1961</creator>
<location>video/1.flv</location>
</track>

<track>
<title>Tosa Parade Before Macy's - Wauwatosa, WI (2:22)</title>
<creator>1961</creator>
<location>video/2.flv</location>
</track>
</trackList>
</playlist>

Posted: Sun, 2009-10-25 13:36 hobbs

So your playlist would look like this:

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
  <trackList>
    <track>
      <title>Macy's Parade Practice - City Park (2:14)</title>
      <creator>1961</creator>
      <location>http://tosaband.com/Pages/events/paris/Paris_Movies/Grande Parade.MP4</location>
    </track>
    <track>
      <title>Tosa Parade Before Macy's - Wauwatosa, WI (2:22)</title>
      <creator>1961</creator>
      <location>http://www.tosaband.com/Pages/events/paris/Paris_Movies/Jazz Ensemble Ia.MP4</location>
    </track>
  </trackList>
</playlist>

Note that I have to use a full URI because the player code and the playlist are being served from my server. You can use a relative path as before.

Running here: http://willswonders.myip.org:8074/WardB.html

Check the page source to see the changed code to use the playlist.

Posted: Sun, 2009-10-25 21:41 WardB

I don't understand. My playlist is still not showing. The coding is totally different than what I had and I can't get it back. Once I get the playlist to show up on the side I want to change the playlist with a dropdown. An example of my goal is at: [B] http://www.movimiento22.com/videoplayer/videos.html# [/B] Here is what I have so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
  <title>WardB - JWMP v4.6.x - swfobject v2.2</title>
  <script src="http://www.google.com/jsapi"></script>
  <script>
      google.load('swfobject', '2.2');
    </script>
  <script type="text/javascript">
      var flashvars =
      {
        'file':                 'playlist.xml',
        'image':                'http://www.tosaband.com/movies1/08video/preview.jpg',
        'frontcolor':           '86C29D',  // text & icons                  (green)
        'backcolor':            '003367',  // playlist background           (blue)
        'lightcolor':           'C286BA',  // selected text/track highlight (red)
        'screencolor':          '000000',  // screen background             (white)
        'id':                   'playerID',
		'playlistsize':         '250',		
        'autostart':            'false'      };
      var params =
      {
        'allowfullscreen':                       'true',
        'allowscriptaccess':    'always',
        'bgcolor':              '#000000'
      };
      var attributes =
      {
        'name':                 'playerID',
        'id':                   'playerID'
      };
      swfobject.embedSWF('player.swf', 'player', '320', '260', '9.0.124', false, flashvars, params, attributes);
    </script>
  <script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&amp;&amp;(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
  </script>
  </head>
  <body>
    <div id="playercontainer" class="playercontainer" style="position:absolute; left:327px; top:138px; width:375px; height:233px; z-index:1">
    <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 id="Layer1" style="position:absolute; left:357px; top:508px; width:441px; height:96px; z-index:1">
  <form id="theForm2" name="theForm2">
          <select name="sel1" style="width:300px" onChange="javascript:createPlayer(document.theForm2.sel1.value);MM_showHideLayers('placeholder','','show')">
            <option selected>Video Galleries</option>
            <option value="playlist.xml">Playlist </option>
			<option value="playlist2.xml">Playlist2</option>
			<option value="playlist3.xml">Playlist3</option>
          </select>
          <span class="style1">  Select Gallery Year </span>
  </form>
</div>
  </body>
</html>

Posted: Mon, 2009-10-26 02:40 hobbs

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>WardB - JWMP v4.6.x - swfobject v2.2</title>
    <script src="http://www.google.com/jsapi"></script>
    <script>
      google.load('swfobject', '2.2');
    </script>
    <script type="text/javascript">
      var flashvars =
      {
        'file':                        'playlist.xml',
        'frontcolor':                  '86C29D', // text & icons (green)
        'backcolor':                   '003367', // playlist background (blue)
        'lightcolor':                  'C286BA', // selected text/track highlight (red)
        'screencolor':                 '000000', // screen background (white)
        'id':                          'playerID',
        'playlist':                    'bottom',
        'playlistsize':                '120',
        'autostart':                   'false'
      };
      var params =
      {
        'allowfullscreen':             'true',
        'allowscriptaccess':           'always',
        'bgcolor':                     '#000000'
      };
      var attributes =
      {
        'name':                        'playerID',
        'id':                          'playerID'
      };
      swfobject.embedSWF('player.swf', 'player', '320', '380', '9.0.124', false, flashvars, params, attributes);
    </script>
    <script language="JavaScript" type="text/JavaScript">
      function MM_reloadPage(init) { //reloads the window if Nav4 resized
        if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
          document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
        else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
      }
      MM_reloadPage(true);
      function MM_showHideLayers() { //v6.0
        var i,p,v,obj,args=MM_showHideLayers.arguments;
        for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
        if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
        obj.visibility=v; }
      }
    </script>
  </head>
  <body>
    <div id="playercontainer" class="playercontainer" style="position:absolute; left:327px; top:138px; width:375px; height:233px; z-index:1"><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 id="Layer1" style="position:absolute; left:338px; top:520px; width:441px; height:96px; z-index:1">
      <form id="theForm2" name="theForm2">
        <select name="sel1" style="width:300px" onChange="javascript:createPlayer(document.theForm2.sel1.value);MM_showHideLayers('placeholder','','show')">
          <option selected>Video Galleries</option>
          <option value="playlist.xml">Playlist </option>
          <option value="playlist2.xml">Playlist2</option>
          <option value="playlist3.xml">Playlist3</option>
        </select>
        <span class="style1">  Select Gallery Year </span>
      </form>
    </div>
  </body>
</html>

<?xml version="1.0" encoding="UTF-8"?>
<playlist xmlns="http://xspf.org/ns/0/" version="1">
  <title>Example XSPF playlist</title>
  <tracklist>
    <track>
      <title>FLV video</title>
      <creator>the Peach Open Movie Project</creator>
      <info>http://www.bigbuckbunny.org/</info>
      <annotation>Big Buck Bunny is a short animated film by the Blender Institute, part of the Blender Foundation.</annotation>
      <location>../../testing/files/bunny.flv</location>
    </track>
    <track>
      <title>MP3 audio with thumb</title>
      <creator>the Peach Open Movie Project</creator>
      <info>http://www.bigbuckbunny.org/</info>
      <annotation>Big Buck Bunny is a short animated film by the Blender Institute, part of the Blender Foundation.</annotation>
      <location>files/bunny.mp3</location>
      <image>files/bunny.jpg</image>
    </track>
    <track>
      <title>PNG image with duration</title>
      <creator>the Peach Open Movie Project</creator>
      <annotation>Big Buck Bunny is a short animated film by the Blender Institute, part of the Blender Foundation.</annotation>
      <location>files/bunny.png</location>
      <meta rel="duration">10</meta>
    </track>
    <track>
      <title>Youtube video with start</title>
      <creator>the Peach Open Movie Project</creator>
      <info>http://www.bigbuckbunny.org/</info>
      <annotation>Big Buck Bunny is a short animated film by the Blender Institute, part of the Blender Foundation.</annotation>
      <location>http://youtube.com/watch?v=IBTE-RoMsvw</location>
      <meta rel="start">10</meta>
    </track>
  </tracklist>
</playlist>

Be sure that you save your playlist as a plain text file.

NO characters outside of the tags!!!

Posted: Mon, 2009-10-26 12:19 WardB

Almost there. The playlist loads properly now so the only thing left is to get the playlist to change depending on the dropdown selection. Here is the script so far: I probably have the different versions mixed with each other in the head. The old style is the only thing I have to work with and have difficulty trying to make it work with the current version. Thank you again for your patience and help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>WardB - JWMP v4.6.x - swfobject v2.2</title>
    <script src="http://www.google.com/jsapi"></script>
    <script>
      google.load('swfobject', '2.2');
    </script>
    <script type="text/javascript">
      var flashvars =
      {
        'file':                        'playlist.xml',
        'frontcolor':                  '86C29D', // text & icons (green)
        'backcolor':                   '003367', // playlist background (blue)
        'lightcolor':                  'C286BA', // selected text/track highlight (red)
        'screencolor':                 '000000', // screen background (white)
        'id':                          'playerID',
        'playlist':                    'right',
        'playlistsize':                '250',
        'autostart':                   'false'
      };
      var params =
      {
        'allowfullscreen':             'true',
        'allowscriptaccess':           'always',
        'bgcolor':                     '#000000'
      };
      var attributes =
      {
        'name':                        'playerID',
        'id':                          'playerID'
      };
      swfobject.embedSWF('player.swf', 'player', '750', '380', '9.0.124', false, flashvars, params, attributes);
	  
	  
	  var theItem;
var selFile;
var selBack;
var selFront;
var selLight;
function loadPlay(file, idx, backcolor, frontcolor, lightcolor, newImg)
{ 
  theItem = idx;
  selFile = file;
  selBack = backcolor;
  selFront = frontcolor;
  selLight = lightcolor;
  createPlayer(selFile, selBack, selFront, selLight);
  setTimeout("play()", 1100);
  var imgChg = document.getElementById('header');
  imgChg.innerHTML = '<img id="theImg" img src=' + newImg + ' width="673" height="126">';
};
    </script>
<script type="text/javascript">
 function alignl(ele){
     document.getElementById('lay').style.align=ele;}
	 </script>
  </head>
  <body>
    <div id="playercontainer" class="playercontainer" style="position:absolute; left:327px; top:138px; width:375px; height:233px; z-index:1"><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 id="Layer1" style="position:absolute; left:288px; top:577px; width:441px; height:96px; z-index:1">
      <form id="theForm2" name="theForm2">
        <select name="sel1" style="width:300px">
          <option>Video Galleries</option>
          <option value=href="javascript:loadPlay('playlist1.xml', 1, 0x00000, 0xFCE396, 0xFFD700, 'winter.jpg')" selected>Playlist </option>
          <option value=href="javascript:loadPlay('playlist2.xml', 1, 0x00000, 0xFCE396, 0xFFD700, 'winter.jpg')">Playlist2</option>
          <option value="playlist3.xml">Playlist3</option>
        </select>
        <span class="style1">  Select Gallery Year </span>
      </form>
  </div>
  </body>
</html>

Posted: Tue, 2009-10-27 01:00 hobbs

Your pages:

http://willswonders.myip.org:8074/WardB-1.html

http://willswonders.myip.org:8074/WardB-2.html

Posted: Wed, 2009-10-28 19:22 WardB

@ hobbs,
I can't thank you enough for helping me get the new player working properly. I have yet to build the page but the player is working perfectly. One last question, is there a way I can put a picture in the players place when the page loads and then have the player load when the selection is made? This would be strictly non functional but an asthetic effect. Once again, thank you...

Posted: Wed, 2009-10-28 20:09 hobbs

swfobject v2.2 monitors the loading of the DOM (essentially the page as it is loaded into the browser) and instantiates the player at the appropriate time, which for relatively simple pages is almost instantly, otherwise you would see the alternate content message "Get the Adobe Flash Player...".

To have an image showing before the video file starts, I would recommend using preview images in your playlist, at least for the first track.

I have added a preview to the playlist used for the two demo pages. Take a look at them and see if that's suitable. The snapshot was captured using the Snapshot plugin which you can see here: http://willswonders.myip.org:8074/Simple_Snapshot.html (only the first track)

If you would like to use the snapshot utility to create preview images, I can help you set it up on your site using the working code that I have. Or, maybe your video editor/encoder can export a preview images.

Alternatively, if you really want to have an image in place of the player and not show tha player at all until the user clicks on the image, I can show you how to set that up.

Posted: Wed, 2009-10-28 20:38 wbhood

I was trying to get the image in place of the player using the flashvar: 'image': 'http://www.tosaband.com/JWplayer/splash.jpg' but I thnk that is what you just previewed. The best would be to have a picture in place of the player until a gallery was selcted. That way I could create a splash screen when the page opened. I thought the example you posted looked a little choppy with the two pix next to each other. I don't plan on using any thumbnails in the playlists. Just title, time and description.

Posted: Wed, 2009-10-28 20:51 hobbs

I changed: http://willswonders.myip.org:8074/WardB-2.html

You can use the same CSS & JavaScript for WardB-1.html

Posted: Wed, 2009-10-28 21:53 wbhood

That is exactly the effect I was looking for. Now that I have all the pieces I will put the page together. I'm sure all band members will get a kick out of the new player. A last question is probably with a config tweak. I have the autoplay set to false but when you load a playlist from the dropdown, it starts the video instead of waiting. Is there an adjustment I am missing? Please stop by the site in a week or so and I should have it done. What is really great is that in the future movies each year can be added by simply adding a dropdown item and a playlist.

Posted: Thu, 2009-10-29 00:45 hobbs

HO, HO, HO!

I added a snip of code to start the player when the playlist was selected and the image disappeared because i thought that was probably what you wanted to happen.

Remove the code in bold and the player won't start until the user clicks on the play button.

        <select name="sel1" style="width:300px" onchange="gid('overlay').style.visibility='hidden'; gid('playerID').sendEvent('LOAD', document.theForm2.sel1.value); <strong>gid('playerID').sendEvent('ITEM', 0);</strong>">

New Ver. Config Problems

JW Player

AddOns

AdSolution

Bits on the Run

Open Video Ads

Company