187 Millionen iOS-Geräte wurden bis März 2011 verkauft – davon 60 Mio. iPod touch, 19 Mio. iPad und nicht weniger als 108 Mio. des erfolreichen iPhone. Einer aktuellen Umfrage von Silicon Alley nach wird das iPad zu 36% für Webbrowsing und bereits zu knapp 15% für Video genutzt – zusammen also über 50% der Nutzungszeit.

MediaEvent Services hat dem Trend folgend das erfolgreiche Interface für interaktive Webcasts von Grund auf neu entwickelt, iOS-fähig gemacht und zur Hauptversammlung der Deutschen Lufthansa erfolgreich gelauncht.

Neben bekannten Features wie der Folien-Navigation im Coverflow-Stil, die nun auch mit Apple Touch-Devices zu bedienen ist, macht jetzt eine Suggestivsuche bereits bei der Eingabe Suchvorschläge mit Chart-Miniaturen.

Die iPhone-Variante trägt dem kleineren Display Rechnung und überträgt zum angezeigten Chart kein Video sondern nur den Ton – in kristallklarer Qualität. Auch hier wieder mit der bekannten Navigation und voll synchronisiert.

Das neue Interface überträgt alle gängigen Formate (H.264 für Flash Player und Apple iOS sowie Windows Media), erkennt automatisch das Zielgerät, die darauf verfügbaren Formate und die verfügbare Bitrate. Vorteil für Agenturen und Unternehmen: Link setzen oder Embed-Code übernehmen – mehr ist nicht notwendig um das Interface zu integrieren. Vorteil für Nutzer: Kein technisches Wissen und umständliche Auswahl von Formaten oder der verfügbaren Bitrate. Das neue Interface wählt die optimale Kombination und lässt sich jetzt noch intuitiver bedienen.

Lufthansa Hauptversammlung 2011 jetzt ansehen

Quellen
[1] Apple Inc.
[2] Silicon Alley Insider

Unser bis dato wohl anspruchsvollstes AWS-Deployment war eine Facebook-App im Rahmen der Vorstellung der BOSS Black Kollektion 2010. 200.000 Facebook-Fans waren eingeladen, sich um die Teilnahme an der Premium Fashion-Show zu bewerben. Je 5 weibliche und 5 männliche Bewerber aus der ganzen Welt wurden per Online-Voting und von einer professionellen Jury eingeladen, vor Ort Ihr Können zu zeigen. Von der Idee bis zum Event standen dabei nur 8 Wochen zur Verfügung. Neben der inhaltlichen Ausarbeitung und organisatorischen Klimmzügen musste dabei vor allem eine Facebook-App aus dem Boden gestampft werden, die dem Ansturm der 200.000 potentiellen Facebook-Fans standhält, Datenhaltung sowie Fotoupload und -storage bereitstellt, bei Bedarf leicht skaliert und maximale Redundanz bietet. Parallel dazu musste die Applikation immer wieder performanceoptimiert und auditiert werden. Auf Basis von Amazon Web Services entwickelte das Team von MES in kurzer Zeit eine Lösung, die das MES Content Distribution Network um Application Hosting erweiterte sowie Datenbanken und Cloud-Storage zur Verfügung stellte und über Features wie Monitoring und Autoscaling verfügte. Hand in Hand mit den App-Developern der Stuttgarter Agentur Werbewelt konnte so innerhalb von 10 Tagen die Kampagne erfolgreich gelauncht werden.

So titelte “Die Zeit” und tatsächlich: Hugo Boss – deutsche Traditionsmarke – schafft den derzeit wohl innovativsten Web-Event rund um die Vorstellung der neuen Boss Black Kollektion. Über 200.000 Facebook-Fans konnten sich für die Teilnahme an der Premium Fashion-Show bewerben. Je 5 weibliche und 5 männliche Bewerber weltweit wurden per Online-Voting und von einer professionellen Jury ausgewählt, um in Berlin ihr Können zu zeigen. Denn nur für zwei Kandidaten konnte sich der Traum erfüllen, mit internationalen Topmodels den Catwalk zu besteigen. 3 Tage lang wurden gecastet, eingekleidet, gecoached und dann kam die große Stunde.

Von der Idee bis zum Event standen nur 8 Wochen zur Verfügung. Neben der inhaltlichen Ausarbeitung und organisatorischen Klimmzügen musste vor allem eine Facebook-App entwickelt werden, die dem Ansturm von 200.000 potentiellen Facebook-Fans standhält, Fotoupload und -storage bereitstellt, bei Bedarf leicht skaliert und maximale Redundanz bietet. Parallel dazu wurde die Applikation immer wieder performanceoptimiert und auditiert. Mit über zweieinhalb Jahren Erfahrung in der Entwicklung von cloudbasierten Hochverfügbarkeits- und Hochlastplattformen auf Basis von Amazon Web Services entwickelte das Team von MES in kurzer Zeit eine Lösung, die neben Content Distribution auch Datenbanken und Cloud-Storage zur Verfügung stellte sowie über Features wie Monitoring und Autoscaling verfügte. Hand in Hand mit den Entwicklern der Stuttgarter Agentur “Werbewelt” konnte so innerhalb von 10 Tagen die Kampagne gelauncht werden.

Der ehrwürdige Hamburger Bahnhof zu Berlin diente als Kulisse der Fashion Show. Der Produktionsplan sah vor, die Model-Kandidaten vom Flugzeug bis zur Show zu begleiten, tägliche Features auf Facebook, YouTube und Hugo Boss TV zu produzieren und schließlich die Show live zu übertragen. Für die mit der Videoproduktion beauftragten Agentur PUBLICMOTOR hielt MES die Produktionsinfrastruktur bereit, um Material von drei Kamerateams zu sichten und vor Ort zu schneiden. Nach erfolgter Abnahme der Beiträge wurden diese in einem automatisierten Transcoding-Workflow für die verschiedenen Zielplattformen (Hugo Boss TV, Facebook, YouTube, iPhone, DVD) verarbeitet und bereitgestellt.

Ebenso wurden Beiträge für die spätere Live-Zuspielung aufbereitet und an den Ü-Wagen überspielt, der wiederum die Live-Feeds für die Show produzierte. Der anschließende zweistündige Live-Webcast wurde sowohl “On Site” produziert als auch aus Redundanzgründen via Satellit parallel in die MES-Niederlassung Wetzlar übertragen, um bei Ausfall der Infrastruktur vor Ort den Livestream ohne Unterbrechung weiterzuführen. Bis in die frühen Morgenstunden wurden zum Abschluss Interviews vom roten Teppich, die Fashion Show und ein Backstage-Feature der frischgebackenen Models geschnitten und auf allen Channels bereitgestellt.

MES produzierte für den Livestream eine 4-stündige Webshow in mehreren Etagen der O2 World, angefangen mit einer Red Carpet Pre-Show mit dem Moderatorenduo Joko Winterscheid und Joss Stone. Die Pre-Show wurde mit einer 30-minütigen Verzögerung ausgespielt, um die Pause vor der Hauptshow zu überbrücken. Während der TV-Werbepausen produzierte MES eine Backstage-Show mit dem Rocker Pete Wentz, der mit Stars und Sternchen auf der Couch plauderte.

Zum ersten Mal wurde die EMA-Webshow komplett tapeless in HD 1080i produziert. Signale von Ikegami Glasfaser-Kamerasystemen und dem Ü-Wagen sowie Einspieler und Grafiken wurden gemischt und per EVS XT2 aufgezeichnet und zeitverzögert ausgesendet. Parallel wurde der EVS Live Feed auf Final Cut Schnittplätzen zu VOD-Packages geschnitten, die dann auf einem VOD-Cluster encodet wurden. So konnten die VOD-Inhalte für Web und mobile Geräte direkt nach Showende bereitgestellt werden. Die Red Carpet Show wurde auch zu Video-Cubes innerhalb der O2 World verteilt und MTV News zur späteren Verwendung bereitgestellt. 8 Dual-Quadcore Liveencoder produzierten insgesamt 16 Livestreams für Facebook und die regionalen MTV-Websites via 2 CDNs. Die Bilanz am Ende der Nacht: 5 TB Videodaten und nicht weniger als 1,03 Millionen Abrufe des Livestreams.

Livestream auf mtvema.com

Facebook-Integration

Produktion der Backstage-Show

Digital Media Production Room

Schnittplätze

Regiepult

Erstmals zur diesjährigen IAA sendet Daimler täglich eine 3-stündige Livesendung zum mitmachen. User stellen Fragen, Mitarbeiter und Moderatoren vor Ort anworten direkt und zeigen dazu Details direkt am Fahrzeug. Streaming-Banner auf Welt Online und Autobild.de, die den Livestream ebenfalls zeigen, sorgen für die nötige Reichweite.

Das gesamte Projekt ist eine gelungene Zusammenarbeit von fischerAppelt (TV-Produktion), Scholz & Volkmer (Entwicklung Web-Applikation) und tv-on web/MES (Livestream).

Seit August überträgt MES für MTV Networks Germany die Livesendung “MTV Home” ins Netz.
MTV Home Fans aus der großen Facebook-Community können direkt an der Sendung teilnehmen und mit den Gastgebern Joko, Klaas und Palina chatten. Die Promotion-Features von Facebook (Event- und Fan-Pages, Engagement Ads) sorgen für Aufmerksamkeit bei der Zielgruppe. So macht Arbeit Spaß.

• MTV Home

• Im HUGO BOSS eMAG anschauen

Live-Demo:

Der Foliensatz kann mit der Maus gedraggt werden. Per Click kann an eine gewünschte Stelle gesprungen werden. Die Navigation per Mausrad und Pfeiltasten ist nach einem Click auf das Demofenster möglich – oder probieren Sie die Demo einfach im Vollbildmodus aus.

Technischer Hintergrund: Fotodaten werden aus einer XML-Datei ausgelesen; Thumbnails werden per Photoshop-Aktion vorgeneriert (im Download enthalten).
03/28/2008: Update auf Slideflow 1.1 – Der Bildzuschnitt und die Richtung des Farbverlaufs wurden korrigiert!

Slideflow 1.1 mit Gallerie-Demo herunterladen

Wir sind darauf gespannt, wo Slideflow zum Einsaz kommt – wenn Ihnen Slideflow gefallen hat, hinterlassen Sie uns einen Kommentar!

Credits:

• Basierend auf Code von Michael L Perry
• Photoshop-Aktionen ursprünglich von Marcus Strehlow
• Fotos von Nicholas_T
• Tigra Slider control
• Scriptaculous and Prototype

Slideflow in ihren Skripts einsetzen

Die Gallerie-Demo ist ein guter Startpunkt. In slideflow.js haben wir alle wichtigen Aspekte des Codes dokumentiert. Die wichtigsten Parameter, wie z.B. die Pfade zu den Bilddaten und das DOM-Objekt, unter dem Slideflow erstellt werden soll, werden bei Initialisierung übergeben. Das Steuerelement bietet auch Methoden, um die Anzeige zur Laufzeit zu verändern, sowie Callbacks, die es der Anwendung ermöglichen, auf Slideflow-Bewegungen und Clicks auf die Mittelfolie zu reagieren. Bitte beachten Sie, dass das Steuerelement spezifisches CSS benötigt (slideflow.css).

Anwendung der Photoshop-Aktionen

Die Bilder müssen durch Photoshop-Aktionen aufbereitet werden (ursprünglich von Marcus Strehlow), um die Miniaturbilder mit linker, rechter und zentrierter Ausrichtung zu erstellen. Diese Bilder müssen jeweils in separate Verzeichnisse gespeichert werden, die dem Steuerelement dann als pathLeft, pathRight und pathCenter übergeben werden.
We opted for Photoshop’s Save for Web feature instead of the regular JPEG export because it delivers far superior quality. Unfortunately, Save for Web doesn’t work well with batches and requires one to manually update the export directories for each of the three Slideflow actions. This can be done by performing the following steps:

1. Create a blank RGB document, or open any RGB image
2. Navigate to the action’s Export command, which is second to last and double-click it
3. The Save for Web dialog opens. Save the blank document in your target folder for the respective action (i.e. left for the left action etc.)
4. If you’re like Tim and like a clean system, you may delete the JPEG you just created

All actions assume 4 : 3 ratio. If pictures have a different ratio, you need to adjust it first, or the thumbnail images will have white edges.

Der Windows Media basierte Webcast ist dank des Anfang Oktober vorgestellten Browser-Plugins Microsoft Silverlight 1.0 nun unter Windows, Mac OS und Internet Explorer 5, 6 und 7, Firefox 1.5 und 2 sowie Safari darstellbar. Wir nennen es Webcast 2.0 :)

Update: Die Plattform wurde weiterentwickelt und unterstützt inzwischen auch Flash Video!

Screenshots:

Hauptansicht mit Slideflow

Hilfefunktion im Overlay-Fenster

Lightbox-Folienansicht

• http://www.mtvema.com (International)
• http://ema.mtv.de (Deutsch)