¿Qué significa “playsinline” en vídeo web?

Me confundí acerca de esto el otro día, anduve buscando una respuesta y no encontré nada claro. La verdad es que la respuesta es bastante clara y me siento un poco tonto por no saberla.

Con esto en su lugar, así:

video src="..." controls playsinline/video

Los navegadores móviles reproducirán el vídeo justo donde está en lugar de hacerlo de forma predeterminada, que es abrirlo en pantalla completa mientras se reproduce.

Así es como se ve pecado playsinline:

Así es como se ve con playsinline:

(Si eres como yo, intenta reproducir ese video desde el botón de reproducción del video en el video, solo para darte cuenta de que no es un botón de reproducción real. )

(Mientras obtenemos meta, me aseguro de que los videos anteriores estén playsinlineaquí en esta publicación de blog).

Tenga en cuenta que el usuario aún tiene la capacidad de ir a pantalla completa con el video incluso en el playsinlineescenario, por lo que diría que probablemente sea una opción predeterminada inteligente. No es literalmente el valor predeterminado; Debes agregarlo, pero ya sabes a qué me refiero.

Uno de los lugares donde esto aparece regularmente es en la sopa de atributos que se requiere para que el video sea un reemplazo de GIF:

video autoplay loop muted playsinline src="..."/video

Si tiene estos cuatro atributos, el vídeo se reproducirá automáticamente (y se repetirá) en los navegadores móviles, tal como lo haría un GIF, solo que con un rendimiento mucho mejor. Puedes omitirlo loopsi no lo deseas, pero los otros tres son obligatorios si deseas que funcione el atributo de reproducción automática.

También aprenderé que la (¿única?) forma de hacer que una miniatura aparezca en un dispositivo móvil (al menos para iOS) es usar un posteratributo. Incluso si lo haces preload, no verás nada más que blanco a menos que tengas un póster.

Pecado poster:

Con un poster:

video  src="movie.mov"  poster="thumbnail.jpg"   controls/videomo

Si no puede molestarse al lidiar con un póster, es posible que desee colocar algo bordero algo sobre videolos elementos para bloquear visualmente esa área. De lo contrario, el botón de reproducción flotante es un poco incómodo.