廣告插播時間點
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
)。如果傳送「不含」先前啟用的trackId
的activeTracksId
陣列,則會停用文字軌。
設定文字軌樣式
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
});
}
});
最新動態
當多個傳送者連線至相同的接收器時,每個寄件者必須知道接收端的變更,即使這些變更是由其他傳送者啟動。
因此,應用程式應在 RemotePlayerController
上註冊所有必要的事件監聽器。如果目前媒體的 TextTrackStyle
有所變更,所有已連結的傳送者都會收到通知,且目前媒體工作階段的對應屬性 (例如 MediaInfo
欄位的 activeTrackIds
和 textTrackStyle
) 也會在回呼中傳送給傳送者。在這種情況下,接收者 SDK 不會驗證新樣式是否與先前樣式不同,並通知所有已連線的傳送者。
進度指標
大多數應用程式都必須在傳送端顯示進度指標的播放位置。Cast API 會使用 Cast 媒體通訊協定,針對此和其他情境最佳化頻寬用量,因此您不需要自行實作狀態同步處理。如要瞭解如何使用 API 正確實作媒體播放的進度指標,請參閱 CastVideos-chrome 範例應用程式。
CORS 規定
針對自動調整媒體串流,Google Cast 要求存在 CORS 標頭,但即使是簡單的 mp4 媒體串流,如果其中含有 Track,就需要 CORS。如果想為任何媒體啟用追蹤,就必須同時為追蹤串流和媒體串流啟用 CORS。因此,如果您的伺服器上簡易 mp4 媒體沒有 CORS 標頭,而您將新增簡單的字幕軌,則除非您更新伺服器加入適當的 CORS 標頭,否則您將無法串流媒體。
您需要以下標頭:Content-Type
、Accept-Encoding
和 Range
。
請注意,最後兩個標頭 (Accept-Encoding
和 Range
) 是先前可能不需要的額外標頭。
萬用字元「*」無法用於 Access-Control-Allow-Origin
標頭。如果網頁含有受保護媒體內容,就必須使用網域,而不是萬用字元。
繼續執行工作階段,不重新載入網頁
如要重新啟用現有的 CastSession
,請使用 requestSessionById(sessionId)
搭配要彙整的工作階段 sessionId
。
呼叫 loadMedia()
後,即可在有效的 CastSession
上使用 getSessionId()
找到 sessionId
。
建議做法如下:
- 呼叫
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) 建構傳送端應用程式,或是建構接收端應用程式。