Playing audio and video using JQuery

by  
Share:
Playing audio and video using JQuery

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.

 <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

    <!-- Jplayer files for circle player -->	
    <link rel="stylesheet" href="skin/circle.skin/circle.player.css">
    <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
    <script type="text/javascript" src="js/jquery.transform2d.js"></script>
    <script type="text/javascript" src="js/jquery.grab.js"></script>
    <script type="text/javascript" src="js/mod.csstransforms.min.js"></script>
    <script type="text/javascript" src="js/circle.player.js"></script>
    <!-- Jplayer files -->

Once you have included all the javascript and stylesheet files, add the container with unique id which will be playing the mp3 file.
<!-- jquery_jplayer_1 is the id here -->
<div id="jquery_jplayer_1" class="cp-jplayer"></div>

<!-- paste the lines below as it is, it will be required by the circle player -->
<div id="cp_container_1" class="cp-container">
              <div class="cp-buffer-holder">
                <div class="cp-buffer-1"></div>
                <div class="cp-buffer-2"></div>
              </div>
              <div class="cp-progress-holder"> 
                <div class="cp-progress-1"></div>
                <div class="cp-progress-2"></div>
              </div>
              <div class="cp-circle-control"></div>
              <ul class="cp-controls">
                <li><a class="cp-play" tabindex="1">play</a></li>
                <li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li> 
              </ul>
</div>

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.
<script type="text/javascript">
      $(document).ready(function() {
        var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
                {
                  mp3: "http://yourwebsite.com/travis.mp3",

                }, {
          cssSelectorAncestor: "#cp_container_1",
          swfPath: "js",
          wmode: "window",
          supplied: "mp3", 
          keyEnabled: true
        });
      });
</script>

To play m4a or ogg audio files just change the parameters below.
 var myCirclePlayer = new CirclePlayer("#jquery_jplayer_1",
                {

                  m4a: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
                  oga: "http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"

                }, {
          cssSelectorAncestor: "#cp_container_1",
          swfPath: "js",
          wmode: "window",
          supplied: "m4a, oga",
          keyEnabled: true
});

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.

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

<!-- Jplayer files-->	
<link href="skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<!-- Jplayer files -->

Add a container with unique id that will be used by the jplayer video player.
<!-- jp_container_1 is the id here -->
<div id="jp_container_1" class="jp-video jp-video-360p">
			<div class="jp-type-single">
				<div id="jquery_jplayer_1" class="jp-jplayer"></div>
				<div class="jp-gui">
					<div class="jp-video-play">
						<a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
					</div>
					<div class="jp-interface">
						<div class="jp-progress">
							<div class="jp-seek-bar">
								<div class="jp-play-bar"></div>
							</div>
						</div>
						<div class="jp-current-time"></div>
						<div class="jp-duration"></div>
						<div class="jp-details">
							<ul>
								<li><span class="jp-title"></span></li>
							</ul>
						</div>
						<div class="jp-controls-holder">
							<ul class="jp-controls">
								<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
								<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
								<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
								<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
								<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
								<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
							</ul>
							<div class="jp-volume-bar">
								<div class="jp-volume-bar-value"></div>
							</div>

							<ul class="jp-toggles">
								<li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
								<li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
								<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
								<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
							</ul>
						</div>
					</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="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
				</div>
			</div>
</div>

The final step is too bind the container id with the javascript video player.
<script type="text/javascript">
$(document).ready(function(){

	$("#jquery_jplayer_1").jPlayer({
		ready: function () {
			$(this).jPlayer("setMedia", {
				title: "Big Buck Bunny",
				m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
				ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
				webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",
				poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
			});
		},
		swfPath: "js",
		supplied: "webmv, ogv, m4v",
		size: {
			width: "640px",
			height: "360px",
			cssClass: "jp-video-360p"
		},
		smoothPlayBar: true,
		keyEnabled: true,
		remainingDuration: true,
		toggleDuration: true
	});

});
</script>

View Demo
Share to download the Source Codes for FREE!
We're glad to give free downloads, but we need your love to carry on making that.
Please support us by sharing the page.

Get the latest updates directly in your inbox for FREE: Subscribe here

Share your feedback / let me know your doubts regarding this tutorial in the comment box given below.

Share:
Hasan

Shahrukh Khan (Hasan)

A software engineer who's a die-hard coder, blogger, dreamer and mentor with years of expertise in web development. Know more...

Related Posts

s.shivasurya on

nice one bro!

Reply
Shahrukh Khan on

thanks bro

Reply
Anup Panwar on

Great work is this video player also created you????

Reply
Shahrukh Khan on

Thanks… it was built using jplayer plugin

Reply
Abraham on

Nice work. How to play video from database in this code?

Reply
Shahrukh Khan on

Thanks. To play the video just store the video link in your database say http://www.yourwebsite/videos/abc.webm and fetch that record using php and integrate in the given script.

Reply
Moe on

Thank You. This helped me a lot. If I want to add Volume control for the circle player how can I do so.

Reply
Shahrukh Khan on

Thanks. I think for that you have to use the different theme. Circle player don’t have that feature.

Reply
jbb on

thanks a lot .. i would like to know how to play the songs continuously ?

Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.