Trouble utilizing JW Player on our site

 
The best (and about the only way) to get useful and effective help, is to post a link to your Test Page. We can't guess.

Thanks for your response. I actually got it working (at www.TheSignChef.com) However, the video is pretty jumpy, and now I am trying to figure out how to remove the "Share This" screen that comes up when you hit pause. Would you happen to know anything about this issue?

Thanks again!

 
The "Share This" comes from using player-viral.swf.

If you don't want the viral plugin, use player.swf

Your video plays fine for me.

It's really an MP4 file, so it should have an extension of "mp4".

You should use MP4Box to move the metadata boxes to the front of the file so it starts playing quickly. Some encoders also have a "quick-start" or "For the Internet" option that does the same thing.

Thanks again for all your help! I was able to fix the "Share This" problem. Also, I downloaded the MP4Box but now I'm running into a little more confusion. When I click the "Add" button and select my video, an error pops up stating "Concatenate joinging is not yet supported. Choose a single video or audio stream." Any idea what this could mean?

-K

 
You should run MP4Box from a command window/command prompt or DOS box as it's sometimes called.

Start, Run cmd.exe

Change directories to your video files with MP4Box in the same directory.

Type: "MP4Box -inter 0.5 ChefWelcomeRon.mp4" (no quotes)

That's all.

Sorry for always returning with more and more questions! I am now trying to figure out if there is a way to set up JW Player so that the video begins buffering when you arrive at our site, rather than beginning after the viewer hits play. Any info on this? Thanks again! :)

 
This is a question that's been asked a thousand times and is kind of controversial.

A few years ago, the v2 player had this pre-loading feature. What resulted was some site administrators having heart attacks (figuratively) when they got their traffic bill. So the feature was removed.

The excessive traffic resulted from the fact that most visitors don't watch much of the video content, so without pre-loading, the traffic was low. With pre-loading, every visitor was causing a download of the full video, watched or not. The large video sites, like YouTube, have automatic throttling to reduce this type of excessive traffic.

Anyway, you can easily setup the player to pre-load. The technique has been posted many times. Basically, you have the player in autostart=true, monitor the position, when the position is > 0, indicating downloading has started, you pause the player. You lose the preview image, so if you have to have a preview image, then you position an image over the displayarea or the whole player until the user clicks something to start the player.

Example of the overloaded image here (not pre-loading):
http://willswonders.myip.org:8074/WardB-2.html
Select a gallery to start the player.

The image can be replaced when the player is paused, see:
http://willswonders.myip.org:8074/WardB-2b.html
The image is purposely offset for testing purposes to expose the playlist and the controlbar.

hobbs

thanks so much for sharing your code at

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

and

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

showing the configuration for three playlists and one player.

That is one thing I really like this Forum. Everyone is so helpful to new readers such as myself.

May I ask you a question?

Is it possible, by using the existing code on those two pages, to create three playlists and one viewer that is configured to use the design of the 3D FLOW Plugin?

Or would you be willing to help me and other interested readers of this forum to create new code that would work?

For Example

I have been playing with the FLOW Plugin using one player and one playlist, and I understand how to position the FLOW playlist on the right side and the left side and the bottom of the viewer, and how to adjust the width or the height of the playlist, depending upon the configuration.

May I ask you another question?

Where in your code do we add these variables? Of course, we would add these variables in the flashvar area of your code, but would we need to make any additional changes anyplace else in the code?

Thanks in advance for your help.

 
The Flow plugin does not handle loading a new playlist through the JavaScript API. You have to re-instantiate the player, which isn't so bad, except for a brief flash of Flash.

Do you want to use the drop-down form, like on the WardB pages, to select your playlists?

Do you still want the image covering the displayarea or the whole player when the player is not playing?

As soon as I have answers to those questions, I will add the playlist selection to my Flow plugin page, so you can see how the code looks.

EDIT: It's here with the disappearing image:

    http://willswonders.myip.org:8074/Simple_Flow_Playlist_Form.html

Wow! You did a lot of work in a short amount of time. You are amazing! Thanks for all of your work.

And I thought I would just be adding the Flow Plugin and a few variables in the flashvar area, just like for an average player on an average web page.

You asked

"Do you want to use the drop-down form, like on the WardB pages, to select your playlists?"

Yes that would be fine.

If it wouldn't be much of a bother, it would also be interesting for all of us to see a sample of one or two other choices, since we don't know what choices are actually available to us.

You also asked

"Do you still want the image covering the displayarea or the whole player when the player is not playing?"

Well, I have copied the code for the way that you have it now, so if it isn't too much trouble, could you also show us what it would look like the other way?

Another thing that has come up while I have been playing with the code today is this:

On my first computer, I can set up the player such that the picture is exactly in the player display area with no black on the top, bottom or sides. Then when I go to a second computer, the monitor resolution is different, so the picture has black on the top, bottom or sides, even though it was perfect on the first computer.

My question is

Is there any way to set up this player/picture combination such that the resolution of the viewer's computer doesn't matter? In other words, can I adjust the player to a particular size, and then match the picture to it, and then have it look the same on any computer? Or can I do it the other way around? Or is this just a "feature" of the player/picture combination, and something that can never be calibrated for?

Thanks for your help again.

One more thing I noticed while I was copying, pasting, and storing your code on the test page in my documents folder.

You commented all of the lines of code for the Flow Plugin and variables. You must have read my mind. I was going to ask you for that, but I thought it might be too much trouble.

So thanks so much for that.

Since you seem to be so patient with me today, can you comment this area of your code as well

<
<style type="text/css">
img.overlay
{
position: absolute;
top: 138px;
left: 327px;
width: 500px;
height: 531px;
z-index: 1;
}

div.playercontainer
{
position: absolute;
top: 138px;
left: 327px;
width: 500px;
height: 531px;
z-index: 0;
}

div.layer1
{
position: absolute;
top: 675px;
left: 380px;
width: 441px;
height: 96px;
z-index: 2;
}

select.select1
{
width: 300px;
color: black;
font: italic bold .75em arial;
}

span.span1
{
color: blue;
font: italic bold .75em arial;
>

 
For the playlist selection method, there are many, many methods of making the selection, it's best to look on Google.

Some that are used with the JW Player are:

1) Drop down menus that are above the player with a category or genre showing. When the user clicks or hovers on a category, a drop-down menu appears with selections and sometimes sub-selections. See: http://www.cssmenus.co.uk/ for some.

2) Images, links, buttons, or any "clickable" HTML element that can be arranged on the page as a list, a mosaic of images, etc. See: http://willswonders.myip.org:8074/Simple_YouTube.html for a drop-down form above the player and buttons below the player.

3) Playlists of links.

4) Horizontal playlists with clickable images. See: http://willswonders.myip.org:8074/Simple_RTMP.html

I don't currently have any drop-down menus setup, but if you find one that you like, post a link to it, and I'll help you set it up (if it's practical to use with the player).

To cover less than the whole player, simply reduce the image height (in the CSS and the image element) by the amount that you want to expose. That would be 229 to expose the Flow plugin and the player's controlbar, so change this code:

...AND...

    <img id="overlay"         class="overlay" src="/images/Grande Parade Overlay.jpg" width="500" height="<strong>302</strong>" />

The monitor's resolution should have nothing to do with the size and location of the player and the covering image because they are both absolutely positioned from the top-left. To change the positioning, you should be changing the CSS. To change the size, you have to change the CSS, the player's size, and the image element size. It should appear the same on all computers.

I checked out some of the example links you gave above and I did not realize there were so many options available. Let me think about it for awhile and I will ask you to help me set up a menu system later. For now, I am going to be happy with the menu you have included in your code.

Yes after you showed me the code, I can see how this 3 playlist, 1 player code would produce a player and a picture in the exact spot.

Sorry, I shifted direction on you, and forgot to tell you...

I was actually talking about positioning a regular player on a regular web page using the following regular code

<div id="videocontainer09-01">Player 1</div>
<script type='text/javascript' src='swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('mediaplayer.swf','player09-01','320','258','9.0.124');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addVariable('file', 'vid09.flv&image=vid09.jpg');
s1.addVariable('backcolor', '0xFFFFFF'); // face of buttons
s1.addVariable('frontcolor', '0x404040'); // button symbols & playlist text
s1.addVariable('lightcolor', '0xFF0000'); // highlighted playlist item
s1.addVariable('screencolor', '0x000000'); // screen background color
s1.write('videocontainer09-01');
</script>

I change the 320 x 258 to suit me. I also reduce any picture proportionately, starting with a measurement of 800 x 600. For example, the picture I have used in my code is sized at 761 x 571. If I am using a menu, I adjust the size to suit me.

Maybe I am doing it wrong. All I know, is that the player/picture combination looks perfect on my first computer and it shows black on the sides, top or bottom on the second computer.

If you have a junk email address that you give out to strangers on this forum, I could send you a couple of screen shots to show you what I mean. Just type your email here and I will take care of the rest. (Or I could just post the screen shots on my site if you wish.) Let me know how you want to proceed.

But, in any case, thanks for all of your help.

hobbs

Your code was very easy to modify for my needs, and it is working perfectly on my test site. Thanks for making it easy for us non-programmers!

Can I ask you for two more modifications to your code?

Is there a way to play the first video, and after that video completes, the next video starts automatically, the next video starts automatically, etc until the playlist is complete, then it stops after playing the last video?

Following other code that I found on this Forum, I have done this before for many single player, single playlist configurations, but I would not even begin to know how to make the changes needed in your code to make that happen. (Or is this not possible with multiple playlists?)

Note: Each playlist can play to the end separately from the other playlists.

Can you tell me how to remove the big overlaying picture in your code? Under certain circumstances, it seems a little redundant to have the two pictures. I would like the option to have it or not have it, depending upon my mood, and I would love it if you could show me how to remove it or add it.

Thanks again for your help.

Ooops! I spoke too soon.

I was able to get your Flow code to work. I am still having trouble with the regular playlist code like your examples here

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

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

I went to view > source on your pages, and copied and pasted the code exactly into my web page. To make it simple, I made no changes to your code or to your file names, except the name of one of my .jpg pictures.

I have these files in the root directory of my domain right next to the .html files.

player.swf
swfobject.js
playlist_WardB1.xml
playlist_WardB2.xml
playlist_WardB3.xml
qing_01.jpg

Feel free to stop by my test page and have a look

http://edwardjerome.com/videos-03test.html

Can you tell me what I am doing wrong?

Thanks again for your help. I feel like I am almost there. Please don't give up on me now.

 
same code withut the image overlay.

<html lang="en">

  <head>

    <title>Simple Flow Playlist Form (No Image Overlay) - JWMP v4.7.x - swfobject v2.2</title>

    <style type="text/css">
      div.playercontainer
      {
        position:               absolute;
        top:                       138px;
        left:                      327px;
        width:                     500px;
        height:                    531px;
        z-index:                       0;
      }

      div.layer1
      {
        position:               absolute;
        top:                       675px;
        left:                      380px;
        width:                     441px;
        height:                     96px;
        z-index:                       2;
      }

      select.form1
      {
      }

      select.select1
      {
        width:                     300px;
        color:                     black;
        font:    italic bold .75em arial;
      }

      span.span1
      {
        color:                      blue;
        font:    italic bold .75em arial;
      }
    </style>

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

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

    <script type="text/javascript">
      function createPlayer(file)
      {
        swfobject.removeSWF('playerID');

        gid('playercontainer').innerHTML = '<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>';

        var flashvars =
        {
          'file':                                      encodeURIComponent(file),

          'plugins':                                  'http://willswonders.myip.org:8074/flow',
          'flow.position':                            'bottom',  // over, bottom, top - default: over
          'flow.size':                                '210',     // use with bottom, top
          'flow.coverheight':                         '120',     // default:
          'flow.showtext':                            'true',    // true, false - default: true

/*
          'flow.defaultcover':                        'default.jpg',            // default image if no thumbnail is available
          'flow.xposition':                           '0',                      // horizontal position of the plugin
          'flow.yposition':                           '0',                      // vertical Position of the plugin
          'flow.coverwidth':                          '150',                    // maximum width of the cover
          'flow.coverheight':                         'auto',                   // default this flashvar is set to auto which equals half the display height, this is overridable by a numeric value which restricts the maximum height of the cover.
          'flow.covergap':                            '40',                     // horizontal width between covers
          'flow.coverangle':                          '60',                     // angle of not selected covers in degrees
          'flow.coverdepth':                          '150',                    // depth of not selected covers
          'flow.coveroffset':                         '60',                     // horizontal width between selected cover and not selected covers
          'flow.opacitydecrease':                     '0.1',                    // decrease of opacity of the covers going back (min:0, max:1)
          'flow.showreflection':                      'true',                   // show a reflection of the cover (true or false)
          'flow.reflectionoffset':                    '0',                      // vertical offset of reflection
          'flow.showtext':                            'true',                   // show title and description (true or false)
          'flow.titleoffset':                         '5',                      // vertical offset of title
          'flow.descriptionoffset':                   '25',                     // vertical offset of description
          'flow.font':                                'Arial Rounded MT Bold',  // font of title and description
          'flow.fontsize':                            '12',                     // size of font
          'flow.color':                               'F1F1F1',                 // color of font
          'flow.tweentime':                           '0.6',                    // elapsed time of one tween animation
          'flow.framerate':                           '30',                     // frame rate of plugin
          'flow.size':                                '150',                    // size of the plugin when it's positioned
*/

          'frontcolor':                               '86C29D',  // text & icons                  (green)
          'backcolor':                                '003367',  // playlist background           (blue)
          'lightcolor':                               'C286BA',  // selected text/track highlight (red)
          'screencolor':                              '0000FF',  // screen background             (black)
          'id':                                       'playerID',
          'autostart':                                'false'
        };

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

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

        swfobject.embedSWF('player-4.7.581.swf', 'player', '500', '531', '9.0.124', false, flashvars, params, attributes);
      };
    </script>

  </head>

  <body>

    <div id="playercontainer"  class="playercontainer" ></div>
    <div id="layer1"           class="layer1">
      <form id="form1"         class="form1" name="form1">
        <select name="select1" class="select1" onchange="createPlayer(document.form1.select1.value);">
          <option selected>Video Galleries</option>
          <option value="playlist_Flow_Form-1.xml">Playlist 1</option>
          <option value="playlist_Flow_Form-2.xml">Playlist 2</option>
          <option value="playlist_Flow_Form-3.xml">Playlist 3</option>
        </select>
        <span class="span1">Select Gallery Year</span>
      </form>
    </div>

  </body>

</html>

 
 
1) You don't need swfobject.js, it's loaded directly from Google's CDN by the client (user).

2) You are missing the default playlist playlist_WardB.xml. Of course, you can name the playlists anything you want, usually something descriptive after "playlist" is useful.

3) I moved all of the CSS to the style element in the head element. CSS is used for positioning and styling of HTML elements. A good source of informaton is: http://www.w3schools.com/css/css_intro.asp — also a good source of basic JavaScript.

4) If you aren't already using it, upgrade to the v4.7 player from here: http://developer.longtailvideo.com/trac/browser/trunk/as3

That code you gave us for the Flow Plugin looks great. I am going to go and test it out right now.

Can you give us the code without the overlay image for your two examples at

http://willswonders.myip.org:8074/WardB-2b.html
.
</strong>

Thanks so much.

 
WardB-2.html (No Image Overlay)

<html lang="en">

  <head>

    <title>WardB (No Image Overlay) - JWMP v4.7.x - swfobject v2.2</title>

    <style type="text/css">
      div.playercontainer
      {
        position:               absolute;
        top:                       138px;
        left:                      327px;
        width:                     750px;
        height:                    394px;
        z-index:                       0;
      }
    </style>

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

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

    <script type="text/javascript">
      var flashvars =
      {
        'file':                        'playlist_WardB.xml',
        'frontcolor':                  '86C29D', // text & icons (green)
        'backcolor':                   '003367', // playlist background (blue)
        'lightcolor':                  'C286BA', // selected text/track highlight (red)
        'screencolor':                 '000000', // screen background (white)
        'playlist':                    'right',
        'playlistsize':                '250',
        'id':                          'playerID',
        'autostart':                   'false'
      };

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

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

      swfobject.embedSWF('player.swf', 'player', '750', '394', '9.0.124', false, flashvars, params, attributes);
    </script>

    <script type="text/javascript">
      function gid(name)
      {
        return document.getElementById(name);
      };
    </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>
    <div id="Layer1" style="position:absolute; left:500px; top:550px; width:441px; height:96px; z-index:1">
      <form id="theForm2" name="theForm2">
        <select name="sel1" style="width:300px" onchange=" gid('playerID').sendEvent('LOAD', document.theForm2.sel1.value); gid('playerID').sendEvent('ITEM', 0);">
          <option selected>Video Galleries</option>
          <option value="playlist_WardB1.xml">Playlist 1</option>
          <option value="playlist_WardB2.xml">Playlist 2</option>
          <option value="playlist_WardB3.xml">Playlist 3</option>
        </select>
        <span class="style1">Select Gallery Year</span>
      </form>
    </div>

  </body>

</html> 

WardB-2b.html (No Image Overlay)

<html lang="en">

  <head>

    <title>WardB (No Image Overlay) - JWMP v4.6.x - swfobject v2.2</title>

    <style type="text/css">

      div.playercontainer
      {
        position:               absolute;
        top:                       138px;
        left:                      327px;
        width:                     750px;
        height:                    394px;
        z-index:                       0;
      }
    </style>

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

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

    <script type="text/javascript">
      var flashvars =
      {
        'file':                        'playlist_WardB.xml',
        'repeat':                      'always',
        'frontcolor':                  '86C29D', // text & icons (green)
        'backcolor':                   '003367', // playlist background (blue)
        'lightcolor':                  'C286BA', // selected text/track highlight (red)
        'screencolor':                 '000000', // screen background (white)
        'playlist':                    'right',
        'playlistsize':                '250',
        'id':                          'playerID',
        'autostart':                   'false'
      };

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

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

      swfobject.embedSWF('player.swf', 'player', '750', '394', '9.0.124', false, flashvars, params, attributes);
    </script>

    <script type="text/javascript">
      function gid(name)
      {
        return document.getElementById(name);
      };
    </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>
    <div id="Layer1" style="position:absolute; left:500px; top:550px; width:441px; height:96px; z-index:1">
      <form id="theForm2" name="theForm2">
        <select name="sel1" style="width:300px" onchange="gid('playerID').sendEvent('LOAD', document.theForm2.sel1.value); gid('playerID').sendEvent('ITEM', 0);">
          <option selected>Video Galleries</option>
          <option value="playlist_WardB1.xml">Playlist 1</option>
          <option value="playlist_WardB2.xml">Playlist 2</option>
          <option value="playlist_WardB3.xml">Playlist 3</option>
        </select>
        <span class="style1">Select Gallery Year</span>
      </form>
    </div>

  </body>

</html> 

They are essentially the same without the the image overlay.

[i]Untested — but should be OK, barring a few typOs![/i]

Is it possible to have the

swfobject.js

stored and referenced on my website and still use your code?

And if so, would you show us how to do that?

Hi Hobbs

Thanks for sending us all the code.

I had no luck with your "Flow Plugin without overlay picture" code.

Can you take a look and tell me what I am missing?

I have these files in the root directory of my domain

player-4.7.581.swf
playlist_Flow_Form-1.xml
playlist_Flow_Form-2.xml
playlist_Flow_Form-3.xml

And I simply copied and pasted your code into a test page on my website. Take a look here.

http://edwardjerome.com/videos-04test.html

If you could tell me what I did wrong, that would be great.

Now, I am going to go and see if I can get the "playlist without overlay picture" to work.

Thanks so much for your help.

hobbs

You are really good with this difficult coding. Thanks so much for all your hard work.

I copied and pasted your WardB-2.html (No Image Overlay) into another test web page, and it worked great.

Now I just need help with your Flow Plugin (No Image Overlay code and I should be all set.

There is no way that I could ever find what I am doing wrong, so I could really use your help.

Please check out

http://edwardjerome.com/videos-04test.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/

So please join the community of swfobject users and load swfobject from Google's CDN.

I am having issues getting my Image Rotator to work on my site.

The site that I am working on is . www.pigandpie.net/events.php

The player is not showing up. My XML file is located at:

www.pigandpie.net/events.xml

my images are located in www.pigandpie.net/eventphotos/event1.png

I am using Dreamweaver CS3 to load everything and I am still getting nothing.

Can someone please help. You can reach me at kristy@kgwebsitedesign.com

 
There is no Flash movie file here:

    http://www.pigandpie.net/imagerotator.swf

I have loaded the file that was in the zip file. Is there something else that I need to do with it?

 
You may have to set the permissions on imagerotator.swf

Try loading it in your browser using the URI that I posted, if it loads, it should work.

Thank you for your help!

 
You're welcome.

        Enjoy…  
 
 

Anyone out there that can help me to install the image rotator on my Wordpress blog??

I know how to use code to set up a widget but I do NOT know how to write code.

My blog is NOT self hosted. I use the dashboard screen for everything.

I want to create a slideshow in a single post - Is there another way to accomplish this

NJArtiste@optonline.net

Thanks

This one is for hobbs or anyone else that is interested

I like your Flow Playlist here

http://willswonders.myip.org:8074/Simple_Flow_Playlist_Form.html

Can you post the code for a Flow Playlist without the street scene picture covering the playlist at the beginning?

The following code, which you posted on November 14, does not work properly.

<title>Simple Flow Playlist Form (No Image Overlay) - JWMP v4.7.x - swfobject v2.2</title>

The dropdown box which allows you to change playlists appears just fine, but the rest of the page is blank or white. Maybe it is just a typo in your code or something. *apologizes*

The code you posted for WardB-2.html (No Image Overlay) and WardB-2a.html (No Image Overlay) works just fine for me.

Thanks!

 
    DOH!

My finger got stuck on the DELETE key.

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

Hi hobbs

Beautiful job on the Flow code. It works very nicely now.

Thanks for sharing your code with me!

As an early Christmas gift, if I could ask you for three more wishes regarding your WardB and the Flow code, here's what I would ask for:

Wish 1. With the Flow code, you have allowed me to choose the color and the font of both the dropdown playlist selection box and the label for the dropdown playlist selection box in your code, thus

Is it possible for you to modify your WardB code such that we can choose the font and the color with that code as well?

Wish 2. On the Longtailed forum I found code (shown below) that allowed me to create both WardB type single playlists and Flow type single playlists such that when I click on the first video, the first video plays to the end, then my playlist automatically plays the next video, the next video, the next video until my playlist is complete, without ever touching it again.

The WardB code and the Flow code that you created allows for multiple playlists on a single page, and that is a very cool thing.

My second wish is this: can you add code to both your WardB code and your Flow code such that when you click on the first video, the first video plays to the end, then your playlist automatically plays the next video, the next video, the next video until your playlist is complete? Or is that not possible because of having multiple playlists on a single web page?

It is not necessary (and possibly undesirable) to have all three playlists play until they are completed, with only one click of the mouse. You could click on the first video of the first playlist and that playlist would play to the end, and then stop. Then you could click on the first video of the second playlist and that one would play to the end, and then stop, and so on. Each playlist would be separate from the others, as far as automatically playing the entire playlist.

It would also be ok to have the WardB code working this way and not the Flow code, or vice versa. But it would be better if you could make both to work this way.

Here is the code that I am using for a single playlist that plays to the end after you click the first video. (The code is the same for Flow, except that you add the Flow-1 plugin along with a few variables.)

Wish 3. Now that you know my code above for a single playlist that plays until the end, (after you click on the first video), can you tell me how to adjust the above code such that if I *don't* want the playlist to play to the end, it won't?

There might be a time when I only want to play one video at a time from one of my playlists on a particular web page; how would I change my code above to make this happen?

Thank you very much for helping me.