1) Zuerst einmal lädt man das Video auf seinen Webspace.

2) Dann geht man auf subtitle-horse.org

3) gibt dort die URL des Videos an und klickt auf “submit”.

Jetzt kommt folgender Bildschirm:

4) Nun gibt man alle Untertitel an.

Dabei gibt es ein kleines Problem. Man kann das Video in subitle-horse.org nicht zwei oder mehrmals abspielen. Ich habe es mit allen Browsern versucht, aber es ist mir mit keinem gelungen.

UPDATE: Man muss ein richtig konfiguriertes .flv nehmen.

Nun ja, ich habe erst mal allen Text reingeschrieben und die Feinabstimmung später gemacht.

5) Alles exportieren.

Es wird in zahlreiche Formate konvertiert, darunter auch XML-Dateien im Timed Text Format. Dieses wird auch von der FLV Playback Komponente in Flash CS3 verwendet. Also genau das, was wir brauchen.

Man wählt also Titles -> Export -> TimedText jw MEDIA PLAYER 3.x, kopiert den XML-Quelltext aus dem Formular und speichert ihn als XML-Datei im Texteditor ab.

Also beispielsweise als orangen.xml.

Damit ist die Arbeit auf subtitle-horse.org beendet. In der Dokumentation findet man noch mehr Informationen.

Kennt jemand noch ein anderes Tool zum Erstellen der Untertitelanzeigen?

6) Doch zurück zum JW-Player. Dort muss der Text noch eingebunden werden.

Das geht im Setup Wizard. Dort gibt man im “Playback behavior” unter “captions” die XML-Datei an:

Am Ende steht die Variable captions mit der jeweiligen XML-Datei im Code.

etweder so:

so.addVariable('captions','orangen.xml');

oder so:

flashvars="height=250&width=400&file=/upload/player.flv&captions=orangen.xml

7) Nach dem Einbinden des Videos in die Seite zeigt ein Textsymbol dass es Untertitel gibt. Diese kann man aus- und einschalten.

Weiß jemand, ob es die Möglichkeit gibt, die Anzeige der Untertitel im Voraus auszuschalten? So, dass sie jemand der sie braucht, nur einschalten kann?

UPDATE: Um die Untertitel ausgeschaltet zu haben, aber noch die Möglichkeit, sie einzuschalten, benutzt man

usecaptions=false

und für die Audiodescription

useaudio=false

Danke an Sylvia Egger für den Tip!

8) Nun kann man, wenn man will, noch die Zeitabläufe korrigieren, indem man in der XML-Datei an der Stelle, wo die Anfangs- und Endzeit stehen, noch einbisschen vor- oder zurück formatiert.

9) Hier gibts von Jeroen Wijring noch einige Informationen zu barrierefreien Videos und wie man sie umsetzt.

Tobias Hauser, Nils Poker, Gerrit van Aaken, Stefan Nietzsche, Jens Grochtdreis, Dirk Jesse und Vitaly Friedmann berichteten über das Web 2008, Webkonzeption und Kundenkommunikation, Design & Typografie, Usability 2.0, CSS & YAML und Web 2.0-Tools.

Die Videos gibt es bei Galileo zum anschauen.

Folien und die Zusammenfassungen finden sich auf der Homepage des Multimedia-Treffs.

Dort werden Videos von Nutzern für Nutzer angeboten.

Die Themen umfassen alles, was der PC hergibt:

Internet, Office, Sicherheit, Windows, Grafik, Linux, Multimedia, Mac, Tools und Programmierung sind nur die Oberbegriffe unter denen jeweils noch diverse andere Themen gefasst sind.

Manche Screencasts kann man so anschauen, für andere muss man sich registrieren. Da das kostenlos ist, ist es schnell gemacht.

Man kann auch Screencasts online stellen – vielleicht auch für den einen oder anderen interessant.

Eine interessante Alternative zu meinen Beiträgen Studieren von zu Hause aus und Video-Trainings bei Galileo .

Sucht man eine Lösung nur für Wordpress, so gibt es nun ein Plugin, das das Hochladen, Verwalten, Einbinden und Präsentieren von Videos und MP3s in Wordpress NOCH einfacher macht, und zwar wordTube von Alex Rabe.

Die Einbindung der Medien funktioniert mit WordTube auch im WYSIWYG-Editor.
Zudem können nicht nur Videos und MP3s, sondern auch Bilder eingebunden und alle Medien in einer Playliste angezeigt werden.

wordTube arbeitet, genau wie das von mir beschriebene WP-FLV-Plugin, auch mit Jeroen Wijerings Flash-Video-Player.

Die benötigten FLV-Video-Dateien werden am einfachsten mit dem kostenlosen Riva-FLV-Encoder erstellt, wie hier beschrieben.

Zur Anwendung des wordTube-Plugins:

1. Installation

1. das WordTube-Plugin bei Alex Rabe downloaden, entpacken und das Verzeichnis /wordtube/ komplett in den WP-Plugin-Ordner legen
2. den Flash Media Player von Jeroen Wijering downloaden, entpacken und die Datei mediaplayer.swf aus dem Ordner /flash_media_player/ in den /wordtube/-Ordner im WP-Plugin-Verzeichnis kopieren.
3. Wer MP3-Dateien einbinden möchte, holt sich auch den Flash MP3 Player von Jeroen, entpackt wieder das .zip-File und kopiert die Datei mp3player.swf aus dem /flash_mp3_player/-Ordner ebenfalls in das /wordtube/-Verzeichnis.
4. Nun den gesamten /wordtube/-Ordner auf den Server laden.
5. Das Plugin im WP-Admin-Bereich aktivieren.

2. Anwendung

2.1. Konfiguration

2.3. Medien in Posts einbinden

Die Anzeige der Medien innerhalb eines Beitrags oder einer statischen Seite ist von nun an ein Kinderspiel.

Man merke sich die ID des gewünschten Mediums aus dem MediaCenter und platziere dann in seinem Post lediglich den Tag

[MEDIA=ID]

und füge die gemerkte ID ein, also bspw. [MEDIA=1].

Alternativ können über den Tag

[MYPLAYLIST]

alle verfügbaren Videodateien auf einmal als Playliste angezeigt werden.

Die Eingabe der Tags funktioniert im WYSIWYG-Editor genauso wie im Text-Editor von Wordpress.

2.4. Live

…in Aktion kann das Plugin auf der Webseite von Alex Rabe, dem Autor des Plugins, betrachtet werden »

Danke :)
Echt ein prima Plugin!

YouTube & co. machen es vor und konvertieren Videos in das Flash-Video-Format FVL um diese dann so zu veröffentlichen.

Wie bekomme ich aber ein eigenes Video in meine Website oder mein Wordpress-Blog?

1. Videos in das FLV-Format konvertieren

Zum Konvertieren von AVI, MPEG, Quicktime und WMV-Dateien in das FLV-Format eignet sich vorzüglich der Riva FLV-Encoder (Freeware).

Die Bedienung ist kinderleicht

• Erst das Quellvideo aussuchen,
• ein Zielverzeichnis und -name angegeben,
• und Einstellungen, wie Filmgröße oder Bildfrequenz einstellen,
• auswählen, ob die Audio-Spur eingebunden werden soll
• eventuell dem Video ein Padding hinzufügen oder es beschneiden
• und dann auf Knopfdruck (Encodieren) den Film in das FLV-Format umwandeln.

Über den Vorschau-Button kann das Ergebnis gleich betrachtet und dann eventuell noch korrigiert werden.

Die so erhaltene FLV-Datei lässt sich nun aber leider nicht einfach in den Quelltext einer Webseite einbinden.

Sie muss dazu entweder über Flash in eine .swf-Datei eingebunden werden. Oder aber man bedient sich eines FLV-Players für Webseiten.

2. Der Flash-Video-Player

Jeroen Wijerings Flash Video Player 2.4 ist für diesen Zweck wie geschaffen und äußerst komfortabel. Der FLV-Datei werden automatisch Abspiel- und Lautstärkeregler hinzugefügt.

Installation und Anwendung:
Der Flash-Video-Player mediaplayer.swf wird einfach auf dem Webserver abgelegt und dann inclusive abzuspielender Videodatei mit Hilfe eines object-Tags der folgenden Form in die Webseite eingebunden:

<object type="application/x-shockwave-flash" width="400" height="220" wmode="transparent" data="mediaplayer.swf?file=movies/holiday.flv">  <param name="movie" value="mediaplayer.swf?file=movies/holiday.flv" />  <param name="wmode" value="transparent" /> </object>

Und schon wird das Video auf der Internetseite angezeigt!

Der Flash Video Player wurde unter Creative Commons License veröffentlicht, was bedeutet, dass er für nicht-kommerzielle Zwecke kostenfrei eingesetzt werden darf.
Eine Lizenz ist aber mit 20 Euro auch durchaus erschwinglich.

Übrigens nutzt auch YouTube Jeroen Wijerings Flash Video Player.

3. WP-FLV – Das Flash Video Player – Plugin für Wordpress

Für Wordpress gibt es – wie so oft – praktischerweise ein Plugin zum Integrieren des Flash Video Players mit dem einfachen Namen WP-FLV.

Installation

• Jeroen Wijerings Flash Video Player downloaden
• ZIP-Paket entzippen und die Datei flvplayer.swf in einem Ordner auf dem Webserver ablegen
• dann den Quellcode des WP-FLV-Plugins downloaden
• die Datei von wp-flv.php.txt in wp-flv.php umbenennen
• und in den Wordpress-Plugin-Ordner auf den Webserver laden
• in den Wordpress-Admin-Bereich einloggen
• das Plugin WP-FLV im Plugin-Menu aktivieren

Unter Einstellungen > WP-FLV können nun im Administrationsbereich noch einige Einstellungen vorgenommen werden.

Vor allem muss hier, damit das Plugin funktioniert, die absolute URL zum Flash Video Player, also der Datei flvplayer.swf, angegeben werden!
Alle weiteren Einstellungen sind selbsterklärend und optional.

Damit ist das Plugin fertig installiert!

Benutzung des Plugins

Das Plugin ersetzt ein spezielles <flv>-tag mit dem benötigten (validen!) XHTML-Flash-Code.

Das <flv>-tag hat vier Attribute.

href
Das ist das einzige Pflicht-Attribut. Es beinhaltet die URL zur Flash-Video-Datei (die natürlich vorher auf den Webserver geladen werden muss).
width
Optionales Attribut mit dem die Breite des Films angegeben werden kann.
Wenn der Wert nicht gesetzt ist, wird die in den Wordpress-Einstellungen angegebene Standard-Breite verwendet.
height
Legt die Höhe des Films fest (funktioniert wie width).
autostart
Werte: false oder true
Mit diesem Attribut kann festgelegt werden, ob der Film automatisch starten soll oder nicht.

Drei Beispiel-Codes:

<flv href="http://www.yourdomain.com/movie.flv" autostart="true" /> <flv href="/movie.flv" autostart="false" width="540" height="10" /> <flv href="/movie.flv" />

Außerdem hilft ein FLV-Quicktag beim Einfügen des Films in den Wordpress-Text.

Mehr ist dann nicht mehr zu tun, um ein Video in Wordpress einzubinden :)

Update: Legt man in den Video-Ordner noch ein JPG mit dem gleichen Namen und gleicher Größe wie das FLV-File, so wird dieses Bild als Standbild vor dem Starten des Films angezeigt.
(Hinweis von Mario, auf dessen Seite man das Plugin prima in Aktion sehen kann!)

Nur für Wordpress: Jetzt NOCH einfacher!

Update: 11.01.2007:

Wer eine optimale Lösung NUR für Wordpress sucht, der sollte sich unbedingt mal das wordTube-Plugin von Alex Rabe anschau´n. Hier beschreibe ich, wie es funktioniert »
Ist wesentlich einfacher zu bedienen und das Problem mit den Vorschaubildern ist auch behoben.

Danke Jochem für den Hinweis!