ミッドロール挿入点
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)
Track 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
リクエストで設定できます。
メディアが読み込まれた後に、そのメディア アイテムに関連付けられた 1 つ以上のトラックを有効にすることもできます。そのためには、EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle)
を呼び出して、有効にするトラックの ID を opt_activeTrackIds
で渡します。どちらのパラメータも省略可能で、任意に設定するアクティブなトラックやスタイルを選択できます。たとえば、フランス語字幕(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 は、キャスト メディア プロトコルを使用します。これにより、このシナリオやその他のシナリオで帯域幅の消費が最適化されるため、独自のステータス同期を実装する必要はありません。API を使用したメディア再生の進行状況インジケーターの適切な実装については、CastVideos-chrome サンプルアプリをご覧ください。
CORS の要件
アダプティブ メディア ストリーミングの場合、Google Cast には CORS ヘッダーが必要ですが、単純な mp4 メディア ストリームでもトラックが含まれている場合は CORS が必要です。任意のメディアでトラックを有効にするには、トラック ストリームとメディア ストリームの両方で CORS を有効にする必要があります。そのため、サーバー上のシンプルな mp4 メディアに CORS ヘッダーがない場合に、単純な字幕トラックを追加すると、適切な CORS ヘッダーを含めるようにサーバーを更新しない限り、メディアをストリーミングできません。
ヘッダー Content-Type
、Accept-Encoding
、Range
が必要です。最後の 2 つのヘッダー、Accept-Encoding
と Range
は、以前には不要な追加のヘッダーです。
Access-Control-Allow-Origin
ヘッダーにはワイルドカード「*」を使用できません。ページに保護されたメディア コンテンツがある場合は、ワイルドカードではなくドメインを使用する必要があります。
ウェブページを再読み込みせずにセッションを再開する
既存の CastSession
を再開するには、参加しようとしているセッションの sessionId
を指定して requestSessionById(sessionId)
を使用します。
sessionId
は、loadMedia()
を呼び出した後に getSessionId()
を使用して、アクティブな CastSession
で確認できます。
おすすめの方法は次のとおりです。
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)用の送信アプリまたはレシーバー アプリを構築できるようになりました。