Tengo la siguiente función que estoy usando para expandir un video de reproducción automática cuando el usuario hace clic en el área de medios. (Enlace de video de muestra suministrado)

 if(heroVideo) { const heroVideoCont = heroVideo.querySelector('video'); heroVideoCont.addEventListener('click', () => expandVideo(heroVideoCont)); function expandVideo(targ) { if(targ.requestFullscreen) { targ.requestFullscreen(); } else if(targ.webkitRequestFullscreen) { targ.webkitRequestFullscreen(); } else if(targ.msRequestFullScreen) { targ.msRequestFullScreen(); } } function controlVideoVolume(targ) { if(document.fullscreenElement) { targ.removeAttribute('muted'); } else { targ.setAttribute('muted', ''); } } document.addEventListener('fullscreenchange', () => controlVideoVolume(heroVideoCont)); document.addEventListener('mozfullscreenchange', () => controlVideoVolume(heroVideoCont)); document.addEventListener('webkitfullscreenchange', () => controlVideoVolume(heroVideoCont)); }

 <div class="hero__container--media"> <video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" autoplay="autoplay" loop="loop" muted playsinline="" preload="metadata"></video> </div>

Aparece como se esperaba en las versiones de escritorio de Chrome y Safari. También funciona en Safari con el agente de usuario iOS 14.1.0 seleccionado.

Sin embargo, no funciona en dispositivos móviles (solo iPhone iOS 15.1 probado). Cambié el detector de eventos a un evento de toque, pero esto no cambió. La única forma en que parecía poder expandirlo era agregar el atributo de controls . Aunque esto ayuda, estoy en la situación habitual de 'exigencias' de diseño de que no se muestren controles nativos en su estado en línea.

Cualquier orientación sería ideal.

Como beneficio adicional, la función silenciar/no silenciar no funciona con Safari. ¿Hay alguna solución para esto o es solo una funcionalidad nativa que no se puede sobrescribir?