Embedding a Playlist for Streaming Video – using JW Player

Embedding a video/audio playlist is not difficult at all, it only requires your full attention. In this tutorial (part 2), I’ll show you how to embed a dynamic playlist. A dynamic playlists differs with a regular playlist in a sense that you do not need to create a separate xml file.  For this tutorial, you need to download and install JW Player 5.10 and you also need a S3 Amazon/CloudFront account.
This version of JW Player is no longer available, but we keep this tutorials for those who still have a copy of version 5.10

Note: Dynamic playists for streaming video is no longersupported in JWplayer 6.x,you need to work with a .smill playlist instead.

If you missed the previous tutorial, How to Embed Streaming Video & Audio with HTML5 Fallback – using JW Player 5.6, please try that out first before you proceed because it explains installing JW Player, embedding video/audio and configuring your CloudFront account in great detail. As long as you cannot embed a video, this tutorial won’t help you a lot, unless you are already acquainted with JW player and want to move on quickly.

Write the details down to work quickly

It is best to be organized and get all the info you need in one place so that you can copy and paste rapidly.  You may open a text editor or work directly in the editor of your website. A text file is probably most convenient since you can save it as a template for later projects. Here you find an example of you will need:

width: 600 height: 400
name: video-1.mp4
name: video-2.mp4
name: video-3.mp4
streaming distribution: s3advzb3o45ezk.cloudfront.net
bucket name: ardennesinfo.s3.amazon.com
flashplayer: http://www.yourdomain.com/mediaplayer/player.swf
javascript: http://www.yourdomain.com/mediaplayer/jwplayer.js

What does the above mean?

width and height sets the dimensions of all the videos in the playlist.   You actually do not need to downsize the videos to fit these dimensions. The player fits them nicely in the player window. This settings will determine the size of all the videos in your playlist. It is not possible to vary the size per individual video.
name: As you can see, I wrote down 3 names. You may add as many as you like.  For clarity I kept it simple, but you need to use the real names of videos and make sure they contain no typos. Double check, because there is nothing so frustrating as a video that does not show up.
streaming distribution: As explained in Part 1, you need to get the streaming distribution name of your bucket. If you have not prepared such a bucket, do it now and retrieve the name, like 1s3advzb3o45ezk.cloudfront.net for instance.  Yours will be different, of course.
bucket name: Is the original name of the same bucket you use for the streaming distribution.
flashplayer: Indicates the path to where JW player resides on your domain. We presume you installed JW Player in a folder called mediaplayer but you can call it anything you like, of course.
javascript: Indicates the path to where the JW player  javascript resides on your domain. This is the same folder as for the JW player itself.

OK, have you written down the details en checked for typos?

Now we need to adapt the following line of code, which we are going to place in the header of your page:

<script type='text/javascript' src='http://www.yourdomain.com/mediaplayer/jwplayer.js'></script>

Change the red part in that line of code to reflect the location of the jwplayer.js on your site. Since you wrote that path down in your text document, this is easy.
When you have done that, copy this line of code again.
Now open the html page with a html editor.  If you work with WordPress, you best follow this tutorial: Linking-a-script-in-WordPress-theme.pdf.
For regular html pages, do the following:

1. Locate the end tag of title, namely </title> somewhere in the top part of the page in the head section.  You will only see this with a HTML editor, visual editors hide this sort of information. If you can’t find it immediately, use the search function, which generally is Control + F for Windows or Command + F for Mac.
2. When found, place the cursor directly after the </title> end tag and press ENTER to create a new line.
3. Paste the following line on the empty line: <script type=’text/javascript’ src=’http://www.yourdomain.com/mediaplayer/jwplayer.js’></script>

You should have something like this now:

other stuff...
<title>My HTML page</title>
<script type='text/javascript' src='http://www.yourdomain.com/mediaplayer/jwplayer.js'></script>
other stuff...

Save the page.  That’s it.  We are done with the preparations.

Be ready to see a complicated piece of code. if you followed Part 1  of the tutorial, it is explained line by line, so I’m not going to repeat that here.  However, some parts are not there, namely all references to an individual video.  Since we are going to embed a playlist, there is no need to set the attributes for a video on its own.

<div id="container1"  >Loading video...</div>
          <script type="text/javascript">
              jwplayer('container1').setup(
              {
                  'id': 'container1',
                  'wmode': 'transparent',
                  'icons': 'true',
                  'allowscriptaccess': 'always',
                  'allownetworking': 'all',
                  'width': '500', 'height': '307',
                  'controlbar': 'bottom',
                  'dock': 'false',
                  'flashplayer': 'http://yourdomain.com/mediaplayer/player.swf',
                   Here we will add the playlist attributes
               });
          </script>

You only need to adapt the width and height according to your situation. So, if you want show the video at a reasonable size, you will have to increase the width, because the playlist takes some space too and that is included in that width if you place it left or right.

For example, if you want the video itself to show at a width of 400 pixels and the playlist at 250, set the width to 650 (250+400), like this:

'width': '650', 'height': '307',

OK, when you have set it to your liking, we only need to fill in the path to the player itself:

'flashplayer': 'http://yourdomain.com/mediaplayer/player.swf',

If you called the folder mediaplayer, then just change the domain name, otherwise, adapt the folder name.
When this is set, we concentrate on the playlist part, which we will insert into the code above.

The playlist elements

This looks even more complex, but I’ll beak it down for you:

'playlist.position': 'right',
    'playlist.size': '250',
    'playlist': [
        {
           'file': 'video-1.mp4',
           'title': 'My first video',
           'provider': 'rtmp',
           'streamer': 'rtmp://xxxxxxxx.cloudfront.net/cfx/st',
           'image': 'http://yourdomain/images/thumbs/video1.jpg',
           'description': 'The Wooden Dimensions project'
        },
        {
           'file': 'video-2.mp4',
           'title': 'My second video',
           'provider': 'rtmp',
           'streamer': 'rtmp://xxxxxxxx.cloudfront.net/cfx/st',
           'image': 'http://yourdomain/images/thumbs/video2.jpg',
           'description': 'Traffic filmed on the road'
        },
        {
           'file': 'video-3.mp4',
           'title': 'My last video',
           'provider': 'rtmp',
           'streamer': 'rtmp://xxxxxxxx.cloudfront.net/cfx/st',
           'image': 'http://yourdomain/images/thumbs/video3.jpg',  
           'description': 'Alesis, a mixer for Mac' } ]

The first part is playlist.position.  It determines where the playlist itself shows up. This has 4 options: top, bottom, left. right. Most people prefer it on the right, but experiement with this setting to find what you like best. For this example. I’m going to place it right.

'playlist.position': 'right',

playlist.size is expressed in pixels, like width. Following the example above, I use 250.

    'playlist.size': '250',

We can copy and past this under the code above, so that we get:

<div id="container1"  >Loading video...</div>
          <script type="text/javascript">
              jwplayer('container1').setup(
              {
                  'id': 'container1',
                  'wmode': 'transparent',
                  'icons': 'true',
                  'allowscriptaccess': 'always',
                  'allownetworking': 'all',
                  'width': '650', 'height': '307',
                  'controlbar': 'bottom',
                  'dock': 'false',
                  'flashplayer': 'http://yourdomain.com/mediaplayer/player.swf',
                  'playlist.position': 'right',
                  'playlist.size': '250',
              });
          </script>

Note the comma after ‘playlist.size’: ‘250’,
As long as we have to add attributes, we need to end each attribute with a comma, to indicate that more elements are going to follow.
Therefore, the last line of code has no comma.  But we are not that far yet.

Now, we get the individual videos to place in our list.  A dynamic playlist is a block of code on its own. Therefore it starts with:

'playlist': [

and ends with:

]

Since this is the last piece of code in the embedding script, we do not close with a comma this time. So, now we have:

<div id="container1"  >Loading video...</div>
          <script type="text/javascript">
              jwplayer('container1').setup(
              {
                  'id': 'container1',
                  'wmode': 'transparent',
                  'icons': 'true',
                  'allowscriptaccess': 'always',
                  'allownetworking': 'all',
                  'width': '650', 'height': '307',
                  'controlbar': 'bottom',
                  'dock': 'false',
                  'flashplayer': 'http://yourdomain.com/mediaplayer/player.swf',
                  'playlist.position': 'right',
                  'playlist.size': '250',
                  'playlist': [
                   ]
              });
          </script>

After that, we place the individual videos one by one in that block. Consider this:

         {
           'file': 'video-1.mp4',
           'title': 'My first video',
           'provider': 'rtmp',
           'streamer': 'rtmp://xxxxxxxx.cloudfront.net/cfx/st',
           'image': 'http://yourdomain/images/thumbs/video1.jpg',
           'description': 'The Wooden Dimensions project'
        },

file is the name of your video. Since we are going to stream from Amazon CloudFront, you only need to give the name of the video. If your video is placed in a folder within the bucket, you need to add that as well.  So, if your folder is called myproject, and the video is called video-1.mp4, then you use myproject/video-1.mp4. Otherwise, just use the name of the video. Watch it, this is case sensitive. So, Video-1 is not the same as video-1.

title is the title of your video. It will be shown in bold in the playlist.

provider indicates the type of media used, in this case rtmp, since we use the rtmp software delivered by the CloudFront service. That is one of the great advantages of CloudFront, you do not need to install streaming server software, it is already there for you.

streamer is the path to the rtmp software.  This is always located at the streaming distribution of your bucket.  Your bucket needs to be configured for streaming or this will not work. See Part 1 if you have not set a streaming distribution yet.
You only need the actual name of the streaming distribution, which is a combination of alpha characters and numbers. This can be found via the AWS console (see Part 1).

So, if your streaming distribution is http://d2v6eyhklxdwou.cloudfront.net, then you only copy this part ( in red): http://d2v6eyhklxdwou.cloudfront.net

and you replace the red part of this line:

'streamer': 'rtmp://xxxxxxxx.cloudfront.net/cfx/st',

so that you get:

'streamer': 'rtmp:/d2v6eyhklxdwou.cloudfront.net/cfx/st',

image is the thumbnail used in the playlist, but it is also used as the posterimage for that particular video. The easy way out is to place the images on your domain and use an absolute URL.
If your domain is called yourdomain.com and you placed your posterimage in the images/thumb folder, then your URL is http://www.yourdomain.com/images/thumb/myposterimage.jpg

Posterimages or thumbnails can be jpg and png. it is best to give your posterimages the same size as you plan to display the videos.  Smaller sizes will be enlarged by the player and that gives a fuzzy result.  Better too big then too small, but don’t overdo it, because weight matters.  Heavy posterimages take long to download, especially if you have many videos in your dynamic playlist.

You may also link to posterimages on S3 amazon, but then you need a crossdomain.xml file, otherwise the images will not show up.  Here is a tutorial on how to do that:
https://www.wp21century.com/using-crossdomain-xml-for-subtitles-and-playlists/

The description shows up under the title in the playlist. Keep it short because you do not have much space.

Below you see how a dynamic playlist looks and where the elements are located:

OK, now we paste our video code into the playlist block:

<div id="container1"  >Loading video...</div>
          <script type="text/javascript">
              jwplayer('container1').setup(
              {
                  'id': 'container1',
                  'wmode': 'transparent',
                  'icons': 'true',
                  'allowscriptaccess': 'always',
                  'allownetworking': 'all',
                  'width': '650', 'height': '307',
                  'controlbar': 'bottom',
                  'dock': 'false',
                  'flashplayer': 'http://yourdomain.com/mediaplayer/player.swf',
                  'playlist.position': 'right',
                  'playlist.size': '250',
                  'playlist': [
                  { 
                  'file': 'video-1.mp4',
                  'title': 'My first video', 
                  'provider': 'rtmp', 
                  'streamer': 'rtmp://xxxxxxxx.cloudfront.net/cfx/st', 
                  'image': 'http://yourdomain/images/thumbs/video1.jpg', 
                  'description': 'The Wooden Dimensions project' 
                  },
                  ]
              });
          </script>

Note that this time, we added again a comma to our last statement, because we plan to add 2 more video blocks.

You actually can paste the same block of code again and adapt the elements to your situation later on:

<div id="container1"  >Loading video...</div>
          <script type="text/javascript">
              jwplayer('container1').setup(
              {
                  'id': 'container1',
                  'wmode': 'transparent',
                  'icons': 'true',
                  'allowscriptaccess': 'always',
                  'allownetworking': 'all',
                  'width': '650', 'height': '307',
                  'controlbar': 'bottom',
                  'dock': 'false',
                  'flashplayer': 'http://yourdomain.com/mediaplayer/player.swf',
                  'playlist.position': 'right',
                  'playlist.size': '250',
                  'playlist': [
                       {
                        'file': 'video-1.mp4',
                        'title': 'My first video',
                        'provider': 'rtmp',
                        'streamer': 'rtmp://xxxxxxxx.cloudfront.net/cfx/st',
                        'image': 'http://yourdomain/images/thumbs/video1.jpg',
                        'description': 'The Wooden Dimensions project'
                       },
                       { 
                       'file': 'video-1.mp4',
                       'title': 'My first video', 
                       'provider': 'rtmp', 
                       'streamer': 'rtmp://xxxxxxxx.cloudfront.net/cfx/st', 
                       'image': 'http://yourdomain/images/thumbs/video1.jpg', 
                       'description': 'The Wooden Dimensions project' 
                       },
                    ]
              });
          </script>

You can repeat that again, so that you have 3 video blocks in there.  By the way, there is no limit to the amount of videos you can add:

<div id="container1"  >Loading video...</div>
          <script type="text/javascript">
              jwplayer('container1').setup(
              {
                  'id': 'container1',
                  'wmode': 'transparent',
                  'icons': 'true',
                  'allowscriptaccess': 'always',
                  'allownetworking': 'all',
                  'width': '650', 'height': '307',
                  'controlbar': 'bottom',
                  'dock': 'false',
                  'flashplayer': 'http://yourdomain.com/mediaplayer/player.swf',
                  'playlist.position': 'right',
                  'playlist.size': '250',
                  'playlist': [
                       {
                        'file': 'video-1.mp4',
                        'title': 'My first video',
                        'provider': 'rtmp',
                        'streamer': 'rtmp://xxxxxxxx.cloudfront.net/cfx/st',
                        'image': 'http://yourdomain/images/thumbs/video1.jpg',
                        'description': 'The Wooden Dimensions project'
                       },
                        {
                        'file': 'video-1.mp4',
                        'title': 'My first video',
                        'provider': 'rtmp',
                        'streamer': 'rtmp://xxxxxxxx.cloudfront.net/cfx/st',
                        'image': 'http://yourdomain/images/thumbs/video1.jpg',
                        'description': 'The Wooden Dimensions project'
                       },
                       { 
                       'file': 'video-1.mp4',
                       'title': 'My first video', 
                       'provider': 'rtmp', 
                       'streamer': 'rtmp://xxxxxxxx.cloudfront.net/cfx/st', 
                       'image': 'http://yourdomain/images/thumbs/video1.jpg', 
                       'description': 'The Wooden Dimensions project' 
                       },
                    ]
              });
          </script>

This time, I made a mistake.  Can you see which mistake, given the fact this is the last video I added?

Right, I have to remove the last comma!  So, here is the correct code with the red parts you can adapt according to the previous instructions:

<div id="container1"  >Loading video...</div>
          <script type="text/javascript">
              jwplayer('container1').setup(
              {
                  'id': 'container1',
                  'wmode': 'transparent',
                  'icons': 'true',
                  'allowscriptaccess': 'always',
                  'allownetworking': 'all',
                  'width': '650', 'height': '307',
                  'controlbar': 'bottom',
                  'dock': 'false',
                  'flashplayer': 'http://yourdomain.com/mediaplayer/player.swf',
                  'playlist.position': 'right',
                  'playlist.size': '250',
                  'playlist': [
                       {
                        'file': 'video-1.mp4',
                        'title': 'My first video',
                        'provider': 'rtmp',
                        'streamer': 'rtmp://xxxxxxxx.cloudfront.net/cfx/st',
                        'image': 'http://yourdomain/images/thumbs/video1.jpg',
                        'description': 'The Wooden Dimensions project'
                       },
                       {
                        'file': 'video-2.mp4',
                        'title': 'My second video',
                        'provider': 'rtmp',
                        'streamer': 'rtmp://xxxxxxxx.cloudfront.net/cfx/st',
                        'image': 'http://yourdomain/images/thumbs/video2.jpg',
                        'description': 'Traffic filmed on the road'
                       },
                       {
                        'file': 'video-3.mp4',
                        'title': 'My last video',
                        'provider': 'rtmp',
                        'streamer': 'rtmp://xxxxxxxx.cloudfront.net/cfx/st',
                        'image': 'http://yourdomain/images/thumbs/video1.jpg',
                        'description': 'The Wooden Dimensions project'
                       }
                     ]
              });
          </script>

I suggest you copy and paste this code template in a text document so that you can re-use it later on.

What you need to watch when embedding playlists

Typos are the most common problem when embedding video or audio, and this is not different for playlists.  Even experienced developers make mistakes and have to check their code, so before you publish what you have done, check what you wrote, line by line.

Note that I linked to posterimages (image) located on S3 Amazon.  Therefore, I had to place a crossdomain.xml to give access to the images, otherwise Flash will simply ignore it for security reasons:

Very important also: This scenario only works with public video and images! Make sure to check your ACL settings.

Can I compact the code?

Yes, you can. I formatted it this way so that it looks clear and easy to check.  Below you find a compact version. Spaces are not needed at all:

<div id="container1"  >Loading video...</div>
<script type="text/javascript">
jwplayer('container1').setup(
{'id': 'container1','wmode': 'transparent','icons': 'true','allowscriptaccess': 'always','allownetworking':
'all','width': '650', 'height': '307','controlbar': 'bottom','dock': 'false','playlist.position': 'right',
'playlist.size': '250','playlist': {'file': 'video-1.mp4','title': 'My first video','provider': 'rtmp',
'streamer': 'rtmp://xxxxxxxx.cloudfront.net/cfx/st','image': 'http://yourdomain/images/thumbs/video1.jpg',
'description': 'The Wooden Dimensions project'},
'flashplayer': 'http://yourdomain.com/mediaplayer/player.swf',
{'file': 'video-2.mp4','title': 'My second video','provider': 'rtmp',
'streamer': 'rtmp://xxxxxxxx.cloudfront.net/cfx/st','image': 'http://yourdomain/images/thumbs/video2.jpg',
'description': 'Traffic filmed on the road'},{'file': 'video-3.mp4','title': 'My last video',
'provider': 'rtmp','streamer': 'rtmp://xxxxxxxx.cloudfront.net/cfx/st',
'image': 'http://yourdomain/images/thumbs/video1.jpg','description': 'The Wooden Dimensions project'}
]});</script>

This will work as well, it is just not so easy to read.
That is it for now. I hope you find this useful.