Video-JS Javascript-Bibliothek

Video- und Audioplayer


Download: video-js.zip

Website: http://www.videojs.com/


Beispiel zum abspielen einer:


Anleitung zur Installation: setup.html


Beschreibung der Dateien:


Tracks: Bob Marley - Redemption Song

Tracks: Ocean Video

Bezeichnet die Untertitelung mit einer Textdatei. Dabei wird das abspielen der Audio- oder Videodatei überwacht. HTML5 kennt zwei Methoden die hierzu benutzt werden: duration() zeigt die Länge der Datei an, position() zeigt die momentane Abspielposition der Datei an. Durch Angabe der gewünschten Position wird ein Textstring an den Player übergeben und angezeigt.

Beispiel-Code der Textdatei: subtitles.vtt

00:13.500 --> 00:14.984
Delfin: iiiEEEEEeeee!
00:14.984 --> 00:16.984
Delphin: Quiiieck! iiiEEE?
00:25.000 --> 00:28.284
[ Es spritzt und platscht! ]

Track-Attrubut im video-Element auf Smartphones

Grundsätzlich gillt: Alle Apps auf Smartphones (I-Phone und Android) zeigen ein eigenes, natives 'Controll'. Das lässt sich nicht überschreiben mit Javascript und CSS. Wird ein Untertitel aber beim Start eingblendet, wird er meist auch angezeigt. das Menu zur Wahl entfällt zwar, aber der 'Default' eingestellte Untertitel wird angezeigt.


Untertitel beim Start einblenden

Die Bibliothek Video-JS selbst hat keine Option oder Abfrage dafür. Es ist mir mit jQuery ein 'Hack' gelungen der die Untertitel beim Start einblendet. Mit jQuery können Events erzeugt / erzwungen werden (das wird meist für das Debugging benutzt).

$('mein-Untertitel-Element').trigger('click');

gauckelt dem Browser vor, ein Klick hätte stattgefunden.


Microsoft-Tool zum editieren der Untertitel

Untertitel und Beschreibungen können mit einem von Mocrosoft bereitgestellten Editor erstellt werden. Dazu kann eine Videodatei hochgeladen, abgespielt und beim jeweiligen Stopp, der Text eingetragen werden. Die Vorlage für die zu verlinkende *.vtt-Datei kann vom Server kopiert werden.

http://ie.microsoft.com/testdrive/Graphics/CaptionMaker/


Audio Support tester: http://www.jplayer.org/HTML5.Audio.Support/


Video_JS in Wordpress

Reichhaltige Anleitung zum Gebrauch von Video-JS in Wordpress (engl.)

http://wordpress.org/plugins/videojs-html5-video-player-for-wordpress/installation/


Responsive Design

Das Video mit CSS skalierbar gestalten: Responsive_video