Topics

What's New?


Tags/Keywords

artifacts aspect ratio audacity audio audio service avs converter aws blogs brightcove camcorder cloudberry explorer cloudfront compression embedding firefox flash flash video flv hd hdv high definition joomla jw player podcasting publishpod quicktime s3 s3 amazon s3 browser Skype software streaming video subtitles tubemogul upload video videocast video channel Video Channels/Networks video converter video format vimeo wordpress xlr youtube

Online Marketing - OnToplist.com
Online Marketing

Free Favicon Generator

Page copy protected against web site content infringement by Copyscape



How to Embed Streaming Video & Audio with HTML5 Fallback – using JW Player 5.6

By Rudolf Boogerman | Share this with your favorite social network
43 comments... Click to Contribute.

JW Player 5.6 (or higher)  is a Flash video/audio player created with Adobe Flex which has the capability to switch to HTML5 fallback mode if a non Flash browser is encountered. In this tutorial I’m going to show you how to download and install JW Player and how to embed video and audio from S3 Amazon/CloudFront, making sure the media will play in most circumstances.

If you do not know what S3 Amazon/CloudFront is, please have a look here first because it is currently one of the most important and affordable rich media storage solutions: S3 Amazon and video: introduction Another reason to use S3 Amazon is that RTMP streaming is really easy to implement. All it takes is one line of code.

This is what we are going to do here:

  1. Download and install JW player
  2. Preparing the S3 bucket for streaming and upload your video/audio
  3. Linking JW Player’s javacript file in the page header
  4. Embed a streaming video in a html site or WordPress
  5. Embed a streaming audio in a html site or WordPress
  6. Embedding more then one audio or video on the same page
  7. Add a poster image to video

But first we need to create a format of video that is acceptable for most devices. For this, I refer to the previous tutorial:How to encode a video simultaneously for web, iPhone, iPad, iPod & other handheld devices using HandBrake For audio, you can use either MP3 or M4a. In this tutorial we are going to use MP3. Just be aware that MP3 cannot be used for private streaming on S3 Amazon CloudFront. In that case, best use M4a which is widely supported as well.

Download and install JW player

First download the player. This is a zip file (archive) which you have to extract once you downloaded it. On Windows, right click on the zip file and select Extract. On Mac, simply double click the file and it will extract automatically. If all goes well, you should now have a folder called mediaplayer-5.6. The name of this folder may vary in time. Now do the following:

  1. Connect to your site with a FTP application. For this you can use the free open source application FileZilla. If you do not know how to work with a FTP application, view this video tutorial: Installing FileZilla (FTP application) & upload WordPress template
  2. Create a folder called mediaplayer in the root of your domain, so that you get something like this: www.yourdomain.com/mediaplayer/
  3. Open the folder mediaplayer-5.6 on your local computer and transfer the following files to the mediaplayer folder in your domain:
    • jwplayer.js
    • player.swf
  4. No other files are needed. Once uploaded, you are done with FTP, so you can close the FTP application

JW player is installed now. We are ready to embed our media.

Preparing the S3 bucket for streaming and upload your video/audio

I presume you have already a S3 account with CloudFront. If not, you can read the articles in the category S3 Amazon/Cloudfront to learn more about the service and how to create an account. Do the following: Sign in to the AWS Management Console.
Make sure the tab S3 is selected. Click on the button Create Bucket: aws-console-create-bucket

Then you get a dialog box. Fill in the Bucket Name. The name does not matter as long as the name is unique across the S3 Amazon network and you do not use special characters or spaces.

Then select a Region.

aws-console-create-bucket2

This region should be close to your target audience although it doesn’t really matter because we are going to use the CloudFront service anyway. CloudFront distributes the media over all the servers Worldwide when applicable. Click the Create button. If you get an error message, the name is already taken:

aws-console-create-bucket3

In this situation, find another name that is unique. When your bucket is accepted,click on the tab CloudFront:

cloudfront-create-distribution

Then click on Create Distribution. A new dialog box appears:

create-distribution

Make sure you select Streaming for the delivery method (distribution type). Then Select the bucket you just created and press Continue. You get now a new dialog box with additional options:

create-distribution

CNAMEs is optional, it can be used to mask the name of the URL. This is beyond the scope of this tutorial, so I suggest to leave it empty for now. You can turn Logging on if you want to check the usage of your media but for this exercise, we leave it off. Make sure Distribution Status is Enabled. Click Continue and confirm again by clicking Create Distribution. You should see now a message that says that you successfully created the distribution.

Close the message box. This will take about 10 minutes to implement, so do nothing in the meanwhile.

You can see the status of the distribution in the 6th column. As long as it says InProgress, the distribution is not ready. When finished, the Status changes into Deployed. Once deployed, we can upload our video and/or audio into the bucket, but first we have to make sure the bucket is set to public because we are going to use the public streaming method. In the AWS console, click on the S3 tab again to get to the bucket list:

s3 tab  in AWS console

Then click the bucket (in my case ardennesinfo). Then, click on the button Properties on the top right of the main window:

The console now loads the properties of the bucket. It needs to be said that the AWS Management console is slow and rather primitive, but you can use it for basic functionality. There are better client applications to deal with your S3 account, but we leave that for the end of the tutorial. Now you get a window that shows the properties:

As you can see here, only the Grantee (you) has the permissions to view/work with this bucket, which means the bucket is private. We are going to set it to public during the upload procedure since it is the quickest route with the AWS Management Console.

Click on Upload in the Objects and folders window. A dialog box shows up. Click on Add File. You can select the video or audio you want to upload. After selecting the media to upload, let’s set all files to public automatically before we do anything else. Click on the button Set Permissions:

Then make sure Make everything public is checked:

This ensures that all files uploaded become automatically public. Otherwise you have to set this one by one. Click Start Upload to upload your media to S3 Amazon (AWS). This may take a while. When finished uploading to AWS, your media is listed in the Objects and folders window:

We are finally ready to embed this video into your website.

Embed a streaming video in a html site or WordPress

There are 5 pieces of information we need to have before we can embed a video:

  1. Width of the video
  2. Height of the video
  3. Name of the video
  4. Name of the bucket
  5. Name of the streaming distribution

Width and height is something you probably know already. If not, you may want to open the video on your local computer with QuickTime™ and and open the Movie inspector, which displays all the information on your video. Open a simple text document and write down the width, height and name of the video. It is important not to use a rich text editor because of the formatting. For Windows, use Notepad, for Mac Simple Text.

You can find the name of the bucket in the Objects and Folders window in the AWS Management console. Or you can click on the CloudFront tab to get the streaming distribution name and the bucket name in one go:

Copy the full Domain Name(streaming distribution) in the CloudFront Distributions window and paste it in your text document. You will need it later. Do the same thing with the Origin (bucket). The resulting names will be different in your case, of course. You should have now something like this in your text document:

width: 600 height: 400 name: Intro-Wooden-Dimensions-Project.mp4
streaming distribution:
s3advzb3o45ezk.cloudfront.net

bucket name:
ardennesinfo.s3.amazon.com

We need something else too: the path the JW player. Remember you had to upload the files of JW player into the folder mediaplayer on your domain? We need that location now, starting with http:// If your domain is called www.yourdomain.com and you did place the folder mediaplayer in its public folder, then the full path to the player is: http://www.yourdomain.com/mediaplayer/player.swf Add this into your text document.

Now copy this path and change the last part into jwplayer.js, like this: http://www.yourdomain.com/mediaplayer/player.swf becomes http://www.yourdomain.com/mediaplayer/jwplayer.js
The .swf is the player itself which will play your videos onyour site, while the .js is a javascript file that handles the HTML5 fallback and much more. Your text document should look something like this now:

width: 600 height: 400
name:
Intro-Wooden-Dimensions-Project.mp4

streaming distribution: s3advzb3o45ezk.cloudfront.net
bucket name:
ardennesinfo.s3.amazon.com
player:
http://www.yourdomain.com/mediaplayer/player.swf

javascript: http://www.yourdomain.com/mediaplayer/jwplayer.js

This is all the info we need to embed the video successfully. Now we get to the hairy part of the tutorial. But fear not, we are going to keep this as simple as possible!

Linking JW Player’s javacript file in the page header

The jwplayer.js contains information that our embedding code will need to work properly. Therefore, we have to link to that file, preferably in the header of our page.
The header of a page contains the information to successfully display the content in the body of a html page. CMS like WordPress, Joomla, Drupal, etc,… have page headers too.  In fact, they have very complicated headers, but you do not need to worry, we are going to use a little trick to make sure you do not get lost in there if you happen to work with one of them.

But  first we need to adapt the following line of code, which we are going to place in the header:

<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.

Embed a streaming video in a html site or WordPress

When you’ve added the link to the javascript file in the header of your page, we are ready to move on and embed the video.
Consider this piece of daunting code below:

<div id="container1"  >Loading video...</div>
          <script type="text/javascript">
              jwplayer('container1').setup(
              {
                  'id': 'container1',
                  'wmode': 'transparent',
                  'icons': 'true',
                  'allowscriptaccess': 'always',
                  'allownetworking': 'all',
                  'file': 'myvideo.mp4',
                  'width': '500', 'height': '307',
                  'controlbar': 'bottom',
                  'dock': 'false',
                  'provider':'rtmp',
                  'streamer':'rtmp://xxxxxxxx.cloudfront.net/cfx/st',
                  'modes': [
                      {type: 'flash', src: 'http://www.yourdomain.com/mediaplayer/player.swf'},
                      {
                        type: 'html5',
                        config: {
                         'file': 'http://mybucket.s3.amazonaws.com/myvideo.mp4',
                         'provider': 'video'
                        }
                      },
                      {
                        type: 'download',
                        config: {
                         'file': 'http://mybucket.s3.amazonaws.com/myvideo.mp4',
                         'provider': 'video'
                        }
                      }
                  ]
              });
          </script>

Looks like a mess, doesn’t it? Luckily, you do not need to understand most of it, just copy and paste and then adapt the parts in red. We go over this one by one. For now, please copy everything in green (including the red parts) and paste it in your text document.  Further below, we need to change the file name of your video:

'file': 'myvideo.mp4',

Again adapt only the red part. If by any change you created a folder in your bucket and placed the video there, you need to add the name of that folder also, like this:

'file': 'myfolder/myvideo.mp4',

Directly below that line of code, you see width and height. Change the red parts according to the dimension of your video. But wait: the height needs to allow for the control bar too. So, add 20 pixels to the height. For instance, if height is 400, make it 420, like this:

'width': '600', 'height': '420',

Now we need to tell the player where the RTMP streamer software is:

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

The streamer software can be found in your streaming distribution. It is as simple as that. Just exchange the red part with your distribution. Let’s say, your distribution is s3advzb3o45ezk.cloudfront.net, then it becomes:

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

Now we come to the heart of the matter, where we make sure our video plays in most circumstances, namely the modes. There are 3 possible modes and we are going to use them all:

  1. Flash
  2. HTML5
  3. Download

If a Flash capable browser is found, we use the Flash mode. If a non Flash browser is found which supports HTML5, like iPhone, iPad etc.., use HTML5 mode. If a non Flash browser is found without HTML5 capability, switch to download mode. This last mode is used primarily by regular mobiles. As such, you cover a wide range of devices. Back to our code now. For the Flash mode, we need to provide the path to the player.swf.

'modes': [
         {type: 'flash', src: 'http://www.yourdomain.com/mediaplayer/player.swf'},

Replace the red part with the path to your player. For the HTML5 mode and the download mode, we need to provide the full path to the bucket, plus the name of the video. This ensures that in HTML5 mode, we switch to progressive download because HTML5 cannot handle streaming video:

type: 'html5',
config: {
         'file': 'http://mybucket.s3.amazonaws.com/myvideo.mp4',
         'provider': 'video'
        }

Replace the red part with the path to the bucket, and replace the blue part with the name of the video. If you placed the video in a folder, add that folder as well, like this:

type: 'html5',
config: {
         'file': 'http://mybucket.s3.amazonaws.com/myfolder/myvideo.mp4',

Now copy that full path, because we need to repeat it in the download mode:

type: 'download',
config: {
        'file': 'http://mybucket.s3.amazonaws.com/myvideo.mp4 ',

That’s it! You have done it. You can copy the whole bunch of code again and paste it in your html page for display.

WorPress requirements:

  1. placing javascript in posts can be problematic, depending on the version. You may need to enclose the code between the code tags <code></code>if it does not work.
  2. You also need to paste it in HTML mode, not in the Visual editor, this is very important. Otherwise, special characters will be transformed, making the code redundant.
  3. It is best to add the embedding code in the end when all other eventual content is written in a post or page, because switching back to Visual editor can create problems. I had to redo placing the embedding code several times and the media only showed up when I saved in HTML mode.

Here is the full code again:

 <script type='text/javascript' src='http://www.yourdomain.com/mediaplayer/jwplayer.js'></script>
<div id="container1"  >Loading video...</div>
          <script type="text/javascript">
              jwplayer('container1').setup(
              {
                  'id': 'container1',
                  'wmode': 'transparent',
                  'icons': 'true',
                  'allowscriptaccess': 'always',
                  'allownetworking': 'all',
                  'file': 'myvideo.mp4',
                  'width': '500', 'height': '307',
                  'controlbar': 'bottom',
                  'dock': 'false',
                  'provider':'rtmp',
                  'streamer':'rtmp://xxxxxxxx.cloudfront.net/cfx/st',
                  'modes': [
                      {type: 'flash', src: 'http://www.yourdomain.com/mediaplayer/player.swf'},
                      {
                        type: 'html5',
                        config: {
                         'file': 'http://mybucket.s3.amazonaws.com/myvideo.mp4',
                         'provider': 'video'
                        }
                      },
                      {
                        type: 'download',
                        config: {
                         'file': 'http://mybucket.s3.amazonaws.com/myvideo.mp4',
                         'provider': 'video'
                        }
                      }
                  ]
              });
          </script>

NOTE: Placing this kind of embedding code in Joomla is not possible. The editor will wipe away most of the code, making it useless. You may need to use an extension that allows emabedding javascript code in articles.  Drupal won’t have any problems accepting javascript code.

OK, save your page and test it out. Below, you find the result in my situation:

Load player…

If it does not work for you, there can be various reasons. Either you made a typo in the name of the video, the bucket or the streaming distribution. Or, you may not have copied the full code. Or you wiped away one of the quotes by accident. like ‘file’: myvideo.mp4′ should be ‘file’: ‘myvideo.mp4′
It is sometimes hard to find a mistake. The shortcut is to copy the original code again and replace your local info again. Often this is quicker way then trying to find out where it went wrong.  This is why I advice to prepare the code upfront and save it in your text document instead of manipulating it in the page directly.

Embed a streaming audio in a html site or WordPress

When you’ve added the link to the javascript file in the header of your page, we are ready to move on and embed the video.
There are 3 pieces of information we need to have before we can embed an audio:

  1. Name of the audio
  2. Name of the bucket
  3. Name of the streaming distribution

Open a simple text document and write down the name of the audio. It is important not to use a rich text editor because of the formatting. For Windows, use Notepad, for Mac Simple Text. You can find in the name of the bucket in the Objects and Folders window in the AWS Management console. Or you can click on the CloudFront tab to get the streaming distribution name and the bucket name in one go:

Copy the full Domain Name(streaming distribution) in the CloudFront Distributions window and paste it in your text document. You will need it later.
Do the same thing with the Origin (bucket). Names will be different in your case, of course. You should have now something like this in your text document:

name: audiotest.mp3
streaming distribution:
s3advzb3o45ezk.cloudfront.net

bucket name:
ardennesinfo.s3.amazon.com

We need something else too: the path the JW player. Remember you had to upload the files of JW player into the folder mediaplayer on your domain? We need that location now, starting with http://
If your domain is called www.yourdomain.com and you did place the folder mediaplayer in its public folder, then the full path to the player is: http://www.yourdomain.com/mediaplayer/player.swf
Add this into your text document. Now copy this path and change the last part into jwplayer.js, like this:
http://www.yourdomain.com/mediaplayer/player.swf becomes http://www.yourdomain.com/mediaplayer/jwplayer.js
The .swf is the player itself which will play your videos onyour site, while the .js is a javascript file that handles the HTML5 fallback and much more. Your text document should look something like this now:

name: audiotest.mp3
streaming distribution:
s3advzb3o45ezk.cloudfront.net

bucket name:
ardennesinfo.s3.amazon.com
player:
http://www.yourdomain.com/mediaplayer/player.swf

javascript: http://www.yourdomain.com/mediaplayer/jwplayer.js

This is all the info we need to embed the audio successfully. Now we get to the hairy part of the tutorial. Look at this this piece of complicated code below:

<div id="container1"  >Loading audio...</div>
          <script type="text/javascript">
              jwplayer('container1').setup(
              {
                  'id': 'container1',
                  'wmode': 'transparent',
                  'icons': 'true',
                  'allowscriptaccess': 'always',
                  'allownetworking': 'all',
                  'file': 'myvideo.mp4',
                  'width': '500', 'height': '24',
                  'controlbar': 'bottom',
                  'dock': 'false',
                  'provider':'rtmp',
                  'streamer':'rtmp://xxxxxxxx.cloudfront.net/cfx/st',
                  'modes': [
                      {type: 'flash', src: 'http://www.yourdomain.com/mediaplayer/player.swf'},
                      {
                        type: 'html5',
                        config: {
                         'file': 'http://mybucket.s3.amazonaws.com/myvideo.mp4',
                         'provider': 'sound'
                        }
                      },
                      {
                        type: 'download',
                        config: {
                         'file': 'http://mybucket.s3.amazonaws.com/myvideo.mp4',
                         'provider': 'sound'
                        }
                      }
                  ]
              });
          </script>

Looks like a mess, doesn’t it? Luckily, you do not need to understand most of it, just copy and paste and then adapt the parts in red. We go over this one by one. For now, please copy everything in green (including the red parts) and paste it in your text document.

For the sharp minds who have already gone over the video example, there is a slight difference between the code for video and audio, namely the provider attribute in HTML5 mode and Download mode. In the video version this is:

'provider': 'video'

For audio this is:

'provider': 'sound'

Therefore, do not copy the video code to use for an audio. Use the sample here instead. OK, let’s move on. The first thing we need to change is the path to the javascript file:

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

Copy the full path you saved for javascript and paste it in place of the red part. Leave the rest as is. Further below, we need to change the file name of your audio:

'file': 'myaudio.mp3',

Again adapt only the red part. If by any change you created a folder in your bucket and placed the video there, you need to add the name of that folder also, like this:

'file': 'myfolder/myaudio.mp3 ',

Directly below that, you see width and height. For the height, best set it to 24 pixels, since this is the height of the standard control bar. The width can be set as you like, but never make it wider then your layout (theme) allows you. For instance, height is 24 and width 500, like this:

'width': '500', 'height': '24',

Now we need to tell the player where the RTMP streamer software is since we would like to stream the audio:

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

The streamer software can be found in your streaming distribution. It is as simple as that. Just exchange the red part with your streaming distribution. Let’s say, your distribution is s3advzb3o45ezk.cloudfront.net, then it becomes:

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

Now we come to the heart of the matter, where we make sure our audio plays in most circumstances, namely the modes. As indicated before, there are 3 modes:

  1. Flash
  2. HTML5
  3. Download

If a Flash capable browser is found, we use the Flash mode. If a non Flash browser is found which supports HTML5, like iPhone, iPad etc.., use HTML5 mode. If a non Flash browser is found without HTML5 capability, switch to download mode. This last mode is used primarily by regular mobiles. As such, you cover a wide range of devices. Back to our code now. For the Flash mode, we need to provide the path to the player.swf.

'modes': [
         {type: 'flash', src: 'http://www.yourdomain.com/mediaplayer/player.swf'},

Replace the red part with the path to your player. For the HTML5 mode and the download mode, we need to provide the full path to the bucket, plus the name of the audio. This ensures that in HTML5 mode, we switch to progressive download because HTML5 cannot handle streaming audio:

type: 'html5',
config: {
         'file': 'http://mybucket.s3.amazonaws.com/myaudio.mp3',
         'provider': 'sound'
        }

Replace the red part with the path to the bucket, and replace the blue part with the name of the video. If you placed the video in a folder, add that folder as well, like this:

type: 'html5',
config: {
         'file': 'http://mybucket.s3.amazonaws.com/myfolder/myaudio.mp3',

Now copy that full path, because we need to repeat it in the download mode:

type: 'download',
config: {
        'file': 'http://mybucket.s3.amazonaws.com/myaudio.mp3 ',

That’s it! You have done it. You can copy the corrected code version completely and paste it in your html page for display.

WorPress requirements:

  1. placing javascript in posts can be problematic, depending on the version. You may need to enclose the code between the code tags <code></code>if it does not work.
  2. You also need to paste it in HTML mode, not in the Visual editor, this is very important. Otherwise, special characters will be transformed, making the code redundant.
  3. It is best to add the embedding code in the end when all other eventual content is written in a post or page, because switching back to Visual editor can create problems. I had to redo placing the embedding code several times and the media only showed up when I saved in HTML mode.
 <script type='text/javascript' src='http://www.yourdomain.com/mediaplayer/jwplayer.js'></script>
<div id="container1"  >Loading audio...</div>
          <script type="text/javascript">
              jwplayer('container1').setup(
              {
                  'id': 'container1',
                  'wmode': 'transparent',
                  'icons': 'true',
                  'allowscriptaccess': 'always',
                  'allownetworking': 'all',
                  'file': 'myaudio.mp3',
                  'width': '300', 'height': '20',
                  'controlbar': 'bottom',
                  'dock': 'false',
                  'provider':'rtmp',
                  'streamer':'rtmp:// s3advzb3o45ezk .cloudfront.net/cfx/st',
                  'modes': [
                      {type: 'flash', src: 'http://www.yourdomain.com/mediaplayer/player.swf'},
                      {
                        type: 'html5',
                        config: {
                         'file': 'http://mybucket.s3.amazonaws.com/myaudio.mp3',
                         'provider': 'sound'
                        }
                      },
                      {
                        type: 'download',
                        config: {
                         'file': 'http://mybucket.s3.amazonaws.com/myaudio.mp3',
                         'provider': 'sound'
                        }
                      }
                  ]
              });
          </script>

NOTE: Placing this kind of embedding code in Joomla is not possible. The editor will wipe away most of the code, making it useless. You may need to use an extension that allows embedding javascript code in Joomla articles.  Drupal won’t have any problems accepting javascript code.

OK, save your page and test it out.Here you find an example of an audio:

Loading player…

If the code does not work for you, there can be various reasons. Either you made a typo in the name of the audio, the bucket or the streaming distribution. Or, you may not have copied the full code. Or you wiped away one of the quotes by accident. like ‘file’: myaudio.mp3′ should be ‘file’: ‘myaudio.mp3′ It is sometimes hard to find a mistake. The shortcut is to copy the original code again and replace every red part anew. Often this is quicker then trying to find the needle in a haystack.

Embedding more then one audio or video on the same page

When embedding more then one media in the page, we need to change three pieces of the puzzle. Look closely at the top part of our code.
We need to change the id in three places:

<div id="container1">Loading video...</div>
          <script type="text/javascript">
              jwplayer('container1').setup(
              {
                  'id': 'container1',

For the second video or audio this can become:

<div id="container2">Loading video...</div>
          <script type="text/javascript">
              jwplayer('container2').setup(
              {
                  'id': 'container2',

In this way, you can add as many videos and audios as you like. If you forget to make the id unique, the second media with the same id will not show up.

Add a poster image to the video

So far, the video shows up as an empty space with an arrow and control bar. This is not really exciting, so we need to spice it up with a poster image. For this, you can prepare a JPG or PNG with the same dimensions as the video itself (without the control bar height). You can place that image anywhere on your own domain or place it on S3 Amazon. If you place it on S3 Amazon, you need to create a crossdomain.xml file to make sure the Flash player can access the poster image. This xml file needs to be uploaded into the same spot as the poster image so that the player knows it is allowed to use that image.

Read Using crossdomain.xml for subtitles and playlists to learn how to create such a file. Once you uploaded the poster image, we need to insert a new line of code into our existing embedding code:

'image': 'http://www.yourdomain.com/folder/posterimage.jpg',

where the red part needs to be adapted to your situation. This can also be:

'image': 'http://mybucket.s3.amazonaws.com/posterimage.jpg',

or in case you placed it in a download distribution:

'image': 'http://xxxxx.cloudfront.net/posterimage.jpg',

Note the comma after the line of code. It indicated that there is more to follow.  If you forget it, the embedding won’t work.
Where to we put this line of exactly? There is actually no rule where to place it within the embedding code, but it is a good idea to place it right after the file attribute, like this:

<div id="container1"  >Loading video...</div>
          <script type="text/javascript">
              jwplayer('container1').setup(
              {
                  'id': 'container1',
                  'wmode': 'transparent',
                  'icons': 'true',
                  'allowscriptaccess': 'always',
                  'allownetworking': 'all',
                  'file': 'myvideo.mp4',
                  'image': 'http://mybucket.s3.amazonaws.com/posterimage.jpg',
                  'width': '500', 'height': '320',
                  'controlbar': 'bottom',
                  'dock': 'false', ...............

In the example below, I used a poster image located in a download distribution to speed up the download of the image:

Load player…

If your poster image does not show up, then it might have two possible causes: a typo in the image path/name or an error in the crossdomain.xml (if the poster image is located outside the domain where the player is located).

Hopefully, this helps you to setup your videos successfully. In Part 2, we explore dynamic playlists.

What about private streaming?

Private streaming is possible too, but you need a mechanism to create expiring URLs on the fly. For this, you best work with a plugin, especially when working with WordPress or Joomla. You may be interested checking out our solution: S3Media Stream™ for WordPress 3.x or S3Media Stream™ for Joomla 1.5.x It takes all the hard work out of embedding and it creates the expiring, or signed URLs for you. On top of that, it provides a whole host of interesting options.

Client applications to replace the AWS Management console

As said earlier, the console is slow and cumbersome. Luckily there are several excellent applications that can act as a client between your computer and your S3 Amazon/CloudFront account. I tested out many applications and only two came out top: CloudBerry S3 Explorer (Windows) and CrossFTP (Mac). (yes, they are affiliate links). I’m not saying the others are useless, but the pro versions of these two have everything you need and I couldn’t say that from the other applications. There was always some functionality missing, especially regarding streaming and bucket policies.

Then, we need to put this line of code in the header of your page.

Topics: S3 Amazon/CloudFront, Working with JW player | Site search | Write comment
This article has 43 comments.



43 Comments »


Page copy protected against web site content infringement by Copyscape

If you have any questions or suggestions, you can leave a comment on this article below. Comments are subject to an approval process before they are published. By posting a comment, you agree with the terms of use. Backlink spammers won't be published, so don't even try.

Comments

Web Hosting

Web Hosting


Most popular posts

Recent Comments:

  • Joomla Perfect: The best solution is do not try to upgrade your Joomla when you have Components like Ads Manager or...
  • Mr.Goose: I have built and maintained many sites using both Joomla and Wordpress. I have also developed...
  • Μαθήματα WordPress: I vote to wordpress!! easy and more flexible than joomla :)
  • David: This looks like it might be very useful for people setting up amazon-hosted videos on their site. But what...
  • Santa: Hi, I am building a classified and directory listing portal. Which one would be best Wordpress or...
  • Mary: I teach an ESL class and am creating my own subtitles for a video we will watch in our next class. I...
  • Denver Morgan: we have been using JW player for a while now we are a small church but if we have to start paying...
  • Carina: The company I work for is looking at ‘moving’ their website to another platform to make it easier...
  • Oshaf: Hi, I have an USB condenser mic and an USB audio interface, but it seems I can’t get them to work...
  • Mark Kan: Hi , great article! I’m looking to make a website and sell video lessons on cake making. Each lesson...

Most commented posts

Copyright Rudolf boogerman © 2014, all rights reserved.