jPlayer video player. Today we continue jQuery lessons, and will talk about adding customizable player for audio or video files to our website. This new plugin jPlayer is pretty good: it allows 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:
[sociallocker]
[/sociallocker]
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
01 | <link rel="stylesheet" href="css/jplayer.blue.monday.css" type="text/css" media="all" /> |
02 | <link rel="stylesheet" href="css/main.css" type="text/css" media="all" /> |
03 | <script src="js/jquery.min.js" type="text/javascript"></script> |
04 | <script src="js/jquery.jplayer.min.js" type="text/javascript"></script> |
05 | <script src="js/main.js" type="text/javascript"></script> |
10 | <div class="jp-audio"> |
11 | <div class="jp-type-single"> |
12 | <div id="jquery_jplayer_1" class="jp-jplayer"></div> |
13 | <div id="jp_interface_1" class="jp-interface"> |
14 | <ul class="jp-controls"> |
15 | <li><a href="#" class="jp-play" tabindex="1">play</a></li> |
16 | <li><a href="#" class="jp-pause" tabindex="1">pause</a></li> |
17 | <li><a href="#" class="jp-stop" tabindex="1">stop</a></li> |
18 | <li><a href="#" class="jp-mute" tabindex="1">mute</a></li> |
19 | <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li> |
21 | <div class="jp-progress"> |
22 | <div class="jp-seek-bar"> |
23 | <div class="jp-play-bar"></div> |
26 | <div class="jp-volume-bar"> |
27 | <div class="jp-volume-bar-value"></div> |
29 | <div class="jp-current-time"></div> |
30 | <div class="jp-duration"></div> |
32 | <div id="jp_playlist_1" class="jp-playlist"> |
42 | <div class="jp-video jp-video-270p"> |
43 | <div class="jp-type-single"> |
44 | <div id="jquery_jplayer_2" class="jp-jplayer"></div> |
45 | <div id="jp_interface_2" class="jp-interface"> |
46 | <div class="jp-video-play"></div> |
47 | <ul class="jp-controls"> |
48 | <li><a href="#" class="jp-play" tabindex="1">play</a></li> |
49 | <li><a href="#" class="jp-pause" tabindex="1">pause</a></li> |
50 | <li><a href="#" class="jp-stop" tabindex="1">stop</a></li> |
51 | <li><a href="#" class="jp-mute" tabindex="1">mute</a></li> |
52 | <li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li> |
54 | <div class="jp-progress"> |
55 | <div class="jp-seek-bar"> |
56 | <div class="jp-play-bar"></div> |
59 | <div class="jp-volume-bar"> |
60 | <div class="jp-volume-bar-value"></div> |
62 | <div class="jp-current-time"></div> |
63 | <div class="jp-duration"></div> |
65 | <div id="jp_playlist_2" class="jp-playlist"> |
67 | <li>Tokyo weather</li> |
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
1 | body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0} |
2 | .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} |
3 | .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
01 | $(document).ready(function(){ |
02 | $("#jquery_jplayer_1").jPlayer({ |
04 | $(this).jPlayer("setMedia", { |
05 | mp3: "media/track.mp3", |
08 | ended: function (event) { |
09 | $(this).jPlayer("play"); |
14 | .bind($.jPlayer.event.play, function() { |
15 | $(this).jPlayer("pauseOthers"); |
17 | $("#jquery_jplayer_2").jPlayer({ |
19 | $(this).jPlayer("setMedia", { |
20 | m4v: "media/tokyo.m4v", |
21 | ogv: "media/tokyo.ogv", |
22 | poster: "media/poster.jpg" |
25 | ended: function (event) { |
26 | $("#jquery_jplayer_2").jPlayer("play", 0); |
30 | cssSelectorAncestor: "#jp_interface_2" |
32 | .bind($.jPlayer.event.play, function() { |
33 | $(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
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!
