本頁面由 Cloud Translation API 翻譯而成。

為 Web Sender 應用程式新增進階功能

廣告插播時間點

Web Sender SDK 支援內部廣告插播和隨播廣告中的隨播廣告針對特定媒體串流。

詳情請參閱網路接收端廣告插播總覽瞭解詳情瞭解廣告插播的運作方式

雖然你可以在傳送端和接收端中指定休息時間，但建議設定「網路接收端」和 Android TV 接收器，保持一致跨平台上的行為

在網頁上，使用 BreakClip敬上和 Break：

let breakClip1 = new BreakClip('bc0');
breakClip1.title = 'Clip title'
breakClip1.posterUrl = 'https://www.some.url';
breakClip1.duration = 60;
breakClip.whenSKippable = 5;

let breakClip2 = ...
let breakClip3 = ...

let break1 = new Break('b0', ['bc0', 'bc1', 'bc2'], 10);

let mediaInfo = new chrome.cast.media.MediaInfo(<contentId>, '<contentType');
...
mediaInfo.breakClips = [breakClip1, breakClip2, breakClip3];
mediaInfo.breaks = [break1];

let request = new chrome.cast.media.LoadRequest(mediaInfo);

cast.framework.CastContext.getInstance().getCurrentSession().loadMedia(request)

使用測試群組 API

音軌可以是文字 (字幕或字幕) 物件，也可以是音訊或影片串流物件。Tracks API 可讓您在應用程式中處理這些物件。

Track 物件代表 SDK 中的音軌。您可以設定測試群組並指派專屬 ID 加入以下程式碼：

var englishSubtitle = new chrome.cast.media.Track(1, // track ID
  chrome.cast.media.TrackType.TEXT);
englishSubtitle.trackContentId = 'https://some-url/caption_en.vtt';
englishSubtitle.trackContentType = 'text/vtt';
englishSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
englishSubtitle.name = 'English Subtitles';
englishSubtitle.language = 'en-US';
englishSubtitle.customData = null;

var frenchSubtitle = new chrome.cast.media.Track(2, // track ID
  chrome.cast.media.TrackType.TEXT);
frenchSubtitle.trackContentId = 'https://some-url/caption_fr.vtt';
frenchSubtitle.trackContentType = 'text/vtt';
frenchSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
frenchSubtitle.name = 'French Subtitles';
frenchSubtitle.language = 'fr';
frenchSubtitle.customData = null;

var frenchAudio = new chrome.cast.media.Track(3, // track ID
  chrome.cast.media.TrackType.AUDIO);
frenchAudio.trackContentId = 'trk0001';
frenchAudio.trackContentType = 'audio/mp3';
frenchAudio.subtype = null;
frenchAudio.name = 'French Audio';
frenchAudio.language = 'fr';
frenchAudio.customData = null;

一個媒體項目可以有多個音軌：例如，您可以在單一區域中字幕 (適用於不同語言) 或多個替代音訊串流 (針對不同語言)。

MediaInfo敬上是建立媒體項目的模型類別為一組集合建立關聯 Track敬上只要將媒體項目更新為具有媒體項目的 tracks 資源。必須先建立關聯，載入接收端：

var tracks = [englishSubtitle, frenchSubtitle, frenchAudio];
var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
mediaInfo.contentType = 'video/mp4';
mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
mediaInfo.customData = null;
mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED;
mediaInfo.textTrackStyle = new chrome.cast.media.TextTrackStyle();
mediaInfo.duration = null;
mediaInfo.tracks = tracks;

您可以在媒體中設定目前使用的音軌 activeTrackIds敬上請求。

您也可以啟用一或多個與該媒體相關聯的曲目項目，方法是在媒體載入後呼叫 EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle)敬上並傳遞要在 opt_activeTrackIds 中啟用的音軌 ID。注意：這兩個參數皆為選用項目，您可以選擇使用有效的軌跡或樣式自行設定規則舉個例子啟用法文字幕 (2) 和法文音訊 (3)：

var activeTrackIds = [2, 3];
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(activeTrackIds);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

如要從現有媒體中移除所有音軌或視訊軌，只需設定 mediaInfo.tracks=null (空白陣列) 並重新載入媒體。

從目前媒體中移除所有文字軌 (例如關閉字幕)，請執行下列其中一項操作：

更新 var activeTrackIds = [2, 3]; (如先前所示)，以便其包括 [3]，音軌。
請設定 mediaInfo.tracks=null。請注意，您不必自行重新載入媒體即可關閉文字說明文字 (track.hidden)。傳送「不含」的 activeTracksId 陣列先前啟用的 trackId 會停用文字軌。

設定文字軌樣式

TextTrackStyle敬上是封裝文字軌樣式資訊的物件。更新後建立或更新現有 TextTrackStyle 物件時，您可以將該物件套用至呼叫目前播放的媒體項目 editTrackInfo 方法，如下所示：

var textTrackStyle = new chrome.cast.media.TextTrackStyle();
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(textTrackStyle);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

您可以追蹤回呼結果的要求狀態，例如：成功或錯誤，並據此更新來源寄件者。

應用程式必須允許使用者更新文字軌的樣式，調整系統本身或應用程式的設定

您可以為下列文字軌樣式元素設定樣式：

前景 (文字) 顏色和不透明度
背景色彩和透明度
邊緣類型
邊緣顏色
字型
字型系列
字型樣式

舉例來說，您可以將文字顏色設為紅色，透明度 75%，如下所示：

var textTrackStyle = new chrome.cast.media.TextTrackStyle();
textTrackStyle.foregroundColor = '#80FF0000';

音量控制項

您可以使用 RemotePlayer 和 RemotePlayerController 設定接收器音量

function changeVolume(newVolume) {
  player.volumeLevel = newVolume;
  playerController.setVolumeLevel();
  // Update sender UI to reflect change
}

傳送者應用程式應遵守下列控制音量規範：

傳送者應用程式必須與接收端同步處理，這樣傳送方 UI 一律會回報每個接收端的音量。使用「RemotePlayerEventType.VOLUME_LEVEL_CHANGED」和 RemotePlayerEventType.IS_MUTED_CHANGED 回呼以維持音量大小。請參閱狀態更新瞭解詳情
傳送者應用程式不得設定特定預先定義的音量或者，將音量調到傳送者裝置的鈴聲/媒體音量，應用程式會在接收器上載入

詳情請見寄件者音量控制項設計檢查清單中所述的提示。

傳送媒體訊息給接收器

可以將 Media Messages 從寄件者傳送給接收器。舉例來說，如要傳送 SKIP_AD 訊息給接收器：

// Get a handle to the skip button element
const skipButton = document.getElementById('skip');
skipButton.addEventListener("click", function() {
  if (castSession) {
    const media = castSession.getMediaSession();
    castSession.sendMessage('urn:x-cast:com.google.cast.media', {
      type: 'SKIP_AD',
      requestId: 1,
      mediaSessionId: media.mediaSessionId
    });
  }
});

進度指標

如果傳送者顯示播放位置及進度指標，才能符合大多數應用程式的需求Cast API 會使用 Cast 媒體通訊協定可最佳化網路頻寬用量，因此您不用擔心則需要執行自己的狀態同步處理。正確導入作業使用 API 播放媒體的進度指標 CastVideos-chrome 範例應用程式。

CORS 規定

對於自動調整式媒體串流，Google Cast 需要 CORS 標頭。但即使是簡單的 mp4 媒體串流，若含有曲目，則需要 CORS。如果發生以下情況：如要為任何媒體啟用「追蹤」功能，請務必同時為測試群組啟用 CORS 串流和媒體串流因此，如果沒有 CORS 標頭針對伺服器上的簡易 mp4 媒體，然後新增簡單的子標題您必須更新伺服器，才能串流播放媒體加入適當的 CORS 標頭

您需要以下標頭：Content-Type、Accept-Encoding 和 Range。請注意，最後兩個標頭 (Accept-Encoding 和 Range) 是額外的先前可能不需要的標題

萬用字元「*」不能用於 Access-Control-Allow-Origin 標頭。如果網頁含有受保護媒體內容，就必須使用網域，而不是萬用字元。

繼續執行工作階段，不重新載入網頁

如要重新啟用現有的CastSession，請使用 requestSessionById(sessionId) 並將該工作階段的 sessionId 用來取代。

如需查找 sessionId 版本，CastSession請使用 getSessionId()敬上通話後 loadMedia()。

建議做法如下：

致電 loadMedia()敬上開始工作階段
將 sessionId 儲存在本機
使用以下方式重新加入工作階段： requestSessionById(sessionId)敬上視需要

let sessionId;

function rejoinCastSession() {
  chrome.cast.requestSessionById(sessionId);

  // Add any business logic to load new content or only resume the session
}

document.getElementById('play-button').addEventListener(("click"), function() {
  if (sessionId == null) {
    let castSession = cast.framework.CastContext.getInstance().getCurrentSession();
    if (castSession) {
      let mediaInfo = createMediaInfo();
      let request = new chrome.cast.media.LoadRequest(mediaInfo);
      castSession.loadMedia(request)

      sessionId = CastSession.getSessionId();
    } else {
      console.log("Error: Attempting to play media without a Cast Session");
    }
  } else {
    rejoinCastSession();
  }
});

後續步驟

以上就是可新增至 Web Sender 應用程式的功能。現在可以為其他平台建構傳送者應用程式 (Android 或 iOS)，或建構接收端應用程式。

整合 Cast