設定播放器樣式

Web Receiver SDK 提供內建的播放器 UI。如要在自訂 Web Receiver 應用程式中實作這個 UI，您必須在 HTML 檔案內文中加入 cast-media-player 元素。

<body>
  <cast-media-player></cast-media-player>
</body>

CSS 變數可讓您自訂各種 cast-media-player 屬性，包括播放器背景、啟動圖片、字型系列等。您可以使用內嵌 CSS 樣式、CSS 樣式表或 JavaScript 中的 style.setProperty 新增這些變數。

在下一節中，您將瞭解如何自訂媒體播放器元素的每個區域。您可以使用下列範本快速上手。

外部

index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/receiver.css" media="screen" />
  <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
</body>
<footer>
  <script src="js/receiver.js"></script>
</footer>
</html>

js/receiver.js

const context = cast.framework.CastReceiverContext.getInstance();

...

// Update style using javascript
let playerElement = document.getElementsByTagName("cast-media-player")[0];
playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")');

...

context.start();

css/receiver.css

body {
  --playback-logo-image: url('http://some/image.png');
}
cast-media-player {
  --theme-hue: 100;
  --progress-color: rgb(0, 255, 0);
  --splash-image: url('http://some/image.png');
  --splash-size: cover;
}

內嵌
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <style>
    body {
      --playback-logo-image: url('http://some/image.png');
    }
    cast-media-player {
      --theme-hue: 100;
      --progress-color: rgb(0, 255, 0);
      --splash-image: url('http://some/image.png');
    }
  </style>
  <script>
    const context = cast.framework.CastReceiverContext.getInstance();

    ...

    // Update style using javascript
    let playerElement = document.getElementsByTagName("cast-media-player")[0];
    playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")');

    ...

    context.start();
  </script>
</body>
</html>

播放媒體時，播放標誌會顯示在接收器的左上角。這個屬性與 .logo 類別不同。您可以透過 body 選取器自訂 --playback-logo-image。

body {
  --playback-logo-image: url('image.png'); /* set from the body selector */
}

播放器背景屬性

--background 變數可設定整個播放器的背景屬性，且會在啟動和播放期間顯示。舉例來說，您可以將整個背景設為白色和銀色線性漸層：

cast-media-player {
  --background-image: linear-gradient(white, silver);
}

網路接收端螢幕：

自訂背景

您可以使用下列變數自訂 .background 屬性：

變數和預設值

名稱 預設值 說明
--背景 霧黑 CSS 背景屬性
--background-color CSS background-color 屬性
--background-image CSS 背景圖片屬性
--background-repeat 不可重複 CSS 背景重複屬性
--background-size 翻唱 CSS background-size 屬性

CSS 範本

cast-media-player {
  --background:
  --background-color:
  --background-image:
  --background-repeat:
  --background-size:
}

標誌屬性

.logo 類別位於 .background 類別前方，且橫跨整個玩家。這個類別會在接收器啟動時顯示。如未提供任何 .splash 變數，.logo 類別也會在接收器處於閒置狀態時顯示。

以下範例將 --logo-image 設定為名為 welcome.png 的等化器圖示。圖片預設為接收器的中心點：

cast-media-player {
  --logo-image: url('welcome.png');
}

網路接收端螢幕：

自訂標誌

您可以使用下列變數自訂 .logo 屬性：

變數和預設值

名稱 預設值 說明
--logo-background CSS 背景屬性
--logo-color CSS background-color 屬性
--logo-image CSS 背景圖片屬性
--logo-repeat 不可重複 CSS 背景重複屬性
--logo-size CSS background-size 屬性

CSS 範本

cast-media-player {
  --logo-background:
  --logo-color:
  --logo-image:
  --logo-repeat:
  --logo-size:
}

噴濺性質

與 .logo 類別類似，.splash 類別會橫跨整個玩家。如果您設定這些屬性，當接收器閒置時，.splash 變數將覆寫 .logo 變數。這表示您可以在啟動時使用一組 .logo 屬性，並在接收器閒置時顯示不同的背景或圖片。

舉例來說，您可以使用 dimgray 覆寫白色和銀色的漸層背景，並新增動畫「等待中...」圖示：

cast-media-player {
  --splash-color: dimgray;
  --splash-image: url('waiting.png');
}

網路接收端螢幕：

自訂啟動畫面

如未設定這些屬性，接收器會在閒置時預設為 .logo 設定或應用程式名稱。

您可以使用下列變數自訂 .splash 屬性：

變數和預設值

名稱 預設值 說明
--splash-background CSS 背景屬性
--splash-color CSS background-color 屬性
--splash-image CSS 背景圖片屬性
--splash-repeat CSS 背景重複屬性
--splash-size CSS background-size 屬性

CSS 範本

cast-media-player {
  --splash-background:
  --splash-color:
  --splash-image:
  --splash-repeat:
  --splash-size:
}

投影播放

如要在閒置狀態 (取代啟動圖片) 期間循環顯示最多 10 張圖片，請使用下列投影播放參數。

變數和預設值

名稱 預設值 說明
--slideshow-interval-duration 10 秒 圖片間隔時間。
--slideshow-animation-duration 2 秒 轉換時間。
--slideshow-image-1 投影播放的第一張圖片。
--slideshow-image-2 投影片中的第二張圖片。
--slideshow-image-3 投影片中有第三張圖片。
--slideshow-image-4 投影片中的第四張圖片。
--slideshow-image-5 投影播放中的第五張圖片。
--slideshow-image-6 投影播放中的第六張圖片。
--slideshow-image-7 投影播放中的第七張圖片。
--slideshow-image-8 投影播放中的第八張圖片。
--slideshow-image-9 投影播放中的第九張圖片。
--slideshow-image-10 投影播放中的第十張圖片。

CSS 範本

cast-media-player {
  --slideshow-interval-duration:
  --slideshow-animation-duration:
  --slideshow-image-1:
  --slideshow-image-2:
  --slideshow-image-3:
  --slideshow-image-4:
  --slideshow-image-5:
  --slideshow-image-6:
  --slideshow-image-7:
  --slideshow-image-8:
  --slideshow-image-9:
  --slideshow-image-10:
}

浮水印屬性

播放媒體時顯示 .watermark。這通常是小型的透明圖片，預設為接收器的右下方。

您可以使用下列變數自訂 .watermark 屬性：

變數和預設值

名稱 預設值 說明
--watermark-background CSS 背景屬性
--watermark-color CSS background-color 屬性
--watermark-image CSS 背景圖片屬性
--watermark-position 右下方 CSS 背景位置屬性
--watermark-repeat 不可重複 CSS 背景重複屬性
--watermark-size CSS background-size 屬性

CSS 範本

cast-media-player {
  --watermark-background:
  --watermark-color:
  --watermark-image:
  --watermark-position:
  --watermark-repeat:
  --watermark-size:
}

播放、廣告和其他 CSS 屬性

您也可以透過 cast-media-player 選取器自訂廣告、字型、播放器圖片和其他屬性。

變數和預設值

名稱 預設值 說明
--ad-title 廣告 廣告標題。
--skip-ad-title 略過廣告 「略過廣告」文字方塊的文字。
--break-color hsl(hue, 100%, 50%) 廣告插播標記的顏色。
--font-family Open Sans 中繼資料的字型系列和進度列。
--spinner-image 預設圖片 啟動期間要顯示的圖片。
--buffering-image 預設圖片 緩衝處理時顯示的圖片。
--pause-image 預設圖片 暫停時顯示的圖片。
--play-image 播放時要在中繼資料中顯示的圖片。
--theme-hue 42 播放器使用的色調。
--progress-color hsl(hue, 95%, 60%) 進度列的顏色。

CSS 範本

cast-media-player {
  --ad-title:
  --skip-ad-title:
  --break-color:
  --font-family:
  --spinner-image:
  --buffering-image:
  --pause-image:
  --play-image:
  --theme-hue:
  --progress-color:
}

如需詳細資訊和其他插圖，請參閱樣式化媒體接收器。

遮視範圍

由於電視標準不斷演進，並希望一律向觀眾顯示全螢幕畫面，因此電視的版面配置具有獨特的需求條件。電視裝置可以裁剪應用程式版面配置的外緣，確保填滿整個螢幕。這種行為通常稱為過度掃描。請在版面配置的所有側邊加入 10% 的邊界，以免螢幕元素因過度掃描而遭到裁切。

預設音訊 UI

MetadataType.MUSIC_TRACK

答：--logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist、MusicTrackMediaMetadata.artist 或 MusicTrackMediaMetadata.composer

第 MusicTrackMediaMetadata.images[0] 集

F. MediaStatus.currentTime

G. MediaInformation.duration

H. 播放/暫停

自訂 UI 資料繫結

Cast Web Receiver SDK 支援使用自己的自訂 UI 元素，而非 cast-media-player。

自訂 UI 資料繫結可讓您使用自訂 UI 元素，並使用 PlayerDataBinder 類別將 UI 繫結至玩家狀態，而不需將 cast-media-player 元素新增至接收器。如果應用程式不支援資料繫結，繫結器也支援傳送資料變更的事件。

const context = cast.framework.CastReceiverContext.getInstance();
const player = context.getPlayerManager();

const playerData = {};
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

// Update ui according to player state
playerDataBinder.addEventListener(
    cast.framework.ui.PlayerDataEventType.STATE_CHANGED,
    e => {
      switch (e.value) {
        case cast.framework.ui.State.LAUNCHING:
        case cast.framework.ui.State.IDLE:
          // Write your own event handling code
          break;
        case cast.framework.ui.State.LOADING:
          // Write your own event handling code
          break;
        case cast.framework.ui.State.BUFFERING:
          // Write your own event handling code
          break;
        case cast.framework.ui.State.PAUSED:
          // Write your own event handling code
          break;
        case cast.framework.ui.State.PLAYING:
          // Write your own event handling code
          break;
      }
    });
context.start();

您必須在 HTML 中新增至少一個 MediaElement，讓網路接收端能夠使用。如果有多個 MediaElement 物件可用，則應標記您希望網路接收端使用的 MediaElement。方法是在影片的類別清單中加入 castMediaElement (如下所示)，否則網路接收端會選擇第一個 MediaElement。

<video class="castMediaElement"></video>
上一頁
Shaka 播放器遷移的 HLS
下一頁
為智慧螢幕進行最佳化