Want to display media on your website? Use jPlayer!

Published on: 02 September 2011 by gijsvogels with No Comments in Manuals

Did you ever wanted to display media (music, videos, …) on your website, but then your media gets played in the browser’s default media-player. Today I will show you a great media-player called jPlayer. jPlayer makes use of HTML5 and jQuery.

 

A quick look at the interface

jPlayer looks great. The interface is totally customizable to suit your needs. It’s very easy to get started, and the package is only 8 KB (the minified version). Let’s look at some pictures:
jPlayer Audio
This is the audio player. As I said before, it’s totally customizable, so you can edit it how you want it.
jPlayer Audio Playlist
This is how the audio playlist looks. Pretty awesome, eh?
jPlayer Video
This is the video player, which also looks kinda neat.
jPlayer Video Playlist
And finally, the video player with a playlist.

 

The installation of jPlayer

Follow the steps below to install your copy of jPlayer:

  1. Download the files from the jPlayer website.
  2. Install the files on your webhost. Make sure your .swf file is in a folder called ‘js’, that folder must be in the same directory as the page where you want your media on is.
  3. Add the following code to the head of the webpage you want to display your media on:
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script type="text/javascript" src="/jPlayer/js/jquery.jplayer.min.js"></script>
</head>
  1. Then, the following code is used to set up your media:
<script>
$(document).ready(function(){
 $("#jquery_jplayer_1").jPlayer({
  ready: function () {
   $(this).jPlayer("setMedia", {
    m4a: "/media/mysound.mp4",
    oga: "/media/mysound.ogg"
   });
  },
  swfPath: "/js",
  supplied: "m4a, oga"
 });
});
</script>
  1. And finally, this code is used to display the actual player itself:
<div id="jquery_jplayer_1"></div>
<div id="jp_interface_1">
  <a href="#" class="jp-play">Play</a>
  <a href="#" class="jp-pause">Pause</a>
</div>

More information on installing this plugin can be found on the jPlayer Developer Guide.

 

Browserconsistency and media support

According to the jPlayer website the player will work on Google Chrome, Mozilla Firefox, Apple Safari, Opera and Internet Explorer 6 and up. It will also work on mobile Safari (iPhone, iPad and iPod), Android 2.3 and Blackberry Playbook. That is pretty much covering all browsers I know, so I won’t think there are any inconsistencies. The media types that you can use with HTML5 are MP3, MP4 (AAC or H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8) or wav. With Flash you can use MP3, MP4 (AAC or H.264) or FLV.

 

The MP3-jPlayer WordPress plugin

Wouldn’t it be much easier to have use a WordPress plugin for this (assuming your website is running on WordPress)? If you would like that, there actually is one. And it’s called the MP3-jPlayer. In the control panel of the plugin you could style your media player and you can add the player to your website using shortcodes, widgets or template tags. You can look at the demo if you want.
 
That was it for today, do you like this plugin or not? Or do you use your own awesome plugin for displaying media? Tell me in the comments.

Leave a Comment