Download
User Rating: 3.7/5 ( 1 votes)
jPlayer is the completely free and open source media library written in JavaScript. jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer's comprehensive API allows you to create innovative media solutions while support and encouragement is provided by jPlayer's active and growing community.
Features:
-
easy to get started, deploy in minutes
-
totally customizable and skinnable using HTML and CSS
-
lightweight - only 12KB 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
Media Support
-
HTML5: mp3, mp4 (AAC/H.264), ogg (Vorbis/Theora), webm (Vorbis/VP8), wav
-
Flash: mp3, mp4 (AAC/H.264), rtmp, flv
Platforms and Browsers
-
Windows: Chrome, Firefox, Internet Explorer, Safari, Opera
-
Windows (legacy): IE6, IE7, IE8, IE9, IE10, IE11
-
OSX: Safari, Firefox, Chrome, Opera
-
iOS: Mobile Safari: iPad, iPhone, iPod Touch
-
Android: Android 2.3 Browser
-
Blackberry: OS 7 Phone Browser, PlayBook Browser
Source: jplayer.org
1. INCLUDE JS ND CSS FILES
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>
<link type="text/css" href="/skin/jplayer.blue.monday.css" rel="stylesheet" />
2. HTML
<div id="jp_container_1" class="jp-video ">
<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-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 class="jp-details">
<ul>
<li><span class="jp-title"></span></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>
3. JAVASCRIPT
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
$(this).jPlayer("setMedia", {
title: "Big Buck Bunny Trailer",
m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
});
},
swfPath: "/js",
supplied: "m4v, ogv"
});
});
More information http://www.jplayer.org/latest/developer-guide/
JS Tutorial
