Video Will Not Autoplay On Chrome When It Is Inserted Into The Dom December 06, 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: functionrender() { 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(); CopyAs a fiddle since StackSnippets requiring a click event form the parent page are anyway always allowed to autoplay ;-).Solution 2: Async, Await, & IIFEAfter 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 JugaSkip Links Not Working In ChromeFirefox Not Raising Event For TransitionendHow To Include A Php File In A Html File Via A Php ScriptIn the demo:It is dynamically inserted into the DOM with .insertAdjacentHTML()It should autoplayIt should be unmutedAll of the above should happen without user interaction.Demo var clip = document.getElementById('clip'); (function() { playMedia(); })(); asyncfunctionplayMedia() { try { awaitstamp(); await clip.play(); } catch (err) { } } functionstamp() { 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 postsCanvas.drawimage Of Autoplayed Video Only Works When Video Element Is VisibleWhy Does Safari Treats Transform Translate Different When Compared To Chrome?How Do I Release The Camera And Microphone After A Webrtc Call?Percentage Height Not Working In Nested Flexbox Layout In Chrome Post a Comment for "Video Will Not Autoplay On Chrome When It Is Inserted Into The Dom"
Post a Comment for "Video Will Not Autoplay On Chrome When It Is Inserted Into The Dom"