Puede utilizar la siguiente información para ayudarle a despellejar el reproductor. Para cada construcción visual, los comportamientos correspondientes se mencionan en el comportamiento predeterminado.
Los detalles de despellejado de este documento son para los elementos de IU predeterminados que crea el marco de IU. Si el reproductor modificó 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 el archivo common-styles.css
.
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 al PIP inicial cuando se ha intercambiado y se muestra como el 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 | Estilo css común que se coloca en cada vídeo de la multiview. |
.multiview | Cuando el contenedor que aloja cada uno de los vídeos en formato multiview está en multiview. |
Estos son los estilos para los controles genéricos del reproductor:
Estos estilos se enumeran en el archivo default-controls.css
.
Estilo | Descripción |
---|---|
ptp-control | Aplicable a todos los controles de la barra de control excepto a la barra de desplazamiento 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 regla horizontal |
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 controles de texto. |
Estos son los estilos de la barra de control:
Estilo | Descripción |
---|---|
ptp-control-bar (comportamiento predeterminado) | Aplicable a 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-purb-bar | Barra de selección de la barra de control |
ptp-purb-bar.ptp-buffer-progress-bar | Barra de progreso del búfer en la barra de desplazamiento |
ptp-purb-bar.ptp-seek-to-bar | Estado de la barra de desplazamiento cuando el usuario busca en ella |
ptp-purb-bar.ptp-play-progress-bar | Estado de la barra de desplazamiento en reproducción normal |
ptp-purb-bar.ptp-progress-bar-play-head | Reproducir la cabeza en la barra de desplazamiento mientras se reproduce |
ptp-purb-bar.ptp-ad-marker-bar | Barra de marcador de anuncio |
ptp-eliminarbar.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- playpausein en el estado de pausa |
ptp-btn-playpause.pause-state | ptp-btn- playpausein en el estado play |
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 en 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 de silencio |
Los comportamientos predeterminados son volumeBehavior
y muteButtonBehavior
.
Estos son los estilos del control deslizante del volumen:
Estilo (D) | Descripción |
---|---|
.ptp-volume-slider | El control deslizante del volumen. |
.ptp-volume-hidden | El control deslizante del volumen en un 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 en 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-slow-wind | Botón de rebobinado lento en 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 en 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 en la barra de control. |
El comportamiento predeterminado es fastForwardButtonBehavior
.
Estos son los estilos para configurar la pista de audio:
Estilo | Descripción |
---|---|
Botón de 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ú Selección de pista 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 abrirá ptp-share-video-panel. |
El comportamiento predeterminado es shareVideoButtonBehavior. | |
Panel de vídeo compartido (P) |
.ptp-share-video-panel | El panel que muestra las opciones de uso compartido en redes sociales. |
El comportamiento predeterminado es shareVideoPanelBehavior. | |
Menú de vídeo compartido (Q) |
|
.ptp-audio-track-selection-header | El encabezado del ptp-audio-track-selection-panel. |
.share-video-panel-menu | Menú en 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ú en el share-video-panel-menu. |
.ptp-btn-share-video-facebook | Elemento de menú que permite compartir contenido en Facebook. |
.ptp-btn-share-video-twitter | Elemento de menú que permite compartir contenido en 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 permite compartir contenido en LinkedIn. |
Estos son los estilos para configurar los subtítulos cerrados:
Estilo | Descripción |
---|---|
Botón Subtítulos (R) |
|
.ptp-btn-closed-caption | Botón Subtítulos en la barra de control. |
El comportamiento predeterminado es closedCaptionButtonBehavior. | |
.on-state | Los subtítulos se han habilitado para un vídeo. |
Panel Subtítulos (S) |
|
.ptp-closed-caption-panel | Panel para subtítulos. |
El comportamiento predeterminado es closedCaptionLanguagePanelBehavior. | |
Idiomas de subtítulos (T) |
|
.ptp-closed-caption-language-panel: | El encabezado del ptp-audio-track-selection-panel. |
.ptp-closed-caption-language-menu: | Menú del panel de subtítulos. |
Opciones de subtítulos (U) |
|
.ptp-closed-caption-options-btn | El botón Opciones del panel de opciones de subtítulos. |
.ptp-closed-caption-options-panel | El panel Opciones del panel de subtítulos. |
.ptp-closed-caption-menu-item | Elemento de menú del panel de subtítulos. |
.selected | En el estado seleccionado. |
.ptp-closed-caption-done-btn | El botón Listo en el encabezado del panel de opciones de subtítulos. |
.ptp-closed-caption-options-menu | Menú Opciones en subtítulos. |
ptp-closed-caption-options-main-menu | Menú principal para las opciones de subtítulos. |
ptp-closed-caption-options-sub-menú | El submenú de 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 | Separador de opciones de subtítulos. |
ptp-closed-caption-options-menu-item | El elemento de menú Opciones de subtítulos cerrados. |
ptp-closed-caption-preview-panel | El panel de vista previa de subtítulos. |
ptp-closed-caption-options-footer | Pie de página de las opciones de subtítulos. |
ptp-closed-caption-options-reset-button | Botón Restablecer en el pie de página del panel de opciones de subtítulos. |
ptp-closed-caption-options-apply-button | El botón 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 botón Más opciones. |
.ptp-btn-more-options.ptp-control-bar-btn | Los ptp-btn-more-options que se utilizan en la barra de control. |
.ptp-more-options-control-panel | El 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-elemento-menú | El elemento de menú del panel de control Más opciones . |
El comportamiento predeterminado es moreOptionsButtonBehavior
.
Este es el estilo del botón PIP<:
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 botón Pantalla completa de la barra de control. |
El comportamiento predeterminado es fullScreenButtonBehavior
.
Este es el estilo para configurar la reproducción mediante trucos:
Estilo | Descripción |
---|---|
.ptp-control-bar-truco-tasa de reproducción | Componente de visualización de tasa de trucos en la barra de control. |
El comportamiento predeterminado es trickPlayRateDisplayBehavior
.
A continuación se muestra el estilo para configurar la multiplicación:
Estilo | Descripción |
---|---|
.ptp-btn-multiview | El botón MultiView de la barra de control y el estado inicial del botón Multiview. |
El comportamiento predeterminado es multiViewButtonBehavior. |
Este es el estilo para configurar las miniaturas:
Estilo | Descripción |
---|---|
.ptp-progress-bar-thumb-nail | 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 | El 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 | 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 | 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 | Estado del control mientras está en estado multiview. Se aplica a lo siguiente:
|
.fullscreen-state | El reproductor se encuentra en modo de pantalla completa. Se aplica a lo siguiente:
|