section - html5 pdf

Detección móvil para partes específicas de sitios web

Question

Soy un principiante en desarrollo web y estoy teniendo problemas para resolver este problema.

Tomé un video y lo codifiqué en un archivo mp4 y un archivo ism. Tengo dos etiquetas de video diferentes, una que reproducirá cada archivo. Para el sitio web en el que estoy trabajando, me gustaría utilizar una de las etiquetas de video si el sitio web se está viendo en un dispositivo móvil, y el otro si no es así. En este momento, el sitio web está en HTML5. ¡Gracias por cualquier ayuda que puedas dar!

Answer 1

La etiqueta de video ya admite fuentes alternativas. El artículo aquí describe cómo incluir múltiples fuentes para un video (debido a que algunos navegadores no funcionan con ciertos códecs). Al igual que:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Para las comprobaciones de dispositivos móviles, puede usar las consultas de medios CSS de JavaScript:

function isMobile() {
    return window.matchMedia( "(max-width: 320px)" );
}

Ver este artículo

Answer 2

puede usar la detección basada en UserAgent para decidir qué mostrar (no se recomienda ya que tiene que mantenerla) o canPlayType() con el códec que está utilizando para ver si el navegador lo admite (mejor opción)