Despellejar al reproductor

Puede usar la siguiente información para ayudarlo a despellejar al reproductor. Para cada construcción visual, los comportamientos correspondientes se mencionan en el comportamiento predeterminado.

IMPORTANTE

Los detalles de desollado de este documento son para los elementos de interfaz de usuario predeterminados que crea el marco de trabajo de la interfaz de usuario. Si el reproductor ha modificado estos elementos, también es necesario cambiar los elementos de desollado.

Divisas de contenedor

Estos son los estilos para los divs de contenedor:

SUGERENCIA

Estos divs se enumeran en la common-styles.css archivo.

Estos son los estilos para el div principal:

Estilo Descripción

Div principal

.ptp-main-video-div-style

Estilo del div principal en el que se reproduce el vídeo.

.pip-mode-active

Se utiliza cuando el modo PIP está activo.

El comportamiento predeterminado es videoBehavior.

Imagen en imagen (PIP)

.ptp-pip-video-div

Estilo del div en el que se reproduce el vídeo PIP.

.view-as-main-video

Se aplica a la PIP inicial cuando se ha intercambiado y se muestra como vídeo principal.

Vista de varios vídeos

.ptp-multi-view-container

Se utiliza en la vista de varios vídeos.

.ptp-multi-view-view

Un estilo css común que se coloca en cada vídeo de la vista múltiple.

.multiview

Cuando el contenedor que aloja cada uno de los vídeos en vista multivariable está en vista multivariable.

Varios controles

Estos son los estilos para los controles de reproductor genéricos:

SUGERENCIA

Estos estilos se enumeran en la variable default-controls.css archivo.

Estilo Descripción
ptp-control

Aplicable a todos los controles de la barra de control, excepto al depurador y al espacio

ptp-input-slider

Reguladores de entrada

ptp-panel-header

Encabezado de los paneles

ptp-vertical-list-menu-item

Lista de menús en estilo vertical

ptp-fill-spacer

Espacio en la barra de control

ptp-hr-separator

Separador de reglas horizontales

ptp-panel-title

Título de los paneles

ptp-panel-close-btn

Botón para cerrar el panel

ptp-button-background

Fondo de todos los botones

ptp-txt-control

Estilos predeterminados para los controles de texto.

Barra de control

Estos son los estilos de la barra de control:

Estilo Descripción
ptp-control-bar (comportamiento predeterminado)

Aplicable para la barra de control

Botones de función

NOTA

Las letras de las tablas siguientes corresponden a las letras de esta ilustración.

Estos son los estilos de la barra de desplazamiento:

Estilo (A) Descripción
ptp-scrub-bar

Barra de desplazamiento en la barra de control

ptp-scrub-bar .ptp-buffer-progress-bar

Barra de progreso del búfer en la barra de desplazamiento

ptp-scrub-bar .ptp-seek-to-bar

Estado de la barra de desplazamiento cuando el usuario realiza una búsqueda en ella

ptp-scrub-bar .ptp-playback-progress-bar

Estado de la barra de desplazamiento en la reproducción normal

ptp-scrub-bar .ptp-progress-bar-play-head

Reproducir la cabeza en la barra de desplazamiento mientras se reproduce

ptp-scrub-bar .ptp-ad-marker-bar

Barra de marcador de anuncio

ptp-scrub-bar .ptp-ad-marker

Marcador de anuncio

Los comportamientos predeterminados son:

  • scrubBarBehavior
  • bufferProgressBarBehavior
  • playHeadBehavior
  • playProgressBarBehavior
  • seekToBarBehavior

Botón Reproducir/Pausa

Estos son los estilos del botón de reproducción/pausa:

Estilo (B) Descripción
ptp-btn-playpause

Botón Reproducir pausa en la barra de control.

ptp-btn-playpause.pause-state

ptp-btn-playpause en estado de pausa

ptp-btn-playpause.pause-state

ptp-btn-playpause en estado de reproducción

El comportamiento predeterminado es playPauseButtonBehavior.

Volumen

Estos son los estilos para configurar el botón de volumen:

Estilo (C) Descripción

.ptp-volume-control

  • .expandido
  • .vertical

Control de volumen en la barra de control

  • Cuando el control está expandido
  • Cuando el control está en forma vertical

ptp-btn-volume

Botón Volumen de la barra de control

ptp-btn-volume.min-volume-state

Cuando el volumen está en estado mínimo

ptp-btn-volume.mute-state

Cuando el volumen está en estado silencioso

Los comportamientos predeterminados son volumeBehavior y muteButtonBehavior.

Estos son los estilos del regulador de volumen:

Estilo (D) Descripción
.ptp-volume-slider

El regulador de volumen.

.ptp-volume-hidden

El regulador de volumen está en estado oculto.

El comportamiento predeterminado es volumeSliderBehavior.

Rebobinar

Este es el estilo del botón de rebobinado:

Estilo (E) Descripción
.ptp-btn-fastrewind

Botón de rebobinado de la barra de control.

El comportamiento predeterminado es rewindButtonBehavior.

Hora

Este es el estilo para mostrar el tiempo restante en la barra de control:

Estilo (F) Descripción
.ptp-txt-display-time

Muestra el tiempo restante en la barra de control

El comportamiento predeterminado es timeRemainingBehavior.

Rebobinado rápido

Este es el estilo del botón de rebobinado rápido:

Estilo (G) Descripción
.ptp-btn-fastrewind

Botón de rebobinado rápido de la barra de control.

El comportamiento predeterminado es fastRewindButtonBehavior.

Rebobinado lento

Este es el estilo del botón de rebobinado lento:

Estilo (H) Descripción
.ptp-btn-slowRewind

Botón de rebobinado lento de la barra de control.

El comportamiento predeterminado es slowRewindButtonBehavior.

Avance lento

Este es el estilo del botón de avance lento:

Estilo (I) Descripción
.ptp-btn-slow-forward

Botón de avance lento de la barra de control.

El comportamiento predeterminado es slowForwardButtonBehavior.

Avance rápido

Este es el estilo del botón de avance rápido:

Estilo (J) Descripción
.ptp-btn-fastforward

Botón de avance rápido de la barra de control.

El comportamiento predeterminado es fastForwardButtonBehavior.

Pista de audio

Estos son los estilos para configurar la pista de audio:

Estilo Descripción

Botón Pista de audio (K)

.ptp-btn-audio-track

Botón de pista de audio de la barra de control.

El comportamiento predeterminado es audioTrackButtonBehavior.

Panel de selección de pista de audio (L)

.ptp-audio-track-selection-panel

Panel para seleccionar la pista de audio.

El comportamiento predeterminado es audioTrackSelectionPanelBehavior.

Encabezado de selección de pista de audio (M)

.ptp-audio-track-selection-header

El encabezado del ptp-audio-track-selection-panel.

Menú de selección de pistas de audio (N)

.ptp-audio-track-selection-menu

Los elementos de menú del ptp-audio-track-selection-panel.

Uso compartido

Estos son los estilos para configurar el uso compartido:

Estilo Descripción

Botón Compartir en redes sociales (O)

.ptp-btn-share-video

Botón de uso compartido de medios sociales en la barra de control que se abrirá ptp-share-video-panel.

El comportamiento predeterminado es shareVideoButtonBehavior.

Compartir panel de vídeo (P)

.ptp-share-video-panel

Panel que muestra las opciones de uso compartido en redes sociales.

El comportamiento predeterminado es shareVideoPanelBehavior.

Menú Compartir Vídeo (Q)

.ptp-audio-track-selection-header

El encabezado del ptp-audio-track-selection-panel.

.share-video-panel-menu

El menú de ptp-share-video-panel que muestra todas las opciones para compartir contenido en medios sociales.

.ptp-share-video-panel-menu-item

El elemento de menú del share-video-panel-menu.

.ptp-btn-share-video-facebook

Elemento de menú que le permite compartir contenido en Facebook.

.ptp-btn-share-video-twitter

Elemento de menú que le permite compartir contenido en el Twitter.

.ptp-btn-share-video-google-plus

Elemento de menú que le permite compartir contenido en Google Plus.

.ptp-btn-share-video-linkedin

Elemento de menú que le permite compartir contenido en LinkedIn.

Subtítulos opcionales

Estos son los estilos para configurar subtítulos:

Estilo Descripción

Botón Subtítulos (R)

.ptp-btn-closed-caption

El Subtítulos opcionales en la barra de control.

El comportamiento predeterminado es closedCaptionButtonBehavior.
.on-state

Se han habilitado los subtítulos para un vídeo.

Panel De Subtítulos (S)

.ptp-closed-caption-panel

Panel para subtítulos cerrados.

El comportamiento predeterminado es closedCaptionLanguagePanelBehavior.

Idiomas de los subtítulos (T)

.ptp-closed-caption-language-panel:

El encabezado del ptp-audio-track-selection-panel.

.ptp-closed-caption-language-menu:

Menú en el panel de subtítulos.

Opciones de subtítulos (U)

.ptp-closed-caption-options-btn

El Opciones en el panel de opciones de subtítulos.

.ptp-closed-caption-options-panel

El panel Opciones del panel de subtítulos opcionales.

.ptp-closed-caption-menu-item

Elemento de menú del panel de subtítulos.

.selected

En el estado seleccionado.

.ptp-closed-caption-done-btn

El Listo en el encabezado del panel de opciones de subtítulos.

.ptp-closed-caption-options-menu

El menú Opciones en subtítulos opcionales.

ptp-closed-caption-options-main-menu

Menú principal de las opciones de subtítulos opcionales.

ptp-closed-caption-options-sub-menu

El submenú para las opciones de subtítulos.

ptp-closed-caption-options-opacity-slider

El control deslizante de opacidad para las opciones de subtítulos.

ptp-closed-caption-options-menu-separator

El separador de opciones de subtítulos opcionales.

ptp-closed-caption-options-menu-item

El pie de ilustración cerrado Opciones elemento de menú.

ptp-closed-caption-preview-panel

El panel de vista previa de subtítulos.

ptp-closed-caption-options-footer

Pie de página de opciones de subtítulos opcionales.

ptp-closed-caption-options-reset-button

El Restablecer en el pie de página del panel de opciones de subtítulos.

ptp-closed-caption-options-apply-button

El Aplicar en el pie de página del panel de opciones de subtítulos.

El comportamiento predeterminado es closedCaptionOptionsPanelBehavior.

Más opciones (V)

Estos son los estilos para configurar opciones adicionales:

Estilo Descripción
.ptp-btn-more-options

El Más opciones botón.

.ptp-btn-more-options.ptp-control-bar-btn

El ptp-btn-more-options que se utilizan en la barra de control.

.ptp-more-options-control-panel

Panel de control Más opciones.

.ptp-more-options-control-panel-menu

Menú del panel de control Más opciones.

.ptp-more-options-control-panel-menu-item

Elemento de menú del panel de control Más opciones.

El comportamiento predeterminado es moreOptionsButtonBehavior.

Botón PIP (W)

Este es el estilo de la PIP< botón:

Estilo Descripción
.ptp-btn-pip

Botón PIP de la barra de control.

El comportamiento predeterminado es pipButtonBehavior.

Pantalla Completa (X)

Este es el estilo para configurar la pantalla completa:

Estilo Descripción
.ptp-btn-fullscreen

El Pantalla completa botón de la barra de control.

El comportamiento predeterminado es fullScreenButtonBehavior.

Juego de trucos (Y)

Este es el estilo para configurar el juego de trucos:

Estilo Descripción
.ptp-control-bar-trick-play-rate

El componente de visualización de la tasa de trucos en la barra de control.

El comportamiento predeterminado es trickPlayRateDisplayBehavior.

Vista múltiple (Z)

Este es el estilo para configurar una vista múltiple:

Estilo Descripción
.ptp-btn-multiview

El MultiView botón de la barra de control y el estado inicial de Vista múltiple botón.

El comportamiento predeterminado es multiViewButtonBehavior.

Miniatura

Este es el estilo para configurar las miniaturas:

Estilo Descripción
.ptp-progress-bar-thumb-nail

La barra de progreso de las miniaturas.

El comportamiento predeterminado es thumbnailPreviewBehavior.

Mensajes de error

Este es el estilo para configurar los mensajes de error:

Estilo Descripción
.ptp-error-message-panel

Panel que muestra los mensajes de error del reproductor.

.ptp-error-message-panel-icon

El icono que se muestra en el panel cuando hay un mensaje de error.

.ptp-error-message-panel-message

El mensaje de error que se muestra.

El comportamiento predeterminado es errorMessagePanelBehavior.

Superposición de almacenamiento en búfer

Este es el estilo para configurar las miniaturas:

Estilo Descripción
.ptp-buffering-overlay

El control de superposición de almacenamiento en búfer.

La superposición predeterminada es bufferingOverlayBehavior.

Selectores específicos

Este es el estilo del botón de avance rápido:

Estilo Descripción
.ad-break

Estado del panel de control mientras se reproduce el anuncio.

Se aplica a lo siguiente:

  • .ptp-btn-fastforward
  • .ptp-btn-fastrewind
  • .ptp-btn-fastrewind
  • .ptp-btn-slow-forward
  • .ptp-btn-slow-forward
  • .ptp-btn-slowRewind
  • .ptp-btn-more-options
  • .ptp-btn-share-video
  • .ptp-btn-closed-caption
  • .ptp-btn-audio-track
  • .ptp-btn-pip
  • .ptp-btn-rewind
  • .ptp-scrub-bar
  • .ptp-seek-to-bar

.multi-view

El estado del control mientras está en vista multivariable.

Se aplica a lo siguiente:

  • .ptp-btn-fastforward
  • .ptp-btn-share-video
  • .ptp-btn-closed-caption
  • .ptp-btn-audio-track

.fullscreen-state

El reproductor está en modo de pantalla completa.

Se aplica a lo siguiente:

  • .ptp-control-bar
  • .ptp-btn-fullscreen

En esta página