JW6 HTML5/Flash (JW Player 6 self-hosted) setup for Blogger.com and WordPress.

NOTE: I have included examples for cloud AND self-hosted player setup.

I found some help here http://www.bloggerjourney.com/2013/01/how-to-embed-jw-player-in-blogger-to.html

Blogger.com setup:

Settings->Template->Edit HTML->

NOTE: I disable mobile templates as JW player doesn’t work well in Mobile mode. It’s right next to the “Edit HTML” button from above.

Go to the top and find </head>

Paste your JW code directly above </head>

ex. cloud-hosted player:

<script src=”http://jwpsrv.com/library/bunch-of-numbersXXXXXX.js”></script>

NOTE: You will need to substitute “bunch-of-numbersXXXXXX” with the correct URL/INFO found in your JW Player account/dashboard.

ex. self-hosted player:

<script type=”text/javascript” src=”http://mywebsiteexample.com/jwplayer/jwplayer.js”,</script>
<script type=”text/javascript”>jwplayer.key=”my key code goes here”;</script>

NOTE: You will need to substitute “http://mywebsiteexample.com/jwplayer/jwplayer.js” with the absolute path where the self-hosted player is located. Also, “my key code goes here” is found in your JW Player account/dashboard.

Save the template.

Now create a post and use the HTML edit. Here is an example:

<div id=’mediaspaceaaaa’>Loading the player…</div>
<script type=’text/javascript’>
jwplayer(‘mediaspaceaaaa’).setup({
file: ‘http://mywebsiteexample.com/movies/aaaa.mp4’,
image: ‘http://mywebsiteexample.com/movies/aaaa.jpg’,
width: 430,
height: 241
});
</script>

You will need to clearly substitute, “mediaspaceaaaa”, “http://mywebsiteexample.com/movies/aaaa.mp4”, “http://mywebsiteexample.com/movies/aaaa.jpg”, and the personal preference for the width and height.

NOTE: The downside here is that the WYSIWYG-compose tab will NOT work in Blogger since the <main></main> is not processed. So the only way you will see your video is by posting the post as public. The exception being the cloud-hosted player will show in the preview view, but not the self-hosted player. Oh well. Maybe someone can chime in here.

Lastly, WordPress (WITHOUT a plugin):

NOTE: I do NOT add the self/cloud hosted code/script to the <main> HTML. I added it to the beginning of each post, but only once, the top as you might have 3 videos in one post 🙂

Make a new post, here is the HTML ex.

ex. cloud-hosted player:

<script src=”http://jwpsrv.com/library/bunch-of-numbersXXXXXX.js”></script>

NOTE: You will need to substitute “bunch-of-numbersXXXXXX” with the correct URL/INFO found in your JW Player account/dashboard.

ex. self-hosted player:

<script type=”text/javascript” src=”/jwplayer/jwplayer.js”></script>
<script type=”text/javascript”>jwplayer.key=”my key code goes here”;</script>

NOTE: You will need to substitute “/jwplayer/jwplayer.js” with the relative path to the file on your local WordPress install/machine or absolute path (http://mywebsiteexample.com/jwplayer/jwplayer.js) if the file is located on another site/machine. Also, “my key code goes here” is found in your JW Player account/dashboard.

<div id=”mediaspaceaaaa”>Loading the player…</div>

<script type=”text/javascript”>
jwplayer(“mediaspaceaaaa”).setup({
file: “/stuff/movies/SANY0315.flv”,
image: “/stuff/movies/SANY0315.jpg”,
width: 500,
height: 281
});
</script>

You will need to clearly substitute, “mediaspaceaaaa”, “/stuff/movies/SANY0315.flv”, “/stuff/movies/SANY0315.jpg”, and the personal preference for the width and height.

You will notice that the URLs for both “file” and “image” are relative. This URL is relative because the files are hosted on the same WordPress machine, otherwise you would need to provide the absolute full URL path, ex. “http://mywebsiteexample.com/stuff/movies/SANY0315.flv”

Here is some more embedded code examples:

http://www.longtailvideo.com/support/jw-player/28839/embedding-the-player

Lastly, if you intend to use HTML5 video, the safest codec/containers is mp4 H.264 with AAC audio. Make certain your mp4 file is “web optimized” (Handbrake) or faststart is enabled (FFmpeg). These encoders need the metadata at the beginning of the file:

There are utilities and encoders which will do this for your.

FFmpeg will need “-movflags faststart”

External utility: http://renaun.com/blog/2010/06/qtindexswapper-2/

Lastly, you need to set <!DOCTYPE html> to prevent triggering IE’s quirks mode, but blogger already has this set.

http://www.longtailvideo.com/support/jw-player/28840/troubleshooting-your-setup

Leave a Reply