Skinning del lettore

È possibile utilizzare le seguenti informazioni per facilitare l'esecuzione dello skin del lettore. Per ogni costrutto visivo, i comportamenti corrispondenti sono indicati nel comportamento predefinito.

IMPORTANTE

I dettagli di skin in questo documento sono per gli elementi dell'interfaccia utente predefiniti creati dal framework dell'interfaccia utente. Se il lettore modifica questi elementi, anche gli elementi di skin devono essere modificati.

Contenitore sub

Di seguito sono riportati gli stili per i div contenitore:

SUGGERIMENTO

Questi video sono elencati nel file common-styles.css .

Di seguito sono riportati gli stili per il div principale:

Stile Descrizione

Divisione principale

.ptp-main-video-div-style

Stile del div principale in cui viene riprodotto il video.

.pip-mode-active

Utilizzato quando la modalità PIP è attiva.

Il comportamento predefinito è videoBehavior.

Picture in Picture (PIP)

.ptp-pip-video-div

Stile del div in cui viene riprodotto il video PIP.

.view-as-main-video

Applicato al PIP iniziale quando è stato scambiato e viene visualizzato come video principale.

Visualizzazione multi-video

.ptp-multi-view-container

Viene utilizzato nella visualizzazione multi-video.

.ptp-multi-view-view

Stile css comune inserito in ogni video della visualizzazione multivview.

.multiview

Quando il contenitore che ospita ciascuno dei video in multiview è in visualizzazione multivview.

Vari controlli

Di seguito sono riportati gli stili per i controlli di lettore generici:

SUGGERIMENTO

Questi stili sono elencati nel file default-controls.css .

Stile Descrizione
ptp-control

Applicabile a tutti i comandi della barra di comando, tranne lo scrubber e lo spazio

ptp-input-slider

Cursori di ingresso

ptp-panel-header

Intestazione dei pannelli

ptp-Vertical-list-menu-item

Elenco menu in stile verticale

distanziatore di riempimento ptp

Spazio sulla barra di controllo

separatore ptp-hr

Separatore di regole orizzontale

ptp-panel-title

Titolo dei pannelli

ptp-panel-close-btn

Pulsante per la chiusura del pannello

ptp-button-background

Sfondo di tutti i pulsanti

ptp-txt-control

Stili predefiniti per i controlli di testo.

Barra di controllo

Di seguito sono riportati gli stili per la barra di controllo:

Stile Descrizione
ptp-control-bar (comportamento predefinito)

Applicabile alla barra di comando

Pulsanti di funzione

NOTA

Le lettere delle tabelle seguenti corrispondono alle lettere di questa illustrazione.

Di seguito sono riportati gli stili della barra di scorrimento:

Stile (A) Descrizione
ptp-scrub-bar

Barra di scorrimento sulla barra di controllo

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

Barra di avanzamento del buffer sulla barra di scorrimento

ptp-scrub-bar .ptp-cerca-to-bar

Stato della barra di scorrimento quando l’utente lo cerca

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

Stato della barra di scorrimento in riproduzione normale

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

Gioca a testa sulla barra di scorrimento durante la riproduzione

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

Barra degli indicatori annunci

ptp-scrub-bar.ptp-ad-marker

Marcatore annuncio

I comportamenti predefiniti sono:

  • scrubBarBehavior
  • bufferProgressBarBehavior
  • playHeadBehavior
  • playProgressBarBehavior
  • seekToBarBehavior

Pulsante Riproduci/Pausa

Di seguito sono riportati gli stili per il pulsante di riproduzione/pausa:

Stile (B) Descrizione
ptp-btn-playpause

Pulsante Riproduci pausa sulla barra di controllo.

ptp-btn-playpause.pause-state

ptp-btn- playpausin stato di pausa

ptp-btn-playpause.pause-state

ptp-btn- playpausin stato di riproduzione

Il comportamento predefinito è playPauseButtonBehavior.

Volume

Di seguito sono riportati gli stili per configurare il pulsante volume:

Stile (C) Descrizione

.ptp-controllo volume

  • espanso
  • .verticale

Controllo del volume sulla barra di controllo

  • Quando il controllo è espanso
  • Quando il controllo è in forma verticale

ptp-btn-volume

Pulsante Volume sulla barra di controllo

ptp-btn-volume.min-volume-state

Quando il volume è in stato minimo

ptp-btn-volume.mute-state

Quando il volume è in stato muto

I comportamenti predefiniti sono volumeBehavior e muteButtonBehavior.

Di seguito sono riportati gli stili per il cursore del volume:

Stile (D) Descrizione
.ptp-volume-slider

Il dispositivo di scorrimento del volume.

.ptp-volume-hidden

Il cursore del volume in uno stato nascosto.

Il comportamento predefinito è volumeSliderBehavior.

Riavvolgi

Di seguito è riportato lo stile del pulsante di riavvolgimento:

Stile (E) Descrizione
.ptp-btn-fastrewind

Pulsante di riavvolgimento sulla barra di controllo.

Il comportamento predefinito è rewindButtonBehavior.

Tempo

Ecco lo stile per visualizzare il tempo rimanente sulla barra di controllo:

Stile (F) Descrizione
.ptp-txt-display-time

Visualizza il tempo rimanente sulla barra di controllo

Il comportamento predefinito è timeRemainingBehavior.

Riavvolgimento rapido

Ecco lo stile del pulsante di riavvolgimento rapido:

Stile (G) Descrizione
.ptp-btn-fastrewind

Pulsante di riavvolgimento rapido sulla barra di controllo.

Il comportamento predefinito è fastRewindButtonBehavior.

Riavvolgimento lento

Ecco lo stile del pulsante Riavvolgimento lento:

Stile (H) Descrizione
.ptp-btn-slow rewind

Pulsante di riavvolgimento lento sulla barra di controllo.

Il comportamento predefinito è slowRewindButtonBehavior.

Avanti lento

Di seguito è riportato lo stile del pulsante Avanti lento:

Stile (I) Descrizione
.ptp-btn-slow-forward

Pulsante di avanzamento lento sulla barra di controllo.

Il comportamento predefinito è slowForwardButtonBehavior.

Avanzamento rapido

Di seguito è riportato lo stile del pulsante avanti rapido:

Stile (J) Descrizione
.ptp-btn-fastforward

Pulsante di avanzamento rapido sulla barra di controllo.

Il comportamento predefinito è fastForwardButtonBehavior.

Traccia audio

Di seguito sono riportati gli stili per configurare la traccia audio:

Stile Descrizione

Pulsante traccia audio (K)

.ptp-btn-audio-track

Pulsante della traccia audio sulla barra di controllo.

Il comportamento predefinito è audioTrackButtonBehavior.

Pannello di selezione della traccia audio (L)

.ptp-audio-track-selection-panel

Pannello per la selezione della traccia audio.

Il comportamento predefinito è audioTrackSelectionPanelBehavior.

Intestazione selezione traccia audio (M)

.ptp-audio-track-selection-header

Intestazione del ptp-audio-track-selection-panel.

Menu per la selezione del brano audio (N)

.ptp-audio-track-selection-menu

Le voci di menu nel ptp-audio-track-selection-panel.

Condivisione

Di seguito sono riportati gli stili per configurare la condivisione:

Stile Descrizione

Pulsante Condivisione social media (O)

.ptp-btn-share-video

Pulsante di condivisione dei social media sulla barra di controllo che si aprirà ptp-share-video-panel.

Il comportamento predefinito è shareVideoButtonBehavior.

Pannello Video Condivisione (P)

.ptp-share-video-panel

Il pannello che visualizza le opzioni di social sharing.

Il comportamento predefinito è shareVideoPanelBehavior.

Menu Video Condivisione (Q)

.ptp-audio-track-selection-header

Intestazione del ptp-audio-track-selection-panel.

.share-video-panel-menu

Il menu in ptp-share-video-panel che visualizza tutte le opzioni per la condivisione di contenuti sui social media.

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

La voce di menu nel menu share-video-panel-menu.

.ptp-btn-share-video-facebook

Voce di menu che consente di condividere contenuti su Facebook.

.ptp-btn-share-video-twitter

Voce di menu che consente di condividere contenuti su Twitter.

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

Voce di menu che consente di condividere contenuti su Google Plus.

.ptp-btn-share-video-linkedin

Voce di menu che consente di condividere il contenuto su LinkedIn.

Sottotitoli codificati

Di seguito sono riportati gli stili per configurare i sottotitoli codificati:

Stile Descrizione

Pulsante Sottotitoli codificati (R)

.ptp-btn-closed-caption

Pulsante Sottotitoli codificati nella barra di controllo.

Il comportamento predefinito è closedCaptionButtonBehavior.
.on-state

Le didascalie sono state abilitate per un video.

Pannello Sottotitoli

.ptp-closed-caption-panel

Pannello per i sottotitoli codificati.

Il comportamento predefinito è closedCaptionLanguagePanelBehavior.

Lingue dei sottotitoli (T)

.ptp-closed-caption-language-panel:

Intestazione del ptp-audio-track-selection-panel.

.ptp-closed-caption-language-menu:

Il menu nel pannello dei sottotitoli.

Opzioni sottotitoli (U)

.ptp-closed-caption-options-btn

Il pulsante Options nel pannello delle opzioni dei sottotitoli.

.ptp-closed-caption-options-panel

Pannello Opzioni nel pannello sottotitoli.

.ptp-closed-caption-menu-item

Voce di menu nel pannello sottotitoli.

.selected

Nello stato selezionato.

.ptp-closed-caption-done-btn

Il pulsante Fine nell’intestazione del pannello delle opzioni dei sottotitoli.

.ptp-closed-caption-options-menu

Il menu Opzioni nei sottotitoli.

ptp-closed-caption-options-menu principale

Il menu principale per le opzioni della didascalia chiusa.

ptp-closed-caption-options-sotto-menu

Menu secondario per le opzioni della didascalia chiusa.

ptp-closed-caption-options-opacity-slider

Il cursore di opacità per le opzioni della didascalia chiusa.

ptp-closed-caption-options-menu-separatore

Separatore delle opzioni della didascalia chiusa.

ptp-closed-caption-options-menu-item

Voce di menu Opzioni della didascalia chiusa.

ptp-closed-caption-preview-panel

Pannello di anteprima della didascalia chiusa.

ptp-closed-caption-options-footer

Il piè di pagina delle opzioni della didascalia chiusa.

ptp-closed-caption-options-reset-button

Il pulsante Reset nel piè di pagina del pannello delle opzioni della didascalia chiusa.

ptp-closed-caption-options-apply-button

Il pulsante Applica nel piè di pagina del pannello delle opzioni della didascalia chiusa.

Il comportamento predefinito è closedCaptionOptionsPanelBehavior.

Altre opzioni (V)

Di seguito sono riportati gli stili per configurare opzioni aggiuntive:

Stile Descrizione
.ptp-btn-more-options

Il pulsante Altre opzioni .

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

Le ptp-btn-more-options utilizzate nella barra di controllo.

.ptp-more-options-control-panel

Pannello di controllo Altre opzioni .

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

Il menu del pannello di controllo Altre opzioni.

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

Voce di menu del pannello di controllo Altre opzioni.

Il comportamento predefinito è moreOptionsButtonBehavior.

Pulsante PIP (W)

Di seguito è riportato lo stile del pulsante PIP< :

Stile Descrizione
.ptp-btn-pip

Pulsante PIP sulla barra di controllo.

Il comportamento predefinito è pipButtonBehavior.

Schermo intero (X)

Di seguito è riportato lo stile per configurare lo schermo intero:

Stile Descrizione
.ptp-btn-fullscreen

Il pulsante Schermo intero sulla barra di controllo.

Il comportamento predefinito è fullScreenButtonBehavior.

Gioco di mattoni (Y)

Ecco lo stile per configurare il trucco:

Stile Descrizione
.ptp-control-bar-trick-play rate

Componente di visualizzazione della frequenza di trucco nella barra di controllo.

Il comportamento predefinito è trickPlayRateDisplayBehavior.

Multiview (Z)

Di seguito è riportato lo stile per configurare la visualizzazione multipla:

Stile Descrizione
.ptp-btn-multiview

Il pulsante MultiView sulla barra dei controlli e lo stato iniziale del pulsante Multiview.

Il comportamento predefinito è multiViewButtonBehavior.

Miniatura

Stile per la configurazione delle miniature:

Stile Descrizione
.ptp-progress-bar-thumb-nail

Barra di avanzamento delle miniature.

Il comportamento predefinito è thumbnailPreviewBehavior.

Messaggi di errore

Di seguito è riportato lo stile per configurare i messaggi di errore:

Stile Descrizione
.ptp-error-message-panel

Pannello che visualizza i messaggi di errore dal lettore.

.ptp-error-message-panel-icon

Icona visualizzata nel pannello in caso di messaggio di errore.

.ptp-error-message-panel-message

Il messaggio di errore visualizzato.

Il comportamento predefinito è errorMessagePanelBehavior.

Sovrapposizione buffering

Stile per la configurazione delle miniature:

Stile Descrizione
.ptp-buffering-overlay

Il controllo della sovrapposizione del buffering.

La sovrapposizione predefinita è bufferingOverlayBehavior.

Selettori specifici

Di seguito è riportato lo stile del pulsante avanti rapido:

Stile Descrizione
ad-break

Lo stato del pannello di controllo durante la riproduzione dell’annuncio.

Si applica ai seguenti elementi:

  • .ptp-btn-fastforward
  • .ptp-btn-fastrewind
  • .ptp-btn-fastrewind
  • .ptp-btn-slow-forward
  • .ptp-btn-slow-forward
  • .ptp-btn-slow rewind
  • .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-search-to-bar

.multi-view

Lo stato del controllo in visualizzazione multipla.

Si applica ai seguenti elementi:

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

.fullscreen-state

Il lettore è in modalità a schermo intero.

Si applica ai seguenti elementi:

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

In questa pagina