# Layout
Há parâmetros opcionais que podem ser usados para personalizar o Fluid Player.\
Nenhuma das opções é obrigatória, mas podem ser ajustadas para melhor se adequarem ao seu próprio design.
Os controles de layout dizem respeito à funcionalidade e ao estilo do próprio player.\
A lista completa de *layoutControls* está abaixo:
```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
A cor principal afeta as seguintes áreas do Fluid Player:
* Botão de play exibido antes da reprodução do vídeo ( **Padrão:** cinza)
* Animações de reproduzir e pausar e alternância do vídeo ( **Padrão:** cinza)
* Barra de progresso da reprodução do vídeo ( **Padrão:** branco)
* Definido pelo usuário [texto do anúncio](#adtext) ( **Padrão:** preto)
Alterar este parâmetro mudará todas as áreas acima para a cor especificada.\
Na captura de tela abaixo, usamos o seguinte:
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
primaryColor: "#28B8ED"
}
}
);
```
 
### posterImage
O atributo poster para vídeos permite que uma imagem seja exibida antes de o vídeo ser reproduzido. Isso pode ser definido como um parâmetro do Fluid Player.\
Por padrão, será definido como false e não mostrará nenhuma imagem.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
posterImage: 'path/to/my/image.jpg' // Padrão false
}
}
);
```
### posterImageSize
Para alterar o tamanho da imagem de capa, você pode usar a `posterImageSize` propriedade, com os valores `cover`, `contain` ou `auto`.\
Para ler mais sobre cada valor, consulte a [página background-size do MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#values).
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
posterImageSize: 'cover' // Padrão `contain`
}
}
);
```
### playButtonShowing
Por padrão, o botão de play será exibido no meio do player. Para ocultar o botão, esta opção pode ser definida como **false**.\
Quando esta opção é definida como **false** o controle de vídeo será exibido por padrão.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
playButtonShowing: false // Padrão true
}
}
);
```
### playPauseAnimation
Há uma animação de Reproduzir / Pausar que pode ser desativada usando este parâmetro. Por padrão, este parâmetro é definido como **true**
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
playPauseAnimation: false // Padrão true
}
}
);
```
### fillToContainer
Se o Fluid Player for colocado dentro de um contêiner na sua página, você pode usar este parâmetro para preencher o tamanho desse contêiner.\
Defina este parâmetro como **true** para definir a largura e a altura como 100%.
{% hint style="warning" %}
É importante garantir que o contêiner tenha largura e altura definidas; caso contrário, o player não terá um tamanho fixo.
{% endhint %}
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
fillToContainer: true // Padrão true
}
}
);
```
### roundedCorners
Este parâmetro define os cantos arredondados do player de vídeo. Você pode passar um número ou uma string:
* **Número**: Converte automaticamente para pixels (`px`). Por exemplo, `10` torna-se `10px`.
* **String**: Pode incluir qualquer unidade CSS válida para `border-radius` (por exemplo, `%`, `em`, `rem`, `px`, etc.). Se a string puder ser interpretada como um número (por exemplo, `"10"`), o padrão será `px`.
Isso permite total flexibilidade para usar qualquer valor compatível com a propriedade `border-radius` do CSS.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
roundedCorners: 0 // Padrão 0
}
}
);
```
### autoPlay
Por padrão, este parâmetro é definido como **false**. Quando definido como **true** o vídeo será reproduzido automaticamente quando a página carregar.\
Observe que esse recurso pode não funcionar em certas versões de navegador e depende de suas políticas de reprodução automática.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
autoPlay: true // Padrão false
}
}
);
```
### preload
Define o parâmetro preload na tag video. Por padrão, este parâmetro é definido como **`'auto'`**.
Nota: Para alterar a configuração de preload para `hls.js` e `dash.js`, você precisa alterar a configuração de cada módulo.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
preload: 'auto' // Padrão 'auto'
}
}
);
```
### mute
Defina este parâmetro para **true** para ter o vídeo silenciado por padrão.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
mute: true // Padrão false
}
}
);
```
### doubleclickFullscreen
Defina este parâmetro para **true** para usar duplo clique para alternar para tela cheia
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
doubleclickFullscreen: true, // Padrão true
}
}
);
```
### subtitlesEnabled
Defina este parâmetro para **true** para ter legendas, desde que as informações de faixa sejam fornecidas. Você pode ler mais sobre legendas [aqui](/portuguese/configuracao/subtitles.md).
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
subtitlesEnabled: true, // Padrão false
}
}
);
```
### keyboardControl
Os seguintes comandos de tecla podem ser usados por **Padrão:**
* **Espaço/Enter:** Pausar/Reproduzir a reprodução do vídeo
* **Seta esquerda/direita:** Voltar/avançar 5 segundos
* **Início/Fim:** Ir para o início/fim do vídeo
* **Números 0-9:** Pular para uma seção específica do vídeo (por exemplo, 5 vai para o meio do vídeo)
* **Seta para cima/baixo:** Aumentar/Diminuir o volume em 5%
* **tecla m:** Silenciar/Ativar o som do vídeo
* **tecla f:** Ir para o modo de tela cheia
Se desejar desativar estas opções, defina *keyboardControl* para **false**
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
keyboardControl: false // Padrão true
}
}
);
```
### title
Defina este parâmetro para exibir o título no seu vídeo. Desativado por padrão.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
title: 'My video title' // Padrão false
}
}
);
```
### loop
Defina este parâmetro para que o vídeo fique em loop. Desativado por padrão.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
loop: true // Padrão false
}
}
);
```
### logo
A *logo* opção permite mostrar uma imagem sobreposta no canto do player. Há 4 opções que podem ser definidas para configurar este logo.
* **imageUrl:** O local da imagem a ser exibida. ( **Padrão:** null)
* **position:** Onde no player o logo será exibido. As opções são **top left**, **top right**, **bottom left** ou **bottom right**. ( **Padrão:** 'top left')
* **clickUrl:** Se quiser que o logo seja um link para outra página, você pode definir a página de destino com este parâmetro. ( **Padrão:** null)
* **opacity:** Isso alternará a opção de estilo de opacidade do logo. ( **Padrão:** 1)
* **mouseOverImageUrl:** Você pode especificar uma imagem separada para ser exibida ao passar o mouse sobre o logo. ( **Padrão:** null)
* **imageMargin:** A margem do logo pode ser especificada usando este parâmetro. ( **Padrão:** '2px')
* **hideWithControls:** Se quiser que o logo apareça apenas junto com os controles de vídeo, você pode definir este parâmetro como **true**. ( **Padrão:** false)
* **showOverAds:** Por padrão, o logo não será exibido durante anúncios in-stream, mas você pode especificar que o logo seja exibido durante os anúncios usando este parâmetro. ( **Padrão:** false)
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
logo: {
imageUrl: 'https://www.routetomylogo.com/logo.jpg', // Padrão null
position: 'top right', // Padrão 'top left'
clickUrl: 'https://www.landingpage.com/welcome', // Padrão null
opacity: 0.8, // Padrão 1
mouseOverImageUrl: 'image/on/hover.jpg', // Padrão null
imageMargin: '10px', // Padrão '2px'
hideWithControls: true, // Padrão false
showOverAds: 'true' // Padrão false
}
}
}
);
```
### controlBar
A barra de controle será ocultada quando o mouse ficar inativo após um certo período de tempo.\
Há três opções para este parâmetro:
* **autoHide:** Configure se deve ou não ocultar os controles. ( **Padrão:** false)
* **autoHideTimeout:** Quanto tempo, em segundos, antes que os controles sejam ocultados. ( **Padrão:** 3)
* **animated:** Se definido como false, os controles desaparecem instantaneamente. True por padrão, o que significa que os controles desaparecem gradualmente. ( **Padrão:** true)
* **playbackRates:** Permite personalizar as taxas de reprodução. Se `playbackRateEnabled` definido como `true` as opções disponíveis podem ser definidas com esta propriedade. ( **Padrão:**`['x2', 'x1.5', 'x1', 'x0.5']`)
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
controlBar: {
autoHide: true, // Padrão false
autoHideTimeout: 5, // Padrão 3
animated: false, // Padrão true
playbackRates: ['x2', 'x1']
}
}
}
);
```
### timelinePreview
A pré-visualização em miniatura é discutida com mais detalhes [aqui](/portuguese/configuracao/previews.md).
Define a pré-visualização da linha do tempo, visível ao passar o mouse sobre a barra de progresso.\
O arquivo fornecido contém as imagens em miniatura usadas para a pré-visualização.\
O tipo define o formato do arquivo. Atualmente, apenas o formato VTT é suportado.\
A pré-visualização da linha do tempo só funciona se o layout padrão for escolhido (veja acima).
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
timelinePreview: {
file: 'thumbnails.vtt',
type: 'VTT'
}
}
}
);
```
### htmlOnPauseBlock
HTML definido para ser exibido no centro do player quando o usuário pausa o vídeo. Nota: clicar na área HTML aciona um evento de reprodução.\
Se você não precisar desse comportamento, adicione **e.stopPropagation()** ao seu evento. Há três opções para este parâmetro.
* **html:** O HTML a ser exibido.
* **height:** A altura do HTML a ser exibido. Uma representação inteira do tamanho em pixels.
* **width:** A largura do HTML a ser exibido. Uma representação inteira do tamanho em pixels.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
htmlOnPauseBlock: {
html: 'Paused', // Padrão null
height: 50, // Padrão null
width: 100 // Padrão null
}
}
}
);
```
### layout
O layout padrão é **default**. Ele fornece sua própria skin ao player.\
Opcionalmente, você pode definir seu próprio layout personalizado com CSS.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
layout: 'default' // Padrão 'default'
}
}
);
```
### allowDownload
Falso por padrão, esta opção permitirá que os usuários baixem o vídeo exibido no Fluid Player.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
allowDownload: true // Padrão false
}
}
);
```
### playbackRateEnabled
O Fluid Player permite que os usuários alterem a taxa / velocidade de reprodução do vídeo. Por padrão, esta opção está desativada.\
Para ativar esta opção, use o seguinte:
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
playbackRateEnabled: true // Padrão false
}
}
);
```
Observe que a personalização das taxas de reprodução é permitida com `layoutControls.controlBar.playbackRates` do CSS. [Veja os detalhes aqui.](#controlBar)
### allowTheatre
O modo teatro altera o tamanho do player, exibindo em vez disso um player com largura de tela cheia e 60% da altura da tela.\
Isso sobrepõe qualquer coisa atrás do player, mas permite que os usuários rolem a página normalmente. Ele está ativado por padrão, mas pode ser definido como false.\
O modo teatro será ocultado se o Fluid Player for carregado em um iframe.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
allowTheatre: false // Padrão true
}
}
);
```
### theatreAdvanced
O modo teatro padrão foi projetado para ser o mais genérico possível. Se você deseja implementar uma solução mais personalizada para o modo teatro, isso fornece uma maneira de fazê-lo.\
Você pode especificar o id de um elemento na página, provavelmente uma div contêiner na qual o player está, e uma classe a ser aplicada a ele quando o modo teatro estiver ativado.\
Se o elemento não puder ser encontrado, o modo teatro padrão será ativado.
Um cenário de exemplo; o player é colocado em um contêiner na página, definido como [fillToContainer](#filltocontainer), que você deseja expandir no modo teatro.\
Você passa o id desse contêiner e a classe a ser aplicada a ele. Esta classe pode ter CSS aplicado, o que alterará o contêiner e, portanto, o próprio player.\
Quando o modo teatro é ativado, a classe é aplicada ao contêiner pai e removida adequadamente.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
theatreAdvanced: { // padrão false
theatreElement: 'container-id',
classToApply: 'my-theatre-class'
}
}
}
);
```
Como o modo teatro frequentemente requer que outros elementos na página se movam / ocultem, adicionamos eventos de escuta para [theatreModeOn](/portuguese/api/event-api.md#theatremodeon) e [theatreModeOff](/portuguese/api/event-api.md#theatremodeoff).\
Isso permite executar facilmente funcionalidades adicionais ao alternar o modo teatro.
### theatreSettings
As dimensões e o alinhamento do player enquanto está no modo teatro são configuráveis.\
O **width** e **height** podem ser especificados em **%** ou **px**. Os padrões para essas configurações são 100% e 60%, respectivamente.\
O **marginTop** será o valor em pixels do espaço entre o topo da tela e o player, que é 0 por padrão.\
**align** pode ser usado para posicionar o player à esquerda **left**, **right** ou **center**, por padrão **center**
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
theatreSettings: {
width: '60%', // Padrão '100%'
height: '400px', // Padrão '60%'
marginTop: 50, // Padrão 0
horizontalAlign: 'center' // 'left', 'right' ou 'center'
}
}
}
);
```
### playerInitCallback
Esta função de retorno de chamada pode ser usada para executar código personalizado quando o player for inicializado.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
playerInitCallback: (function() { console.log('player loaded!') })
}
}
);
```
### persistentSettings
Se um usuário alterar o **volume**, **qualidade**, **velocidade** ou **modo teatro** do vídeo, essas configurações permanecerão nas cargas de página seguintes do player.\
Se você não quiser que essas configurações permaneçam para o usuário, você pode defini-las como false, como mostrado abaixo.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
persistentSettings: {
volume: false, // Padrão true
quality: false, // Padrão true
speed: false, // Padrão true
theatre: false // Padrão true
}
}
}
);
```
### captions
Esta opção permite personalizar a legenda padrão dos botões de controle.
* 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**: O objeto captions fica na raiz das opções de configuração do Fluid Player, **não** em `layoutControls`.
### controlForwardBackward
Esta opção de configuração permite escolher se você deseja mostrar "botões de pular", permitindo aos usuários\
avançar / rever rapidamente o conteúdo do vídeo.
Você também pode ativar/desativar o toque duplo para mover o vídeo para trás / para frente em 10 segundos em dispositivos touch, definindo o\
`doubleTapMobile` do CSS.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
controlForwardBackward: {
show: true, // Padrão: false,
doubleTapMobile: false // Padrão: true
}
}
}
);
```
### contextMenu
A opção de configuração do menu de contexto permite controlar o menu de contexto integrado do player. Há duas\
opções de configuração dentro deste bloco de configuração.
* `controls` - uma opção booleana para ativar ou desativar os controles de reprodução padrão\
no menu de contexto.
* `links` - uma lista de objetos contendo `href` propriedade para indicar a URL de destino e uma `label` propriedade\
para indicar o rótulo exibido do link.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
contextMenu: {
controls: true,
links: [
{
href: 'https://wikipedia.org',
label: 'Wikipedia'
}
]
}
}
}
);
```
### Estilo de ícones personalizados
Você pode substituir os ícones padrão usando CSS.
* play
* pause
* volume
* mute
* fonte do vídeo
* modo de tela cheia
* sair do modo de tela cheia
* taxa de reprodução
* download
* modo teatro
```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;
} /* reproduzir */
.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;
} /* volume */
.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;
} /* fonte do vídeo */
.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 de tela cheia */
.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;
} /* sair do modo de tela cheia*/
.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;
} /* taxa de reprodução */
.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;
} /* download */
.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 teatro */
```
### miniPlayer
O Fluid Player possui um modo Mini Player dedicado que pode ser ativado ao pressionar `i` no teclado ou ao clicar\
no botão Mini Player na barra de controle do vídeo.
Quando ativado, o Mini Player aparece no canto da tela e acompanha a página enquanto o usuário rola.
A `miniPlayer` objeto pode ser usado para alterar o comportamento do Mini Player. Você pode ativar ou desativar o Mini\
Player alternando o `enabled` do CSS.
A `width` e `height` propriedades podem ser usadas para alterar o tamanho do Mini Player. Em dispositivos móveis, o Mini\
Player usa o `widthMobile` do CSS.
O texto do elemento de espaço reservado que aparece onde o player estava quando o Mini Player é ativado pode ser alterado por\
`placeholderText` do CSS.
A `position` a propriedade altera o canto da tela em que o Mini Player aparecerá.
A `autoToggle` a propriedade faz com que o Mini Player seja ativado assim que o player de vídeo principal sair da tela.
A seguir está um exemplo de configuração com os **valores padrão** para `miniPlayer`.
```javascript
fluidPlayer(
'my-video',
{
layoutControls: {
miniPlayer: {
enabled: true,
width: 400, // unidade px
height: 225, // unidade px
widthMobile: 40, // unidade vw
placeholderText: 'Playing in Miniplayer',
position: 'bottom right', // 'top left', 'top right', 'bottom left', 'bottom right'
autoToggle: false,
}
}
}
);
```
### Paisagem automática para dispositivos móveis (somente iOS)
Defina um modo de tela cheia automático no player para visualização em paisagem em dispositivos móveis. Isso é aplicável somente quando o player estiver visível.
```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/portuguese/configuracao/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.