HTML and CSS Reference
In-Depth Information
$('#zoom').on('click', function(){
video.width = video.videoWidth * 1.5;
});
Danach versehen Sie den Zoombutton mit Leben. Bei click wird eine Funktion aus-
geführt, welche die Videobreite ausliest und diese mit 1.5 multipliziert, also das Video
auf 150 % vergrößert (Abbildung 4.34). Die Eigenschaft videoWidth ist dabei eine
andere als die Breite des Elements: Wird Ihr Video beispielsweise so weit verkleinert,
dass es nicht in die volle Breite des Elements passt, wird es so dennoch auf 150 %
gezoomt.
4.3.2 Audio
Etwas einfacher ist die Einbindung von Sounddateien in HTML. Bereits in HTML4 war
es möglich, über ein ActiveX-Objekt unkomprimierte Wave-Dateien und Midi-Kom-
positionen in eine Webseite einzubinden:
<object data="haste.mid" type="audio/x-midi"></object>
Die meisten Browser, selbst Netscape 4, konnten dieses Tag verarbeiten und Sounds
abspielen, solange der richtige MIME-Typ angegeben war. In HTML5 gibt es ein neues
Multimedia-Element:
<audio src="sound.mp3"></audio>
Das audio -Element bekommt, ähnlich wie das video -Element, die Sounddatei per src -
Parameter übergeben. Aktuelle Browser verarbeiten in der Regel alle geläufigen For-
mate und Kompressionen, auf Nummer sicher gehen Sie mit MP3-Dateien. Möchten
Sie eine Sounddatei in einem besonders hochwertigen Kompressionsverfahren wie
Advanced Audio Coding ( AAC ) bereithalten, als Notfalllösung für nicht unterstützte
Browser aber z. B. OGG Audio verwenden, so können Sie auch im audio -Element meh-
rere Quelldateien verknüpfen:
<audio>
<source src="sound.aac">
<source src="sound.oga">
</audio>
Der Webbrowser wird das passende Format auswählen und verwenden.
Das audio -Element wird im Browser zunächst nur als unsichtbarer Kasten dargestellt.
Um die Bedienelemente zu aktivieren (Abbildung 4.35), verwenden Sie, analog zum
video -Element, folgendes Attribut:
Search WWH ::




Custom Search