設定播放器樣式

Web Receiver SDK 提供內建的播放器 UI。如要在自訂 Web Receiver 應用程式中導入這個 UI，請將 cast-media-player 元素新增至 HTML 檔案的主體。

<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);
}

Web Receiver 顯示畫面：

自訂背景

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

變數和預設值

名稱 預設值 說明
--background 黑色 CSS 背景屬性
--background-color CSS background-color 屬性
--background-image CSS background-image 屬性
--background-repeat no-repeat CSS background-repeat 屬性
--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');
}

Web Receiver 顯示畫面：

自訂標誌

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

變數和預設值

名稱 預設值 說明
--logo-background CSS 背景屬性
--logo-color CSS background-color 屬性
--logo-image CSS background-image 屬性
--logo-repeat no-repeat CSS background-repeat 屬性
--logo-size CSS background-size 屬性

CSS 範本

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

Splash 屬性

與 .logo 類別類似，.splash 類別會涵蓋整個播放器。如果設定這些屬性，當接收器處於閒置狀態時，.splash 變數會覆寫 .logo 變數。也就是說，您可以在啟動時使用一組 .logo 屬性，並在接收器閒置時顯示不同的背景或圖片。

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

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

Web Receiver 顯示畫面：

自訂啟動畫面

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

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

變數和預設值

名稱 預設值 說明
--splash-background CSS 背景屬性
--splash-color CSS background-color 屬性
--splash-image CSS background-image 屬性
--splash-repeat CSS background-repeat 屬性
--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 background-image 屬性
--watermark-position 右下方 CSS background-position 屬性
--watermark-repeat no-repeat CSS background-repeat 屬性
--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

A. --logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

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

E. 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 物件可用，請標記要讓 Web Receiver 使用的 MediaElement。方法是在影片的類別清單中加入 castMediaElement，如下所示；否則，網頁接收器會選擇第一個 MediaElement。

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