1
00:00:01,000 --> 00:00:11,900
Hallo - In diesen Video moechte ich das Plugin wordriver vom HTML5 Media Javascript Framework popcorn.js vorstellen

2
00:00:12,000 --> 00:00:16,900
Dieses Plugin wordriver bewirkt, dass es einen Wortfluss gibt

3
00:00:17,000 --> 00:00:20,900
wie das aussieht zeige ich hier in diesem Beispiel

4
00:00:21,000 --> 00:00:22,900
ich habe eine HTML-Seite vorbereitet

5
00:00:23,000 --> 00:00:28,900
mit einem Video-Tag mit der id video und mit dem Video o.ogv

6
00:00:29,000 --> 00:00:37,900
und es gibt einen div-Container mit der id text, in der Breite von 980px und der Hoehe 400px

7
00:00:38,000 --> 00:00:46,900
in Zeile 2 wird das popcorn-Framework eingebunden sodass alle Funktionen nun zur Verfuegung stehen

8
00:00:47,000 --> 00:00:52,900
in Zeile 4 wird sichergestellt dass die HTML-Seite vollstaendig geladen wurde

9
00:00:53,000 --> 00:01:01,900
und in Zeile 6 wird eine neue popcorn-Instanz erstellt, bezueglich der Video-Tag id video

10
00:01:02,000 --> 00:01:09,900
in Zeile 8 und in Zeile 14 kommt dann das Plugin wordriver zum Einsatz

11
00:01:10,000 --> 00:01:22,900
das bedeutet von Sekunde 0 bis Sekunde 3 wird der Text hello world im div-Container mit der id text rot angezeigt

12
00:01:23,000 --> 00:01:36,900
und von Sekunde 3 bis Sekunde 6 wird der Text popcorn.js im div-Container mit der id text blau angezeigt

13
00:01:37,000 --> 00:01:41,900
in Zeile 22 wird dann das Video automatisch gestartet

14
00:01:42,000 --> 00:01:46,900
und in Zeile 23 wird die Lautstaerke auf 0 gesetzt

15
00:01:47,000 --> 00:01:54,900
OK - Speichern und die Seite oeffnen bzw. neu laden

16
00:01:55,000 --> 00:02:01,900
und so sieht das Ganze dann aus

17
00:02:02,000 --> 00:02:07,900
ebenso kann man statt Text auch HTML-Elemente verwenden

18
00:02:08,000 --> 00:02:30,900
so z.B. kann man ein Bild einbinden mit dem Tag img

19
00:02:31,000 --> 00:02:40,900
Speichern und die Seite neu laden und jetzt wird das Bild angezeigt

20
00:02:44,000 --> 00:02:46,900
Tschau und viel Glueck

21
00:02:47,000 --> 00:02:47,001
Dieses Dokument steht unter der Lizenz http://creativecommons.org/licenses/by/3.0/