HTML5 Tutorial Video

Das HTML5 Video-Tag ist sehr einfach anzuwenden und ist ein super Ersatz für komplizierte Skripte. HTML5 funktioniert auch auf mobilen Geräten.

Zunächst muss man wissen, dass die verschiedenen Browser nicht alle Video-Formate in HTML5 als solche unterstützen, daher ist es notwendig mehrere Video-Formate anzugeben.

Hier könnt Ihr Euro Videos online in unterschiedliche Formate konvertieren lassen:

Online Video Converter

Ich habe nun ein Textfeld aufgezogen und das unten stehende HTML5 Video-Tag in den HTML-Code Editor eingetragen - und fertig.

<video controls="controls" poster="../muldimedia/thumbs/vw_fallschirm.png">
   <source src="../muldimedia/vw_fallschirm.webm" type='video/webm; codecs="vp8, vorbis"' />
   <source src="../muldimedia/vw_fallschirm.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
   <source src="../muldimedia/vw_fallschirm.ogv" type='video/ogg; codecs="theora, vorbis"' />
   Dieses HTML5 Video wird von Deinem Browser nicht unterst&uuml;tzt.
</video>

... ich habe hier meine Videos in ein in NOF erstelltes Verzeichnis

multimedia

verschoben, da ich hier “Nach Site-Struktur” publiziere und meine Videos nicht im Stammverzeichnis liegen sollten.

• controls = erstellt automatisch die Player-Funktionen
   
• poster = zeigt vor dem Start des Videos ein selbst erstelltes Bild an
   
• WEBM und MP4 und OGV = Video Formate, die von allen modernen Browsern erkannt werden - hierbei ist die Angabe vom Typ auch wichtig

Bei meinem 2. HTML5 Video-Beispiel habe ich noch ein kleines Skript zur Anzeige der Buttons hinzugefügt:

<div style="text-align:left">
   <button onclick="playPause()">Play/Pause</button>
   <button onclick="makeBig()">Gro&#223;</button>
   <button onclick="makeSmall()">Klein</button>
   <button onclick="makeNormal()">Normal</button>
   <br>
   <video id="video1" width="420" controls="controls" poster="../muldimedia/thumbs/marienkaeferpeugeot.jpg">
      <source src="../muldimedia/marienkaefer-peugeot.webm" type='video/webm; codecs="vp8, vorbis"' />
      <source src="../muldimedia/marienkaefer-peugeot.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
      <source src="../muldimedia/marienkaefer-peugeot.ogv" type='video/ogg; codecs="theora, vorbis"' />
      Dieses HTML5 Video wird von Deinem Browser nicht unterst&uuml;tzt.
   </video>
</div>

<script>
   var myVideo=document.getElementById("video1");
  
   function playPause()
   {
   if (myVideo.paused)
     myVideo.play();
   else
     myVideo.pause();
   }
  
   function makeBig()
   {
      myVideo.width=560;
   }
  
   function makeSmall()
   {
      myVideo.width=320;
   }
  
      function makeNormal()
   {
      myVideo.width=420;
   }
</script>

Guckt Euch auch diese Anleitungen an:

www.w3schools.com/html/html5_video.asp

nach oben