自訂外觀

若要使用自訂外觀，您必須編寫類似default-video-controls.css的自訂內容，並參閱播放器中的這項新自訂內容。

例如，您可使用下列其中一個選項：

  • <link rel="stylesheet" href="css/common_style.css">
  • <link rel="stylesheet" href="css/custom-video-controls1.css">

您可進行下列類型的變更：

  • 按鈕和文字的前景色

    所有具有前景的控制項都使用vid-skin-fgcolor類別。 若要變更所有控制項的前景，請使用vid-skin-fgcolor類別重複所有元素，並指定所要的顏色。

  • 按鈕和文字的背景顏色

    所有具有前景的控制項都使用vid-skin-bgcolor類別。 若要變更所有控制項的前景，請循環使用vid-skin-bgcolor類別的所有元素，並指定所要的顏色。

  • 遊戲頭的形狀

    播放頭可以是正方形或圓形。 若要變更播放頭，請將square或round類別新增至playhead元素。

  • 緩衝旋壓器的樣式

    參考播放器提供下列旋轉器的樣式，可顯示為播放器緩衝內容：

    • 覆蓋文字(overlay-text)

    • 矩形微調按鈕(spinner)

    • 信號(signal)

    • 垂直條(vertical)

      秘訣

      若要使用任何緩衝旋轉器，您必須在緩衝覆蓋元素中新增類別。 例如，若要使用overlay-text，請在BufferOverlay.js檔案中新增下列行：

      var overlay = document.getElementById("buffering-overlay");
 overlay.classList.add ("spinner");

本頁內容