Javascript - Flowplayer playlist - nicht jeder Link soll erfasst werden

ArtiHl · 26.07.2011

Hallo alle miteinander,
ich habe ein kleines Problem.
Ich nutze den Flowplayer mit playlist und audio plugin.
Hier mal ein Auszug aus dem Quellcode:

Code:

<script type="text/javascript"> 
            $(function() {
                    flowplayer("player", {src:"templates/extras/flowplayer2/flowplayer.commercial-3.2.6.swf", wmode: "transparent"},{
                          key: '#$geheim',
                          clip: {baseUrl: 'XXX'}, 
                          plugins: {
                               audio: {
                                            url: 'flowplayer.audio-3.2.2.swf'
                                          }
    }
        
    
    }).playlist("div.clips");        
});

Hier der das Html:

HTML:

<div class="clips">
<div>
    <a href="http://www.irgendwas.de/Hoerprobe.mp3" class="first"><img class="Sprecher-Play" src="templates/images/Sprecher/Hoerprobe.png" alt="" /></a>
    <span class="Sprecher-Name">test</span>
    <img class="Sprecher-Foto" src="templates/Sprecher/Sprecher-Foto.png" height="130px" alt="" />
    <p class="Sprecher-Info1">sfghsfgh
    <span class="info">
    </br></br> 
    Diplomabschluss als Sprecher an der Staatlichen Hochschule für Musik und Darstellende
    Kunst Stuttgart. </br></br>
    <b>Referenzen:</b>  ARTE, SWR, Deutschlandfunk, Südwest-Fernsehen, Herder Audio Verlag, Boehringer Pharma,  SAP, Staatsoper Stuttgart, Bachakademie Stuttgart, Schroedel Verlag, Klett Verlag, Hörbuchverlag Kehl,Sony, Lonely Planet, Mercedes, BMW, Johnson&Johnson, Hyperion Solutions, Raychem, Sun Microsystems, Weleda, Boehringer Pharma, SAP, Deutsche Bahn.
    <a href="http://irgendwas.de"><img class="Sprecher-Homepage" src="templates/images/Sprecher/Homepage-Sprecher.png" alt="" /></a>
    </span>
    </span>
    </p>
    <img class="SprecherToggle" src="templates/images/Sprecher/Infos.png" alt="" />
    <a href='#'><img class="Sprecher-button2" src="templates/images/Sprecher/Buchungsanfrage.png" alt="" /></a>
</div>
</div>

Nun ist es ja so das alle Links der Playliste zugeordnet werden.
In diesem Fall 3:
Der erste mit dem *.mp3 -> so soll es sein.
Doch der 2te und 3te relativ weit unten auch.

Weiß jmd. wie ich diese Links ausschliessen kann bzw. was ich machen muss damit er nur den ersten Links hinzufügt(z.B. diesem Link eine extra Klasse geben, nur wie sag ich dem Flowplayer er soll nur Links mit dieser klasse ansprechen?)

Ich danke euch schon mal vorab für eure tips.

Myhar · 26.07.2011

AW: Javascript - Flowplayer playlist - nicht jeder Link soll erfasst werden

Zum Flowplayer existiert eine schöne , die wird dir genau sagen können, wie es funktioniert.
playlist("div.clips"); <-- Diese Zeile wird wohl das div mit der Klasse clips suchen und daraus die Playlist zusammenstellen. Die genaue Syntax um nur ein Element anzusprechen weiß ich nicht auswendig, aber ich weiß, dass du die Antwort auf der Flowplayer Seite finden wirst. Schließlich habe ich sie auch schon einmal, vor langer Zeit, dort gefunden. Nur an die genaue Lösung kann ich mich nicht mehr erinnern.
Viel Erfolg beim Suchen

L. G.

ArtiHl · 28.07.2011

AW: Javascript - Flowplayer playlist - nicht jeder Link soll erfasst werden

Danke für deinen Hinweis bzgl. der Dokumentation.
Diese hatte ich schon intensiv studiert und leider keine Lösung gefunden.
Nach weiterem suchen und dem herunterladen der nicht minimierten Playlist.js habe ich folgendes probiert:

Hier das Original:

Code:

/**
 * flowplayer.playlist 3.0.8. Flowplayer JavaScript plugin.
 * 
 * This file is part of Flowplayer, http://flowplayer.org
 *
 * Author: Tero Piirainen, <info@flowplayer.org>
 * Copyright (c) 2008-2010 Flowplayer Ltd
 *
 * Dual licensed under MIT and GPL 2+ licenses
 * SEE: http://www.opensource.org/licenses
 * 
 * Date: 2010-05-04 05:33:23 +0000 (Tue, 04 May 2010)
 * Revision: 3405 
 */ 
(function($) {
    
    $f.addPlugin("playlist", function(wrap, options) {


        // self points to current Player instance
        var self = this;    
        
        var opts = {
            playingClass: 'playing',
            pausedClass: 'paused',
            progressClass:'progress',
            template: '<a href="${url}">${title}</a>',
            loop: false,
            playOnClick: true,
            manual: false
        };        
        
        $.extend(opts, options);
        wrap = $(wrap);        
        var manual = self.getPlaylist().length <= 1 || opts.manual; 
        var els = null;
        
        
//{{{ "private" functions
                
        function toString(clip) {
            var el = template;
            
            $.each(clip, function(key, val) {    
                if (!$.isFunction(val)) {
                    el = el.replace("$\{" +key+ "\}", val).replace("$%7B" +key+ "%7D", val);            
                }
            }); 
            return el;
        }
        
        // assign onClick event for each clip
        function bindClicks() {            
            els = getEls.unbind("click.playlist").bind("click.playlist", function() {
                return play($(this), els.index(this));                        
            });        
        }
        
        function buildPlaylist() {
            wrap.empty();
            
            $.each(self.getPlaylist(), function() {  
                wrap.append(toString(this)); 
            });                
            
            bindClicks();
        } 

        
        function play(el, clip)  {
        
            if (el.hasClass(opts.playingClass) || el.hasClass(opts.pausedClass)) {
                self.toggle();
                
            } else {
                el.addClass(opts.progressClass);
                self.play(clip);                             
            }            
            
            return false;
        }    
        
        
        function clearCSS() {
            if (manual) { els = getEls(); }
            els.removeClass(opts.playingClass);
            els.removeClass(opts.pausedClass);
            els.removeClass(opts.progressClass);            
        }
        
        function getEl(clip) {
            return (manual) ? els.filter("[href=" + clip.originalUrl + "]") : els.eq(clip.index);    
        }
        
        function getEls() {
            var els = wrap.find("a");
            return els.length ? els : wrap.Children();
            
        }
//}}}  
         
        /* setup playlists with onClick handlers */ 
        
        // internal playlist
        if (!manual) {
            
            var template = wrap.is(":empty") ? opts.template : wrap.html(); 
            buildPlaylist();            
            
            
        // manual playlist
        } else {
            
            els = getEls();            
            
            // allows dynamic addition of elements
            if ($.isFunction(els.live)) {
                var foo = $(wrap.selector + " a");
                if (!foo.length) { foo = $(wrap.selector + " > *"); }
                
                foo.live("click", function() {
                    var el = $(this);
                    return play(el, el.attr("href"));
                });
                
            } else {
                els.click(function() {
                    var el = $(this);
                    return play(el, el.attr("href"));
                });                    
            }
                         
                    
            // setup player to play first clip
            var clip = self.getClip(0);
            if (!clip.url && opts.playOnClick) {
                clip.update({url: els.eq(0).attr("href")});        
            }   
            
        }
        
        // onBegin
        self.onBegin(function(clip) {
            clearCSS();        
            getEl(clip).addClass(opts.playingClass);
        });    
        
        // onPause    
        self.onPause(function(clip) {
            getEl(clip).removeClass(opts.playingClass).addClass(opts.pausedClass);        
        });    
        
        // onResume
        self.onResume(function(clip) {
            getEl(clip).removeClass(opts.pausedClass).addClass(opts.playingClass);        
        });        
        
        // what happens when clip ends ?
        if (!opts.loop && !manual) {
            
            // stop the playback exept on the last clip, which is stopped by default
            self.onBeforeFinish(function(clip) {
                if (!clip.isInStream && clip.index < els.length -1) {
                    return false;
                }
            }); 
        }
        
        // on manual setups perform looping here
        if (manual && opts.loop) {
            self.onBeforeFinish(function(clip) {
                var el = getEl(clip);
                if (el.next().length) {
                    el.next().click();             
                } else {
                    els.eq(0).click();    
                } 
                return false;                
            }); 
        }
        
        // onUnload
        self.onUnload(function() {
            clearCSS();        
        });
        
        // onPlaylistReplace
        if (!manual) {
            self.onPlaylistReplace(function() {
                buildPlaylist();        
            });
        }
        
        // onClipAdd
        self.onClipAdd(function(clip, index) {    
            els.eq(index).before(toString(clip));            
            bindClicks(); 
        });        
        
        return self;
        
    });
        
})(jQuery);

habe ich die Funktion getEls geändert:

Code:

function getEls() {
            var els = wrap.find("a.Musik");
            return els.length ? els : wrap.find(a.Musik);
            
        }

Leider wird noch immer jeder Link angesprochen.
Alerdings lassen sich alle Links nicht mehr stoppen, ausser der mit der Klasse "Musik".
Leider sind meine JS Kenntnisse nicht ausreichend um die vollständige und richtige Lösung ohne Hilfe zu finden.

Wenn also jemand einen Tip auf Lager hat wäre ich ihm sehr dankbar.

Myhar · 28.07.2011

AW: Javascript - Flowplayer playlist - nicht jeder Link soll erfasst werden

Wieso änderst du irgendwelche Funktionen ab?
wird in der Dokumentation erklärt, wie das funktioniert:

Code:

flowplayer("player", "flowplayer.swf", {		// supply the configuration

    [...]

    playlist: [			// playlist is an array of Clips, hence [...]
        'KimAronson-TwentySeconds58192.flv',			// simple playlist entry: video
        'KimAronson-TwentySeconds59483.flv',
        {url: 'http://releases.flowplayer.org/fake_empire.mp3', duration: 25}	// small object as entry
    ],

Du musst vorher also ein Array mit deinen Links erstellen und von denen dann das href Attribut auslesen. Verwendest du ein JS Framework auf deiner Seite? Wenn ja, welches?

L. G.

ArtiHl · 28.07.2011

AW: Javascript - Flowplayer playlist - nicht jeder Link soll erfasst werden

Ich ändere ja nicht einfach irgendeine Funktion um.
Den Hinweis habe ich im Flowplayerforum gesehen:

In deinem Beispiel erstelle ich also das Playlistarray manuell in der Playerconfiguration und muss, wie du sagst hinterher den Link dazu finden und an den Player binden?
Da muss ich passen, weiß ich nicht wie das gehen soll.
Es wird jquery genutzt.
Hier mal ein bereinigtes Beispiel was gemacht werden soll:

HTML:

<div id="playlist">
  <div class="entry">
    <div>Video Title</div>
      <a href="video1.mp4">View Video</a>
      <a href="videos/video2.mp4" class="download">Download Video</a>
    </div>
  </div>
  <div class="entry">
    <div>Video Title</div>
      <a href="video2.mp4">View Video</a>
      <a href="videos/video2.mp4" class="download">Download Video</a>
    </div>
  </div>
</div>

Nun soll der Player eine Playlist erstellen für jedes Item.
Wenn ich es so mache wie ich eingangs beschrieben habe würde er 4 Items finden.
Ich möchte aber das er nur die Links mit *.mp4 bzw. das er nicht die Links mit der Klasse "download" an den Player bindet.

Mit deinem Beispiel müsste ich die mp4 manuell in die Playlist stecken, womit ich kein Problem habe, doch wie sage hinterher dem Player das er wenn
Links 1 geklickt wird er item 1, und nur item 1, bzw wenn auf link 2 nur item 2 abspielen soll.

Danke dir für deine bisherige Mühe mir zu helfen.

Myhar · 28.07.2011

AW: Javascript - Flowplayer playlist - nicht jeder Link soll erfasst werden

Ich dachte, du willst alle Playlistitems in einem Player haben... Nur glaube ich, habe ich dich hier missverstanden.
Dann wäre die Lösung nämlich folgende gewesen, vorausgesetzt du kannst deinen Playlisttiteln eine Klasse hinzufügen. Ansonsten müsstest du wohl zuerst alle <a> mit jQuery auswählen (mit $(a) ) und diese dann auf ihre Klasse überprüfen. Wenn die Klasse nicht "download" ist, dann ist es in der Playlist)

Code:

var playlistItems  = new Array();
var i=$("a.playlist").each(function(){
   playlistItems.push(this.attr("href");
});

Dann hättest du in deinen playlistItems ein Array mit allen .mp4 Links von deiner Seite. (Ist allerdings ungetestet, es ist deshalb anzunehmen, dass Syntaxfehler vorhanden sind)

Aber du möchtest, dass der jeweilige Clip abgespielt wird, wenn auf einen Link geklickt wird?
Dann musst du jedem playlist-a einen onclick Event hinzufügen, bei dem der Player mit dem .mp4 des Links gestartet wird:

Code:

$("a.playlist").each(function(){
  jwplayer("player").stop(); //stoppen falls er bereits etwas abspielt
	jwplayer('player').load({
		file: this.attr("href") //hier wird die neue source geladen
	});
//Hier eventuell ein play einbauen: 
jwplayer("player").play();
});