Script Tutorials

How to play audio and video using jPlayer plugin (jQuery)

Today we continue jQuery lessons, and will talk about adding customizable player for audio or video files to our website. This new plugin (jPlayer) pretty well: allow us play media files, pause, change volume, it even have all necessary controls (which you can see in any media player). Also it allow us to change all its styles (all styles of interface loceted in single css file). More, it support HTML5 and able to work quite in all possible browsers. Here are supported formats of media files: mp3, ogg, m4a, m4v, ogv, wav etc. So, lets start to create our own players?

Here are sample and downloadable package:

Live Demo

download in package

Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we start with the HTML.

This is our main page code with all samples.

index.html

<link rel="stylesheet" href="css/jplayer.blue.monday.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.jplayer.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>

<div class="example">

    <div>
        <div class="players">
            <h2>Audio player</h2>

            <div class="jp-audio">
                <div class="jp-type-single">
                    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                    <div id="jp_interface_1" class="jp-interface">
                        <ul class="jp-controls">
                            <li><a href="#" class="jp-play" tabindex="1">play</a></li>
                            <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
                            <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
                            <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
                            <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
                        </ul>
                        <div class="jp-progress">
                            <div class="jp-seek-bar">
                                <div class="jp-play-bar"></div>
                            </div>
                        </div>
                        <div class="jp-volume-bar">
                            <div class="jp-volume-bar-value"></div>
                        </div>
                        <div class="jp-current-time"></div>
                        <div class="jp-duration"></div>
                    </div>
                    <div id="jp_playlist_1" class="jp-playlist">
                        <ul>
                            <li>Audio track</li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
        <div class="players">
            <h2>Video player</h2>

            <div class="jp-video jp-video-270p">
                <div class="jp-type-single">
                    <div id="jquery_jplayer_2" class="jp-jplayer"></div>
                    <div id="jp_interface_2" class="jp-interface">
                        <div class="jp-video-play"></div>
                        <ul class="jp-controls">
                            <li><a href="#" class="jp-play" tabindex="1">play</a></li>
                            <li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
                            <li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
                            <li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
                            <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
                        </ul>
                        <div class="jp-progress">
                            <div class="jp-seek-bar">
                                <div class="jp-play-bar"></div>
                            </div>
                        </div>
                        <div class="jp-volume-bar">
                            <div class="jp-volume-bar-value"></div>
                        </div>
                        <div class="jp-current-time"></div>
                        <div class="jp-duration"></div>
                    </div>
                    <div id="jp_playlist_2" class="jp-playlist">
                        <ul>
                            <li>Tokyo weather</li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

Here I draw 2 players – for audio and for video. Both have similar code.

Step 2. CSS

Here are used CSS styles.

css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:1000px;height:500px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius:3px;-webkit-border-radius:3px}
.example .players{float:left;margin:10px}

Other css files (with related images):

css/jplayer.blue.monday.css, css/jplayer.blue.monday.jpg, css/jplayer.blue.monday.video.play.png, css/jplayer.blue.monday.video.play.hover.png and css/pbar-ani.gif

no need to show here. It always available as a download package (all just because its just part of our jPlayer plugin)

Step 3. JS

Here are necessary JS files to our project.

js/main.js

$(document).ready(function(){

    $("#jquery_jplayer_1").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: "media/track.mp3",
            }).jPlayer("play"); // auto play
        },
        ended: function (event) {
            $(this).jPlayer("play");
        },
        swfPath: "swf",
        supplied: "mp3"
    })
    .bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
            $(this).jPlayer("pauseOthers");
    });

    $("#jquery_jplayer_2").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                m4v: "media/tokyo.m4v",
                ogv: "media/tokyo.ogv",
                poster: "media/poster.jpg"
            });
        },
        ended: function (event) {
            $("#jquery_jplayer_2").jPlayer("play", 0);
        },
        swfPath: "js",
        supplied: "m4v, ogv",
        cssSelectorAncestor: "#jp_interface_2"
    })
    .bind($.jPlayer.event.play, function() { // pause other instances of player when current one play
            $(this).jPlayer("pauseOthers");
    });

});

This is most interesting and important part of our lesson. Here are initializations of both players. Via ‘jPlayer’ function we starting initialization of our players. Via first method ‘setMedia’ we defining media which will play. You can check my code to understand format – how need to put it here. When media finished to play (‘ended’ event), player jump to begining ($("#jquery_jplayer_2").jPlayer("play", 0);). Second param – time. Param ‘swfPath’ – path to Jplayer.swf file. Param ‘supplied’ – defines formats supplied to player. This is most important details.

js/jquery.min.js and js/jquery.jplayer.min.js

This is common files – jQuery library with player plugin. No need to give full code of that file here. It always available in package

Step 4. SWF

Single used flash swf file: (our main player)

swf/Jplayer.swf

Seems we quite finished. All media files I put to ‘media’ folder. This is our audio file – track.mp3, video files: tokyo.m4v + tokyo.ogv, and thumbnail (poster): poster.jpg

If you have strange behaviour and ogg files (oga, ogv, ogg) not working well, possible .htaccess file (in folder with media files) will help you:
AddType audio/ogg .oga
AddType video/ogg .ogv .ogg

Live Demo

download in package

Conclusion

So, now you will able to put audio/video players to pages of your website. Congratulations. Sure that you will happy play with it. You can use this material in your startups. Good luck!

Related Articles

HTML5 Video player jQuery plugin

Using Speakker – Cool HTML5 Audio Player

Creating a Photo Album with Galleriffic jQuery plugin

Using Flux Slider jQuery plugin