{"id":224,"date":"2022-10-29T08:00:00","date_gmt":"2022-10-29T06:00:00","guid":{"rendered":"https:\/\/www.fuhselab.de\/?p=224"},"modified":"2025-06-09T16:33:25","modified_gmt":"2025-06-09T14:33:25","slug":"html-multimedia","status":"publish","type":"post","link":"https:\/\/www.fuhselab.de\/index.php\/2022\/10\/29\/html-multimedia\/","title":{"rendered":"HTML Multimedia"},"content":{"rendered":"\n

Multimedia ist angesagt. In diesem Artikel zum Webdesign-Workshop geht es um Audiodateien und Videodateien\u2026<\/p>\n\n\n\n\n\n\n\n

HTML Audiodateien:<\/strong><\/p>\n\n\n\n

Mit HTML 5 ist es auch endlich m\u00f6glich auf eine sehr elegante Art Multimedia-Inhalte in eine Webseite einzubinden. V\u00f6llig ohne Adobe Flash wird nachfolgend eine mp3-Datei in diese Webseite eingebunden\u2026<\/p>\n\n\n\n

Die mp3-Datei wird im HTML Quelltext so eingebunden:<\/p>\n\n\n\n

<audio controls>\n<source src=\"Songtitel.mp3\" type=\"audio\/mpeg\">\nDas Audio-Element von HTML 5 wird leider nicht vom genutzen Browser unterst\u00fctzt.\n<\/audio><\/code><\/pre>\n\n\n\n
Dies ist der Grundaufbau, um eine Audiodatei per HTML5 in eine Webseite einzubinden. Die Kontroll- und Steuerelemente werden sp\u00e4ter noch intensiver behandelt.<\/p>\n\n\n\n
Als \u201etype\u201c werden folgende Angaben akzeptiert:<\/p>\n\n\n\n
    \n
  • mp3 = audio\/mpeg<\/li>\n\n\n\n
  • ogg = audio\/ogg<\/li>\n\n\n\n
  • wav = audio\/wav<\/li>\n<\/ul>\n\n\n\n
    Ein erweiterter Audioplayer wird so realisiert\u2026:<\/p>\n\n\n\n
    <audio controls>\n<source src=\u201cSongtitel-1.mp3\u2033 type=\u201caudio\/mpeg\u201c>\n<source src=\u201cSongtitel-2.ogg\u201c type=\u201caudio\/ogg\u201c>\n<a href=\u201cSongtitel-1.mp3\u2033>Download mp3 Audiodatei<\/a>\n<\/audio><\/code><\/pre>\n\n\n\n
    Dieser Audioplayer ist nun eine Erweiterung des ersten Audioplayers.<\/p>\n\n\n\n
    Wenn der Browser eine mp3 Datei abspielen kann, tut er das und ignoriert die verbleibenden Zeilen bis zum Ende des audio-Elements.<\/p>\n\n\n\n
    Wenn der Browser keine mp3 Datei abspielen kann, geht er weiter zur n\u00e4chsten Zeile innerhalb des Elements und findet die ogg-Datei.<\/p>\n\n\n\n
    Wenn er auch die nicht abspielen kann, wird die Datei als mp3-Download angeboten.<\/p>\n\n\n\n
    HTML Videodatei:<\/strong><\/p>\n\n\n\n
    Wenn mit HTML5 Audiodateien m\u00f6glich sind (wie im vorherigen Kapitel beschrieben), dann sind nat\u00fcrlich auch Videodateien m\u00f6glich.<\/p>\n\n\n\n
    <video width=\"320\" height=\"240\" controls>\n<source src=\"Videodatei-1.mp4\" type=\"video\/mp4\">\nDas Video-Element von HTML 5 wird leider nicht vom genutzen Browser unterst\u00fctzt.\n<\/video><\/code><\/pre>\n\n\n\n
    Der Aufbau ist etwas anders als bei den Audiodateien. Mit \u201ewidth\u201c und \u201eheight\u201c wird noch die Gr\u00f6\u00dfe des Videos angegeben oder besser die Gr\u00f6\u00dfe des \u201eVideobildschirms\u201c auf der Webseite.<\/p>\n\n\n\n
    Als \u201etype\u201c werden folgende Angaben akzeptiert:<\/p>\n\n\n\n
      \n
    • mp3 = video\/mp4<\/li>\n\n\n\n
    • ogg = video\/ogg<\/li>\n\n\n\n
    • webm = video\/webm<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
      Multimedia ist angesagt. In diesem Artikel zum Webdesign-Workshop geht es um Audiodateien und Videodateien\u2026<\/p>\n","protected":false},"author":1,"featured_media":53,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[23],"class_list":["post-224","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign","tag-webdesign-gruppe-peine"],"_links":{"self":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/comments?post=224"}],"version-history":[{"count":5,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/224\/revisions"}],"predecessor-version":[{"id":2869,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/posts\/224\/revisions\/2869"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media\/53"}],"wp:attachment":[{"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/media?parent=224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/categories?post=224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fuhselab.de\/index.php\/wp-json\/wp\/v2\/tags?post=224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}