load an autoplay video in html

Question

why when DOM that loeded or refreshed, the video that we set to autoplay and loop , will not played automatically ?

if this is an asynchronous process? so i addded this JavaScript code for fix it , but that doesn't work . the js codes :

const getVideo = async function () {
    const videoData = await fetch('./video/NEZAJA - Google Chrome 2024-03-05 12-46-49.mp4')
    const videoBlob = await videoData.blob()
    const videoURL = URL.createObjectURL(videoBlob)

    const noticeDivBott =  document.createElement('div')
    noticeDivBott.classList.add('notice-div-bott')
    noticeDivBott.innerHTML = 
    `
    <video class="video" style="border-radius: 30px;" autoplay loop width="380px">
    <source src='${videoURL}'  type="video/mp4" />
    Download the
    <a href="/media/cc0-videos/flower.webm">WEBM</a>
    or
    <a href="/media/cc0-videos/flower.mp4">MP4</a>
    video.
    </video>
    `
    return notice.appendChild(noticeDivBott)

}

getVideo()

I expect the video that i added in my project , play automatically immediately after i load the dom or refresh that .

Answer 1

Videos with autoplay, has to be muted, so insert an "muted" inside the video tag