Estoy haciendo una web que hace uso de vídeos, con la etiqueta VIDEO; la he probado en PC's, iPad, iPhone y móviles Android y Windows. En todos se muestra correctamente, menos en iPhone (iOS 10); que muestra la imagen de poster con un 'play' tachado.
El código es el siguiente:
<video id="myVideo" poster="img/portada.jpg" autoplay="autoplay" loop muted>
<source src="video/portada.webm" type="video/webm" />
<source src="video/portada.mp4" type="video/mp4" />
</video>
En algunos sitios he visto que puede ser un problema de codecs en iPhone antiguos, pero este en un iPhone 7; aun así he probado a regenerar el video con otros codecs y sigue pasando lo mismo.
No obstante, la idea de este sitio web, es que al acceder desde un móvil no muestre videos sino imágenes (la indicada en el parámetro 'poster'), para lo que en jQuery detecto el tamaño de pantalla y si es menor de cierto tamaño elimino la fuente del vídeo, así:
var video = document.getElementById('myVideo');
video.pause();
video.src = "";
Haciendo esto me funciona correcto en todos los dispositivos mencionados, menos iPhone (es decir, si que hace el cambiar el video por la imagen de poster, pero le añade el logo del play tachado, que es lo que necesito que no salga.)
¿Por qué puede ser?; ¿se puede hacer de otra forma más elegante?
Muchas gracias