I am trying to insert an HTML5 <video> element through Javascript, but it fails to autoplay despite it being muted.
I would like to transfer all of my gif assets over to an mp4 format. Likewise, I would like the HTML video to emulate a gif. It should include the following properties:
I am currently on Chrome 100.
Relevant code is held within this codepen. I want to add the HTML video dynamically through javascript. However this fails to autoplay even though both autoplay and muted attributes are specified.
However, if I have the video element with the same attributes directly written in my HTML, the autoplay functionality works just fine.
How do I insert the video with JS and get it to autoplay?
I think you could rather set attributes like this :
const anchor = document.querySelector('#anchor');
const vid = document.createElement('video');
anchor.appendChild(vid);
vid.autoplay = true;
vid.loop = true;
vid.muted = true;
vid.playsinline = true;
vid.src = 'https://www.w3schools.com/html/mov_bbb.mp4';
Try to make these modifications. If it still not working, you could add this inline after above code :
vid.play()
It looks like Chrome is ignoring the muted attribute set before the media has loaded. The video is auto-played if the muted attribute is set when the media is loaded and can be played, which can be checked with the canplay event listener.
vid.oncanplay = () => {
vid.muted = true;
vid.play();
}
With this, you can ignore setting the autoplay and muted attributes initially.
const anchor = document.querySelector('#anchor');
const vid = document.createElement('video');
vid.setAttribute('loop', '');
vid.setAttribute('src', 'https://www.w3schools.com/html/mov_bbb.mp4');
vid.oncanplay = () => {
vid.muted = true;
vid.play();
}
anchor.appendChild(vid);body {
background-color: black;
color: white;
}<div id="anchor"></div>