Popcorn.js: Webinhalte mit HTML5-Videos synchronisieren

Popcorn.js ist eine neue JavaScript-Bibliothek von Mozilla. Sie dient dazu, Videos mit HTML5 abzuspielen und parallel dazu zeitlich synchrone Webinhalte einzublenden.

Popcorn.js is an HTML5 media framework written in JavaScript for filmmakers, web developers, and anyone who wants to create time-based interactive media on the web.

HTML5-Videos mit Webinhalten synchronisieren

Neben dem reinen Abspielen von Videos mit HTML5 bietet Popcorn.js eine sehr einfache Lösung, mit wenigen Zeilen Code das Video mit andere Webinhalten zu synchronisieren. Anwendungfälle könnten sein z.B. sein:

• Einblenden von Untertiteln
• Passende Produkteinblendungen oder weiterführende Links, die im Video besprochen werden
• Alles, was im normalen Fernsehen an Text direkt ins Video gerändert wird (z.B. Bauchbinden)
• Folien zu einem aufgezeichneten Vortrag

Split Attention Effekt

Wichtig ist hierbei konzeptionell zu berücksichtigen, dass der Nutzer sich bei der parallelen Darstellung von Video und weiteren Inhalten nicht gleichzeitig auf alles konzentrieren kann. Im Bereich E-Learning spricht man hier vom Split Attention Effekt (siehe auch S. 107, Plag/Riempp, 2007). Insofern macht es meist nur bedingt Sinn, bereits vorhandene Videos mit irgendwelchen Zusatzinhalten noch mehr zu überfrachten. Schnelle Schnitte, häufiges Wechseln der Zusatzinhalte überfordern und verwirren den Nutzer dann zumeist, so dass letztendlich nichts hängen bleibt oder er entscheidende Informationen verpasst.

Plant man jedoch die gleichzeitige Darstellung von vorne herein, so kann man die Videos so drehen und schneiden, dass gezielt die Aufmerksamkeit zwischen Video und Zusatzinhalten hin- und her verlagert werden kann und der Nutzer nicht überfordert wird.

Aus diesem Grund finde ich die Beispiel auf der Popcorn-Seite fast alle nicht besonders gut, da sie das eigentlich Potenzial dieses Thema verfehlen. Bitte besser machen ;-)

Popcorn-Plugins

Es gibt eine größere Anzahl an offiziellen Plugins, die Standardfunktionalitäten bieten oder den Zugriff auf gängige Webseiten erleichtern. Dazu gehören:

• Player für YouTube, Vimeo und Soundcloud
• Google Maps und Openmap (Anzeige von Orten)
• Lowerthird (Bauchbinden)
• Timeline (eine scrollende Liste)
• Image (Bilder)
• Facebook, Twitter, etc.

Hier noch ein kurzes Beispiel, das zeigt, wie einfach ein Untertitel erstellt werden kann.

[js]
document.addEventListener(‚DOMContentLoaded‘, function () {

var p = Popcorn(‚#video‘)
.subtitle({
start: 1, // seconds
end: 5, // seconds
text: ‚Dies ist ein Untertitel von Sekunde 1 bis 5.‘
} )
.play();
}, false);
[/js]

In Flash gibt es hierfür übrigens einen ähnlichen Mechanismus, die sogenannten Cue-Points.

Popcorn-Maker

Der Popcorn-Maker ist eine Web-Anwendung, die auf Popcorn.js aufsetzt und über eine Zeitleisten-basierte Oberfläche die Eingabe der synchronen Inhalte ermöglicht. Zur Verknüpfung stehen alle Medieninhalte wie Untertitel, Bilder, Twitter, etc., die auch als Plugin verfügbar sind.

Link: popcornjs.org
Link: mozillapopcorn.org/