視訊筆畫壓感 video-scrubber
視訊筆畫壓感是水準滑桿控制項,可讓使用者動態搜尋目前播放視訊內的任何時間位置。
清除器「旋鈕」也會隨著視訊播放而移動,以指出視訊在播放期間的目前時間位置。 視訊筆畫壓感一律採用控制列的整個寬度。 您可以透過CSS建立視訊筆畫壓感的外觀,並變更其高度和垂直位置。
視訊筆畫壓感的一般外觀是由下列CSS類別選取器所控制:
.s7interactivevideoviewer .s7videoscrubber
.s7interactivevideoviewer .s7videoscrubber .s7videotime
.s7interactivevideoviewer .s7videoscrubber .s7knob
視訊筆畫壓感的CSS屬性
下列CSS類別選取器會追蹤背景、播放和載入指標:
.s7interactivevideoviewer .s7videoscrubber .s7track
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed
曲目的CSS屬性
下列CSS類別選擇器會控制旋鈕:
.s7interactivevideoviewer .s7videoscrubber .s7knob
旋鈕的CSS屬性
下列CSS類別選擇器可控制播放時間泡泡:
.s7interactivevideoviewer .s7videoscrubber .s7videotime
時間播放泡泡的CSS屬性
視訊筆畫壓感工具提示可以本地化。 另請參閱 使用者介面元素的本地化 以取得詳細資訊。
範例 — 使用視訊筆畫壓感以及十畫素高的自訂軌跡顏色,設定視訊檢視器。 從控制列的頂端和左側邊緣,定位它的10個畫素和35個畫素。
.s7interactivevideoviewer .s7videoscrubber {
top:10px;
left:35px;
height:10px;
background-color:#AAAAAA;
}
.s7interactivevideoviewer .s7videoscrubber .s7track {
height:10px;
background-color:#444444;
}
.s7interactivevideoviewer .s7videoscrubber .s7trackloaded {
height:10px;
background-color:#666666;
}
.s7interactivevideoviewer .s7videoscrubber .s7trackplayed {
height:10px;
background-color:#888888;
}
使用啟用視訊章節標籤時 navigation
引數,章節位置會在視訊筆畫壓感軌跡上方顯示為標籤。
視訊章節標籤是由下列CSS類別選擇器所控制:
.s7interactivevideoviewer .s7videoscrubber .s7navigation
視訊章節標籤的CSS屬性
state
屬性選取器,可用來將不同的外觀元素套用至不同的按鈕狀態。 尤其是, selected='default'
對應至預設的視訊章節標籤狀態和 selected='over'
當滑鼠懸停或觸控手勢啟動視訊章節標籤時使用。範例 — 設定5 x 8畫素的視訊章節標籤,並在「預設」和「超過」狀態使用不同的圖片。
.s7interactivevideoviewer .s7videoscrubber .s7navigation {
width:5px;
height:8px;
}
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="default"] {
background-image: url("images/v2/VideoScrubberDiamond.png");
}
.s7interactivevideoviewer .s7videoscrubber .s7navigation[state="over"] {
background-image: url("images/v2/VideoScrubberDiamond_over.png");
}
影片章節泡泡位於影片章節標籤上方,並顯示指定章節的標題、開始時間和說明。 您可以控制相對於視訊筆畫壓感軌跡的最大泡泡寬度和垂直位移。 其餘由元件自動計算。
視訊章節泡泡由下列CSS類別選擇器控制:
.s7interactivevideoviewer .s7videoscrubber .s7chapter
視訊章節泡泡的CSS屬性
範例 — 若要設定寬235畫素、且從視訊筆畫壓感軌跡底部往上八畫素的視訊章節泡泡。
.s7interactivevideoviewer .s7videoscrubber .s7chapter {
max-width:235px;
bottom:8px;
}
影片章節泡泡圖包含選用的標題和內容。 標題具有可選的章節開始時間和章節標題。
標頭由以下CSS類別選擇器控制:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header
視訊章節泡泡標題的CSS屬性
範例 — 若要設定高22畫素、行高22畫素、水準邊界12畫素和灰色背景的視訊章節泡泡標題。
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header {
height:22px;
padding:0 12px;
line-height:22px;
background-color: rgba(51, 51, 51, 0.8);
}
視訊章節的開始時間由下列CSS類別選取器控制:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime
視訊章節開始時間的CSS屬性
範例 — 若要設定章節開始時間,請使用灰色10畫素Verdana字型,並在右側有10畫素邊框間距。
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7starttime {
color: #dddddd;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
padding-right: 10px;
}
視訊章節標題由下列CSS類別選擇器控制:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title
視訊章節標題的CSS屬性
範例 — 設定使用白色、粗體、10畫素Verdana字型的視訊章節標題。
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7header .s7title {
color: #ffffff;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
font-weight: bold;
}
視訊章節說明由下列CSS類別選擇器控制:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7description
視訊章節說明的CSS屬性
範例 — 使用深灰色11畫素Verdana字型搭配淺灰色背景來設定視訊章節說明。 5畫素線高、12畫素水準內距、12畫素上內距和9畫素下內距。
.s7interactivevideoviewer .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類別選取器控制:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail
楔形聯結器的CSS屬性
範例 — 若要設定灰色、6畫素楔形聯結器:
.s7interactivevideoviewer .s7videoscrubber .s7chapter .s7tail {
border-color: rgba(221, 221, 221, 0.9) transparent transparent;
border-width: 6px 6px 0;
margin: 0 0 0 -6px;
}