Beispiele:
Youtube
Vimeo
Dailymotion
Achtung Cookies!
Durch den Klick auf das Vorschaubild werden die Cookies vom jeweiligen Videoanbieter gespeichert.
Im Unterschied zum direkten Einbinden der iframes, wird bei dieser Methode ein Cookie erst in dem Moment gesetzt, wenn tatsächlich ein Video abgespielt wird. Solange der Besucher nur die Vorschaubilder betrachtet, werden keine diesbezüglichen Cookies benutzt.
Die Vorschaubilder werden jedoch direkt vom Videoanbieter geladen, was eine statistische Erfassung der angezeigten Vorschaubilder seitens Youtube, Vimeo oder Dailymotion ermöglicht.
TER: typo3.org/extensions/repository/view/brt_videourlreplace
GitHub: github.com/brrrrrrrt/brt_videourlreplace
Voraussetzungen:
- Bootstrap 3
- jQuery
Diese Extension ersetzt automatisch alle URLs (Links) zu Youtube, Vimeo und Dailymotion Videos.
Einfach die URL eines Videos vom Adressfeld des Browsers in ein Textfeld kopieren: Typo3 wandelt dies üblicherweise in einen Link um, dieser wird dann von der Extension zunächst mit einem entsprechenden Vorschaubild des Videos ersetzt. Dadurch erfolgt das Laden einer Webseite mit Videos sehr viel schneller, denn der für das Abspielen des Videos erforderliche Iframe (>300KB) wird erst geladen wenn das Vorschaubild angeklickt wird. Besonders vorteilhaft ist diese Methode, wenn gleich mehrere Videos auf einer Seite eingebunden werden.
Quelltext Thumbnail
Quelltext iframe
Weitere Informationen zu YouTube können unter https://www.youtube.com/intl/de/yt/about/ abgerufen werden
Kurze Ladezeit trotz Videos
Ein einzelnes Video in einem üblichen iframe benötigt bis zu 6 Serveranfragen und 450KB Daten, auch wenn das Video garnicht angesehen wird. Mit Hilfe dieser Erweiterung kann die Ladezeit der Seite stark verkürzt werden, da zunächst nur ein Vorschaubild angezeigt wird.
HD Thumbnails
Ab einer gewissen Videobreite werden größere Vorschaubilder angezeigt. Vorschaubilder in HD benötigen mitunter etwas Ladezeit, liefern dafür aber ein optimales Bild bei großflächigen Videos.
Backend
mehr über dieses Methode:
Faster Youtube embeds with Javascript