Estoy tratando de insertar un elemento HTML5 <video> a través de Javascript, pero no se reproduce automáticamente a pesar de que está silenciado .
Me gustaría transferir todos mis archivos gif a un formato mp4. De igual forma, me gustaría que el video HTML emule un gif. Debe incluir las siguientes propiedades:
Actualmente estoy en Chrome 100.
El código relevante se mantiene dentro de este codepen . Quiero agregar el video HTML dinámicamente a través de javascript. Sin embargo, esto falla en la reproducción automática a pesar de que se especifican tanto la reproducción automática como los atributos silenciados.
Sin embargo, si tengo el elemento de video con los mismos atributos escritos directamente en mi HTML, la funcionalidad de reproducción automática funciona bien.
¿Cómo inserto el video con JS y hago que se reproduzca automáticamente?
Creo que podrías establecer atributos como este:
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';Intenta hacer estas modificaciones. Si aún no funciona, puede agregar esto en línea después del código anterior:
vid.play()Parece que Chrome está ignorando el conjunto de atributos muted antes de que se carguen los medios. El video se reproduce automáticamente si el atributo muted se establece cuando los medios se cargan y se pueden reproducir, lo que se puede verificar con el detector de eventos canplay .
vid.oncanplay = () => { vid.muted = true; vid.play(); } Con esto, puede ignorar la configuración de la autoplay y los atributos muted inicialmente.
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>