Web Programming TutorialsLearn How to implement media player in jQuery

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:

<link href="jPlayer/dist/skin/blue.monday/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />

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

Add some script tags:

<script type="text/javascript" src="jPlayer/lib/jquery.min.js"></script>
<script type="text/javascript" src="jPlayer/dist/jplayer/jquery.jplayer.min.js"></script>

Some jQuery coding:

<script >
$(document).ready(function(){
	$("#jquery_jplayer_1").jPlayer({
		ready: function (event) {
			$(this).jPlayer("setMedia", {
				title: "Bubble",
				mp3:"audio/music1.mp3",
			});
		},
		swfPath: "../../dist/jplayer",
		supplied: "m4a, oga, mp3",
		wmode: "window",
		useStateClassSkin: true,
		autoBlur: false,
		smoothPlayBar: true,
		keyEnabled: true,
		remainingDuration: true,
		toggleDuration: true
	});
});
</script>

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

ready: function (event) {
	$(this).jPlayer("setMedia", {
		title: "Bubble",
		mp3:"audio/music1.mp3",
	});
},

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:

mp3:”audio/music1.mp3″

For adding some other formats just write code like that:

ready: function (event) {
	$(this).jPlayer("setMedia", {
		title: "Bubble",
		mp3:"audio/music1.mp3",
m4a: "audio/music1.mp4",
sga: "audio/music1/ogg"
	});
},

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

swfPath: "jPlayer/dist/jplayer",
supplied: "m4a, oga, mp3",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true

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:

supplied: "oga, mp3"

Adding more formats

supplied: “m4a, oga, mp3”

Now, the HTML markup:

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
	<div class="jp-type-single">
		<div class="jp-gui jp-interface">
			<div class="jp-controls">
				<button class="jp-play" role="button" tabindex="0">play</button>
				<button class="jp-stop" role="button" tabindex="0">stop</button>
			</div>
			<div class="jp-progress">
				<div class="jp-seek-bar">
					<div class="jp-play-bar"></div>
				</div>
			</div>
			<div class="jp-volume-controls">
				<button class="jp-mute" role="button" tabindex="0">mute</button>
				<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
				<div class="jp-volume-bar">
					<div class="jp-volume-bar-value"></div>
				</div>
			</div>
			<div class="jp-time-holder">
				<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
				<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
				<div class="jp-toggles">
					<button class="jp-repeat" role="button" tabindex="0">repeat</button>
				</div>
			</div>
		</div>
		<div class="jp-details">
			<div class="jp-title" aria-label="title">&nbsp;</div>
		</div>
		<div class="jp-no-solution">
			<span>Update Required</span>
			To play the media you will need to either update your browser to a recent version or update your <a href="https://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
		</div>
	</div>
</div>

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -