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



Embedding an audio with poster image, watermark and subtitles, using JW Player 5.10

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

Embedded audios in a website generally display a simple control bar with navigation buttons to play, pause, rewind and so on. While this is great for audio libraries, it can be so much more. In this tutorial, I’ll show you step by step how to add a poster image, a watermark and subtitles, using JW player from LongtailVideo.

The advantages of using a poster image for an audio are:

  1. You can place additional information or a call to action in a poster image so that the visitor has an incentive to play it.
  2. With a regular control bar, you click on the play button and if there is delay before it stars to play, it may confuse the visitor because nothing appears to be happening.Thanks to the poster image, you have a space that shows a loading wheel, like this:
  3. It informs the visitor that his/her action has a result which is a user friendly approach.

Watermarks are useful to brand your audios, although you could do that with a poster image as well. But a watermark can be linked to any web page you like.  This could be a sales page or a link to your main site, for instance.

Subtitles are useful for the hearing impaired, or it could be used as a translation of the narrative.

I’m going to show this all those  features, one at the time, so that you can follow easily.

First you need to download and install JW player, which is explained below, then we proceed with the embedding. Embedding means placing on object in a web page.  This can be a Flash presentation, a video or an audio, but we focus on audio this time.

What do you need?

If you do not feel like using subtitles or a watermark, this is no problem. You can disregard the part of the tutorial you do not need.  If you do want to test it all, I provided some sample files to use.  Download the zip here.

  1. An MP3 audio.  This is the most widely used format that can play almost on every device.
  2. A poster image.  This can be a JPEG or PNG.
  3. A TimedText file for the subtitles.  Here is a tutorial how to create such a file: How to use TimedText for subtitling
  4. A watermark image. This can be PNG with 24bit transparency or a regular PNG image.  It should not be too big because it imposes over the poster image.
  5. JW Player, which is used to embed the audio. It can play in flash and HTML5 mode.

To make it easy for you, I provided some sample files to use.  Download it here.
First of all, we have to download and install JW Player:

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. Write this URL down in a notepad file (Win) or Simple text file (Mac), you will need it later on.
  4. 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
  5. No other files are needed. Once uploaded, you are done with the install.

Upload your audio and other material

  1. Leave FileZilla open, and create a new folder, for instance: audios
  2. Then upload your audio, poster image, TimedText file and watermark or use the examples in the samples.zip file.
  3. Write down the path to this folder, which should be something like this: http://www.yourdomain.com/audios
  4. You can close FileZilla now.

Next thing:  Add a link to the script that is installed by JW player:

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 adapted code.
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 and we are ready to embed our audio. First, I show how to embed the audio without whistles and bells, then we add each feature separately:

Embedding the audio

Consider this  complicated piece code below, but don’t panic, you only need to change a couple of things, indicated in red:

<div id="container1"  >Loading audio...</div>
          <script type="text/javascript">
              jwplayer('container1').setup(
              {
                  'id': 'container1',
                  'wmode': 'transparent',
                  'icons': 'true',
                  'allowscriptaccess': 'always',
                  'allownetworking': 'all',
                  'file': 'http://www.yourdomain.com/audiotest.mp3',
                  'width': '500', 'height': '307',
                  'controlbar': 'bottom',
                  'dock': 'false',
                  'modes': [
                      {type: 'flash', src: 'http://www.yourdomain.com/mediaplayer/player.swf'},
                      {
                        type: 'html5',
                        config: {
                         'file': 'http://www.yourdomain.com/audiotest.mp3',
                         'provider': 'sound'
                        }
                      }
                  ]
              });
          </script>

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.  Then locate the part that shows this:

'file': 'http://www.yourdomain.com/audiotest.mp3',

Adapt the red part according to your situation.  For instance, if you named the folder audios, like http://www.yourdomain.com/audios/ while the audio itself is called audiotest.mp3 change the red part into this:

'file': 'http://www.yourdomain.com/audios/audiotest.mp3',

Directly below that line of code, 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 have to provide the information to make sure our audio plays in most circumstances, namely the modes.  There are 2 modes: Flash and HTML5 ( although there is 3rd mode Download available as well, but we disregard that in this tutorial.)

  1. Flash
  2. HTML5

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.
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, this is the first URL you wrote in your text file. For the HTML5 mode, we need only need to provide the full path to the audio again:

type: 'html5',
config: {
         'file': 'http://www.yourdomain.com/audios/audiotest.mp3',
         'provider': 'sound'
        }

That's it for now!  You can copy the corrected code version completely and paste it in your html page for display. You should have something like this, now(screenshot):

Embedding an audio with poster image

We are going to re-use the code of our first audio embedding and adapt it.  Have a look at this code again:

<div id="container1"  >Loading audio...</div>
          <script type="text/javascript">
              jwplayer('container1').setup(
              {
                  'id': 'container1',
                  'wmode': 'transparent',
                  'icons': 'true',
                  'allowscriptaccess': 'always',
                  'allownetworking': 'all',
                  'file': 'http://www.yourdomain.com/audios/audiotest.mp3',
                  'width': '500', 'height': '24',
                  'controlbar': 'bottom',
                  'dock': 'false',
                  'image':'http://www.yourdomain.com/audios/posterimage.jpg',
                  'modes': [
                      {type: 'flash', src: 'http://www.yourdomain.com/mediaplayer/player.swf'},
                      {
                        type: 'html5',
                        config: {
                         'file': 'http://www.yourdomain.com/audios/audiotest.mp3',
                         'provider': 'sound'
                        }
                      }
                  ]
              });
          </script>

As you can see, there is a new line of code here:

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

You only need to adapt the path to poster image here.
Then, we need to adapt the height, because we need to allow space for the poster image to show up. In this case, the image is 120 pixels high, but you need to add the height of the controlbar as well, so change the height to 144, like this:

                  'width': '500', 'height': '144',

If you are using your own image and it has another format, you may need to adapt both width and height.

When you have done that, copy the adapted code and place in in your html page. You audio should look more or less like this(screenshot):

Since the sample audio is very short, you probably will not see a turning wheel for loading since it will play almost immediately, but if you have a heavy file, it will show until the audio is partly downloaded.

Embedding audio with a watermark

Again, we use our newly adapted code and add a few more lines of code. You will find two new lines of code in blue with red parts to adapt:

<div id="container1"  >Loading audio...</div>
          <script type="text/javascript">
              jwplayer('container1').setup(
              {
                  'id': 'container1',
                  'wmode': 'transparent',
                  'icons': 'true',
                  'allowscriptaccess': 'always',
                  'allownetworking': 'all',
                  'file': 'http://www.yourdomain.com/audios/audiotest.mp3',
                  'width': '500', 'height': '24',
                  'controlbar': 'bottom', 'dock': 'false',
                  'image':'http://www.yourdomain.com/audios/posterimage.jpg',    'logo':{'file':'http://www.yourdomain.com/audios/watermark.png',  'hide':'false', 'out':'0.7','position':'top-right','link':'http://anylinkyoulike.com'}, 
                  'modes': [ {type: 'flash', src: 'http://www.yourdomain.com/mediaplayer/player.swf'}, 
                  { type: 'html5', config: {
                  'file': 'http://www.yourdomain.com/audios/audiotest.mp3', 'provider': 'sound' } }
                  ]
               }
           );
</script>

Here we have 4 values to adapt:

  1. The path to the watermark image
  2. The transparency of the watermark
  3. The position of the watermark
  4. the link to where the visitor goes if he/she clicks the watermark

First adapt the URL to the watermark according to your situation:

'logo':{'file':'http://www.yourdomain.com/audios/watermark.png',
                  'hide':'false', 'out':'0.7','position':'top-right','link':'http://anylinkyoulike.com'},

Then we set the transparency, called out:

'logo':{'file':'http://www.yourdomain.com/audios/watermark.png',
                  'hide':'false', 'out':'0.7','position':'top-right','link':'http://anylinkyoulike.com'},

Normally, 0.7 is a good value.  It means that the backgrund will show through the watermark for 30%. When the visitor moves the mouse over the watermark, the transparency disappears, thus the value becomes automatically 1.0.  sometimes, you may need to use 0.8, you have to experiment with that.

The position of the watermark has 4 options: top-left, top-right, bottom-left, bottom-right

'logo':{'file':'http://www.yourdomain.com/audios/watermark.png',
     'hide':'false', 'out':'0.7','position':'top-right','link':'http://anylinkyoulike.com'},

In this case, I’ve set it to top-right, because my poster image has text on the left side. Adapt this to your liking.

Finally, we have the link itself. You can set it to any URL:

'logo':{'file':'http://www.yourdomain.com/audios/watermark.png',
     'hide':'false', 'out':'0.7','position':'top-right','link':'http://anylinkyoulike.com'},

This link will open in a new window, which is the best in most cases. When you have finished with this, copy all the new code and place it in your page.

It should display something like this (screenshot):

Embedding an audio with subtitles

The final thing we need to do is to add the subtitles. We re-use our last adapted code again and you will now see  new lines of code in blue with red parts to adapt:

<div id="container1"  >Loading audio...</div>
          <script type="text/javascript">
              jwplayer('container1').setup(
              {
                  'id': 'container1',
                  'wmode': 'transparent',
                  'icons': 'true',
                  'allowscriptaccess': 'always',
                  'allownetworking': 'all',
                  'file': 'http://www.yourdomain.com/audios/audiotest.mp3',
                  'width': '500', 'height': '24',
                  'controlbar': 'bottom',
                  'dock': 'false',
                  'image':'http://www.yourdomain.com/audios/posterimage.jpg',
                  'logo':{'file':'http://www.yourdomain.com/audios/watermark.png',
                  'hide':'false', 'out':'0.7','position':'top-right','link':'http://anylinkyoulike.com'},
                  'plugins':{captions:{'file':'http://www.yourdomain.com/audios/audiotest.xml','back':'false','state':'true'}},
                  'modes': [
                      {type: 'flash', src: 'http://www.yourdomain.com/mediaplayer/player.swf'},
                      {
                        type: 'html5',
                        config: {
                         'file': 'http://www.yourdomain.com/audios/audiotest.mp3',
                         'provider': 'sound'
                        }
                      }
                  ]
              });
          </script>

Here we only need to change one value, but the other two are interesting to look into as well. First we have to adapt the path to the file:

'plugins':{captions:{'file':'http://www.yourdomain.com/audios/audiotest.xml','back':'false','state':'true'}},

This is enough to display the subtitles. But the back feature can show a black band behind the subtitles in a situation where the text of the subtitles is unclear related to background. Normally, you can avoid that situation with audios since you control the look of your own poster image. However, if you need it, change it to true, like this:

'plugins':{captions:{'file':'http://www.yourdomain.com/audios/audiotest.xml','back':'true','state':'true'}},

Then, the state.  If you want the subtitles to show up automatically, leave it to true:

'plugins':{captions:{'file':'http://www.yourdomain.com/audios/audiotest.xml','back':'false','state':'true'}},

If you want the subtitles to behave like closed Captions (CC), then set it to false.  The subtitles will only show when the visitor clicks on the CC button.

If you copy the adapted code and paste it into your page, you will get something like this live sample:

Loading audio…

If your audio works like this, congratulations, you just embedded an audio with all the whistles and bells, like a real pro!
You just have to keep in mind that subtitles and watermark will not work in html5 mode as this is not supported yet.
If you have any questions or remarks on this tutorial, let me know in the comment box below! I hope you find this useful!

Topics: Working with JW player | Site search | Write comment
This article has 7 comments.



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

7 Responses to “Embedding an audio with poster image, watermark and subtitles, using JW Player 5.10”

  1. The Magician
    The Magician Says:
    September 27th, 2012 at 6:25 am

    Great tutorial, very useful indeed. Thanks!

  2. Rudolf Boogerman
    Rudolf Boogerman Says:
    September 27th, 2012 at 4:13 pm

    It’s a pleasure, thank you for your kind words!

  3. Soloquest
    Soloquest Says:
    November 7th, 2012 at 2:16 am

    Is there a tutorial on how to set up and audio player with a playlist of multiple songs? Here is an example of what I would like to do: (look for the player)
    http://www.humboldtmusic.com/webpage/index.cfm?id=162

  4. Rudolf Boogerman
    Rudolf Boogerman Says:
    November 7th, 2012 at 8:42 am

    Yes, you can use the tutorial for video playlists and adapt it:
    http://www.miracletutorials.com/embedding-playlist-streaming-video-using-jw-player/
    You need to change a couple of things if you do not want to use streaming:
    ‘playlist.position’: ‘right’,
    ‘playlist.size’: ’250′,
    ‘playlist’: [
    {
    ‘file’: ‘myaudio.mp3‘,
    ‘title’: ‘My first audio’,
    ‘provider’: ‘audio‘,
    ‘streamer’: ‘rtmp://xxxxxxxx.cloudfront.net/cfx/st’,
    ‘image’: ‘http://yourdomain/images/thumbs/video1.jpg’,
    ‘description’: ‘The Wooden Dimensions project’
    },
    {
    ‘file’: ‘otheraudio.mp3′,
    ‘title’: ‘My second audio’,
    ‘provider’: ‘audio’,
    ‘description’: ‘Traffic filmed on the road’
    },……
    I will create an audio playlist tutorial, but this may help you in the meantime.

  5. love_decay
    love_decay Says:
    June 18th, 2013 at 8:33 pm

    Hey, thanks for such a great tutorial. I was able to find an old version of jwplayer that worked with this tutorial.

    PEace

  6. Andrew Jarvis
    Andrew Jarvis Says:
    December 4th, 2013 at 1:23 am

    What about on iOS though? I use JWPlayer, and found your article by searching for a way to put a poster image over my audio playback… but when I click your example at the end of your post it has the problem I’m trying to avoid–the website fades away and is replaced with the Quicktime logo for the duration of the audio.

  7. Rudolf Boogerman
    Rudolf Boogerman Says:
    December 7th, 2013 at 9:54 am

    Hi Andrew,
    This happens with streaming audios, yes. It’s a bug in JW player. But if you use progressive download, there is no problem.

Comments

Web Hosting

Web Hosting


Most popular posts

Recent Comments:

  • Alex: Our company has used JW5 for a couple of years now on a VOD website. After firsthand experience with the...
  • Lisa: I stumbled on this review looking for a simple way to describe to a client the difference between Joomla and...
  • Eleanor Shannon: Hi, I have successfully embedded videos from my Vimeo Plus account into my blog but when you press...
  • Elaine: Okay, I found the two functions and it’s coming together. Slowly. Just gotta figure how to insert a...
  • Elaine: I just bought the Ultimate Value Pack as I want to convert a story and have different voices for different...
  • Patrick Marsh: Hi Rudolf, Your unbiased comparison and helpful responses are so generous! Thank you. I’m not a...
  • Fernando: Hi Rudolf, thanks for sharing this information. I needed to include a couple of videos in one of my...
  • Mike: Thanks. Although it didn’t work for me on macbook pro (Mavericks). It crashes and kicks me out. I like...
  • Keith: Enrique, For a static website, I do not recommend Joomla. Too big of a CMS and too bloated. WordPress would be...
  • Amit: Hello Rudolf, I am facing a problem. Recently we made some nice video using Sony 2100 due to some reason the...

Most commented posts

Copyright Rudolf boogerman © 2014, all rights reserved.