Multimedia-Objekte einbinden

Mit HTML5 wurden unter anderem zwei neue Tags 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 auswählen

<!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:0 auto 20px;'>
      <video style='border:1px solid #000;width:480px;height:270px;' controls='controls' preload='auto' poster='./img/elephantsdream.png'>
        <source src='./files/Elephants_Dream.ogg' type='video/ogg'>
        Tag wird nicht unterstützt
      </video>
      <br><a href='http://orange.blender.org/blog/creative-commons-license-2/'>© The Blender Foundation</a><br><br>
      <audio style='border:1px solid #000;'
        src='./files/desktop-login.ogg' controls='controls'
      >Tag wird nicht unterstützt</audio>
    </div>
  </body>
</html>

Weiterführende Websites

HTML5Video.org http://html5video.org/: Informationen über den Stand der Technik