4

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.

Error en iPhone

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

4
  • Te recomiendo que leas este artículo de Mozilla, te puede ser muy útil: developer.mozilla.org/es/docs/Web/HTML/… el 19 abr. 2017 a las 8:36
  • ¿Qué codecs estás usando para generar los vídeos? ¿Has probado a cerrar todas las aplicaciones, apagar y encender el iPhone e ir de nuevo al video? A veces puede ocurrir esto si el iPhone tiene problemas de memoria.
    – Alvaro Montoro
    el 19 abr. 2017 a las 12:48
  • Hola Deberías revisar si la versión del navegador que estas utilizando es compatible con el tag vídeo, también como arriba lo mencionan podría ser un problema de codecs, intentaste subir otro vídeo o solo te ocurre con ese vídeo. Saludos el 19 abr. 2017 a las 15:49
  • tu me puedes ayudar compartiendo el codigo de como convertiste por jquery el tag de video y que te dejará reproducir los videos, te agradezco Saludos el 27 nov. 2017 a las 22:11

1 respuesta 1

1

Creo que lo que te muestra Safari es una indicación para que el visitante sepa que hay un video pero que no se puede reproducir.

Porqué en vez de sustituir las fuentes de video no sustituyes el tag vídeo por otro de imagen?

2
  • Muchas gracias por la respuesta; justo es lo que había hecho al final; cambiar el tag Video por Img mediante jQuery; pero, ¿por qué no puedo mostrar bien el contenido un iPhone y si un iPad? Aunque funciona así correctamente, no entiendo porque me obliga a semejante solución.
    – E. Benito
    el 1 may. 2017 a las 22:38
  • Porque Apple entiende que el tipo de usuario que ve una página en un dispositivo y en otro no son los mismos. Y porque los dispositivos no son igual de potentes. Al final es cuestión de lo que Apple quiere. el 6 may. 2017 a las 10:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.