Medien
Das Pixelbild war lange das einzigen Medium welches nebst Text im www zu sehen war. Vectorgrafiken, Töne, Musik, dann Videos und bald interaktive 3D Räume in Webseiten zu integrieren war in HTML 4 nicht vorgesehen. Nach und nach fanden unterschiedliche Lösungen ihre Anwendungen.
Der Code auf dieser Seite produziert über 50 Errors in XHTML (das embed-Tag ist nicht erlaubt und damit alle Attributte darin auch nicht).Diese Seite wollte ich noch ergänzen mit Beispielen zum Einbinden von WebCam, Telefonie, Activ-X, Java-Applets, SVG-Grafik, WebGL, etc.
In HTML 5 (so um 2014 herum vielleicht) soll das alles besser werden.
Plug-in
Sounds und Videos benötigen zu deren Darbietung spezielle Browsererweiterungen, sogenannte Plugins*, die zuerst installiert werden müssen.
Das schränkt die Darbietung der möglichen Formate auf die gebräuchlichsten ein.
Statt vieler Plugins zu installieren, gibt es auch Player, welche die unterschiedlichsten Formate abspielen wie z.B. der Real Player.
Download: http://germany.real.com/realplayer/
* (Diese Plugins lädt man von der jeweiligen Anbieterseite herunter, entpackt das Zip und startet die Installation.
Oft kann, statt den Download erst zu Speichern, die Datei sofort ausgeführt werden,
dabei ist grosse Vorsicht geboten, zugerne werden darin Trojaner (Spionageprogramme) und Viren versteckt und dann ausgeführt.)
Im Code muss dann angegeben werden, welches Plugin das Medium benötigt (type="application/...").
Und falls kein entsprechender Player installiert ist, wo es automatisch heruntergeladen werden kann.
Es sollte dennoch ein Hinweis und ein Link zum Download des entsprechenden Players angeboten werden.
Töne, Sounds und Musik
Akustische Hinweise werden oft einfach nicht gehört, weil das Plugin fehlt oder die Lautstärke ausgeschaltet wurde. Auch möchten viele Surfer nicht von plötzlich einsetzenden Fanfarenklängen begrüsst werden und haben einen eigenen Musikgeschmack, der schwehr zu treffen ist. Entweder die Site ist also spezialisiert und die Leute kommen explizit zum Reinhöhren vorbei, oder Sound ist ein ein- und ausschaltbares Supplement. Was für Bilder gilt, gilt noch viel mehr für gesprochene Worte: man kann keine Navigation darauf aufbauen.
.mid, .mp3 und .wav files
Diese Files bieten sich an um auf Websites zu ertönen.
Link zur Datei
<a href="..." target="_blank"
Die einfachste Art um Musik anzubieten, ist ein Link zur Musikdatei zu erstellen und dafür ein neues Fenster zu öffen.
Der User schaltet durch einen Klick wissentlich die Musik an, irgendein Player wird er hoffentlich schon installiert haben.
Der Sound läuft auch weiter, wenn auf die Ausgangsseite zurückgekehrt wird oder er wird beendet durch schliessen der Seite.
<a target="_blank" href="images/saxophone.wav">>> Musik auf neuer Seite</a>
Einbetten
embed
Das <embed>...</embed>Tag ist nicht W3C-Standard von HTML 4 aber von HTML 5!
<embed src="images/1812.mid" autostart="false" height="25" width="400" />
Background
Musik im Hintergrund ist nicht empfehlenswert, ohne Möglichkeit sie zu stoppen, bleibt einem nur die Seite zu verlassen.
Zudem ist die erste Lösung nur für IE, die zweite nur für Moz.
bgsound
<bgsound src="images/saxophone.wav" loop="infinite" />
embed
Einbetten wie oben, aber mit autostart, loop und Grössen 0
<embed src="images/saxophone.wav" autostart="true" loop="true" hidden="true" height="0" width="0" />
Sound mit Flash
object
Die einzig W3C gültige Option ist über das Object-Tag.
Der meist verbreitete Player, der das Einbinden durch object erlaubt ist der Flashplayer.
Der derzeit bequemste Codegenerator ist der EMFF (Easy Musicplayer For Flash): http://emff.sourceforge.net/
Dieser spielt nur mp3 Dateien ab (aber das Umwandeln ist inzwischen ganz einfach). Dafür bietet er recht neutrale und kleine Skins.
Herunterladen der Zip-Datei, entpacken, Codegenerator starten, Code generieren (aus diversen Skins auswählen),
Code in die Seite platzieren (siehe Beispiel unten), Code anpassen (Ort der Sound- und Skin-Dateien),
ausgewählte Skin-Datei (z.B. emff_silk_button.swf) aus dem Zip-Download an den entsprechenden Ort kopieren.
[Silk Button]
[Stuttgart Player]
Video
SchockWaveFlash
.swf
Download: http://get.adobe.com/de/flashplayer/
Mit dem <object>...</object>-Tag spielen alle Browser das Flash ab, falls data angegeben wird.
Aber IE/Windows verweigert das Streaming und wartet, bis die ganze Flash-Datei gedownload ist, bevor er mit dem Abspielen beginnt (wenn überhaupt).
<p style="border: 2px solid Red; width:400px; height:300px">
<object type="application/x-shockwave-flash" data="images/perspektive.swf" width="400" height="300">
<param name="movie" value="images/perspektive.swf">
</object>
<p>
Dies geht für kleine Animationen schon, aber für grössere Dateien ist das unakzeptabel. Es muss die sogenante 'Satay' Metode angewandt werden
(http://alistapart.com/articles/flashsatay): Die sieht eine container.swf Datei vor, mit gleichen Massen und FPS-Einstellungen (FramePerSeconds) wie die eigentliche swf-Datei.
Die eigentliche Datei wird in die Container-Datei geladen durch ein Action-Script im ersten Frame:
_root.loadMovie("movie.swf",0);
Der valide XHTML sieht dann so aus (es wird die Containerdatei mit einer Variablen referenziert).
<p style="border: 2px solid Red; width:400px; height:300px">
<object type="application/x-shockwave-flash"
data="container.swf?path=movie.swf" width="400px" height="300px">
<param name="movie" value="container.swf?path=movie.swf" />
</object>
<p>
Falls das Flashplayer Plug-in nicht existiert, fehlt im obigen Code noch der Verweis zum automatischen Download. Dazu bräuchte es dann aber das embed-Tag und der Code ist nicht mehr valide; dafür funktioniert es (beim Exportieren im Adobe Flash CS3 HTML generieren lassen.)
<p style="border: 2px solid Grey; width:400px; height:300px"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="400" height="300" id="perspektive" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="false" /> <param name="movie" value="images/perspektive.swf" /> <param name="quality" value="high" /> <param name="scale" value="noborder" /> <param name="wmode" value="opaque" /> <param name="bgcolor" value="#b9c9d3" /> <embed src="images/perspektive.swf" quality="high" scale="noborder" wmode="opaque" bgcolor="#b9c9d3" width="400" height="300" name="perspektive" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <p>
YouTube
youtube
Um ein auf Youtoube veröffentlichtes Video bei sich darzubieten, wird einem der fertige Code angeboten, zuvor lässt sich ein Rahmen einschalten und Grösse wie Farben wählen. Der Mime type bei YouTube ist meistens ShockWaveFlasch:
<p>
<object width="500" height="315">
<param name="movie" value="http://www.youtube.com/v/RCEYmKt40vI&hl=de
&fs=1&color1=0x5d1719&color2=0xcd311b&border=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/RCEYmKt40vI&hl=de&fs=1
&color1=0x5d1719&color2=0xcd311b&border=1"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="500" height="315">
</embed>
</object>
<p>
WindowsMediaplayerFile
.wmf
Download: http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/
<OBJECT ID="MediaPlayer" classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A"
CODEBASE=" http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715"
width="480" height="330" standby="Loading Microsoft Windows Media Player components..."
type="application/x-oleobject">
<PARAM NAME="FileName" VALUE="trailer_windows.wmv">
<PARAM NAME="TransparentAtStart" Value="false">
<PARAM NAME="AutoStart" Value="true">
<PARAM NAME="AnimationatStart" Value="false">
<PARAM NAME="ShowStatusBar" Value="true">
<PARAM NAME="ShowControls" Value="true">
<PARAM NAME="autoSize" Value="false">
<PARAM NAME="displaySize" Value="false">
<PARAM NAME="ShowAudioControls" Value="true">
<PARAM NAME="ShowPositionControls" Value="false">
<embed type="application/x-mplayer2"
pluginspage=" http://www.microsoft.com/Windows/Downloads/Contents/Products/MediaPlayer/"
src="trailer_windows.wmv" Name="MediaPlayer"
width="480" height="330" transparentAtStart="0" autostart="1"
animationAtStart="0" ShowControls="true" ShowAudioControls="1"
ShowPositionControls="0" autoSize="0" ShowStatusBar="1" displaySize="false">
</embed>
</OBJECT>
Quicktime
.mov
Download: http://www.apple.com/quicktime/download/
<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab" HEIGHT=310 WIDTH=480>
<PARAM NAME="src" VALUE="trailer_quicktime.mov" >
<PARAM NAME="AutoPlay" VALUE="true" >
<PARAM NAME="Controller" VALUE="true" >
<EMBED SRC="trailer_quicktime.mov"
HEIGHT=310 WIDTH=480
TYPE="video/quicktime"
PLUGINSPAGE="http://www.apple.com/quicktime/download/"
AUTOPLAY="true"
CONTROLLER="true" />
</OBJECT>
AudioVideoInterleave
.avi
Als streaming Video ungeeignet, also nur kleine Filmchen:
<img border="2px" dynsrc="videos/ouvertuere_links.avi" start="fileopen" width="240" height="180" />
HTML 5
<video>
In HTML 5 werden neue Tags eingeführt, welche unabhängig von Plugins Medien wiedergeben. Das Tag für Videos ist video, es hat folgende Attribute:
<video width='300px' height='200px' src='images/vase_anim.mov' poster='images/vase_bild.jpg' controls autoplay /* preload // falls nicht autoplay */ loop > <p>Ihr Browser ist nicht HTML 5 fähig</p> </video>
Mehr ...
Durch iFrames(Inline Frames) können externe Dateien ganz geladen werden. iFrame
Check den Code.