jplayer - jquery (flash) 를 사용한 음악 or 동영상 플레이어 (html5)

Jplayer 사이트
http://www.jplayer.org/
샘플사이트
http://happyworm.com/jPlayerLab/single-page-app/

Choose jPlayer

• easy to get started, deploy in minutes
• totally customizable and skinnable using HTML and CSS
• lightweight - only 8KB minified and Gzipped
• free and open source, no licensing restrictions
• active and growing community providing support
• free plugins available for popular platforms
• extensive platform support - multi-codec, cross-browser and cross-platform
• comprehensive documentation and getting started guide
• consistent API and interface in all browsers, HTML5 or Adobe® Flash™
• extensible architecture

Platforms and Browsers

• Windows: Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9
• OSX: Safari, Firefox, Chrome, Opera
• iOS: Mobile Safari: iPad, iPhone, iPod Touch
• Android: Android 2.3 Browser
• Blackberry: OS 7 Phone Browser, PlayBook Browser

Media Support

• HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
• Flash: mp3, mp4 (AAC/H.264), flv

For cross-browser support, a format must be supplied that works in both HTML5 and Flash.
Optional additional formats may be supplied to increase cross-browser HTML5 support.

- 텍스트 기반 Demo

• Select a track :
• Cro Magnon Man
• |
• The Separation
• |
• Lismore
• |
• Thin Ice

: nothing at of , which is

• Play
• Pause
• Stop

• volume :
• Mute
• Unmute
• |<---------->|
• Max

Media used in demo:
© 2009 The Stark Palace - sharkbatter.com
© 2003 Miaow / Arnaud Laflaquiere - MiaowMusic.com

 
Sourse Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="http://www.jplayer.org/latest/js/jquery.jplayer.inspector.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

// Local copy of jQuery selectors, for performance.
var my_jPlayer = $("#jquery_jplayer"),
my_trackName = $("#jp_container .track-name"),
my_playState = $("#jp_container .play-state"),
my_extraPlayInfo = $("#jp_container .extra-play-info");

// Some options
var opt_play_first = false, // If true, will attempt to auto-play the default track on page loads. No effect on mobile devices, like iOS.
opt_auto_play = true, // If true, when a track is selected, it will auto-play.
opt_text_playing = "Now playing", // Text when playing
opt_text_selected = "Track selected"; // Text when not playing

// A flag to capture the first track
var first_track = true;

// Change the time format
$.jPlayer.timeFormat.padMin = false;
$.jPlayer.timeFormat.padSec = false;
$.jPlayer.timeFormat.sepMin = " min ";
$.jPlayer.timeFormat.sepSec = " sec";

// Initialize the play state text
my_playState.text(opt_text_selected);

// Instance jPlayer
my_jPlayer.jPlayer({
ready: function () {
$("#jp_container .track-default").click();
},
timeupdate: function(event) {
my_extraPlayInfo.text(parseInt(event.jPlayer.status.currentPercentAbsolute, 10) + "%");
},
play: function(event) {
my_playState.text(opt_text_playing);
},
pause: function(event) {
my_playState.text(opt_text_selected);
},
ended: function(event) {
my_playState.text(opt_text_selected);
},
swfPath: "http://www.jplayer.org/latest/js",
cssSelectorAncestor: "#jp_container",
supplied: "mp3",
wmode: "window"
});

// Create click handlers for the different tracks
$("#jp_container .track").click(function(e) {
my_trackName.text($(this).text());
my_jPlayer.jPlayer("setMedia", {
mp3: $(this).attr("href")
});
if((opt_play_first && first_track) || (opt_auto_play && !first_track)) {
my_jPlayer.jPlayer("play");
}
first_track = false;
$(this).blur();
return false;
});


$("#jplayer_inspector").jPlayerInspector({jPlayer:$("#jquery_jplayer")});
});
//]]>
</script>
<style>
<!--
.demo-container {
    border: 1px solid #009BE3;
    padding:0 20px;
    font-family: "Myriad Pro Regular","Trebuchet MS";
}

.demo-container a, .demo-container a:link, .demo-container a:visited, .demo-container a:hover, .demo-container a:focus, .demo- container a:active {
    color: #009BE3;
}

.demo-container ul {
    list-style-type:none;
    padding:0;
    margin:1em 0;
    width:100%;
    overflow:hidden;
}

.demo-container ul span {
color: #A0A600;
}

.demo-container li {
    float:left;
    margin-right:1em;
}

.demo-container p span.track-name {
    color: #CC0090;
}
-->
</style>

<div id="jquery_jplayer"></div>
<div id="jp_container" class="demo-container">
    <ul>
        <li><span>Select a track : </span></li>
        <li>
            <a href="http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" class="track track-default">Cro Magnon Man</a></li>
        <li>| </li>
        <li>
            <a href="http://www.jplayer.org/audio/mp3/Miaow-05-The-separation.mp3" class="track">
The Separation</a></li>
        <li>| </li>
        <li>
            <a href="http://www.jplayer.org/audio/mp3/Miaow-04-Lismore.mp3" class="track">
Lismore</a></li>
        <li>| </li>
        <li>
            <a href="http://www.jplayer.org/audio/mp3/Miaow-10-Thin-ice.mp3" class="track">
Thin Ice</a></li>
    </ul>
    <p><span class="play-state"></span>: <span class="track-name">nothing</span>
at <span class="extra-play-info"></span>of <span class="jp-duration"></span>
, which is <span class="jp-current-time"></span></p>
<ul>
    <li><a class="jp-play" href="#">Play</a></li>
    <li><a class="jp-pause" href="#">Pause</a></li>
    <li><a class="jp-stop" href="#">Stop</a></li>
</ul>
<ul>
    <li>volume :</li>
    <li><a class="jp-mute" href="#">Mute</a></li>
    <li><a class="jp-unmute" href="#">Unmute</a></li>
    <li><a class="jp-volume-bar" href="#">|&lt;----------&gt;|</a></li>
    <li><a class="jp-volume-max" href="#">Max</a></li>
</ul>
</div>
<div id="jplayer_inspector"></div>