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:

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 ( 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:

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.

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.

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.

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

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

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.

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.

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.

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.

fluidPlayer(
    'my-video',
    {
        layoutControls: {
            preload: 'auto' // Predeterminado 'auto'
        }
    }
);

mute

Establezca este parámetro en true para tener el video silenciado por defecto.

fluidPlayer(
    'my-video',
    {
        layoutControls: {
            mute: true // Predeterminado false
        }
    }
);

doubleclickFullscreen

Establezca este parámetro en true para hacer doble clic para alternar pantalla completa

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

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

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.

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.

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)

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

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

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

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.

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

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.

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:

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

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.

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

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

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.

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.

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

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.

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.

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

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

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.

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