HTML5 Tutorial by W3Schools mit <video> & <audio>

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • HTML5 Tutorial by W3Schools mit <video> & <audio>

      In HTML5 gibt es viele schöne und brauchbare neue Elemte. Ich selber habe mich noch nicht perfekt mit diesem Thema auseinandergesetzt aber möchte euch trotzdem eine Funktion möglichst genau erklären.

      Die Seite w3schools.com, erklärt einen Teil relativ gut, aber auf Englisch :)
      Es geht mir um folgendes:
      Zitat von der Seite:
      HTML5 Multimedia

      With HTML5, playing video and audio is easier than ever.





      Videos sowie Audio Datien einzuspielen ist nun leichter gemacht. Wie es geht zeige ich euch jetzt.
      Ein HTML5 Dokument mit einem Video Player könnte so aussehen:

      HTML-Quellcode

      1. <!DOCTYPE html>
      2. <html>
      3. <body>
      5. <video width="320" height="240" controls="controls" autoplay="autoplay">
      6. <source src="movie.[COLOR=#008000]mp4[/COLOR]" type="video/mp4">
      7. <source src="movie.[COLOR=#0000ff]ogg[/COLOR]" type="video/ogg">
      8. <source src="movie.[COLOR=#ff0000]webm[/COLOR]" type="video/webm">
      9. Your browser does not support the video tag.
      10. </video>
      12. </body>
      13. </html>
      Alles anzeigen


      Mit den Dateiformatem kenne ich mich leider nicht sonderlich gut aus aber ich versuche es euch zu erklären.

      Hier gibt es wie schon oben gezeigt den <video></video> Code nur ein bisschen erweitert damit der Video Player eine bestimmt Breite & Höhe hat. In dem Fall sind es diese: width="320" height="240".

      Die Datei movie.webm, ist glaube ich das Dateiformate für Opera und Firefox.
      webm

      Der WebM-Standard besteht aus dem Video-Codec VP8, der von On2 Technologies entwickelt wurde, und dem Audio-Codec Vorbis in einem auf einer Untermenge von Matroska basierenden Containerformat.


      .ogg kann die MIME-Type haben: audio/ogg, video/ogg, application/ogg. Spricht für Audi, Video und Applications.
      Wikipedia erklärt es so:

      Ogg ist ein Container-Dateiformat für Multimedia-Dateien, kann also gleichzeitig Audio-, Video- sowie Textdaten enthalten. Ogg wurde mit dem Ziel konzipiert, eine freie und von Softwarepatenten unbeschränkte Alternative zu proprietären Formaten zu bieten, um Multimedia-Inhalte effizient zu speichern und zu streamen. Die Streamingfähigkeit ist dabei das entscheidende Designmerkmal: Alles, was in einem Ogg-Container verpackt ist, kann ohne zusätzliche Anpassungen gestreamt werden. Dies unterscheidet Ogg von Formaten, die entweder nur in bestimmten Ausprägungen streamingfähig sind (wie z. B. Matroska) oder überhaupt nicht live-streaming-fähig sind (wie z. B. MP4). Ogg-Streams können dabei gebündelt und verkettet werden, ohne dass dazu eine Anpassung des einzelnen Streams notwendig ist.[2]
      Die Entwicklung des Container-Formats wird von der Xiph.Org Foundation geleitet, die auch für einige Codecs verantwortlich ist, welche die Inhalte in einem Ogg-Container komprimieren.
      Der bekannteste Codec ist dabei der Audio-Codec Vorbis, welcher oft vereinfachend (oder auch irrtümlich) als Ogg bezeichnet wird, obwohl Ogg tatsächlich nur das Containerformat für die Vorbis-kodierten Inhalte ist.


      Und .mp4 müsste eigentlich jeder kennen, bzw. schoneinmal gesehen haben. ;)
      Ich glaube da muss ich nichts zu sagen, falls wer nachlesen möchte: MP4



      So, wie lass ich jetzt ein Video auf meiner Seite abspielen?
      In dem <body> kommt dieser Code:

      Quellcode

      1. <video width="320" height="240" controls="controls" autoplay="autoplay">
      2. <source src="movie.[COLOR=#008000]mp4[/COLOR]" type="video/mp4">
      3. <source src="movie.[COLOR=#0000ff]ogg[/COLOR]" type="video/ogg">
      4. <source src="movie.[COLOR=#ff0000]webm[/COLOR]" type="video/webm">
      5. Your browser does not support the video tag.
      6. </video>


      src="PFAD ZUR VIDEO DATEI" bzw. Name der Video Datei wenn sie im gleichen Ordner ist wie die index.html o. index.php.

      Wie das ganze aussieht könnt ihr hier nachgucken:

      Tryit Editor v1.6

      Ich hoffe ich konnte ein bisschen helfen.

      z00r

    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )

    • Quellcode

      1. <video width="320" height="240" controls="controls" autoplay="autoplay">
      2. <source src="[COLOR=#ff0000]movie[/COLOR].mp4" type="video/mp4">
      3. <source src="[COLOR=#ff0000]movie[/COLOR].ogg" type="video/ogg">
      4. <source src="[COLOR=#ff0000]movie[/COLOR].webm" type="video/webm">
      5. Your browser does not support the video tag. </video>


      Du muss aber auch, hier "movie" (ohne ""), deine Datei dementsprechen umbennenen.
      Heißt sie z.B. "intro.mp4" schreibst du an stelle von movie.mp4 deinen Dateinamen dort hin.

      // EDIT

      Wenn du Firefox verwendest musst du meines Wissens nach diesen Befehl verwenden, .mp4 Formate werden nämlich nicht unterstützt:

      PHP-Quellcode

      1. <source src="movie.webm" type="video/webm">