Apple ha relajado recientemente las reglas y ahora puede reproducir un video inline en lugar de reproducirlo en pantalla completa. También es posible hacer que se reproduzcan automáticamente (con una pequeña advertencia que mencionaré más adelante).

Aquí está la implementación más simple

<video playsinline>
  <source src="video.mp4">
</video>

Esto agregará un video a la página, como es de esperar, pero cuando el usuario haga clic en reproducir, permanecerá en la página en lugar de pasar a pantalla completa.

Probablemente notará que el video todavía no se reproducirá automáticamente. Para que eso funcione, también deberás configurar tu video para que se silencie. Es una restricción sensata; a nadie le gusta reproducir en voz alta nada en la web. Google silenciará los videos de forma predeterminada en la próxima versión de Chrome, por lo que es algo a lo que tendremos que acostumbrarnos.

<video playsinline muted>
  <source src="video.mp4">
</video>

Si no necesita audio, entonces es aún más simple y no necesita hacer mucho. Esto es perfecto para elementos de video de fondo o “gifs” animados.

El gran aumento en la popularidad del .gif animado es una de las principales razones por las que este cambio se realizó en primer lugar: los elementos de video usan menos CPU y tienen tamaños de archivo mucho más pequeños.

En esa publicación, esta es la mejor manera de replicar el comportamiento del gif animado de confianza en una página web utilizando un elemento de video.

<video autoplay loop muted playsinline>
  <source src="animation.mp4">
  <img src="animation.gif">
</video>

Esperemos que esto ahorre a todos los datos y la vida útil de la batería a medida que más sitios implementen este enfoque más moderno.

Como un ultimo punto de esta publicación la etiqueta inline funciona correctamente con videos alojados en nuestro servidor o cdn externo, sin embargo; no funciona para video streaming en un webview de iOS.

He encontrado la solución para iOS, en este post explico como:

Play Video Inline iOS