視訊播放器 video-player

視訊播放器是檢視器中顯示視訊內容的矩形區域。

如果正在播放的視訊尺寸不符合視訊播放器的尺寸,則視訊內容會置中於視訊播放器的矩形顯示區域中。

下列CSS類別選擇器可控制視訊播放器的外觀:

.s7interactivevideoviewer .s7videoplayer

視訊播放器的CSS屬性

background-color
主檢視的背景顏色。

您可以將系統無法播放視訊時所顯示的錯誤訊息當地語系化。

另請參閱 使用者介面元素的本地化.

範例 — 若要設定視訊檢視器,且視訊播放器大小設定為512 x 288畫素。

.s7interactivevideoviewer .s7videoplayer{
background-color: transparent;
}

隱藏式字幕會放入視訊播放器內的內部容器中。 該容器的位置由支援的WebVTT定位運運算元控制。 註解文字本身位於該容器內,其樣式由下列CSS類別選取器控制:

.s7interactivevideoviewer .s7videoplayer .s7caption

隱藏式字幕的CSS屬性

background-color
隱藏式字幕文字背景。
color
隱藏式字幕文字色彩。
font-weight
隱藏式字幕字型粗細。
font-size
隱藏式字幕字型大小。
font-family
隱藏式字幕字型。

範例 section-5b82913ff3c44b7b8187969cb15e9560

若要在半透明的黑色背景上將隱藏式字幕文字設定為14畫素、淺灰色、Arial®:

.s7interactivevideoviewer .s7videoplayer .s7caption {
 background-color: rgba(0,0,0,0.75);
 color: #e6e6e6;
 font-weight: normal;
 font-size: 14px;
 font-family: Arial,Helvetica,sans-serif;
}

緩衝動畫的外觀由下列CSS類別選取器控制:

.s7interactivevideoviewer .s7videoplayer .s7waiticon

等待圖示的CSS屬性

CSS屬性
說明
width
動畫圖示寬度。
height
動畫圖示高度。
左邊界
動畫圖示左側邊界,通常減去圖示寬度的一半。
頂端邊界
動畫圖示上方邊界,通常減去圖示高度的一半。
background-image
旋鈕圖稿。

範例 — 若要將緩衝動畫設定為寬101畫素、高29畫素:

.s7interactivevideoviewer .s7videoplayer .s7waiticon {
 width: 101px;
 height: 29px;
 margin-left: -50px;
 margin-top: -15px;
 background-image: url(images/sdk/busyicon.gif);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8