Multimedia
Imágenes, vídeos y audio
Al crear contenido en Grav, a menudo necesitas mostrar diferentes tipos de medios como imágenes, videos y varios archivos. Estos archivos son detectados y procesados automáticamente por Grav y están disponibles para usar en cualquier página. Esto es especialmente útil porque puedes aprovechar la funcionalidad incorporada para generar miniaturas, acceder a metadatos y modificar los medios dinámicamente (como redimensionar imágenes, ajustar el tamaño de visualización de videos, etc.) según tus necesidades.
Grav utiliza un sistema de caché inteligente que crea automáticamente copias en caché de los medios generados dinámicamente cuando es necesario. De esta manera, todas las solicitudes posteriores pueden usar la versión en caché en lugar de tener que regenerar el medio cada vez.
Tabla de contenido
Archivos multimedia compatibles
Los siguientes tipos de archivos multimedia son compatibles de forma nativa con Grav. Se puede agregar soporte para otros tipos de medios e incrustaciones mediante plugins.
| Tipo de Medio | Formatos de Archivo |
|---|---|
| Imagen | jpg, jpeg, png |
| Audio | mp3, wav, wma, ogg, m4a, aiff, aif |
| Imagen animada | gif |
| Imagen vectorizada | svg |
| Video | mp4, mov, m4v, swf, flv, webm, ogv |
| Datos/Información | txt, doc, docx, html, htm, pdf, zip, gz, 7z, tar, css, js, json, xml, xls, xlt, xlm, xlsm, xld, xla, xlc, xlw, xll, ppt, pps, rtf, bmp, tiff, mpeg, mpg, mpe, avi, wmv |
Puedes encontrar una lista completa de tipos MIME compatibles en el archivo system/config/media.yaml. Si hay un tipo MIME que no está soportado actualmente, simplemente puedes crear tu propio user/config/media.yaml y agregarlo allí. Solo asegúrate de seguir el mismo formato que el archivo original del system. El enfoque más simple es copiar todo el archivo original y hacer tus ediciones.
Dónde colocar tus archivos multimedia
Normalmente usarás un archivo multimedia dentro de una página, así que simplemente coloca el archivo en la carpeta de la página y podrás referenciarlo en el Markdown de la página, por ejemplo:
Si quieres colocar todas tus imágenes en una sola carpeta, puedes ponerlas en una carpeta user/pages/images. De esta manera, en Twig, puedes acceder a ellas mediante:
{% set mi_imagen = page.find('/images').media['mi-imagen.jpg'] %}y también puedes encontrarlas fácilmente mediante Markdown y realizar operaciones sobre ellas:
Alternativamente, puedes colocarlas en tu tema, ya que es fácilmente accesible mediante referencias CSS o desde un archivo Markdown usando el stream theme://:
Otra opción es user/images, donde puedes usar el stream image:// para acceder a ellas:
De hecho, puedes usar cualquier stream incluyendo cualquier carpeta dentro de user/ mediante el stream user://:
También puedes hacer este tipo de cosas usando el objeto Media de Twig:
{{ media['user://themes/mitema/images/mi-imagen.jpg'].html()|raw }}Grav tiene una carpeta /images. No coloques tus propias imágenes allí, ya que aloja imágenes generadas automáticamente por Grav en caché.
También puedes querer colocar todos los archivos multimedia en su propia carpeta, para que todos puedan ser accedidos de una vez. Por ejemplo, podrías guardar todos tus archivos MP3 en una carpeta user/pages/mp3s (no visible) y poner el nombre del archivo MP3 asociado con una página particular en un campo del encabezado llamado thistrack. Si luego deseas acceder al archivo para una página particular y reproducirlo usando el elemento de audio HTML5, necesitarás código como este:
<audio controls>
<source src="{{ page.find('/mp3s').media[page.header.thistrack~'.mp3']|e }}">
</audio>Modos de visualización
Grav proporciona algunos modos de visualización diferentes para cada tipo de objeto multimedia.
| Modo | Explicación |
|---|---|
| source | Representación visual del medio en sí, es decir, la imagen, video o archivo real |
| text | Representación textual del medio |
| thumbnail | La imagen miniatura para este objeto multimedia |
Los medios de tipo Datos/Información no soportan el modo source, por defecto usarán el modo text si no se elige explícitamente otro modo.
Ubicación de miniaturas
Grav buscará tus miniaturas en tres ubicaciones:
- En la misma carpeta que tu archivo multimedia:
[nombre-del-medio].[extensión-del-medio].thumb.[extensión-de-miniatura]dondenombre-del-medioyextensión-del-medioson respectivamente el nombre y la extensión del archivo multimedia original yextensión-de-miniaturaes cualquier extensión soportada por el tipo de medioimage. Ejemplos sonmi_video.mp4.thumb.jpgymi-imagen.jpg.thumb.png¡Solo para imágenes! La imagen misma se usará como miniatura. - Tu carpeta de usuario:
user/images/media/thumb-[extensión-del-medio].pngdondeextensión-del-medioes la extensión del archivo multimedia original. Ejemplos sonthumb-mp4.pngythumb-jpg.jpg - La carpeta del sistema:
system/images/media/thumb-[extensión-del-medio].pngdondeextensión-del-medioes la extensión del archivo multimedia original. Las miniaturas en las carpetas del sistema son proporcionadas previamente por Grav.
También puedes seleccionar manualmente la miniatura deseada con las acciones explicadas más adelante.
Enlaces y Lightboxes
Los modos de visualización anteriores también se pueden usar en combinación con enlaces y lightboxes, que se explican con más detalle más adelante. Sin embargo, es importante tener en cuenta que:
Grav no proporciona funcionalidad de lightbox de forma predeterminada, necesitas un plugin para esto. Puedes usar el plugin FeatherLight para Grav para lograrlo.
Cuando usas la funcionalidad multimedia de Grav para renderizar un lightbox, todo lo que hace Grav es generar una etiqueta anchor que tiene algunos atributos para que el plugin de lightbox los lea. Si estás interesado en usar una biblioteca de lightbox que no esté en nuestro repositorio de plugins o quieres crear tu propio plugin, puedes usar la siguiente tabla como referencia.
| Atributo | Explicación |
|---|---|
| rel | Un indicador simple de que esto no es un enlace regular, sino un enlace de lightbox. El valor siempre será lightbox. |
| href | Una URL al objeto multimedia en sí. |
| data-width | El ancho que el usuario solicitó para este lightbox. |
| data-height | El alto que el usuario solicitó para este lightbox. |
| data-srcset | En el caso de medios de imagen, esto contiene la cadena srcset. (más info) |
Acciones
Grav emplea un patrón de construcción al manejar medios, por lo que puedes realizar múltiples acciones sobre un medio particular. Algunas acciones están disponibles para todo tipo de medios, mientras que otras son específicas del medio.
Generales
Estas acciones están disponibles para todos los tipos de medios.
url
Este método está destinado solo a usarse en plantillas Twig, de ahí la falta de sintaxis Markdown.
Devuelve la ruta URL sin procesar al medio.
{{ page.media['imagen-ejemplo.jpg'].url|e }}html
En Markdown este método se llama implícitamente cuando se usa la sintaxis ![].
La acción html generará una etiqueta HTML válida para el medio basada en el modo de visualización actual.
display
Usa esta acción para cambiar entre los distintos modos de visualización que proporciona Grav. Una vez que cambias el modo de visualización, todas las acciones anteriores se reiniciarán. Las excepciones a esta regla son las acciones lightbox y link y cualquier acción que se haya usado antes de esas dos.
Por ejemplo, la miniatura resultante de llamar a page.media['imagen-ejemplo.jpg'].sepia().display('thumbnail').html() no tendrá aplicada la acción sepia(), pero page.media['imagen-ejemplo.jpg'].display('thumbnail').sepia().html() sí.
Una vez que cambias al modo miniatura, estarás manipulando una imagen. Esto significa que incluso si tu medio actual es un video, puedes usar todas las acciones de tipo imagen en la miniatura.
link
Convierte tu objeto multimedia en un enlace. Todas las acciones que llames antes de link() se aplicarán al destino del enlace, mientras que cualquier acción llamada después se aplicará a lo que se muestra en tu página.
Después de llamar a link(), Grav cambiará automáticamente el modo de visualización a thumbnail.
El siguiente ejemplo mostrará un enlace textual (display('text')) a una versión sepia del archivo imagen-ejemplo.jpg:
Solo caché
Grav se puede configurar para almacenar en caché todos los archivos de imagen, lo que puede aumentar la velocidad de entrega de los archivos. Sin embargo, las imágenes pasarán por el sistema de manipulación de imágenes de Grav, lo que puede llevar a un tamaño de archivo considerablemente mayor para imágenes que ya han sido optimizadas antes de Grav. Se puede evitar la manipulación de imágenes.
Habilita cache_all en system/config/system.yaml
images:
default_image_quality: 85
cache_all: falseDeshabilita la manipulación de imágenes con la opción cache.
lightbox
La acción lightbox es esencialmente igual que la acción link pero con algunos extras. Como se explicó anteriormente (Enlaces y Lightboxes), la acción lightbox no hará nada más que crear un enlace con algunos atributos adicionales. Se diferencia de la acción link en que agrega un atributo rel="lightbox" y acepta atributos de width y height.
Si es posible (actualmente solo en el caso de imágenes), Grav redimensionará tu medio al ancho y alto solicitados. De lo contrario, simplemente agregará un atributo data-width y data-height al enlace.
Resultado:
thumbnail
Selecciona manualmente la miniatura que Grav debe usar. Puedes elegir entre page y default para cualquier tipo de medio, así como media para medios de imagen si quieres usar el objeto multimedia en sí como tu miniatura.
Resultado:
attribute
Esto agrega un atributo HTML adicional a la salida.
Acciones para Imágenes
resize
El redimensionamiento hace exactamente lo que esperarías que hiciera. resize te permite crear una nueva imagen basada en el width y el height. Se mantiene la relación de aspecto y la nueva imagen contendrá áreas en blanco del color de fondo opcional proporcionado como un valor hexadecimal, por ejemplo 0xffffff. El parámetro de fondo es opcional, y si no se proporciona, por defecto será transparente si la imagen es PNG, o blanco si es JPEG.
Resultado:
forceResize
Redimensiona la imagen al width y height proporcionados. forceResize no respetará la relación de aspecto original y estirará la imagen según sea necesario para ajustarse al nuevo tamaño de imagen.
Resultado:
cropResize
cropResize redimensiona una imagen a un tamaño más pequeño o más grande basado en el width y el height. Se mantiene la relación de aspecto y la nueva imagen se redimensionará para encajar en el cuadro delimitador descrito por el width y height proporcionados. En otras palabras, cualquier área de fondo que verías en un resize normal se recorta.
Por ejemplo, si tienes una imagen que es 640 x 480 y realizas una acción cropResize(100, 100) sobre ella, terminarás con una imagen de 100 x 75.
Resultado:
crop
crop no redimensionará la imagen en absoluto, solo recortará la imagen original para que solo se use la porción del cuadro delimitador descrito por el width y el height que se origina en la ubicación x e y para crear la nueva imagen.
Por ejemplo, una imagen que es 640 x 480 con crop(0, 0, 400, 100) producirá una imagen con un ancho de 400 y un alto de 100 originada en la esquina superior izquierda como se describe en 0, 0.
Resultado:
cropZoom
Similar al cropResize regular, cropZoom también toma un width y un height pero redimensionará y recortará la imagen para asegurar que la imagen resultante tenga el tamaño exacto que solicitaste. Se mantiene la relación de aspecto pero partes de la imagen pueden recortarse, sin embargo la imagen resultante está centrada.
La principal diferencia entre cropResize y cropZoom es que en cropResize, la imagen se redimensiona manteniendo la relación de aspecto para que se muestre toda la imagen, y cualquier espacio extra se considera fondo.
Con cropZoom, la imagen se redimensiona para que no haya fondo visible, y el área extra de la imagen fuera del nuevo tamaño de imagen se recorta.
Por ejemplo, si tienes una imagen que es 640 x 480 y realizas una acción cropZoom(400, 100), la imagen resultante se redimensionará a 400 x 300 y luego se recortará el alto resultando en una imagen de 400 x 100.
Las personas familiarizadas con usar zoomCrop para este propósito encontrarán que también funciona en Grav.
Resultado:
quality
Permite establecer dinámicamente un porcentaje de compresión value para la imagen entre 0 y 100. Un número más bajo significa menor calidad, donde 100 significa calidad máxima.
Resultado:
negate
Aplica un filtro negativo a la imagen donde los colores se invierten.
Resultado:
brightness
Aplica un filtro de brillo a la imagen con un value de -255 a +255. Números negativos más grandes harán la imagen más oscura, mientras que números positivos más grandes la harán más brillante.
Resultado:
contrast
Esto aplica un filtro de contraste a la imagen con un value de -100 a +100. Números negativos más grandes aumentarán el contraste, mientras que números positivos más grandes lo reducirán.
grayscale
Esto procesa la imagen con un filtro de escala de grises.
Resultado:
emboss
Esto procesa la imagen con un filtro de relieve.
Resultado:
smooth
Esto aplica un filtro de suavizado a la imagen basado en el valor de suavizado value desde -10 hasta 10.
Resultado:
sharp
Esto aplica un filtro de enfoque en la imagen.
Resultado:
edge
Esto aplica un filtro de detección de bordes en la imagen.
Resultado:
colorize
Puedes colorear la imagen basada en ajustar los valores de red, green, y blue para la imagen desde -255 a +255 para cada color.
Resultado:
sepia
Esto aplica un filtro sepia en la imagen para producir un aspecto vintage.
Resultado:
gaussianBlur
Desenfoca la imagen por un Factor, que define cuántas veces se aplica el filtro de desenfoque a la imagen. Por defecto es 1 vez.
Resultado:
rotate
Rota la imagen por angle grados en sentido antihorario, valores negativos rotan en sentido horario.
Resultado:
flip
Voltea la imagen en las direcciones dadas. Ambos parámetros pueden ser 0|1. Ambos 0 equivalen a no voltear en ninguna dirección.
Resultado:
fixOrientation
Corrige la orientación de la imagen cuando se realiza rotación mediante datos EXIF (se aplica a imágenes jpeg tomadas con teléfonos y cámaras).
watermark
La acción watermark combina dos imágenes, una imagen de marca de agua y una imagen fuente, en una imagen final con marca de agua. Esta es una acción muy específica que necesita una descripción más detallada que otras acciones o filtros. En particular, se debe tener en cuenta el comportamiento específico al combinar filtros. Para aquellos interesados, hay una publicación de blog muy detallada sobre la acción watermark, escrita por Vít Petira, pero solo en checo. Sin embargo, las instrucciones son fáciles de entender.
Si estás usando un stream a nivel de página, entonces también se deben especificar los prefijos de página.
Resultado:
loading
El atributo loading en imágenes permite a los autores controlar cuándo el navegador debe comenzar a cargar el recurso. El valor para el atributo loading puede ser uno de auto (predeterminado), lazy, eager.
El valor se puede establecer en system.images.defaults.loading como valor predeterminado, o por imagen md con ?loading=lazy
Cuando se elige el valor auto, no se agrega ningún atributo loading y el navegador determinará qué estrategia usar.
decoding
El atributo decoding en imágenes permite a los autores controlar cuándo el navegador debe comenzar a decodificar el recurso. El valor para el atributo decoding puede ser uno de auto (predeterminado), sync, async.
El valor se puede establecer en system.images.defaults.decoding como valor predeterminado, o por imagen md con ?decoding=async
Cuando se elige el valor auto, no se agrega ningún atributo decoding y el navegador determinará qué estrategia usar.
fetchpriority
El atributo fetchpriority permite a los autores controlar cuándo el navegador debe priorizar la obtención de la imagen en relación con otras imágenes. El valor para el atributo fetchpriority puede ser uno de auto (predeterminado), high, low.
El valor se puede establecer en system.images.defaults.fetchpriority como valor predeterminado, o por imagen md con ?fetchpriority=high
Cuando se elige el valor auto, no se agrega ningún atributo fetchpriority y el navegador determinará qué estrategia usar.
Acciones para Imágenes Animadas/Vectorizadas
resize
Debido a que PHP no puede manejar el redimensionamiento dinámico de estos tipos de medios, la acción resize solo se asegurará de que se establezcan los atributos width y height o data-width y data-height en tu etiqueta <img>/<video> o <a> respectivamente. Esto significa que tu imagen o video se mostrará en el tamaño solicitado, pero el archivo de imagen o video real no se convertirá de ninguna manera.
ejemplos
Algunos ejemplos de esto:
Acciones para Audio
Los medios de audio mostrarán un enlace de audio HTML5:
Resultado:
controls
Permite establecer o eliminar explícitamente los controles predeterminados de HTML5. Pasar 0 oculta los controles del navegador para reproducción, volumen, etc.
preload
Permite establecer la propiedad preload, que por defecto es auto. Los parámetros permitidos son auto, metadata, y none.
Si no se establece, su valor predeterminado está definido por el navegador (es decir, cada navegador puede tener su propio valor predeterminado). La especificación recomienda que se establezca en
metadata.
El atributo preload se ignora si autoplay está presente.
autoplay
Permite establecer si el audio se reproducirá automáticamente (autoplay) al cargar la página. Por defecto es false si no se establece.
Si autoplay y preload están presentes en un elemento audio dado, preload se ignorará.
controlsList
Permite establecer la propiedad controlsList, que acepta uno o más de tres valores posibles: nodownload, nofullscreen, y noremoteplayback.
Si estableces más de un parámetro en markdown, separa cada uno con un guión (-). Estos serán reemplazados por espacios en el HTML de salida.
muted
Permite establecer si el audio está silenciado (muted) al cargar. Por defecto es false si no se establece.
loop
Permite establecer si el audio se repetirá (loop) al reproducirse hasta completarse. Por defecto es false si no se establece.
Acciones para Archivos
Grav no proporciona ninguna acción personalizada en archivos en este momento y no hay planes de agregar ninguna. Si se te ocurre algo, por favor contáctanos.
Resultado:
Combinaciones
Como puedes ver: ¡Grav proporciona una funcionalidad de manipulación de imágenes potente que hace que sea realmente fácil trabajar con imágenes! El verdadero poder viene cuando combinas múltiples efectos y produces algunas manipulaciones de imágenes dinámicas muy sofisticadas. Por ejemplo, esto es totalmente válido:
Resultado:
Reiniciando múltiples llamadas a la misma imagen
Cuando accedes a la misma imagen múltiples veces en una sola página, las acciones que has proporcionado a la imagen no se reinician por defecto. Así que si redimensionas una imagen y generas el HTML, y luego más adelante en la misma página simplemente generas la URL de la imagen, también obtendrás la URL de la imagen redimensionada. Probablemente esperabas la URL de la imagen original.
Para combatir esto, puedes reiniciar las acciones en las imágenes pasando false al método url():
{% for item in page.header.gallery %}
{% set image = page.media[item.src].cropZoom(800, 600).quality(70) %}
<a href="{{ image.url(false)|e }}">
<img src="{{ image.url|e }}" alt="{{ item.alt|e }}" title="{{ item.title|e }}" />
</a>
{% endfor %}Imágenes responsivas
Pantallas de mayor densidad
Grav tiene soporte incorporado para imágenes responsivas para pantallas de mayor densidad (por ejemplo, pantallas Retina). Grav logra esto implementando srcset de la propuesta de elemento Picture HTML. Un buen artículo para leer si quieres entender esto mejor es esta publicación de blog de Eric Portis.
Grav establece el argumento sizes mencionado en las publicaciones anteriores al ancho completo del viewport por defecto. Usa la acción sizes mostrada a continuación para elegir tú mismo.
Para comenzar a usar imágenes responsivas, todo lo que necesitas hacer es agregar imágenes de mayor densidad a tus páginas agregando un sufijo al nombre del archivo. Si solo proporcionas imágenes de mayor densidad, Grav generará automáticamente versiones de menor calidad para ti. El nombrado funciona de la siguiente manera: [nombre-imagen]@[ratio-densidad]x.[extensión-imagen], así que por ejemplo agregar imagen-ejemplo@3x.jpg a tu página resultará en que Grav cree una versión 2x y una 1x (tamaño regular) por defecto.
Estos archivos generados por Grav se almacenarán en la carpeta de caché images/, no en tu carpeta de página.
Supongamos que tienes un archivo llamado retina@2x.jpg, en realidad harías referencia a este en tus enlaces como retina.jpg, y luego Grav no encontrará esta imagen y comenzará a buscar tamaños de imagen retina. Encontrará retina@2x.jpg y luego se dará cuenta de que necesita hacer una variante @1x y mostrar la salida srcset apropiada:
Resultado:
Dependiendo de tu pantalla y la implementación y soporte de srcset de tu navegador, es posible que nunca veas una diferencia. Incluimos el marcado HTML en la tercera pestaña para que puedas ver lo que sucede detrás de escena.
Tamaños con consultas de medios
Grav también tiene soporte para consultas de medios dentro del atributo sizes, lo que te permite usar diferentes anchos dependiendo del tamaño de pantalla del dispositivo. A diferencia del primer método, no tienes que crear múltiples imágenes; se crearán automáticamente. La imagen de respaldo es la imagen actual, por lo que un navegador sin soporte para srcset mostrará la imagen original.
Resultado:
Dependiendo de tu pantalla y la implementación y soporte de srcset de tu navegador, es posible que nunca veas una diferencia. Incluimos el marcado HTML en la cuarta pestaña para que puedas ver lo que sucede detrás de escena.
Tamaños con consultas de medios usando derivados
Si deseas personalizar los tamaños de los archivos creados automáticamente, puedes usar el método derivatives() (como se muestra a continuación). El primer parámetro es el ancho de la más pequeña de las imágenes generadas. El segundo es el ancho máximo (exclusivo) de las imágenes generadas. El tercer y único parámetro opcional dicta los intervalos con los que generar las fotos (por defecto es 200). Por ejemplo, si estableces el primer parámetro en 320 y el tercero en 100, Grav generará una imagen para 320, 420, 520, 620, y así sucesivamente hasta que alcance su máximo establecido.
En nuestro ejemplo, establecemos el máximo en 1600. Esto resultará en incrementos de 300 desde 320 hasta 1520 ya que 1620 estaría por encima del umbral.
Por el momento no funciona dentro de markdown, solo en tus archivos twig.
Resultado:
Dependiendo de tu pantalla y la implementación y soporte de srcset de tu navegador, es posible que nunca veas una diferencia. Incluimos el marcado HTML en la cuarta pestaña para que puedas ver lo que sucede detrás de escena.
Definición manual de tamaños
En lugar de dejar que Grav genere los tamaños en pasos pares entre límites dados, puedes definir manualmente qué tamaños debe generar Grav:
Esto generará versiones reducidas de la imagen retina.jpg en tres anchos: 360, 720 y 1200px.
Metaarchivos
Cada medio que referencias en Grav, por ejemplo imagen1.jpg, trailer-ejemplo.mov, o incluso archivo.zip tiene la capacidad de tener variables establecidas o incluso sobrescritas mediante un metaarchivo. Estos archivos tienen el formato <nombre-archivo>.meta.yaml. Por ejemplo, para una imagen con el nombre de archivo imagen1.jpg podrías crear un metaarchivo llamado imagen1.jpg.meta.yaml.
Puedes agregar casi cualquier configuración o pieza de metadatos que desees usando este método.
El contenido de este archivo debe estar en sintaxis YAML, un ejemplo podría ser:
image:
filters:
default:
- [cropResize, 300, 300]
- sharp
alt_text: Mi Texto ALTSi estás usando este método para agregar estilos específicos del archivo o metaetiquetas para un solo archivo, querrás colocar el archivo YAML en la misma carpeta que el archivo referenciado. Esto asegurará que el archivo se incluya junto con los datos YAML. Es una forma práctica de establecer incluso metadatos específicos del archivo ya que no puedes hacerlo desde la página misma.
Digamos que solo quieres extraer el valor alt_text listado para el archivo de imagen imagen-ejemplo.jpg. Entonces crearías un archivo llamado imagen-ejemplo.jpg.meta.yaml y lo colocarías en la carpeta con el archivo de imagen referenciado. Luego, inserta los datos usados en el ejemplo anterior y guarda ese archivo YAML. En el archivo markdown de la página, puedes mostrar estos datos usando la siguiente línea:
{{ page.media['imagen-ejemplo.jpg'].meta.alt_text|e }}Esto mostrará la frase de ejemplo Mi Texto ALT en lugar de la imagen. Este es solo un ejemplo básico. Puedes usar este método para varias cosas, incluyendo crear una galería con múltiples puntos de datos únicos que deseas tener referenciados para cada imagen. Tus imágenes, en esencia, tienen un conjunto de datos únicos para ellas que pueden ser fácilmente referenciados y extraídos según sea necesario.
Opciones de Video
Las opciones de control de video en línea son otra capacidad integrada en Grav. Estas opciones, agregadas en línea con el nombre del archivo, te dan la capacidad de determinar los ajustes autoplay, controls, y loop de un video incrustado.
Aquí hay un ejemplo:
Las opciones son las siguientes:
| Atributo | Explicación |
|---|---|
| autoplay | Habilita (1) o Deshabilita (0) la reproducción automática del video al cargar la página. |
| controls | Habilita (1) o Deshabilita (0) los controles de medios para el video incrustado. |
| loop | Habilita (1) o Deshabilita (0) el bucle automático para el video, reproduciéndolo nuevamente cuando termina. |
| muted | Silencia el video y generalmente permite que se reproduzca automáticamente. |