Tags:
view all tags
---+ ZIVflash %TOC% ---++ Videos im Flash-Format publizieren _Aufgrund der großen Nachfrage hat das ZIV nun eine Möglichkeit entwickelt, Videos im Flash-Format auf Webseiten 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 Streamingserver wurde nun ein zusätzlicher Server in Betrieb genommen. Dieser ermöglicht das Streaming von kleinen Videos im Flash-Format, das z.B. von Videoplattformen wie [[http://de.youtube.com][YouTube]] bekannt ist. Der große Vorteil für den Benutzer 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. Technisch realisiert wurde die Lösung mit dem Open Source Webserver _lighttpd_ (http://www.lighttpd.net) und dem darin enthaltenen Modul _mod_flv_streaming_. In Kombination mit dem _JW FLV Flash-Player_ (http://www.jeroenwijering.com/?item=JW_FLV_Player) ist somit echtes 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. Voraussetzung für das Streaming von Videos im ZIV ist, dass das Video im _Flash Video Format_ (FLV, Dateiendung .flv) vorliegt und mit den benötigten Metadaten versehen ist (siehe dazu z.B. http://de.wikipedia.org/wiki/Flash_Video). Grob gesprochen handelt es sich dabei um eine Datei mit MPEG4-Video und MP3-Audio Daten. Unter Windows lassen sich solche Dateien beispielsweise mit dem kostenlosen _Riva FLV Encoder_ (http://www.rivavx.com/index.php?encoder) erstellen. Sollen die Dateien unter Linux umgewandelt werden, ist dieses mittels _ffmpeg_ (http://ffmpeg.mplayerhq.hu) 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. Die Flash-Videos können auf jeder beliebigen Webseite eingebunden werden. Ein Beispiel, sowie eine Anleitung dazu finden Sie auf dem Flash-Server unter [[http://zivflash1.uni-muenster.de]]. Mit dem Content-Management-System Imperia geht das Einbinden ganz einfach über das Flex-Modul "Flash Video". Videos bis zu einer Dauer von 2 Minuten und einer Dateigröße unter 20MB können auch in der Imperia-Mediendatenbank hinterlegt werden, allerdings ist dann kein Streaming möglich. Für größere Videos bekommen Sie nach Rücksprache mit dem ZIV auf dem Flash-Server Speicherplatz, auf welchen Sie per Netzlaufwerk zugreifen können. Beachten Sie bitte: * Diese Möglichkeit zum Video-Streaming bietet keinen vollwertigen Ersatz zum Archivsystem _miami_, bei dem Metadaten (Autor, Titel, Beschreibung, etc.) zu einem Video miterfasst werden und so ein leichtes Auffinden ermöglicht wird. Bei Interesse wenden Sie sich an das ZIV, per Email: ziv@uni-muenster.de oder per Tel.: +49 251 83-31600. ---+++ Beispiel <div id="container_flv" 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_flv","490","300","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_flv"); </script> Dies ist der zugehörige HTML-Code: <textarea cols="120" rows="17"> <div id="container_flv" 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_flv","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_flv"); </script> </textarea> ---++ Anleitung zum Konvertieren von Videos ins FLV-Format 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 [[http://ffmpeg.mplayerhq.hu/ffmpeg-doc.html][FFmpeg Handbuch]] beschrieben. Die aktuelle FFmpeg-Programmdatei für Windows kann [[http://ffmpeg.arrozcru.org/][hier]] heruntergeladen werden. <pre> $ 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% </pre> ---+++ 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) <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> Dies ist der zugehörige HTML-Code: <textarea cols="120" rows="10"> <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> </textarea> ---+++ Beispiel (mit Playlist) <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> Dies ist der zugehörige HTML-Code: <textarea cols="120" rows="12"> <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> </textarea>
Edit
|
Attach
|
Watch
|
P
rint version
|
H
istory
:
r24
|
r15
<
r14
<
r13
<
r12
|
B
acklinks
|
V
iew topic
|
Raw edit
|
More topic actions...
Topic revision: r13 - 2009-05-11
-
ThorstenKuefer
Home
Site map
Anleitungen web
Exchange web
Main web
TWiki web
Anleitungen Web
Create New Topic
Index
Search
Changes
Notifications
RSS Feed
Statistics
Preferences
View
Raw View
Print version
Find backlinks
History
More topic actions
Edit
Raw edit
Attach file or image
Edit topic preference settings
Set new parent
More topic actions
Account
Log In
Български
Cesky
Dansk
Deutsch
English
Español
Suomi
_Français_
Italiano
日本語
한글
Nederlands
Polski
Português
Русский
Svenska
Українська
简体中文
簡體中文
Edit
Attach
Copyright © 2008-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding ZIVwiki?
Send feedback
Datenschutzerklärung
Impressum