設定播放器的外觀

您可使用下列資訊來協助您設定播放器外觀。 對於每個視覺結構,預設行為中都會提到相應的行為。

重要

本檔案中的外觀設定詳細資料是針對由UI架構建立的預設UI元素。 如果您的播放器修改了這些元素,您也必須變更外觀元素。

容器divs

以下是容器div的樣式:

秘訣

這些div列在common-styles.css檔案中。

主div的樣式如下:

樣式 說明

主Div

.ptp-main-video-div-style

視訊播放的主div的樣式。

.pip-mode-active

當PIP模式處於活動狀態時使用。

預設行為為 videoBehavior

畫中畫(PIP)

ptp-pip-video-div

PIP視訊播放的div樣式。

.view-as-main-video

在交換初始PIP時應用該PIP,並顯示為主視頻。

多視訊檢視

.ptp-multi-view-container

用於多視訊檢視。

.ptp-multi-view-view

放置於多檢視中每個視訊的通用CSS樣式。

.multiview

當以多重檢視儲存每個視訊的容器是多重檢視時。

各種控制項

以下是一般播放器控制項的樣式:

秘訣

這些樣式列在default-controls.css檔案中。

樣式 說明
ptp-control

適用於除Scrubber和空格外的控制欄上的所有控制項

ptp-input-slider

輸入滑桿

ptp-panel-header

面板標題

ptp-vertical-list-menu-item

垂直樣式的功能表清單

ptp填充間隔物

控制列上的空間

ptp-hr-sepator

水準規則分隔符號

ptp-panel-title

面板標題

ptp-panel-close-btn

關閉面板的按鈕

ptp-button-background

所有按鈕的背景

ptp-txt-control

文字控制項的預設樣式。

控制欄

控制列的樣式如下:

樣式 說明
ptp-control-bar (預設行為)

適用於控制列

功能按鈕

注意

下表中的字母與本圖中的字母相對應。

以下是拖曳列的樣式:

樣式(A) 說明
ptp-scrub-bar

控制列上的拖曳列

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

拖曳列上的緩衝進度列

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

當用戶正在搜索拖曳欄時的狀態

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

正常播放中拖曳列的狀態

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

在玩時在拖曳桿上玩頭

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

廣告標籤列

ptp-scrub-bar .ptp-ad-marker

廣告標籤

預設行為為:

  • scrubBarBehavior
  • bufferProgressBarBehavior
  • playHeadBehavior
  • playProgressBarBehavior
  • seekToBarBehavior

播放/暫停按鈕

以下是播放/暫停按鈕的樣式:

樣式(B) 說明
ptp-btn-playpause

在控制列上播放暫停按鈕。

ptp-btn-playpause.pause-state

ptp-btn- playpause in the pause state

ptp-btn-playpause.pause-state

ptp-btn- playpausein the play state

預設行為為playPauseButtonBehavior

以下是配置卷按鈕的樣式:

樣式(C) 說明

.ptp-volume-control

  • .expanded
  • 垂直

控制列的音量控制

  • 當控制項為擴充格式時
  • 當控制項為垂直格式時

ptp-btn-volume

控制列上的音量按鈕

ptp-btn-volume-state

當卷處於最小狀態時

ptp-btn-volume-mute-state

當卷處於靜音狀態時

預設行為為volumeBehaviormuteButtonBehavior

以下是音量滑桿的樣式:

樣式(D) 說明
.ptp-volume-slider

音量滑桿。

.ptp-volume-hidden

處於隱藏狀態的卷滑塊。

預設行為為volumeSliderBehavior

倒帶

以下是倒轉按鈕的樣式:

樣式(E) 說明
.ptp-btn-fastrewind

控制欄上的倒轉按鈕。

預設行為為rewindButtonBehavior

時間

以下是在控制列上顯示剩餘時間的樣式:

樣式(F) 說明
.ptp-txt-display-time

在控制列上顯示剩餘時間

預設行為為timeRemainingBehavior

快速倒帶

以下是快速倒轉按鈕的樣式:

樣式(G) 說明
.ptp-btn-fastrewind

控制列上的快速倒轉按鈕。

預設行為為fastRewindButtonBehavior

慢倒轉

以下是慢速倒轉按鈕的樣式:

樣式(H) 說明
.ptp-btn-slowwind

控制欄上的慢速倒轉按鈕。

預設行為為slowRewindButtonBehavior

慢進

以下是慢速前進按鈕的樣式:

樣式(I) 說明
.ptp-btn-slowforward

控制欄上的慢速前進按鈕。

預設行為為slowForwardButtonBehavior

快進

以下是快速前進按鈕的樣式:

樣式(J) 說明
.ptp-btn-fastforward

控制列上的快速前進按鈕。

預設行為為fastForwardButtonBehavior

音軌

以下是設定音軌的樣式:

樣式 說明

音軌按鈕(K)

.ptp-btn-audio-track

控制列上的音軌按鈕。

預設行為為 audioTrackButtonBehavior

音軌選擇面板(L)

.ptp-audio-track-selection-panel

用於選擇音軌的面板。

預設行為為 audioTrackSelectionPanelBehavior

音軌選擇標題(M)

.ptp-audio-track-selection-header

ptp-audio-track-selection-panel的標題。

音軌選擇功能表(N)

.ptp-audio-track-selection-menu

ptp-audio-track-selection-panel中的功能表項目。

共用

以下是設定共用的樣式:

樣式 說明

社交媒體分享按鈕(O)

.ptp-btn-share-video

控制列上的社交媒體分享按鈕,此按鈕會開啟 ptp-share-video-panel

預設行為為 shareVideoButtonBehavior

共用視訊面板(P)

.ptp-share-video-panel

顯示社交分享選項的面板。

預設行為為 shareVideoPanelBehavior

分享視訊功能表(Q)

.ptp-audio-track-selection-header

ptp-audio-track-selection-panel的標題。

.share-video-panel-menu

ptp-share-video-panel中的功能表,顯示在社交媒體上分享內容的所有選項。

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

share-video-panel-menu中的功能表項目。

.ptp-btn-share-video-facebook

可讓您在Facebook上分享內容的功能表項目。

.ptp-btn-share-video-twitter

可讓您在Twitter上分享內容的功能表項目。

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

可讓您在Google Plus上分享內容的功能表項目。

.ptp-btn-share-video-linkedin

可讓您在LinkedIn上分享內容的功能表項目。

隱藏字幕

以下是設定隱藏字幕的樣式:

樣式 說明

隱藏字幕按鈕(R)

.ptp-btn-closed-caption

控制列上的隱藏字幕按鈕。

預設行為為 closedCaptionButtonBehavior
.on-state

已為視訊啟用標題。

隱藏字幕面板(S)

.ptp-closed-caption-panel

隱藏字幕面板。

預設行為為 closedCaptionLanguagePanelBehavior

隱藏字幕語言(T)

.ptp-closed-caption-language-panel:

ptp-audio-track-selection-panel的標題。

.ptp-closed-caption-language-menu:

隱藏字幕面板中的功能表。

隱藏字幕選項(U)

.ptp-closed-caption-options-btn

隱藏字幕選項面板中的選項按鈕。

.ptp-closed-caption-options-panel

隱藏字幕面板上的「選項」面板。

.ptp-closed-caption-menu-item

隱藏字幕面板中的功能表項目。

已選取

處於選定狀態。

.ptp-closed-caption-done-btn

隱藏字幕選項面板標題中的 Done按鈕。

.ptp-closed-caption-options-menu

隱藏字幕中的「選項」功能表。

ptp-closed-caption-options-main-menu

隱藏字幕選項的主菜單。

ptp-closed-caption-options-sub-menu

隱藏字幕選項的子菜單。

ptp-closed-caption-options-oppacity-slider

隱藏字幕選項的不透明度滑桿。

ptp-closed-caption-options-menu-separator

隱藏字幕選項分隔符。

ptp-closed-caption-options-menu-item

隱藏字幕選項功能表項目。

ptp-closed-caption-preview-panel

隱藏字幕預覽面板。

ptp-closed-caption-options-footer

隱藏字幕選項頁尾。

ptp-closed-caption-options-reset-button

隱藏字幕選項面板頁尾中的 Reset按鈕。

ptp-closed-caption-options-apply-button

隱藏字幕選項面板頁尾中的 Apply按鈕。

預設行為為 closedCaptionOptionsPanelBehavior

更多選項(V)

以下是配置其他選項的樣式:

樣式 說明
.ptp-btn-more-options

更多選項按鈕。

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

用於控制欄的 ptp-btn-more-options

.ptp-more-options-control-panel

「更多選項」控制面板。

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

「更多選項」控制面板菜單。

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

「更多選項」控制面板菜單項。

預設行為為moreOptionsButtonBehavior

PIP按鈕(W)

以下是PIP<按鈕的樣式:

樣式 說明
.ptp-btn-pip

控制欄上的PIP按鈕。

預設行為為 pipButtonBehavior

全螢幕(X)

以下是設定全螢幕的樣式:

樣式 說明
.ptp-btn-fullscreen

控制欄上的全螢幕按鈕。

預設行為為fullScreenButtonBehavior

特技播放(Y)

以下是設定特技播放的樣式:

樣式 說明
.ptp-control-bar-trick-play速率

控制列中的特技率顯示元件。

預設行為為trickPlayRateDisplayBehavior

多視圖(Z)

以下是配置多視圖的樣式:

樣式 說明
.ptp-btn-multiview

控制欄上的 MultiView按鈕,以及 Multiview按鈕的初始狀態。

預設行為為 multiViewButtonBehavior

縮圖

以下是設定縮圖的樣式:

樣式 說明
.ptp-progress-bar-thumb-nail

縮圖的進度列。

預設預設行為為thumbnailPreviewBehavior

錯誤消息

以下是配置錯誤消息的樣式:

樣式 說明
.ptp-error-message-panel

顯示播放器錯誤訊息的面板。

.ptp-error-message-panel-icon

出現錯誤訊息時,面板上顯示的圖示。

.ptp-error-message-panel-message

顯示的錯誤消息。

預設行為為errorMessagePanelBehavior

緩衝覆蓋

以下是設定縮圖的樣式:

樣式 說明
.ptp-buffering-overlay

緩衝覆蓋控制項。

預設覆蓋為bufferingOverlayBehavior

特定選擇器

以下是快速前進按鈕的樣式:

樣式 說明
.ad-break

播放廣告時控制面板的狀態。

適用於下列項目:

  • .ptp-btn-fastforward
  • .ptp-btn-fastrewind
  • .ptp-btn-fastrewind
  • .ptp-btn-slowforward
  • .ptp-btn-slowforward
  • .ptp-btn-slowwind
  • .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

多視圖時控制項的狀態。

適用於下列項目:

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

.fullscreen-state

播放器為全螢幕模式。

適用於下列項目:

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

本頁內容