JPlayer dynamische Multi-Instanzen

JPlayer ist eine kostenlose Medienbibliothek für Javascript (JQuery Plugin), welche das Einbinden von Mediendateien (insbesondere Musik und Videos) einfach und Browser-übergreifend ermöglicht.

Allerdings ist JPlayer bei der Verwendung mehrerer Instanzen auf einer Seiten vergleichsweise unflexibel. Die Optionen (Mediendateien, der Verweis auf den visuellen Musik-/ Videoplayer: cssSelectorAncestor, …) müssen während der Instantiierung dem Konstruktor übergeben werden und können nicht während der Laufzeit editiert werden.
Für jede einzelne Instanz von JPlayer bräuchte man also unnötige, redundante (vorausgesetzt die Player sollen alle gleich sein) Javascript-Zeilen.

Wesentlich einfacher wäre es, die Optionen jedes einzelnen Players in dessen HTML-Attributen unterzubringen:

<div class="jp-jplayer" data-mp3="Pfad zur Musikdatei" data-num="ID/ Nummer des Players"></div>

Die benötigten Optionen werden aus einer Datenbank abgefragt und der HTML-Code dynamisch erzeugt:

<div class="jp-jplayer" data-mp3="<?php echo $mp3_file ?>" data-num="<?php echo $num; ?>"></div>

<div id="jp_container_<?php echo $num; ?>" class="jp-audio">
	<div class="jp-type-single">
		<div class="jp-gui jp-interface">
			<ul class="jp-controls"><!-- Control-Buttons --></ul>
			<div class="jp-progress">[...]</div>
			[...]
		</div>
		[...]
	</div>
</div>

data-num steht für die ID des Players. Sie wird verwendet um eine Relation zwischen dem Medienelement (.jp-jplayer) und dem visuellen Player (.jp-audio) herzustellen.

Mit einer Javascript-Schleife können nun alle JPlayer-Instanzen dynamisch (anhand ihrer HTML-Attribute) erstellt werden:

$(document).ready(function(){
	$('.jp-jplayer').each(function () {
		var c_jplayer = $(this); //Aktueller JPlayer wird zwischengespeichert
		c_jplayer.jPlayer({
			ready: function () {
				$(this).jPlayer("setMedia", {
					mp3: c_jplayer.attr('data-mp3') //Setzen der Mediendatei anhand des HTML-Attributs
				});
			},
			cssSelectorAncestor: '#jp_container_'+c_jplayer.attr('data-num'), //Setzen des Verweises auf den visuellen Player/ die Bedienelemente
			play: function() {
				$(this).jPlayer('pauseOthers');
			},
			swfPath: "js",
			supplied: "mp3",
			wmode: "window"
		});
	});
});

Schreibe einen Kommentar