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.
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.
Estos son los estilos para los divs de contenedor:
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. |
Estos son los estilos para los controles de reproductor genéricos:
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. |
Estos son los estilos de la barra de control:
Estilo | Descripción |
---|---|
ptp-control-bar (comportamiento predeterminado) | Aplicable para la barra de control |
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
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
.
Estos son los estilos para configurar el botón de volumen:
Estilo (C) | Descripción |
---|---|
.ptp-volume-control
|
Control de volumen en la barra de control
|
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
.
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
.
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
.
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
.
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
.
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
.
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
.
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. |
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. |
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. |
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
.
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. |
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
.
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
.
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. |
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
.
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
.
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
.
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:
|
.multi-view | El estado del control mientras está en vista multivariable. Se aplica a lo siguiente:
|
.fullscreen-state | El reproductor está en modo de pantalla completa. Se aplica a lo siguiente:
|