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
B. MusicTrackMediaMetadata.albumName
C. MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist
、MusicTrackMediaMetadata.artist
或 MusicTrackMediaMetadata.composer
第 MusicTrackMediaMetadata.images[0]
集
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>