{"id":4751,"date":"2018-01-12T15:42:34","date_gmt":"2018-01-12T14:42:34","guid":{"rendered":"https:\/\/www.kolja-engelmann.de\/blog\/?p=4751"},"modified":"2018-01-12T15:42:34","modified_gmt":"2018-01-12T14:42:34","slug":"video-im-chromium-browser-automatisch-abspielen-lassen-autoplay","status":"publish","type":"post","link":"https:\/\/www.kolja-engelmann.de\/blog\/2018\/01\/video-im-chromium-browser-automatisch-abspielen-lassen-autoplay\/","title":{"rendered":"Video im Chromium Browser automatisch abspielen lassen (Autoplay)"},"content":{"rendered":"<p><a href=\"https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2018\/01\/alpha-channel-video-chromium.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-4752\" src=\"https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2018\/01\/alpha-channel-video-chromium-500x364.png\" alt=\"Alpha Channel Video Chromium\" width=\"500\" height=\"364\" srcset=\"https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2018\/01\/alpha-channel-video-chromium-500x364.png 500w, https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2018\/01\/alpha-channel-video-chromium-300x219.png 300w, https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2018\/01\/alpha-channel-video-chromium.png 763w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a>Innerhalb einer Webseite sollte eine Animation abgespielt werden, die in Form eines Videos mit Alpha-Kanal vorlag. Sah cool aus, funktionierte im Chromium Browser (Kundenvorgabe) aber nicht, da das Video nicht von selbst startete (Autoplay).<\/p>\n<p>Seit September 2017 hat der Chromium Browser n\u00e4mlich eine neue <a href=\"https:\/\/sites.google.com\/a\/chromium.org\/dev\/audio-video\/autoplay\" target=\"_blank\" rel=\"noopener\">Autoplay Policy<\/a>, die ein automatisches Starten nur dann erlaubt, wenn das Video komplett ohne Ton abl\u00e4uft oder der User explizit dessen Start initiiert hat, z.B. durch einen Click.<\/p>\n<p>Die L\u00f6sung unseres Problems fand sich also im &#8222;muted&#8220;\u00a0Attribut.<\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;video class=\"scale\" id=\"myVideo\" width=\"100%\" height=\"auto\" autoplay=\"\" muted=\"\" loop=\"\" onclick=\"this.play()\"&gt;\r\n  &lt;source src=\"content\/video.webm\" type=\"video\/webm\"&gt;\r\n  Your browser does not support the video tag.\r\n&lt;\/video&gt;<\/pre>","protected":false},"excerpt":{"rendered":"<p>Seit September 2017 hat der Chromium Browser eine neue Autoplay Policy, die ein automatisches Starten von Videos verhindert.<\/p>\n","protected":false},"author":1,"featured_media":4752,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[44,24],"class_list":["post-4751","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein","tag-chrome","tag-webbrowser"],"jetpack_featured_media_url":"https:\/\/www.kolja-engelmann.de\/blog\/wp-content\/uploads\/2018\/01\/alpha-channel-video-chromium.png","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/posts\/4751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/comments?post=4751"}],"version-history":[{"count":0,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/posts\/4751\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/media\/4752"}],"wp:attachment":[{"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/media?parent=4751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/categories?post=4751"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kolja-engelmann.de\/blog\/wp-json\/wp\/v2\/tags?post=4751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}