ミッドロール挿入点
Web Sender SDK は、Google 広告内での 指定することもできます。
詳しくは、 詳しくは、ウェブレシーバーのミッドロール挿入点の概要をご覧ください。 この動画をご覧ください
挿入点は送信者と受信者のどちらにも指定できますが、通常は Web Receiver および Android TV Receiver: 把握することができます
ウェブでは、読み込みコマンドでミッドロール挿入点を指定します。
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;
メディア アイテムには複数のトラックを含めることができます。たとえば、1 つのテーブルに複数の 字幕(それぞれ異なる言語に対応)または複数の代替音声ストリーム (さまざまな言語の場合)。
MediaInfo
メディア アイテムをモデル化するクラスです。グループに 1 つ以上のコレクションを
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)
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
});
}
});
ステータスの更新
複数の送信者が同じ受信機に接続されている場合、 各送信者は、受信者が変更された場合でも、変更に気づくことができます 他の送信者から送信されました。
そのためには、アプリケーションで必要なすべてのリスナーを
RemotePlayerController
。
もし
TextTrackStyle
クリックすると、接続されているすべての送信者に通知されます
現在のメディア セッションに対応するプロパティ(
の activeTrackIds
と textTrackStyle
MediaInfo
フィールドがコールバックで送信者に送信されます。この場合 レシーバー SDK は
では、新しいスタイルが以前のスタイルと異なるかどうかは検証されず、
接続されているすべての送信者に通知されます。
進行状況インジケーター
送信側に進行状況インジケーターとともに再生場所を表示すると、 要件があります。Cast API は、キャスト メディア プロトコルを使用します。 このシナリオを含むシナリオで帯域幅の消費が最適化されるため、 独自のステータス同期を実装する必要はありません適切な実装のためには API を使用してメディア再生の進行状況インジケーターを表示する方法については、 CastVideos-chrome サンプルアプリ。
CORS の要件
アダプティブ メディア ストリーミングの場合、Google Cast には CORS ヘッダーが必要です。 単純な mp4 メディア ストリームでも Tracks が含まれる場合は CORS が必要です。もし すべてのメディアで Tracks を有効にするには、両方のトラックで CORS を有効にする必要があります ストリームとメディアストリームですCORS ヘッダーを利用できない場合は サーバー上のシンプルな mp4 メディア用ファイルを作成し、 サーバーをアップデートしないとメディアをストリーミングできません。 適切な CORS ヘッダーを含めます。
ヘッダー Content-Type
、Accept-Encoding
、Range
が必要です。
最後の 2 つのヘッダー、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();
}
});
次のステップ
ウェブ送信アプリに追加できる機能はこれで終了です。 別のプラットフォーム用の送信アプリを作成できるようになりました (Android または iOS) レシーバー アプリを作成します。