Playing audio and video using JQuery

8

Last week was quite busy for me as I had received lots of tutorial request. A blog follower asked me how to play mp3 files using jquery. I am posting the article so that it would benefit others who are looking for the same.This tutorial is not just about playing mp3 files, you will learn playing audio and video using Jquery.

View Demo

Jplayer: the jQuery plugin used for playing audio and video

jPlayer is the completely free and open source (MIT) media library written in JavaScript. It works with HTML5 and flash for backward compatibility. It is a cross platform player and play on all major browsers like IE, Safari, Chrome, Firefox, Andriod Browsers, etc. It can play audio files like mp3, ogg, m4a and video files like webmv, ogv.

Playing mp3 files using jplayer circle player

To play a mp3 file using jplayer circle player, follow the steps below.

Once you have included all the javascript and stylesheet files, add the container with unique id which will be playing the mp3 file.

Instantiate a circle player object with javascript using the id that you have used above, supply the URL path for the mp3 file and you are done.

To play m4a or ogg audio files just change the parameters below.

Playing video using jplayer

Jplayer plays videos like webmv, ogv, m4v. if you have any files like mp4, avi try converting them first to play. To play the video using jplayer just follow the steps below.

Add the necessary files like jquery, jplayer javascript library and sylesheet files.

Add a container with unique id that will be used by the jplayer video player.

The final step is too bind the container id with the javascript video player.

View Demo
Download

Share.
 

About Author

Entrepreneur & Dreamer

I am a passionate Software Professional, love to learn and share my knowledge with others.

Software is the hardware of my life.

8 Comments

Leave A Reply

CommentLuv badge

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.