Using the JW Embedder to Embed Your Player

Update:

Flexibility has always been a big part of our JavaScript video player API! We now offer a wide range of options for you to embed JW Player onto your website depending your needs. Watch the JW Academy video tutorials on Basic & Advanced Embedding to learn about the embedding options.

Also reference our Delivery API when you build JW Players into your own website or CMS. If you don’t know which JW Player is right for you, check out our plans page.

————————————————————————————————————————————————

Prior to the JW 5.3 release, the most common methods used to embed the JW Player on your website were object/embed code and swfobejct (1.5 or 2.X).
With the release of JW 5.3,
we also introduced our own embed method, the JW Embedder, referenced as jwplayer.js. We recommend the JW Embedder when you’re looking to achieve the following:

  • Seamless failover between the Flash and HTML5 players.
  • Automatic integration with the JavaScript API.

This blog post is going to cover how to use the JW Embedder. Note that if you are familiar with the swfobject 2.X embed method, you will notice some similarities.

Let’s get started…

Here is a basic player setup using jwplayer.js:

<script type="text/javascript" src="jwplayer.js"></script>
<div id="thePlayer"></div>
<script type="text/javascript">
    jwplayer("thePlayer").setup({
        flashplayer: "player.swf",
        file: "file.mp4",
        height: "270",
        width: "380"
    });
</script>

Now Let’s break this down, line by line:

<script type=”text/javascript” src=”jwplayer.js”</script>
This line should point to the location of jwplayer.js on your server. If you do not include this line, or you are pointing to the jwplayer.js file incorrectly, the JW Embed method will not work.

<div id=” thePlayer”></div>
Next, you have a div tag, with an id of thePlayer. This is a basic html tag, with an ID where you specify the ID in your actual embed of the player itself. This div will be completely replaced by the player.

<script type=”text/javascript”>
Next line represents the actual player embed itself, enclosed in a script tag.

  • jwplayer(“thePlayer”).setup({
    The first line within the enclosed script tag sets up the JW Player embed, with the ID named “thePlayer” (You’ll recall that we named our <div> with an id of thePlayer. Thus, the player will set itself up there. Again, this div will be completely replaced by the player.
  • flashplayer: “player.swf”
    The second line within the enclosed script tag specifies where the jwplayer swf file exists on your server (i.e. the player itself). This .swf is needed to play flash files (.flv), as well as for Flash failback.
  • file: “file.mp4”
    The third line points to the location of the actual video file that you want to play within your player, i.e. the location on your server where the video file is saved.
  • height: “270”,
  • width: “380”
    The final parameters set the height, and the width of the player. You will notice that the last line does not have a comma after it, and this is because it is the last attribute used in the embed. If you have any additional variables to add, such as plugins, or autostart, etc, you would add a comma to this line, and continue adding variables until you are finished.

});
Closes the setup variables you’ve defined.

</script>
Finally, the entire embed is closed out with an ending tag.

I hope this blog post helped explain how to embed the 5.3 player using the new jwplayer.js embedding mechanism. Happy embedding!