Learn How to implement media player in jQuery


In our previous tutorial we learnt about jQuery Events, in today’s tutorial we will learn about to implementing media player in a webpage using jQuery. There are many ways to implement media player in a webpage. You can do this by using HTML’s object or audio, video tag. But we are just going to do this with jQuery. JQuery is an open source platform that’s why 100’s of media player freely available to use. We are using jPlayer which is very easy to implement.

How to get and add the player

    • Open you browser window and add this URL: https://www.jplayer.org
    • Download the complete package of jPlayer
    • Open the download folder and unzip the download package
    • You’ll get a folder name jPlayer [version number]. Just remove the version name for simplicity
    • Create a main directory and paste jPlayer folder to that main directory

Let’s start coding!

Add readymade CSS script:

First add this readymade script which is available inside the jPlayer download package.

Add some script tags:

Some jQuery coding:

jQuery coding is the main part of this project where we manage all the functionalities of jPlayer.

In this part of programming, we have to define the title of the music file and the type of music file. jPlayer supports: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav.

Adding music file:

To add music file create a folder (I named it audio) to the main directory, paste the specified music file and reference it like this:


For adding some other formats just write code like that:

After that, we have to add some options of the player:

In this part, we add swf path of the player, skin type, and some other things.

Add some more formats:
We can’t play all the supported format without adding their types in the supplied option like that:

Adding more formats

Now, the HTML markup:

We can’t change the class names from the HTML markup elements. Because it connect our elements to the jplayer’s support files.

Thus we have finished implementing media player in jQuery. I hope you have liked this tutorial. You can let us know your views or queries regarding this tutorial by commenting below.


Please enter your comment!
Please enter your name here