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:

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 ( Padrão: preto)

Alterar este parâmetro mudará todas as áreas acima para a cor especificada. Na captura de tela abaixo, usamos o seguinte:

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.

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.

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.

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

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%.

É importante garantir que o contêiner tenha largura e altura definidas; caso contrário, o player não terá um tamanho fixo.

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.

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.

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.

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.

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

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.

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

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.

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.

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)

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'])

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.

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).

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.

fluidPlayer(
    'my-video',
    {
        layoutControls: {
            htmlOnPauseBlock: {
                html: '<b>Paused</b>', // 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.

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.

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:

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.

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.

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, 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.

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 e 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

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.

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.

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

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.

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.

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

.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.

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.

fluidPlayer(
    'my-video',
    {
        layoutControls: {
            autoRotateFullScreen: true,
        }
    }
);