{"id":3059,"date":"2014-02-14T17:27:44","date_gmt":"2014-02-14T16:27:44","guid":{"rendered":"http:\/\/blog.till.de\/?p=3059"},"modified":"2016-06-09T12:30:03","modified_gmt":"2016-06-09T10:30:03","slug":"html5-und-tags","status":"publish","type":"post","link":"https:\/\/blog.till.de\/webdesign\/html5-und-tags\/","title":{"rendered":"HTML5: &lt;audio&gt; und &lt;video&gt; Tags"},"content":{"rendered":"<p>Heute geht es um die beiden Multimedia-Tags <em>&lt;audio&gt;<\/em> und <em>&lt;video&gt;<\/em> .<br \/>\nDiese wurden erst in HTML5 hinzugef\u00fcgt.<\/p>\n<p><strong>Allgemeine Syntax am Beispiel des Audiotags:<\/strong><\/p>\n<p><em>&lt;audio src=&#8220;Musikdatei.mp3&#8243; controls&gt;<\/em><br \/>\n<em>&lt;p&gt;Text, welcher angezeigt wird, wenn Ihr Browser kein HTML5 verarbeiten kann.&lt;\/p&gt;<\/em><br \/>\n<em>&lt;\/audio&gt;<\/em><\/p>\n<p>oder<\/p>\n<p><em>&lt;audio controls&gt;<\/em><br \/>\n<em> &lt;source src=&#8220;Datei1.mp3&#8243; type=&#8220;audio\/mpeg&#8220;&gt;&lt;\/source&gt;<\/em><br \/>\n<em> &lt;source src=&#8220;Datei.ogg&#8220; type=\u201daudio\/ogg\u201d&gt;&lt;\/source&gt;<\/em><br \/>\n<em> &lt;p&gt;Text, welcher angezeigt wird, wenn Ihr Browser kein HTML5 verarbeiten kann.&lt;\/p&gt;<\/em><br \/>\n<em>&lt;\/audio&gt;<\/em><\/p>\n<p><!--more-->Bei beiden k\u00f6nnen zus\u00e4tzlich noch folgende Attribute angegeben werden:<\/p>\n<ul>\n<li><em>autoplay<\/em>: Die Datei startet so fr\u00fch wie m\u00f6glich<\/li>\n<li><em>loop<\/em>: Die Datei startet immer wieder von vorne, sobald sie das ende erreicht hat<\/li>\n<li><em>muted<\/em>: gibt an, dass der Ton aus ist<\/li>\n<li><em>preload<\/em>: gibt an, wie und wann die Datei geladen werden soll. M\u00f6gliche Werte sind:\n<ul>\n<li><em>auto<\/em>: so schnell wie m\u00f6glich<\/li>\n<li><em>metadata<\/em>: l\u00e4d nur die Metadaten<\/li>\n<li><em>none<\/em>: l\u00e4d erst, wenn auf Play gedr\u00fcckt wird<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Zus\u00e4tzlich kann bei dem <em>&lt;video&gt;<\/em> Tag noch angegeben werden:<\/p>\n<ul>\n<li><em>height<\/em>: H\u00f6he in Pixeln<\/li>\n<li><em>poster<\/em>: Bild, welches angezeigt wird, wenn das video nicht abgespielt wird<\/li>\n<li><em>width<\/em>: Breite in Pixeln<\/li>\n<\/ul>\n<p>Es ist wichtig, dass immer das Attribut <em>controls<\/em> angegeben ist, weil ansonsten der Playbutton und die Lautst\u00e4rkeregelung nicht angezeigt werden. Au\u00dferdem m\u00fcssen bei der zweiten Schreibweise die MIME\u2019s (Multipurpose Internet Mail Extensions, es wird angegeben, um welchen Dateitypen es sich handelt) angegeben werden. Eine Liste der offiziellen MIME\u2019s gibt es auf <a title=\"Link zu der offiziellen Liste der MIME's\" href=\"http:\/\/www.iana.org\/assignments\/media-types\/media-types.xhtml\" target=\"_blank\">http:\/\/www.iana.org\/assignments\/media-types\/media-types.xhtml<\/a> .<\/p>\n<p><strong>Wann nehme ich die erste und wann die zweite Schreibweise?<\/strong><br \/>\nDie erste Schreibweise ist nur m\u00f6glich, wenn man die Datei nur in einem Format einbinden m\u00f6chte. Bei der zweiten Schreibweise werden mehrere Dateien hochgeladen. Normalerweise ist der Inhalt der Datei gleich, nur es ist in einem anderen Format. Dann w\u00e4hlt der Browser anhand der von ihm unterst\u00fctzten Formate selbstst\u00e4ndig aus, welche Datei er abspielt.<\/p>\n<p><strong>Welche Vor- und Nachteile haben die beiden Tags?<\/strong><\/p>\n<p>Der \u00fcbliche Nachteil bei den beiden Tags ist, dass nicht jeder Browser HTML5 unterst\u00fctzt, also die Dateien nicht abspielen kann. Also muss man, wenn man auch noch alte Browser unterst\u00fctzen m\u00f6chte trotzdem auf <em>&lt;embed&gt;<\/em> und <em>&lt;object&gt;<\/em> zur\u00fcckgreifen.<\/p>\n<p>Der Hauptvorteil der <em>&lt;audio&gt;<\/em> und <em>&lt;video&gt;<\/em> Tags ist, dass man jetzt mehrere Versionen der Datei einbinden kann, wie bereits bei der letzten Frage erkl\u00e4rt.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Heute geht es um die beiden Multimedia-Tags &lt;audio&gt; und &lt;video&gt; . Diese wurden erst in HTML5 hinzugef\u00fcgt. Allgemeine Syntax am Beispiel des Audiotags: &lt;audio src=&#8220;Musikdatei.mp3&#8243; controls&gt; &lt;p&gt;Text, welcher angezeigt wird, wenn Ihr Browser kein HTML5 verarbeiten kann.&lt;\/p&gt; &lt;\/audio&gt; oder &lt;audio controls&gt; &lt;source src=&#8220;Datei1.mp3&#8243; type=&#8220;audio\/mpeg&#8220;&gt;&lt;\/source&gt; &lt;source src=&#8220;Datei.ogg&#8220; type=\u201daudio\/ogg\u201d&gt;&lt;\/source&gt; &lt;p&gt;Text, welcher angezeigt wird, wenn Ihr Browser kein&hellip;&nbsp;<a href=\"https:\/\/blog.till.de\/webdesign\/html5-und-tags\/\" rel=\"bookmark\">Mehr lesen &raquo;<span class=\"screen-reader-text\">HTML5: &lt;audio&gt; und &lt;video&gt; Tags<\/span><\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","neve_meta_reading_time":"","_themeisle_gutenberg_block_has_review":false,"_ti_tpc_template_sync":false,"_ti_tpc_template_id":"","footnotes":""},"categories":[77],"tags":[],"class_list":["post-3059","post","type-post","status-publish","format-standard","hentry","category-webdesign"],"_links":{"self":[{"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/posts\/3059"}],"collection":[{"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/comments?post=3059"}],"version-history":[{"count":0,"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/posts\/3059\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/media?parent=3059"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/categories?post=3059"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.till.de\/wp-json\/wp\/v2\/tags?post=3059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}