Für Alle, die sich mit dem jPlayer noch nicht allzu gut auskennen und einfach mal einen einfachen Musik- & Videoplayer mit Links erstellen wollen, für die ist dieses kleine Tutorial perfekt geeignet. Der Vorteil an dem jPlayer gegenüber andere Player sind folgende Merkmale:
- OpenSource
- Auf jQuery aufbauend
- HTML5 sowie ein Flash-Fallback für ältere Browser
Auf der Webseite von jPlayer kann man mehr über jPlayer erfahren.
Nun aber zum versprochenen Tutorial. In einem ersten Schritt muss man die jQuery Bibliothek für den jPlayer hier runterladen.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script><script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.inspector.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
$('#jquery_jplayer').jPlayer({
ready: function() {
$(this).jPlayer( "setMedia", {
mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3"
});
},
swfPath: '../js',
solution: 'html, flash',
supplied: 'mp3',
preload: 'metadata',
volume: 0.8,
muted: false,
cssSelectorAncestor: '#jq_container',
cssSelector: {
play: '.jp-play',
pause: '.jp-pause',
stop: '.jp-stop',
seekBar: '.jp-seek-bar',
playBar: '.jp-play-bar',
mute: '.jp-mute',
unmute: '.jp-unmute',
volumeBar: '.jp-volume-bar',
volumeBarValue: '.jp-volume-bar-value',
volumeMax: '.jp-volume-max',
currentTime: '.jp-current-time',
duration: '.jp-duration',
fullScreen: '.jp-full-screen',
restoreScreen: '.jp-restore-screen',
repeat: '.jp-repeat',
repeatOff: '.jp-repeat-off',
gui: '.jp-gui',
noSolution: '.jp-no-solution'
},
errorAlerts: false,
warningAlerts: false
});
});
// ]]></script>
<div id="jquery_jplayer" style="display: block;"></div>
<div id="jq_container"><a class="jp-play" href="#">Play</a>
<a class="jp-pause" href="#">Pause</a>
<a class="jp-stop" href="#">Stop</a></div>
Wichtig ist, dass man das .swf-File in den Ordner js speichert. Nur so kann man ein Flash-Fallback bei älteren Browsern, die noch kein HTML5 beherrschen, garantieren. Dies wird mit dem
swfPath: '../js'
definiert. Mit den css-Klassen jp-pause und jp-stop wird der Start- und Stop-Knopf definiert.
Der jPlayer wurde in meinem Webprojekt www.franz-mueller.ch bei der sich drehenden CD implementiert.
Dieses Script, wie es hier steht sollte 1:1 funktionieren. falls Probleme oder Fragen auftauchen, bin ich gerne bereit diese zu klären.