設定播放器樣式

Web Receiver SDK 提供內建播放器 UI。如要將這個 UI 導入自訂 Web Receiver 應用程式，您必須在 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-image CSS 背景圖片屬性
--background-repeat 無重複 CSS 背景重複屬性
--background-size 翻唱 CSS 背景大小屬性

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 背景顏色屬性
--logo-image CSS 背景圖片屬性
--logo-repeat 無重複 CSS 背景重複屬性
--logo-size CSS 背景大小屬性

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 屬性：

變數和預設值

名稱 預設值 說明
--fly-background CSS 背景屬性
--water-color CSS 背景顏色屬性
--water-image CSS 背景圖片屬性
--fly-repeat CSS 背景重複屬性
--fly-size CSS 背景大小屬性

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 背景顏色屬性
--watermark-image CSS 背景圖片屬性
--浮水印 右下方 CSS 背景位置屬性
--watermark-repeat 無重複 CSS 背景重複屬性
--watermark-size CSS 背景大小屬性

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(色調、100%、50%) 廣告插播標示的顏色。
--font-family Open Sans 中繼資料的字型系列和進度列。
--spinner-image 預設圖片 啟動時顯示的圖片。
--buffering-image 預設圖片 緩衝處理時要顯示的圖片。
--pause-image 預設圖片 暫停期間顯示的圖片。
--play-image 播放時顯示中繼資料的圖片。
--theme-hue 42 玩家使用的色調。
--progress-color hsl(色調、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，如下所示：否則 Web Receiver 會選擇第一個 MediaElement。

<video class="castMediaElement"></video>
上一頁
核心功能
下一頁
為智慧螢幕進行最佳化