視頻掃描器

視頻掃描器是水準滑塊控制項，允許用戶動態地查找當前播放的視頻中的任何時間位置。

在播放視頻時，掃描器「旋鈕」也移動，以指示回放期間視頻的當前時間位置。 視頻掃描器總是取控制條的整個寬度。 通過CSS對視頻掃描器進行皮膚化和改變其高度和垂直位置。

視頻掃描器的一般外觀由以下CSS類選擇器控制：

.s7videoviewer .s7videoscrubber
.s7videoviewer .s7videoscrubber .s7videotime
.s7videoviewer .s7videoscrubber .s7knob

視頻掃描器的CSS屬性

以下CSS類選擇器跟蹤背景、播放和載入指示符：

.s7videoviewer .s7videoscrubber .s7track
.s7videoviewer .s7videoscrubber .s7trackloaded
.s7videoviewer .s7videoscrubber .s7trackplayed

軌道的CSS屬性

以下CSS類選擇器控制旋鈕：

.s7videoviewer .s7videoscrubber .s7knob

旋鈕的CSS屬性

以下CSS類選擇器控制播放的氣泡時間：

.s7videoviewer .s7videoscrubber .s7videotime

播放氣泡時的CSS屬性

視頻掃描器工具尖端可被本地化。 請參閱 用戶介面元素的本地化 的子菜單。

示例 — 設定帶有自定義曲線顏色的視頻掃描器的視頻查看器。 洗滌器必須高10個像素，並從控制欄的上邊緣和左邊緣定位10個像素和35個像素。

.s7videoviewer .s7videoscrubber  {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7videoviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7videoviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7videoviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}

啟用視頻分頁時 navigation 參數，章節位置將作為標籤顯示在視頻掃描器軌道頂部。

視頻章節標籤由以下CSS類選擇器控制：

 .s7videoviewer .s7videoscrubber .s7navigation

視頻章節標籤的CSS屬性

示例 — 設定5 x 8像素的視頻章節標籤，並對「default」和「over」狀態使用不同的藝術。

.s7videoviewer .s7videoscrubber .s7navigation {
width:5px;
height:8px;
}
.s7videoviewer .s7videoscrubber .s7navigation[state="default"] {
background-image: url("images/v2/VideoScrubberDiamond.png");
}
.s7videoviewer .s7videoscrubber .s7navigation[state="over"] {
background-image: url("images/v2/VideoScrubberDiamond_over.png");
}

視頻章節氣泡位於視頻章節標籤的頂部，並顯示給定章節的標題、開始時間和說明。 可以控制相對於視頻洗滌器軌道的最大氣泡寬度和垂直偏移。 其餘部分由元件自動計算。

視頻章節氣泡由以下CSS類選擇器控制：

.s7videoviewer .s7videoscrubber .s7chapter

視頻章氣泡的CSS屬性

示例 — 設定視頻章節氣泡，該氣泡寬度為235像素，從視頻掃描器軌道底部向上方八像素。

.s7videoviewer .s7videoscrubber .s7chapter {
max-width:235px;
bottom:8px;
}

視頻章節氣泡由可選的標題和內容組成。 標題具有可選的章節開始時間和章節標題。

標題由以下CSS類選擇器控制：

.s7videoviewer .s7videoscrubber .s7chapter .s7header

視頻章氣泡標題的CSS屬性

示例 — 設定高22像素、高22像素、12像素水準邊距和灰色背景的視頻章節氣泡標題。

.s7videoviewer .s7videoscrubber .s7chapter .s7header {
height:22px;
padding:0 12px;
line-height:22px;
background-color: rgba(51, 51, 51, 0.8);
}

視頻章節的開始時間由以下CSS類選擇器控制：

 .s7videoviewer .s7videoscrubber .s7chapter .s7header .s7starttime

視頻章開始時間的CSS屬性

示例 — 使用灰色十像素Verdana字型設定章節開始時間，右邊有十個像素填充。

.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7starttime {
color: #dddddd;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
padding-right: 10px;
}

視頻章節標題由以下CSS類選擇器控制：

.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7title

視頻章節標題的CSS屬性

示例 — 設定使用白色、粗體、十像素Verdana字型的視頻章節標題。

.s7videoviewer .s7videoscrubber .s7chapter .s7header .s7title {
color: #ffffff;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
font-weight: bold;
}

視頻章節說明由以下CSS類選擇器控制：

 .s7videoviewer .s7videoscrubber .s7chapter .s7description

視頻章節說明的CSS屬性

示例 — 使用深灰色、11像素Verdana字型和淺灰色背景設定視頻章節說明。 最後，使用五像素行高、12像素水準填充、12像素頂部填充和九像素底部填充。

.s7videoviewer .s7videoscrubber .s7chapter .s7description {
color: #333333;
background-color: rgba(221, 221, 221, 0.9);
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 11px;
line-height: 15px;
padding: 12px 12px 9px;
}

本章氣泡底部的楔形連接器由以下CSS類選擇器控制：

 .s7videoviewer .s7videoscrubber .s7chapter .s7tail

楔形連接器的CSS屬性

示例 — 要設定灰色六像素楔形連接器：

.s7videoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}

Business.Adobe.com 資源

Ecommerce Integrations Customer Communications Asset Collections Personalized Communications Responsive Forms Dynamic Forms