ZIVflash - Videos im Flash-Format publizieren

Aufgrund der großen Nachfrage stellt das ZIV eine Möglichkeit bereit, Videos im Flash-Format auf den Webseiten der WWU zu publizieren.

Neben dem bisher angebotenen System zum Publizieren von Videos über das Archivsystem miami (http://miami.uni-muenster.de) in Verbindung mit einem Real Streaming-Server ist es auch möglich Videos im Flash-Format (FLV), das z.B. von Videoplattformen wie YouTube bekannt ist, oder im MPEG4-Format (MP4) auf den Seiten der WWU zu verwenden. Der große Vorteil für den Betrachter ist, dass das kostenlose Adobe-Flash-Plugin, welches zum Anschauen der Videos benötigt wird, eine sehr große Verbreitung hat und bei vielen Browsern bereits installiert ist. Hinzu kommt, dass zum Übertragen der Videos eine relativ geringe Bandbreite ausreicht.

Einbinden unter Imperia

Wenn Ihnen schon ein fertiges MPEG4- oder Flash-Video zur Verfügung steht und Sie mit dem Content-Management-System Imperia arbeiten, können Sie dieses Video recht einfach auf Ihrer Webseite einbinden. Eine Anleitung hierzu finden Sie in unserem Imperia-Handbuch unter dem Stichwort "Flash-Video".

Einbinden ohne Imperia

Die Flash-Videos können auch auf jeder beliebigen Webseite, ide nicht mit Imperia verwaltet wird, eingebunden werden. Ein Beispiel, sowie eine Anleitung dazu finden Sie im weiteren Text. Die Videos können dabei in der Imperia-Mediendatenbank (MDB) oder auf einem beliebigen Webserver hinterlegt werden, allerdings findet das oben beschriebene Streaming über HTTP nur bei der Imperia MDB (durch den Webserverpark) statt.

Technische Hintergründe

Technisch können Flash-Videos seit dem Flash Player v7.0 auch von einem normalen Webserver geladen werden, so dass kein teurer RTMP-Streaming-Server benötigt wird. Allerdings muss dann das zu schauende Flash-Video immer erst heruntergeladen werden, bevor der Betrachter an eine bestimmte Stelle springen kann. Besonders für lange Videos ist dies sehr unkomfortabel. Es gibt jedoch die Möglichkeit einen Webserver bzgl. Flash-Videos zu optimieren, so dass dieser Mangel behoben wird. So erhält man einen Webserver mit Pseudo-Streaming über HTTP. Diese Möglichkeit kann z.B. mit dem Open Source Webserver lighttpd (http://www.lighttpd.net) und dem darin enthaltenen Modul mod_flv_streaming realisiert werden. Für den umfangreicheren Apache Webserver (http://httpd.apache.org/) exisitert auch ein entsprechendes Modul (http://people.apache.org/~pquerna/modules/mod_flvx.c), welches im Webserverpark des ZIV integriert wurde. In Kombination mit dem Open Source JW FLV-Player (http://www.longtailvideo.com/players/jw-flv-player/) ist somit einfaches und günstiges Streaming von Flash-Videos möglich. Das bedeutet, dass im Gegensatz zum sogenannten progressive Download, bei dem die komplette Videodatei nach und nach heruntergeladen wird, ein Navigieren innerhalb des Videos schon von Anfang an möglich ist. Dieses bietet natürlich gerade bei längeren Videos enorme Vorteile.

Beispiel

Dies ist der zugehörige HTML-Code:

<div id="container_flv1" align="center"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this video.</div> <script type="text/javascript" src="http://www.uni-muenster.de/exec/swfobject.js"></script> <script type="text/javascript"> var s1 = new SWFObject("http://www.uni-muenster.de/exec/mediaplayer.swf","container_flv1","480","290","8"); s1.addParam("allowfullscreen","true"); s1.addVariable("screencolor","#B8B8B8"); s1.addVariable("width","480"); s1.addVariable("height","290"); s1.addVariable("resizing","true"); s1.addVariable("stretching","none"); s1.addVariable("file","http://www.uni-muenster.de/ZIV.Film/Beispiele/elephantsdream-480-h264-st-aac.flv"); s1.addVariable("image","http://www.uni-muenster.de/ZIV.Film/Beispiele/ed_header_480.jpg"); s1.addVariable("link","http://www.elephantsdream.org/"); s1.addVariable("streamer","lighttpd"); s1.write("container_flv1"); </script>

Beispiel (mit anderem Skin)

Diese Zeile wurde zu obigen Code hinzugefügt:

s1.addVariable("skin","http://www.uni-muenster.de/ZIV.Film/skins/bluemetal.swf");

Anleitung zum Konvertieren von Videos ins MP4- oder FLV-Format

Voraussetzung für das Streaming ist, dass das Video im Flash Video Format (FLV, Dateiendung .FLV) oder MPEG4-Format (Dateiendung .MP4) vorliegt und mit den benötigten Metadaten versehen ist. Grob gesprochen handelt es sich dabei um eine Datei mit MPEG4-Video und AAC-Audio Daten. Unter Windows lassen sich solche Dateien beispielsweise mit dem kostenlosen Riva FLV Encoder (http://www.rivavx.com/index.php?encoder) erstellen (leider etwas instabil, benötigt Flash!) oder mit dem kostenlosen Handbrake (http://www.handbrake.fr). Sollen die Dateien unter Linux umgewandelt werden, ist dies z.B. mittels ffmpeg (http://ffmpeg.mplayerhq.hu) oder ebenfalls mit dem kostenlosen Handbrake möglich. Die benötigten Metadaten lassen sich mit flvtool2 (http://www.inlet-media.de/flvtool2) oder FLVMDI (http://www.buraks.com/flvmdi/) hinzufügen.

Wir empfehlen, Flash-Videos als .MOV oder .MP4 zu erzeugen mit dem Video Codec H.264/MPEG-4 AVC und Audio-Codec HE-AAC. Falls in der Software vorhanden, sollte eine Web- oder Streaming-Optimierung aktiviert werden.

Tipps:

• Informationen für die Erstellung von Web-Videos liefert dieser Artikel von Longtail.
• How to encode video in H264 format
• Informationen über das Video- und Audio-Format einer bereits vorliegenden Datei liefert das frei erhältliche Programm MediaInfo.

Das hier verwendete Video ist frei erhältlich und kann von http://www.elephantsdream.org/ heruntergeladen werden.

FFmpeg

Der folgende Befehl wandelt ein Video ins FLV-Format um. Anhand der Dateiendung versucht ffmpeg den jeweils richtigen Codec für die De- und Enkodierung zu wählen. Zusätzlich wird hier eine Video-Bitrate von 1000kbit/s und eine Audio-Samplingrate von 44.1kHz angegeben. Alle Parameter sind im FFmpeg Handbuch beschrieben. Die aktuelle FFmpeg-Programmdatei für Windows kann hier heruntergeladen werden.

$ ffmpeg -i elephantsdream-480-h264-st-aac.mov -b 1000k -ar 44100 elephantsdream-480-h264-st-aac.flv
FFmpeg version SVN-rUNKNOWN, Copyright (c) 2000-2007 Fabrice Bellard, et al.
  configuration: --enable-gpl --enable-pp --enable-swscaler --enable-pthreads --enable-libvorbis --enable-libtheora --enable-libogg --enable-libgsm --enable-dc1394 --disable-debug --enable-libmp3lame --enable-libfaadbin --enable-libfaad --enable-libfaac --enable-xvid --enable-x264 --enable-liba52 --enable-amr_nb --enable-amr_wb --enable-shared --prefix=/usr
  libavutil version: 1d.49.3.0
  libavcodec version: 1d.51.38.0
  libavformat version: 1d.51.10.0
  built on Dec 20 2007 21:25:50, gcc: 4.1.3 20070929 (prerelease) (Ubuntu 4.1.2-16ubuntu2)
[mov,mp4,m4a,3gp,3g2,mj2 @ 0xb7f86610]negative ctts, ignoring
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'elephantsdream-480-h264-st-aac.mov':
  Duration: 00:10:58.3, start: 0.000000, bitrate: 1259 kb/s
  Stream #0.0(eng): Video: h264, yuv420p, 480x270, 24.00 fps(r)
  Stream #0.1(eng): Audio: aac, 48000 Hz, stereo
File 'elephantsdream-480-h264-st-aac.flv' already exists. Overwrite ? [y/N] y
Output #0, flv, to 'elephantsdream-480-h264-st-aac.flv':
  Stream #0.0: Video: flv, yuv420p, 480x270, q=2-31, 1000 kb/s, 24.00 fps(c)
  Stream #0.1: Audio: mp3, 44100 Hz, stereo, 64 kb/s
Stream mapping:
  Stream #0.0 -> #0.0
  Stream #0.1 -> #0.1
[flv @ 0xb7e93a68]removing common factors from framerate
Press [q] to stop encoding
frame=15691 q=1.6 Lsize=   84948kB time=653.8 bitrate=1064.4kbits/s
video:78552kB audio:5143kB global headers:0kB muxing overhead 1.496275%

FLVtool2

Der folgende Befehl fügt die Metadaten, die für das Streaming benötigt werden, in die FLV-Datei ein:

$ flvtool2 -U elephantsdream-480-h264-st-aac.flv

Extrahieren eines Vorschaubildes

Der folgende Befehl extrahiert die Frames der ersten 5 Sekunden des Videos. Je nach Framerate des Videos können das ziemlich viele sein (bei 25 FPS: 125 Frames). Davon kann dann ein Frame als Vorschaubild verwendet werden. Optional kann mit dem Parameter -ss eine andere Startposition angegeben werden.

$ ffmpeg -i elephantsdream-480-h264-st-aac.flv -f image2 -t 5 ed-preview-%02d.jpg

MP3-Dateien mit dem Flashplayer abspielen

Der JW FLV-Player ist auch in der Lage MP3-Dateien abzuspielen. Dazu gibt man entweder eine einzelne MP3-Datei oder eine Playliste beim file-Parameter an. Der hier verwendete Soundtrack ist frei erhältlich und kann von http://orange.blender.org/blog/complete-score-available-for-download/ heruntergeladen werden.

Beispiel (mit Hintergrundbild)

Dies ist der zugehörige HTML-Code:

<div id="container_mp3_1" align="center"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this video.</div> <script type="text/javascript" src="http://www.uni-muenster.de/exec/swfobject.js"></script> <script type="text/javascript"> var s1 = new SWFObject("http://www.uni-muenster.de/exec/mediaplayer.swf","container_mp3","480","260","9.0.0"); s1.addVariable("resizing","true"); s1.addVariable("stretching","none"); s1.addVariable("file","http://www.uni-muenster.de/ZIV.Film/Beispiele/JanMorgenstern-ElephantsDream/playlist.php"); s1.write("container_mp3_1"); </script>

Beispiel (mit Playlist)

Dies ist der zugehörige HTML-Code:

<div id="container_mp3_2" align="center"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this video.</div> <script type="text/javascript" src="http://www.uni-muenster.de/exec/swfobject.js"></script> <script type="text/javascript"> var s1 = new SWFObject("http://www.uni-muenster.de/exec/mediaplayer.swf","container_mp3","480","260","9.0.0"); s1.addVariable("resizing","true"); s1.addVariable("stretching","none"); s1.addVariable("file","http://www.uni-muenster.de/ZIV.Film/Beispiele/JanMorgenstern-ElephantsDream/playlist.php"); s1.addVariable("playlist","bottom"); s1.addVariable("playlistsize","240"); s1.write("container_mp3_2"); </script>