Flexslider und die Vimeo API

[snickers_90]

Hallo zusammen,

ich hab ein kleines Problem mit dem Plugin Flexslider auf meiner Website. Ich bekomme es einfach nicht hin, dass die Videos beim Slidewechsel stoppen/pausieren wie hier zu sehen: FlexSlider 2 (hier mein "Problemkind":Beispiel)

Ich habe inzwischen verschiedene Foren durchstöbert und Dinge ausprobiert, bin aber letzten Endes am Code oben hängen geblieben. Ich habe alle Skripte und Libraries, die dort verwendet wurden (Froogaloop) in meinem Code ausgehend vom js-Ordner meiner Website geladen, aber das Video hält einfach nicht an. Kann mir jemand weiterhelfen und evtl. beschreiben, wo ich die jeweiligen Skripte einbinden muss? Die js und Libraries habe ich bisher versucht im Header und Footer zu laden, das Skript der Vimeo API direkt im HTML-Code eingebunden. Aber irgendwas mache ich falsch :-(

Bin für jede Hilfe dankbar!

 

[mikdoe]

Hast du mal überlegt, erstmal ein paar Fehler der Seite zu beheben? Häufig beruht Fehlverhalten auf anderen Fehlern die stören.
Hier mal nur ein Ausschnitt:


Oder kanns du 100000 %ig sagen, dass keiner dieser Fehler ein Querschläger auf dein Problem ist?

 

[Sempervivum]

Schau dir mal die Demo auf der Homepage von Flexslider genau an. Was das Video anhält, ist dieses

      before: function(slider){
        $f(player).api('pause');
      }

hier drin:

  // Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
  $(".flexslider")
    .fitVids()
    .flexslider({
      animation: "slide",
      useCSS: false,
      animationLoop: false,
      smoothHeight: true,
      before: function(slider){
        $f(player).api('pause');
      }
  });

 

[snickers_90]

Vielen Dank für eure Antworten! Ich bin leider totaler Anfänger, was JS angeht. Habe noch versucht, den ein oder anderen Fehler auszumerzen und mein Ergebnis mal unter gleichem Link hochgeladen. Komischerweise wird das Video scheinbar zweimal geladen, die Seite springt deshalb auch kurz

before: function(slider){
        $f(player).api('pause');
      }

Dieser Teil wird direkt in der HTML-Datei geladen, zeigt aber leider keine Wirkung

Mir werden aber immer noch einige Fehler angezeigt, für die ich keine Lösung finden konnte:

playerDomain = getDomainFromUrl(this.element.getAttribute('src'));

Wird hier etwas als 'src' erwartet? Wenn ja was?

function Froogaloop(iframe) {
        // The Froogaloop object is actually just the init constructor
        return new Froogaloop.fn.init(iframe);
    }

Diese Funktion wird anscheinend nicht gefunden…

$f(player).addEvent('ready', ready);

Schließlich scheint es noch ein paar Probleme mit der Datei "video.js" zu geben, wobei ich gelesen habe, dass diese nichts auszumachen scheinen. Oh man, ich dachte, das wäre eine Kleinigkeit…

 

[Sempervivum]

Dieser Teil wird direkt in der HTML-Datei geladen, zeigt aber leider keine Wirkung

Das wundert mich, denn ich hatte deine Seite heruntergeladen und diesen Code ergänzt. Und dann hat es funktioniert. Allerdings musste ich zusätzlich noch froogaloop.js einbinden, aber das hast Du ja auch.
Du musst dem iFrame mit dem Video die ID "player_1" geben, sonst schlägt dieses fehl:
var player = document.getElementById('player_1');
Der Fehler bei playerDomain = getDomainFromUrl(this.element.getAttribute('src')); ist dann wahrscheinlich eine Folge davon, denn this.element sollte der iFrame sein, ist aber undefiniert. Und dieses getAttribute('src') ist so korrekt, denn 'src' ist der Attributname.

 

[snickers_90]

Vielen, vielen Dank! Es funktioniert!! Jedenfalls in Safari und Firefox. Chrome macht noch Probleme…

Zwar funktionieren jetzt die Slideshows auf den Seiten ohne Video in Firefox und Safari nicht mehr, aber das bekomme ich irgendwie noch in Griff. Kann auch an CSS liegen, dort sind noch einige Fehler auszumerzen…

Aber eine Frage hätte ich trotzdem noch. Ist jetzt zwar wirklich eine Kleinigkeit, aber das Video wird immer noch zweimal geladen und springt. Wie bekomme ich das denn noch in Griff?

 

[Sempervivum]

Du hast dein Javascript im $(window).load. Dadurch kann eine kleine Verzögerung zwischen der Anzeige nach dem Laden des HTML und der Initialisierung des Sliders entstehen. Da Du das Skript unter dem HTML des Sliders notiert hast, brauchst Du das IMO gar nicht. Lösch es mal und beobachte, ob es sich dadurch verbessert

 

[snickers_90]

Lösch es mal und beobachte, ob es sich dadurch verbessert

Hat super geholfen! Die Slideshows mit Videos funktionieren jetzt schon fast reibungslos. Danke!

Allerdings bekomme ich die anderen "Bilder-Slideshows", die bisher funktionierten, nun gar nicht mehr zum Laufen (Beispiel hier). Das HTML-Skript ist identisch aufgebaut wie das mit Video.
Ich versuchte auch bereits, als erste Slide ein Video zu laden. Dann funktioniert das ganze ohne Probleme. Kann das irgendwie an der ID liegen?!

In dieser alten Version hat das ganze ursprünglich mal funktioniert, also würde ich fast ausschließen, dass es an HTML liegt. Dort wurde das modernizr-script im head geladen und die Vimeo-API fehlt. Allerdings tut auch diese Version nicht mehr

 

[Sempervivum]

In deiner alten Version finde ich die Initialisierung für den Slider gar nicht?

Zu dem eigentlichen Problem: Da es jetzt kein Video mit der ID 'player_1' mehr gibt, schlägt dieses wieder fehl, bzw. liefert "null":

var player = document.getElementById('player_1');

Du musst alles löschen, was mit der Vimeo-API zu tun hat, einschl. des Callbacks bei der Initialisierung des Sliders.

 

[snickers_90]

Es tut! Lag tatsächlich an der Initialisierung, die ich vergessen habe. Manchmal können Lösungen so simpel sein…Gibt zwar immer noch paar Kleinigkeiten, aber zumindest funktioniert alles

Vielen, vielen Dank nochmal!