# Diseño
Hay parámetros opcionales que pueden usarse para personalizar Fluid Player.\
Ninguna de las opciones es obligatoria, pero pueden ajustarse para adaptarse mejor a tu propio diseño.
Los controles de diseño se relacionan con la funcionalidad y el estilo del propio reproductor.\
La lista completa de *layoutControls* está a continuación:
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
primaryColor: false,
playButtonShowing: true,
playPauseAnimation: true,
fillToContainer: false,
autoPlay: false,
preload: false,
mute: false,
doubleclickFullscreen: true,
subtitlesEnabled: false,
keyboardControl: true,
layout: 'default',
allowDownload: false,
playbackRateEnabled: false,
allowTheatre: true,
title: false,
loop: false,
roundedCorners: 0,
logo: {
imageUrl: null,
position: 'top left',
clickUrl: null,
opacity: 1
},
controlBar: {
autoHide: true,
autoHideTimeout: 3,
animated: true,
playbackRates: ['x2', 'x1.5', 'x1', 'x0.5']
},
timelinePreview: {},
htmlOnPauseBlock: {
html: null,
height: null,
width: null
},
playerInitCallback: (function() {}),
miniPlayer: {
enabled: true,
width: 400,
height: 225
},
autoRotateFullScreen: false,
}
}
);
```
### primaryColor
El color principal afecta las siguientes áreas de Fluid Player:
* Botón de reproducir que se muestra antes de la reproducción del video ( **Predeterminado:** gris)
* Animaciones de reproducir y pausar y alternancia del video ( **Predeterminado:** gris)
* Barra de progreso de reproducción del video ( **Predeterminado:** blanco)
* Definido por el usuario [texto del anuncio](#adtext) ( **Predeterminado:** negro)
Cambiar este parámetro cambiará todas las áreas anteriores al color especificado.\
En la captura de pantalla de abajo hemos usado lo siguiente:
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
primaryColor: "#28B8ED"
}
}
);
```
 
### posterImage
El atributo poster para los videos permite que se muestre una imagen antes de que el video se reproduzca. Esto puede configurarse como un parámetro de Fluid Player.\
De forma predeterminada se establecerá en false y no mostrará ninguna imagen.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
posterImage: 'path/to/my/image.jpg' // Predeterminado false
}
}
);
```
### posterImageSize
Para cambiar el tamaño de la imagen del póster puedes usar la `posterImageSize` propiedad, con los valores `cover`, `contain` our `auto`.\
Para leer más sobre cada valor, consulta la [página de MDN de background-size](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#values).
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
posterImageSize: 'cover' // Predeterminado `contain`
}
}
);
```
### playButtonShowing
Por defecto, el botón de reproducir se mostrará en el centro del reproductor. Para ocultar el botón, esta opción puede establecerse en **false**.\
Cuando esta opción se establece en **false** los controles del video se mostrarán por defecto.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
playButtonShowing: false // Predeterminado true
}
}
);
```
### playPauseAnimation
Hay una animación de reproducir / pausar que puede desactivarse usando este parámetro. Por defecto, este parámetro está establecido en **true**
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
playPauseAnimation: false // Predeterminado true
}
}
);
```
### fillToContainer
Si Fluid Player se coloca dentro de un contenedor en tu página, puedes usar este parámetro para ajustarlo al tamaño de ese contenedor.\
Establece este parámetro en **true** para fijar el ancho y el alto al 100%.
{% hint style="warning" %}
Es importante asegurarse de que el contenedor tenga un ancho y un alto definidos; de lo contrario, el reproductor no tendrá un tamaño fijo.
{% endhint %}
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
fillToContainer: true // Predeterminado true
}
}
);
```
### roundedCorners
Este parámetro define las esquinas redondeadas del reproductor de video. Puedes pasar un número o una cadena:
* **Número**: Se convierte automáticamente en píxeles (`px`). Por ejemplo, `10` se convierte en `10px`.
* **Cadena**: Puede incluir cualquier unidad CSS válida para `border-radius` (por ejemplo, `%`, `em`, `rem`, `px`, etc.). Si la cadena puede analizarse como un número (por ejemplo, `"10"`), se usa por defecto `px`.
Esto permite total flexibilidad para usar cualquier valor compatible con la `border-radius` propiedad CSS.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
roundedCorners: 0 // Predeterminado 0
}
}
);
```
### autoPlay
Por defecto, este parámetro está establecido en **false**. Cuando se establece en **true** el video se reproducirá automáticamente cuando la página cargue.\
Ten en cuenta que esta función puede no funcionar en ciertas versiones del navegador y depende de sus políticas de reproducción automática.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
autoPlay: true // Predeterminado false
}
}
);
```
### preload
Establece el parámetro preload en la etiqueta de video. Por defecto, este parámetro está establecido en **`'auto'`**.
Nota: Para cambiar la configuración de preload de `hls.js` y `dash.js`, debes cambiar la configuración de cada módulo.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
preload: 'auto' // Predeterminado 'auto'
}
}
);
```
### mute
Establezca este parámetro en **true** para tener el video silenciado por defecto.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
mute: true // Predeterminado false
}
}
);
```
### doubleclickFullscreen
Establezca este parámetro en **true** para hacer doble clic para alternar pantalla completa
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
doubleclickFullscreen: true, // Predeterminado true
}
}
);
```
### subtitlesEnabled
Establezca este parámetro en **true** para tener subtítulos, siempre que se proporcione información de pista. Puedes leer más sobre los subtítulos [aquí](/es/configuracion/subtitles.md).
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
subtitlesEnabled: true, // Predeterminado false
}
}
);
```
### keyboardControl
Los siguientes comandos de teclas pueden ser usados por **Predeterminado:**
* **Espacio/Enter:** Pausar/Reproducir la reproducción del video
* **Flecha izquierda/derecha:** Retroceder/avanzar 5 segundos
* **Inicio/Fin:** Ir al comienzo/final del video
* **Números 0-9:** Saltar a una sección concreta del video (por ejemplo, 5 va al punto medio del video)
* **Flecha arriba/abajo:** Aumentar/Disminuir el volumen 5%
* **tecla m:** Silenciar/activar el sonido del video
* **tecla f:** Ir al modo de pantalla completa
Si deseas desactivar estas opciones, establece *keyboardControl* a **false**
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
keyboardControl: false // Predeterminado true
}
}
);
```
### title
Establece este parámetro para que el título se muestre en tu video. Deshabilitado por defecto.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
title: 'My video title' // Predeterminado false
}
}
);
```
### loop
Establece este parámetro para que el video se repita en bucle. Deshabilitado por defecto.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
loop: true // Predeterminado false
}
}
);
```
### logo
La *logo* opción te permite mostrar una imagen superpuesta en la esquina del reproductor. Hay 4 opciones que pueden configurarse para este logo.
* **imageUrl:** La ubicación de la imagen que se mostrará. ( **Predeterminado:** null)
* **position:** Dónde en el reproductor se mostrará el logo. Las opciones son **top left**, **top right**, **bottom left** o **bottom right**. ( **Predeterminado:** 'top left')
* **clickUrl:** Si quieres que el logo sea un enlace a otra página, puedes establecer la página de destino con este parámetro. ( **Predeterminado:** null)
* **opacity:** Esto alternará la opción de estilo de opacidad del logo. ( **Predeterminado:** 1)
* **mouseOverImageUrl:** Puedes especificar una imagen aparte para mostrar al pasar el ratón sobre el logo. ( **Predeterminado:** null)
* **imageMargin:** El margen del logo puede especificarse usando este parámetro. ( **Predeterminado:** '2px')
* **hideWithControls:** Si quieres que el logo aparezca solo junto con los controles del video, puedes establecer este parámetro en **true**. ( **Predeterminado:** false)
* **showOverAds:** El logo no se mostrará durante los anuncios insertados en el flujo por defecto, pero puedes especificar que se muestre durante los anuncios usando este parámetro. ( **Predeterminado:** false)
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
logo: {
imageUrl: 'https://www.routetomylogo.com/logo.jpg', // Predeterminado null
position: 'top right', // Predeterminado 'top left'
clickUrl: 'https://www.landingpage.com/welcome', // Predeterminado null
opacity: 0.8, // Predeterminado 1
mouseOverImageUrl: 'image/on/hover.jpg', // Predeterminado null
imageMargin: '10px', // Predeterminado '2px'
hideWithControls: true, // Predeterminado false
showOverAds: 'true' // Predeterminado false
}
}
}
);
```
### controlBar
La barra de controles se ocultará cuando el mouse esté inactivo después de cierto tiempo.\
Hay tres opciones para este parámetro:
* **autoHide:** Configura si ocultar o no los controles. ( **Predeterminado:** false)
* **autoHideTimeout:** Cuánto tiempo, en segundos, antes de que los controles se oculten. ( **Predeterminado:** 3)
* **animated:** Si se establece en false, los controles desaparecen instantáneamente. True por defecto significará que los controles se desvanecen. ( **Predeterminado:** true)
* **playbackRates:** Permite personalizar las velocidades de reproducción. Si `playbackRateEnabled` se establece en `true` las opciones disponibles pueden configurarse con esta propiedad. ( **Predeterminado:**`['x2', 'x1.5', 'x1', 'x0.5']`)
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
controlBar: {
autoHide: true, // Predeterminado false
autoHideTimeout: 5, // Predeterminado 3
animated: false, // Predeterminado true
playbackRates: ['x2', 'x1']
}
}
}
);
```
### timelinePreview
La vista previa en miniatura se trata más [aquí](/es/configuracion/previews.md).
Establece la vista previa de la línea de tiempo, visible al pasar el cursor sobre la barra de progreso.\
El archivo proporcionado contiene las imágenes en miniatura usadas para la vista previa.\
El tipo establece el formato del archivo. Actualmente solo se admite el formato VTT.\
La vista previa de la línea de tiempo solo funciona si se elige el diseño predeterminado (ver arriba).
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
timelinePreview: {
file: 'thumbnails.vtt',
type: 'VTT'
}
}
}
);
```
### htmlOnPauseBlock
HTML definido para mostrarse en el centro del reproductor cuando el usuario pausa el video. Nota: al hacer clic en el área HTML se activa un evento de reproducción.\
Si no necesitas ese comportamiento, añade **e.stopPropagation()** a tu evento. Hay tres opciones para este parámetro.
* **html:** El HTML a mostrar.
* **height:** La altura del HTML a mostrar. Una representación entera del tamaño en píxeles.
* **width:** El ancho del HTML a mostrar. Una representación entera del tamaño en píxeles.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
htmlOnPauseBlock: {
html: 'Paused', // Predeterminado null
height: 50, // Predeterminado null
width: 100 // Predeterminado null
}
}
}
);
```
### layout
El diseño predeterminado es **default**. Proporciona su propia apariencia al reproductor.\
Opcionalmente, puedes definir tu propio diseño personalizado con CSS.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
layout: 'default' // Predeterminado 'default'
}
}
);
```
### allowDownload
False por defecto, esta opción permitirá a los usuarios descargar el video mostrado en Fluid Player.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
allowDownload: true // Predeterminado false
}
}
);
```
### playbackRateEnabled
Fluid Player permite a los usuarios cambiar la velocidad de reproducción / rapidez del video. Por defecto, esta opción está deshabilitada.\
Para habilitar esta opción usa lo siguiente:
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
playbackRateEnabled: true // Predeterminado false
}
}
);
```
Ten en cuenta que la personalización de las velocidades de reproducción está permitida con `layoutControls.controlBar.playbackRates` propiedad CSS. [Consulta los detalles aquí.](#controlBar)
### allowTheatre
El modo cine modifica el tamaño del reproductor, mostrando en su lugar un reproductor a ancho completo y con 60% de altura de pantalla.\
Esto se superpone a lo que haya detrás del reproductor, pero permite a los usuarios desplazarse por la página con normalidad. Está habilitado por defecto, pero puede establecerse en false.\
El modo cine se ocultará si Fluid Player se carga en un iframe.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
allowTheatre: false // Predeterminado true
}
}
);
```
### theatreAdvanced
El modo cine predeterminado está diseñado para ser lo más genérico posible. Si deseas implementar una solución más personalizada para el modo cine, esto proporciona una forma de hacerlo.\
Puedes especificar el id de un elemento en la página, muy probablemente un div contenedor donde está el reproductor, y una clase que se le aplicará cuando el modo cine esté habilitado.\
Si no se encuentra el elemento, se activará el modo cine predeterminado.
Un escenario de ejemplo; el reproductor está colocado en un contenedor de la página, establecido en [fillToContainer](#filltocontainer), que deseas expandir en modo cine.\
Pasas el id de ese contenedor y la clase que debe aplicarse. Esta clase puede tener CSS aplicado que modificará el contenedor y, por tanto, el propio reproductor.\
Cuando se pulsa el modo cine, la clase se aplica y se elimina del contenedor padre según corresponda.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
theatreAdvanced: { // predeterminado false
theatreElement: 'container-id',
classToApply: 'my-theatre-class'
}
}
}
);
```
Como el modo cine a menudo requiere que otros elementos de la página se muevan / oculten, hemos añadido eventos de escucha para [theatreModeOn](/es/api/event-api.md#theatremodeon) y [theatreModeOff](/es/api/event-api.md#theatremodeoff).\
Esto te permite ejecutar fácilmente funcionalidad adicional al alternar el modo cine.
### theatreSettings
Las dimensiones y la alineación del reproductor mientras está en modo cine son configurables.\
El **width** y **height** pueden especificarse en cualquiera de **%** o **px**. Los valores predeterminados para estos ajustes son 100% y 60% respectivamente.\
El **marginTop** será el valor en píxeles del espacio entre la parte superior de la pantalla y el reproductor, que por defecto es 0.\
**align** puede usarse para alinear el reproductor **left**, **right** o **center**, por defecto **center**
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
theatreSettings: {
width: '60%', // Predeterminado '100%'
height: '400px', // Predeterminado '60%'
marginTop: 50, // Predeterminado 0
horizontalAlign: 'center' // 'left', 'right' o 'center'
}
}
}
);
```
### playerInitCallback
Esta función de devolución de llamada puede usarse para ejecutar código personalizado cuando se inicializa el reproductor.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
playerInitCallback: (function() { console.log('player loaded!') })
}
}
);
```
### persistentSettings
Si un usuario cambia el **volumen**, **calidad**, **velocidad** o **modo cine** de este video, estos ajustes persistirán en las siguientes cargas de página del reproductor.\
Si no quieres que estos ajustes persistan para el usuario, puedes establecerlos en false, como se muestra abajo.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
persistentSettings: {
volume: false, // Predeterminado true
quality: false, // Predeterminado true
speed: false, // Predeterminado true
theatre: false // Predeterminado true
}
}
}
);
```
### captions
Esta opción te permite personalizar la leyenda predeterminada de los botones de control.
* play
* pause
* mute
* unmute
* fullscreen
* exit fullscreen
```javascript
fluidPlayer(
'my-video',
{
captions: {
play: 'Play',
pause: 'Pause',
mute: 'Mute',
unmute: 'Unmute',
fullscreen: 'Fullscreen',
exitFullscreen: 'Exit Fullscreen'
}
}
);
```
**Nota**: El objeto captions está en la raíz de las opciones de configuración de Fluid Player, **no** en `layoutControls`.
### controlForwardBackward
Estas opciones de configuración te permiten elegir si deseas mostrar "botones de salto" que permitan a los usuarios\
adelantar / volver a reproducir rápidamente el contenido del video.
También puedes activar o desactivar el doble toque para mover el video 10 segundos hacia atrás / adelante en dispositivos táctiles configurando el\
`doubleTapMobile` propiedad CSS.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
controlForwardBackward: {
show: true, // Predeterminado: false,
doubleTapMobile: false // Predeterminado: true
}
}
}
);
```
### contextMenu
La opción de configuración del menú contextual te permite controlar el menú contextual integrado del reproductor. Hay dos opciones de configuración\
incluidas en este bloque de configuración.
* `controls` - una opción booleana para habilitar o deshabilitar los controles de reproducción predeterminados\
en el menú contextual.
* `links` - una lista de objetos que contiene `href` propiedad para indicar la URL de destino y una `label` propiedad\
para indicar la etiqueta mostrada del enlace.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
contextMenu: {
controls: true,
links: [
{
href: 'https://wikipedia.org',
label: 'Wikipedia'
}
]
}
}
}
);
```
### Estilo de iconos personalizados
Puedes reemplazar los iconos predeterminados usando CSS.
* play
* pause
* volumen
* mute
* fuente de video
* modo pantalla completa
* salir del modo pantalla completa
* velocidad de reproducción
* descargar
* modo cine
```css
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_play:before {
background: url(/images/example.svg) no-repeat !important;
background-position: 0px 0px !important;
} /* reproducir */
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_pause:before {
background: url(/images/example.svg) no-repeat !important;
background-position: 0px 0px !important;
} /* pausar */
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_volume:before {
background: url(/images/example.svg) no-repeat !important;
background-position: 0px 0px !important;
} /* volumen */
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_mute:before {
background: url(/images/example.svg) no-repeat !important;
background-position: 0px 0px !important;
} /* silenciar */
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_video_source:before {
background: url(/images/example.svg) no-repeat !important;
background-position: 0px 0px !important;
} /* fuente de video */
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_fullscreen:before {
background: url(/images/example.svg) no-repeat !important;
background-position: 0px 0px !important;
} /* modo pantalla completa */
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_fullscreen_exit:before {
background: url(/images/example.svg) no-repeat !important;
background-position: 0px 0px !important;
} /* salir del modo pantalla completa*/
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_playback_rate:before {
background: url(/images/example.svg) no-repeat !important;
background-position: 0px 0px !important;
} /* velocidad de reproducción */
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_download:before {
background: url(/images/example.svg) no-repeat !important;
background-position: 0px 0px !important;
} /* descargar */
.fluid_video_wrapper.fluid_player_layout_default .fluid_controls_container .fluid_button.fluid_button_theatre:before {
background: url(/images/example.svg) no-repeat !important;
background-position: 0px 0px !important;
} /* modo cine */
```
### miniPlayer
Fluid Player tiene un modo Mini Player dedicado que puede activarse pulsando `i` en el teclado, o haciendo clic\
en el botón Mini Player de la barra de controles del video.
Cuando se activa, el Mini Player aparece en la esquina de la pantalla y sigue la página a medida que el usuario se desplaza.
La `miniPlayer` el objeto puede usarse para cambiar el comportamiento del Mini Player. Puedes habilitar o deshabilitar el Mini\
Player alternando la `enabled` propiedad CSS.
La `width` y `height` las propiedades pueden usarse para cambiar el tamaño del Mini Player. En dispositivos móviles, el Mini\
Player usa la `widthMobile` propiedad CSS.
El texto del elemento de marcador de posición que aparece donde estaba el reproductor cuando se alterna el Mini Player puede cambiarse mediante el `placeholderText` propiedad CSS.
La `position` la propiedad cambia la esquina de la pantalla en la que aparecerá el Mini Player.
La `autoToggle` la propiedad hace que el Mini Player se active tan pronto como el reproductor de video principal sale de la pantalla.
A continuación se muestra un ejemplo de configuración con los **valores predeterminados** para `miniPlayer`.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
miniPlayer: {
enabled: true,
width: 400, // unidad px
height: 225, // unidad px
widthMobile: 40, // unidad vw
placeholderText: 'Reproduciendo en Miniplayer',
position: 'bottom right', // 'top left', 'top right', 'bottom left', 'bottom right'
autoToggle: false,
}
}
}
);
```
### Cambio automático a paisaje para móviles (solo iOS)
Establece un modo de pantalla completa automático en el reproductor para la vista en paisaje en dispositivos móviles. Esto solo es aplicable cuando el reproductor está visible.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
autoRotateFullScreen: true,
}
}
);
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.fluidplayer.com/es/configuracion/layout.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.