Video-Gallery mit Live-Thumbnail-Previews

Internet
1

Ich möchte eine video gallery einrichten, welche bei einem Mouse-Over ein Preview des Videos anzeigt.

Beispiele:

http://www.istockphoto.com/search/text/Tasmanian%20D…

  • oder -

https://www.pond5.com/stock-video-footage/1/*.html

(Maus über einem Video ruhen lassen, um den Effekt zu sehen)

Ich brauche den Effekt für eine Wordpress Seite und bei den WP-PlugIns habe ich nichts gefunden. Bei jQuery gab es ebenfalls keine vorhandene Lösung.

Hat jemand eine Idee?

Gruss
Ronald

2

Generell handelt es sich da um einen tooltip. und zwar einen der seinen Inhalt per Ajax als HTML nach lädt. Dafür gibt es einige jquery tools.
Dazu musst du natürlich noch das tooltip selbst basteln und unter einer URL bereithalten.
Gruß

3

nee, tut mir leid- ich habe die js-skripte auf den seiten durchgesehn, aber … nix- schade + viel glück!

4

Hi!
Du brauchst wohl drei Teile.

  1. Die Videos in der richtigen Bitrate. Wenn du eine hohe Qualität hast, musst du wohl in eine niedrige transcodieren, damit es flüssig läuft. Ich würde WEBM nehmen.

  2. Die Boxen müssen angezeigt werden. Wenn das Thumbnail ganz rechts ist, muss die Box nach links, damit sie noch im Fenster bleibt. Ist also etwas tricky. Das würde ich einfach selber programmieren in jQuery.

  3. Der Player in den Boxen ist in HTML5 eigentlich kein Problem.

Thomas

5

Hallo DrumSo,

ich würde dir hier ein jQuey tooltip plugin empfehlen, wenn du es selbst machen möchtest. Ansonsten hilft dir vielleicht das folgende Wordpress Plugin weiter:

http://wordpress.org/extend/plugins/mouseover-gallery/

Ganz bestimmt findest du auf folgendem Marktplatz das richtige für dich (Kostenpunkt: ca. 15 USD):

http://codecanyon.net

Die haben auch ein Forum, das dir bestimmt weiterhelfen kann. Sind eine Menge fähige Leute registriert.

Viel Erfolg!

6

codecanyon.net hat tatsächlich genau so ein Script für $4,-. Vgl.:
http://codecanyon.net/item/jquery-media-tooltip/full…

Alternativ macht das hier Mut - habe es aber ebenfalls noch nicht ausprobieren können:

http://croberts.me/projects/wordpress-plugins/tippy-…

Danke an alle!

7

leider kann ich dir zu diesem Problem nicht helfen.

8

Hi Ronald,
warscheinlich must du dort selbst was programmieren wenn es wordpress nicht bietet.

die genrelle stratige dabei ist eigendlich simple

du hast eine liste von thumbanails und zusätiliche preview informationen das könnte z.b so aussehen

some meta description

zu beachten ist das hier noch kein element oder flash palyer eingebunden ist. so wird der browser beim ersten laden erst nur die thumbnails und die description laden. der div.thumb-meta ist versteckt.
bei mouseover wird er eingeblednet und der tag mittels javascript hinein geschrieben. so fängt der browser erst in dem momoment mit dem laden des videos an.

soweit zur theorie. praktisch muss man es natürlich noch mal in detail umsetzten.

9

Sauber :smile: Dann mal gutes Gelingen!

10

Hallo Ronald,

ich denke mal, dass es dafür keine spezielle Lösung geben wird, das wirst du vermutlich selbst schreiben müssen. Sollte sich von der Schwierigkeit aber im Rahmen halten.
Bei Mouseover neues div mit dem video als Inhalt per Ajax nachladen und mit CSS relativ zum Thumbnail positionieren.

Also ran ans coden :smile:

11

Wenn du die einschlägigen Quellen (WP-Plugins, jQuery) bereits durch hast, habe ich im Moment auch keine Idee.

Grüße, Renaade

12

Hallo Roland,
ich habe leider keine Idee.
Grüße, Dirk