Ihrer Web Sender App erweiterte Funktionen hinzufügen

Werbeunterbrechungen

Das Web Sender SDK unterstützt Werbeunterbrechungen und Companion-Anzeigen in einem bestimmten Medienstream.

Weitere Informationen zur Funktionsweise von Werbeunterbrechungen findest du in der Übersicht zu Werbeunterbrechungen bei Webempfängern.

Pausen können zwar sowohl für Sender als auch für Empfänger festgelegt werden, es wird jedoch empfohlen, sie auf dem Web Receiver und dem Android TV Receiver festzulegen, um ein konsistentes Verhalten auf allen Plattformen zu gewährleisten.

Geben Sie im Web Werbeunterbrechungen in einem Ladebefehl mit BreakClip und Break an:

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)

Tracks-APIs verwenden

Ein Track kann ein Textobjekt (Untertitel) oder ein Audio- oder Videostreamobjekt sein. Die Tracks APIs ermöglichen Ihnen die Arbeit mit diesen Objekten in Ihrer Anwendung.

Ein Track-Objekt stellt einen Track im SDK dar. So konfigurieren Sie einen Track und weisen ihm eine eindeutige ID zu:

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;

Ein Medienelement kann mehrere Tracks haben. Beispielsweise kann es mehrere Untertitel (jeweils für eine andere Sprache) oder mehrere alternative Audiostreams (für verschiedene Sprachen) haben.

MediaInfo ist die Klasse, die ein Medienelement modelliert. Wenn Sie eine Sammlung von Track-Objekten mit einem Medienelement verknüpfen möchten, aktualisieren Sie dessen Attribut tracks. Diese Verknüpfung muss hergestellt werden, bevor die Medien in den Empfänger geladen werden:

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;

Sie können die aktiven Titel in der Medienanfrage activeTrackIds festlegen.

Sie können auch einen oder mehrere Tracks aktivieren, die mit dem Medienelement verknüpft waren, nachdem die Medien geladen wurden. Rufen Sie dazu EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) auf und übergeben Sie die IDs der zu aktivierenden Tracks in opt_activeTrackIds. Beide Parameter sind optional und du kannst nach Belieben auswählen, welche, aktive Tracks oder Stile du festlegen möchtest. So aktivierst du beispielsweise die französische Untertitel (2) und die französische Audioinhalte (3):

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

Wenn Sie alle Audio- oder Videotracks aus dem aktuellen Medium entfernen möchten, legen Sie einfach mediaInfo.tracks=null (ein leeres Array) fest und laden Sie die Medien neu.

Wenn du alle Texttracks des aktuellen Mediums entfernen und beispielsweise die Untertitel deaktivieren möchtest, hast du folgende Möglichkeiten:

  • Aktualisieren Sie var activeTrackIds = [2, 3]; (siehe oben), sodass nur der Audiotrack [3] enthalten ist.
  • Legen Sie dazu mediaInfo.tracks=null fest. Sie müssen die Medien nicht neu laden, um Untertitel zu deaktivieren (track.hidden). Wenn Sie ein activeTracksId-Array senden, das kein zuvor aktiviertes trackId enthält, wird der Texttrack deaktiviert.

Stile für Texttracks erstellen

TextTrackStyle ist das Objekt, das die Stilinformationen eines Text-Tracks einschließt. Nachdem Sie ein TextTrackStyle-Objekt erstellt oder aktualisiert haben, können Sie es auf das aktuell wiedergegebene Medienelement anwenden. Rufen Sie dazu die Methode editTrackInfo so auf:

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

Sie können den Status der Anfrage anhand des Ergebnisses der Callbacks (Erfolg oder Fehler) verfolgen und den ursprünglichen Absender entsprechend aktualisieren.

Anwendungen sollten es Nutzern ermöglichen, den Stil für Textspuren entweder über die vom System vorgegebenen Einstellungen oder von der Anwendung selbst zu aktualisieren.

Sie können die folgenden Text-Track-Stilelemente gestalten:

  • Farbe und Deckkraft des Vordergrunds (Text)
  • Farbe und Transparenz des Hintergrunds
  • Rahmentyp
  • Rahmenfarbe
  • Schriftskala
  • Schriftfamilie
  • Schriftart

Legen Sie die Textfarbe beispielsweise wie folgt auf Rot mit einer Deckkraft von 75% fest:

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

Lautstärkeregelung

Mit RemotePlayer und RemotePlayerController kannst du die Empfängerlautstärke einstellen.

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

Die Absender-App sollte zur Steuerung der Lautstärke die folgenden Richtlinien einhalten:

  • Die Senderanwendung muss mit dem Empfänger synchronisiert werden, damit die Absender-UI immer das Volumen pro Empfänger meldet. Verwende die Callbacks RemotePlayerEventType.VOLUME_LEVEL_CHANGED und RemotePlayerEventType.IS_MUTED_CHANGED, um die Lautstärke des Absenders beizubehalten. Weitere Informationen finden Sie unter Statusaktualisierungen.
  • Sender-Apps dürfen die Lautstärke nicht auf eine bestimmte, vordefinierte Lautstärke einstellen bzw. die Lautstärke auf die Klingelton-/Medienlautstärke des Absendergeräts festlegen, wenn die App auf dem Empfänger geladen wird.

Weitere Informationen finden Sie in der Checkliste für das Design unter Lautstärkeregler für Absender.

Mediennachrichten an den Empfänger senden

Media Messages kann vom Sender an den Empfänger gesendet werden. So senden Sie beispielsweise eine SKIP_AD-Nachricht an den Empfänger:

// 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
    });
  }
});

Statusaktualisierungen

Wenn mehrere Sender mit demselben Empfänger verbunden sind, ist es wichtig, dass jeder Sender über die Änderungen auf dem Empfänger informiert ist, auch wenn diese Änderungen von anderen Absendern initiiert wurden.

Zu diesem Zweck sollte Ihre Anwendung alle erforderlichen Listener in RemotePlayerController registrieren. Wenn sich der TextTrackStyle der aktuellen Medien ändert, werden alle verbundenen Absender benachrichtigt und die entsprechenden Attribute der aktuellen Mediensitzung, z. B. activeTrackIds und textTrackStyle des Felds MediaInfo, werden in Callbacks an Absender gesendet. In diesem Fall überprüft das Empfänger-SDK nicht, ob sich der neue Stil vom vorherigen unterscheidet, und benachrichtigt alle verbundenen Absender unabhängig davon.

Fortschrittsanzeige

Die meisten Apps müssen den Wiedergabeort mit einer Fortschrittsanzeige auf dem Absender anzeigen. Die Cast APIs verwenden das Cast-Medienprotokoll, das den Bandbreitenverbrauch für dieses und andere Szenarien optimiert, sodass Sie keine eigene Statussynchronisierung implementieren müssen. Informationen zur korrekten Implementierung einer Fortschrittsanzeige für die Medienwiedergabe über die APIs finden Sie in der Beispiel-App CastVideos-chrome.

CORS-Anforderungen

Für adaptives Mediastreaming sind für Google Cast CORS-Header erforderlich, aber auch für einfache MP4-Medienstreams ist CORS erforderlich, wenn sie Tracks enthalten. Wenn Sie Tracks für Medien aktivieren möchten, müssen Sie CORS sowohl für Ihre Track- als auch für Ihre Medienstreams aktivieren. Wenn auf Ihrem Server keine CORS-Header für Ihre einfachen MP4-Medien zur Verfügung stehen und Sie dann eine einfache Untertitelspur hinzufügen, können Sie Ihre Medien erst streamen, wenn Sie Ihren Server so aktualisieren, dass die entsprechenden CORS-Header enthalten sind.

Sie benötigen die folgenden Header: Content-Type, Accept-Encoding und Range. Die letzten beiden Header, Accept-Encoding und Range, sind zusätzliche Header, die Sie möglicherweise zuvor nicht benötigt haben.

Platzhalter „*“ können nicht für den Access-Control-Allow-Origin-Header verwendet werden. Wenn die Seite geschützte Medieninhalte enthält, muss anstelle eines Platzhalters eine Domain verwendet werden.

Eine Sitzung fortsetzen, ohne die Webseite zu aktualisieren

Wenn Sie eine vorhandene CastSession fortsetzen möchten, verwenden Sie requestSessionById(sessionId) mit der sessionId der Sitzung, an der Sie teilnehmen möchten.

Das sessionId kann im aktiven CastSession mithilfe von getSessionId() nach dem Aufruf von loadMedia() abgerufen werden.

Wir empfehlen folgende Vorgehensweise:

  1. Rufen Sie loadMedia() auf, um die Sitzung zu starten.
  2. sessionId lokal speichern
  3. Bei Bedarf können Sie der Sitzung mit requestSessionById(sessionId) wieder beitreten.
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();
  }
});

Nächste Schritte

Damit sind die Funktionen abgeschlossen, die Sie Ihrer Web Sender-App hinzufügen können. Sie können jetzt eine Sender-App für eine andere Plattform (Android oder iOS) oder eine Empfänger-App erstellen.