HTML: Audio und Video einbinden
Mit HTML5 wurden unter anderem zwei neue Elemente eingeführt, mit denen Multimedia-Dateien in eine Website eingebunden werden können, ohne dass ein zusätzlicher Player installiert werden muss: <audio> und <video>. Die Unterstützung der verschiedenen Medienformate ist auf den verschiedenen Plattformen allerdings noch recht unheitlich. Siehe dazu auch Wikipedia.
Hier zunächst zwei Beispiele, mit denen man testen kann, welche Browser diese Tags bereits unterstützen:
Und hier der dazugehörige Code:
Code kopieren
<!DOCTYPE html>
<html lang='de'>
<head>
<title>Multimedia</title>
<meta charset='UTF-8'>
<meta name='description' content=''>
<meta name='keywords' lang='de' content=''>
<meta name='author' content=''>
<meta name='robots' content='noindex, nofollow'>
</head>
<body>
<div style='text-align:center;margin:27px auto 0;'>
<video style='border:1px solid #000;width:480px;height:270px;' controls='controls' preload='auto' poster='img/elephantsdream.png'>
<source src='files/Elephants_Dream(HQ).webm' type='video/webm' />
Tag wird nicht unterstützt
</video>
<br><small><a href='http://orange.blender.org/blog/creative-commons-license-2/'>© The Blender Foundation</a><br><small><a href='https://de.wikipedia.org/wiki/Datei:Elephants_Dream(HQ).webm'>Quelle des Films: Wikimedia</a></small><br /><br />
<audio style='border:1px solid #000;margin-top:20px;'
src='files/desktop-login.ogg' controls='controls'
>Tag wird nicht unterstützt</audio>
</div>
</body>
</html>