Desenfocar el reproductor

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.

IMPORTANTE

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.

Contenedor divs

Estos son los estilos para los divs de contenedor:

CONSEJO

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.

Varios controles

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

CONSEJO

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.

Barra de control

Estos son los estilos de la barra de control:

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

Aplicable a la barra de control

Botones de características

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

Botón Reproducir/Pausar

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.

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

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.

Tiempo

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 en la barra de control.

El comportamiento predeterminado es fastRewindButtonBehavior.

Lento rebobinado

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.

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

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

Subtítulos

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.

Más opciones (V)

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.

Botón PIP (W)

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.

Pantalla completa (X)

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.

Reproducción trucada (Y)

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.

Multiview (Z)

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.

Miniatura

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.

Mensajes de error

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.

Superposición de almacenamiento en búfer

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.

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-slow-wind
  • .ptp-btn-more-options
  • .ptp-btn-share-video
  • .ptp-btn-closed-caption
  • .ptp-btn-audio-track
  • .ptp-btn-pip
  • .ptp-btn-rewind
  • .ptp-underb-bar
  • .ptp-seek-to-bar

.multi-view

Estado del control mientras está en estado multiview.

Se aplica a lo siguiente:

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

.fullscreen-state

El reproductor se encuentra en modo de pantalla completa.

Se aplica a lo siguiente:

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

En esta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now