Tags:
tag this topic
create new tag
view all tags
---+ ZIVflash - Videos im Flash-Format publizieren %TOC% _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 [[http://de.wikipedia.org/wiki/Flash_Video][Flash-Format]] (FLV), das z.B. von Videoplattformen wie [[http://www.youtube.com/user/wwumuenster][YouTube]] bekannt ist, oder im [[http://de.wikipedia.org/wiki/MP4][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 [[http://www.uni-muenster.de/imperia/md/content/ziv/service/web_und_e_mail/wcms/imperiahandbuchwwu.pdf][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 [[http://www.adobe.com/support/documentation/de/flashplayer/releasenotes.html][Flash Player v7.0]] auch von einem normalen [[http://de.wikipedia.org/wiki/Webserver][Webserver]] geladen werden, so dass kein teurer [[http://de.wikipedia.org/wiki/Real_Time_Messaging_Protocol][RTMP]]-[[http://de.wikipedia.org/wiki/Streaming_Server][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 [[http://www.uni-muenster.de/ZIV/Technik/WWW/][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 [[http://developer.longtailvideo.com/trac/wiki/FlashFormats#HTTPStreaming][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 <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/player-v4.3.swf","container_flv1","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_flv1"); </script> Dies ist der zugehörige HTML-Code: <textarea cols="120" rows="17"> <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> </textarea> ---+++ Beispiel (mit anderem Skin) <div id="container_flv2" 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("https://www.uni-muenster.de/ZIV.Film/exec/player-v4.3.swf","container_flv2","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","https://www.uni-muenster.de/ZIV.Film/Beispiele/elephantsdream-480-h264-st-aac.flv"); s1.addVariable("image","https://www.uni-muenster.de/ZIV.Film/Beispiele/ed_header_480.jpg"); s1.addVariable("skin","https://www.uni-muenster.de/ZIV.Film/skins/bluemetal.swf"); s1.addVariable("link","http://www.elephantsdream.org/"); s1.addVariable("streamer","lighttpd"); s1.write("container_flv2"); </script> Diese Zeile wurde zu obigen Code hinzugefügt: <textarea cols="120" rows="3"> s1.addVariable("skin","http://www.uni-muenster.de/ZIV.Film/skins/bluemetal.swf"); </textarea> ---++ 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. %RED%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.%ENDCOLOR% Tipps: * Informationen für die Erstellung von Web-Videos liefert dieser [[http://www.longtailvideo.com/support/tutorials/Web-Video-Compression][Artikel von Longtail]]. * [[http://h264.code-shop.com/trac/wiki/Encoding][How to encode video in H264 format]] * Informationen über das Video- und Audio-Format einer bereits vorliegenden Datei liefert das frei erhältliche Programm [[http://mediainfo.sourceforge.net/de][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 [[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>
E
dit
|
A
ttach
|
Watch
|
P
rint version
|
H
istory
: r24
<
r23
<
r22
<
r21
<
r20
|
B
acklinks
|
V
iew topic
|
Ra
w
edit
|
M
ore topic actions
Topic revision: r24 - 2010-04-26
-
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
Українська
简体中文
簡體中文
E
dit
A
ttach
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