Videos mit Flowplayer in Drupal einbinden
Eingetragen von dru45me (37)am 17.04.2012 - 09:53 Uhr in
Hallo Zusammen,
ich möchte gerne in Drupal ein Video mit dem "Flowplayer" einbinden. Das Script habe ich soweit am laufen. Nur lässt sich das Startbild nicht richtig mit einbauen. Ich möchte dass Startbild so einbauen, dass der "Play-Button" darüberliegt. So wie man das öfters bei den Seiten sieht.
Mein Script sieht wie folgt aus.
<script src="http://www.xxxxx/flowplayer-3.2.8.min.js"></script>
</head>
<body>
<a href="http://www.xxxxxx.FLV"
style="display:block;width:640px;height:360px;"
id="player">
</a>
<script language="JavaScript">
flowplayer("player", "http://www.xxxxxx/flowplayer-3.2.8.swf", { clip: { autoPlay: false, autoBuffering: true } });
</script>
</body>
</html>Das wäre die Bild-Info:
<img src="http://www.xxxxxxxx/Startbild.JPG">
Ich habe es schon mehrmals versucht an verschiedene Stellen einzubauen. Jedoch ohne Erfolg.
Hat mir jemand einen Tipp an welche Stelle ich das platzieren muss und vórallem mit welchem Script?
Wie gesagt, ist als Startbild gesehen, mit dem Play-Button. Klickt man dann auf Play, so startet der Film.
Danke im voraus für Eure Hilfe.
Gruß
Andreas
- Anmelden oder Registrieren um Kommentare zu schreiben
Splash image
am 17.04.2012 - 10:23 Uhr
Hallo.
Du kannst dem Flowplayer ein eigenes Vorschaubild mitgeben (siehe http://flowplayer.org/demos/installation/splash-image.html). Dieses Vorschaubild kannst Du mittels [do:imagecache Imagecache] verändern und so das Play-Icon über das urprüngliche Bild legen ([do:imagecache_actions Imagecache actions]).
Alternativ dazu kannst Du das Play-Icon auch per CSS über dem Player positionieren.
Splash image
am 17.04.2012 - 10:36 Uhr
Hallo,
danke für Deine Antwort. Die 1. Version habe ich schon versucht. Das Problem dabei ist jedoch, dass der Playbutton fehlt, und wenn man dann auf das Startbild klickt,
der Player zuerst einen schwarzen Hintergrund hat mit dem Playbutton. Dann muss man nochmals Play klicken.
Mit dem CSS kenne ich mich leider nicht so aus, wie dass dann im meinem Fall aussehen könnte.
Gruß Andreas
Imagecache
am 17.04.2012 - 11:51 Uhr
Die 1. Version habe ich schon versucht. Das Problem dabei ist jedoch, dass der Playbutton fehlt, und wenn man dann auf das Startbild klickt, der Player zuerst einen schwarzen Hintergrund hat mit dem Playbutton. Dann muss man nochmals Play klicken.
Schau Dir mal die Dokumentation (http://flowplayer.org/documentation/skinning/index.html) an. Dort ist beschrieben, wie man ein Splash-Bild anlegt. Das Play-Icon musst Du natürlich noch per [do:imagecache_actions Imagecache actions] über das ursprüngliche Bild legen.
@zweimal klick bevor der Film
am 17.04.2012 - 12:05 Uhr
@zweimal klick bevor der Film losgeht
Wenn du eine Splash-Screen verwendest, dann kannst du vermeiden, indem du autoPlay:true setzt
Diese canvas-Background Funktionalität, die der Flowplayer normalerweise bieten soll, hat bei mir auch noch nie so richtig funktioniert.
Du kannst aber in dem Aufruf auf der Seite das Hintergrundbild reinpacken, dann sieht das ungefähr so aus:
<a class="player" href="/sites/all/themes/......flv" style="float:left;margin-left:36px;width:320px;height:240px;"><img src="/sites/all/themes/.....snap_.....jpg" alt="...." /> </a>lieben Gruß
Berthold Lausch
Hallo Berthold, danke für
am 17.04.2012 - 12:25 Uhr
Hallo Berthold,
danke für Deine Antwort. Ich habe das nun mal eingebaut. Hat aber nicht geklappt. Nun sehe ich zwar das Startbild, aber der
Playbutton fehlt und das Video ist nicht anwählbar, also keine Möglichkeit das Video zu starten.
Ich habe Deinen Part an Script in meines eingebaut. Bin mir nicht sicher, war das so richtig von mir?
Gruß
Andreas
also was du auf dem Startbild
am 17.04.2012 - 13:09 Uhr
also was du auf dem Startbild sieht, das ist ja dir überlassen, das ist ja ein Bild und dann nimmst du eben eines, was so wie ein Bild mit einem Startbutton und den Controls aussieht...
Bei mir funktioniert das einwandfrei, wenn ich es so einstellt und bei autoplay:true läuft das Video beim Klick sofort los.
Wie ist denn die URL deiner Seite, kann man das mal online sehen ?
Gruß
Berthold Lausch
nein ist nicht online
am 17.04.2012 - 13:17 Uhr
Hallo Berthold,
danke für Deine Antwort. Nein, die Seite ist nicht online, nur hier bei mir auf dem Server offline.
Werde aber nochmals schauen, woran das liegen kann. Dennoch nochmals herzlichen Dank für den Tipp.
Gruß
Andreas
Kannst ja mal posten, wie
am 17.04.2012 - 14:10 Uhr
Kannst ja mal posten, wie dein Java-Script, dein Link jetzt aussehen, nachdem du die Anpassungen vorgenommen hast.
Gruß
Berthold Lausch
Script
am 17.04.2012 - 14:20 Uhr
Hallo Berthold,
gerne. Anbei das Script. Denke mal, ich habe da etwas falsch eingebunden.
<script src="http://www.xxxx/flowplayer-3.2.8.min.js"></script>
</head>
<body>
<script language="JavaScript">
flowplayer("player", "http://xxx/flowplayer-3.2.8.swf", { clip: { autoPlay: true, autoBuffering: true } });
</script>
<a class="player" http://xxx_Video.FLV"
style="float:left;margin-left:36px;width:320px;height:240px;">
<img src="http://www.xxxx/Startbild.JPG"/> </a>
</body>
</html>
in der Tat sind da noch ein
am 17.04.2012 - 15:51 Uhr
in der Tat sind da noch ein paar Fehler drin....
das Javascript: flowplayer-3.2.8.min.js würde ich "richtig" bei Drupal registrieren, also in die .info hineinschreiben.
bei dem a-Tag fehlt das href und dein anderes Javascript versucht auf die id player zuzugreifen, bevor die überhaupt geladen worden ist.
im übrigen gibt es bei dir gar keine id player, sondern nur eine class player. In der Version 3.2.6 des Flowplayers hat das jedenfalls nicht funktioniert.
Ansonsten sieht das doch gar nicht so schlecht aus, am besten auf mal auf die Fehlerkonsole des Browsers schauen, ob es noch irgendwelche JavaScript-Fehler gibt.
Gruß
Berthold Lausch
Danke
am 17.04.2012 - 16:00 Uhr
Hallo Berthold,
herzlichen Dank für die Tipps. Werde das gleich einmal umbauen.
Gruß
Andreas
ohne info
am 17.04.2012 - 16:13 Uhr
ist es zwingend, den eintrag in die info zu schreiben?
oder würde das auch so gehen, ohne diesen eintrag?
es geht auch, wenn man das JS
am 17.04.2012 - 16:23 Uhr
es geht auch, wenn man das JS so wie du das gemacht hast einbindest.
Ich neige immer dazu, es "richtig" zu registrieren, dann brauch ich mich auf anderen Seiten, wo vielleicht auch ein Filmchen abgespielt wird, nicht mehr um das externe JavaScript zu kümmern, aber das ist ja auch Geschmackssache.
Ich habe beides getestet (local) und bei mir funktionieren beide Arten problemlos.
Gruß
Berthold Lausch
ein fertiges script dazu hast
am 17.04.2012 - 16:33 Uhr
ein fertiges script dazu hast du mir nicht evtl, welches du mir zur verfügung stellen könntest. also das ohne das einbinden in die info.
ich bekomme das script heute wirklich nicht hin. meines, welches ich nun wieder geändert habe läuft leider wieder nicht.
ich muss da glaube ich echt nun passen
mein localer Test
am 17.04.2012 - 16:55 Uhr
<script src="/virtuell/t14/sites/all/themes/mein_bartik/video/flowplayer-3.2.6.min.js"></script>
<p><a href="/virtuell/t14/sites/all/themes/mein_bartik/video/output.mp4" id="player" style="float:left;margin-left:36px;width:320px;height:240px;"> <img src="/virtuell/t14/sites/all/themes/mein_bartik/video/snap.jpg" /> </a>
<script language="JavaScript">
flowplayer("player", "/virtuell/t14/sites/all/themes/mein_bartik/video/flowplayer-3.2.7.swf", { clip: { autoPlay: true, autoBuffering: true } });
</script></p>
das funktioniert bei mir local einwandfrei.
Du mußt natürlich deine Pfade, deine Version des Flowplayers und dein Video und deine Spashscreen dort einbinden.
Gruß
Berthold Lausch
1.000 Dank
am 17.04.2012 - 16:53 Uhr
Hi Berthold,
dass ist ja mal eine freundliche Unterstützung. 1.000 Dank an Dich. Werde ich gleich mal Morgen mit meine Pfade einbauen.
Nochmals herzlichen Dank für die Hilfe.
Viele Grüße
Andreas