Video Will Not Autoplay On Chrome When It Is Inserted Into The DOM January 13, 2023 Post a Comment I have a video (meant for background purposes), that is muted and I intend to auto-play. If I were to put the following code into an html file: Solution 1: This is probably a bug (and not the only one with this autoplay policy...). When you set the muted attribute through Element.setAttribute(), the policy is not unleashed like it should be. To workaround that, set the IDL attribute through the Element's property: function render() { const video = document.createElement('video'); video.muted = true; video.autoplay = true; video.loop = true; video.setAttribute('playsinline', true); const source = document.createElement('source'); source.setAttribute('src', 'https://res.cloudinary.com/dthskrjhy/video/upload/v1545324364/ASR/Typenex_Dandelion_Break_-_Fade_To_Black.mp4'); video.appendChild(source); document.body.appendChild(video); } render(); Copy As a fiddle since StackSnippets requiring a click event form the parent page are anyway always allowed to autoplay ;-). Solution 2: Async, Await, & IIFE After finding this article a couple of months ago, I still couldn't get a consistent autoplay behavior, muted or otherwise. So the only thing I hadn't tried is packing the async function in an IIFE (Immediately Invoked Function Expression).Baca JugaChrome Is Not Displaying My Emoji CorrectlyChrome Displaying Dom Elements In Strange Order, Then Fixed On RefreshHow To Resolve Undefined And Nan? In the demo: It is dynamically inserted into the DOM with .insertAdjacentHTML() It should autoplay It should be unmuted All of the above should happen without user interaction. Demo var clip = document.getElementById('clip'); (function() { playMedia(); })(); async function playMedia() { try { await stamp(); await clip.play(); } catch (err) { } } function stamp() { document.body.insertAdjacentHTML('beforeend', `<video id='clip' poster='https://image.ibb.co/iD44vf/e2517.jpg' src='https://storage04.dropshots.com/photos8000/photos/1381926/20181019/182332.mp4' width='100%' autoplay loop playsinline></video>`); }Copy Share You may like these postsOverlap Images In Center [css]Which Html5 Elements Have Onload/"load Event"?Putting Text In A Number Input Doesn't Trigger Change Event?Selecting One Of The Elements In A Pair By Pure Css Post a Comment for "Video Will Not Autoplay On Chrome When It Is Inserted Into The DOM"
![Overlap Images In Center [css]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXe-3wuvJ8F2_8xDYEjKSkcXiYYKLxWyMWeMwOVuTZVZQizg_gBygMt_xSUn5-8pkbRS6fQ8poa5aIoGIrmTlAM8FGJ-pvw5UmORNjFnRcXlnBcNnEdAKQawLmq3k-R4zdpWNjTardbKA/w192-h108-n-k-rw-no-nu/nomage+%25281%2529.png)
Post a Comment for "Video Will Not Autoplay On Chrome When It Is Inserted Into The DOM"