Ihrer Web Sender App erweiterte Funktionen hinzufügen

Werbeunterbrechungen

Das Web Sender SDK bietet Unterstützung für Werbeunterbrechungen und Companion-Anzeigen in einem bestimmten Media-Stream.

Weitere Informationen zur Funktionsweise von Werbeunterbrechungen finden Sie unter Web Receiver Ad Breaks Overview.

Pausen können sowohl auf dem Sender als auch auf dem Empfänger angegeben werden. Es wird jedoch empfohlen, sie auf dem Web Receiver und dem Android TV Receiver anzugeben, um ein einheitliches 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 API verwenden

Ein Track kann ein Textobjekt (Untertitel) oder ein Audio- oder Videostreamobjekt sein. Mit den Tracks APIs können Sie in Ihrer Anwendung mit diesen Objekten arbeiten.

Ein Track-Objekt stellt einen Track im SDK dar. So können Sie einen Track konfigurieren und ihm eine eindeutige ID zuweisen:

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 Media-Element kann mehrere Tracks haben, z. B. mehrere Untertitel (jeweils für eine andere Sprache) oder mehrere alternative Audio-Streams (für verschiedene Sprachen).

MediaInfo ist die Klasse, die ein Media-Element modelliert. Wenn Sie eine Sammlung von Track-Objekten mit einem Medienelement verknüpfen möchten, aktualisieren Sie dessen tracks-Property. Diese Verknüpfung muss erfolgen, bevor die Medien auf 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 Tracks in der Media-Anfrage activeTrackIds festlegen.

Sie können auch einen oder mehrere Tracks aktivieren, die dem Media-Element zugeordnet waren, nachdem die Media 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. Sie können selbst entscheiden, welche aktiven Tracks oder Stile Sie festlegen möchten. So aktivierst du beispielsweise französische Untertitel (2) und 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 den aktuellen Media entfernen möchten, legen Sie einfach mediaInfo.tracks=null (ein leeres Array) fest und laden Sie die Media neu.

Wenn Sie alle Text-Tracks aus den aktuellen Medien entfernen möchten (z. B. um Untertitel zu deaktivieren), haben Sie folgende Möglichkeiten:

  • Aktualisiere var activeTrackIds = [2, 3]; (siehe oben), sodass nur [3], der Audiotrack, enthalten ist.
  • Legen Sie dazu mediaInfo.tracks=null fest. Hinweis: Es ist nicht erforderlich, die Media neu zu laden, um Textuntertitel (track.hidden) zu deaktivieren. Wenn Sie ein activeTracksId-Array senden, das keine zuvor aktivierte trackId enthält, wird der Text-Track nicht deaktiviert.

Text-Tracks formatieren

TextTrackStyle ist das Objekt, das die Formatierungsinformationen eines Text-Tracks enthält. Nachdem Sie ein TextTrackStyle-Objekt erstellt oder ein vorhandenes Objekt aktualisiert haben, können Sie es auf das aktuell wiedergegebene Media-Element anwenden, indem Sie die Methode editTrackInfo aufrufen:

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 informieren.

In Anwendungen sollten Nutzer den Stil für Text-Tracks entweder über die vom System oder von der Anwendung selbst bereitgestellten Einstellungen aktualisieren können.

Sie können die folgenden Stilelemente für Text-Tracks festlegen:

  • Vordergrundfarbe (Text) und Deckkraft
  • Farbe und Transparenz des Hintergrunds
  • Rahmentyp
  • Rahmenfarbe
  • Schriftartenskalierung
  • Schriftfamilie
  • Schriftart

So legen Sie beispielsweise die Textfarbe auf Rot mit einer Deckkraft von 75% fest:

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

Lautstärkeregelung

Sie können die Lautstärke des Empfängers mit RemotePlayer und RemotePlayerController festlegen.

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

Die Sender-App sollte die folgenden Richtlinien für die Lautstärkeregelung einhalten:

  • Die Senderanwendung muss mit dem Empfänger synchronisiert werden, damit in der Sender-Benutzeroberfläche immer die Lautstärke des Empfängers angezeigt wird. Verwende die Callbacks RemotePlayerEventType.VOLUME_LEVEL_CHANGED und RemotePlayerEventType.IS_MUTED_CHANGED, um die Lautstärke auf dem Absender beizubehalten. Weitere Informationen finden Sie unter Statusaktualisierungen.
  • Sender-Apps dürfen die Lautstärke nicht auf einen bestimmten, vordefinierten Wert einstellen oder die Lautstärke auf die Klingelton-/Medienlautstärke des Sendergeräts einstellen, wenn die App auf dem Empfänger geladen wird.

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

Senden von Mediennachrichten an den Empfänger

Media Messages kann vom Absender 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
    });
  }
});

Neuigkeiten und Updates

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

Dazu sollte Ihre Anwendung alle erforderlichen Listener für RemotePlayerController registrieren. Wenn sich die TextTrackStyle der aktuellen Media ändert, werden alle verbundenen Absender benachrichtigt und die entsprechenden Eigenschaften der aktuellen Media-Sitzung, z. B. activeTrackIds und textTrackStyle des Felds MediaInfo, werden in Callbacks an die Absender gesendet. In diesem Fall prüft das Receiver SDK nicht, ob sich der neue Stil vom vorherigen unterscheidet, und benachrichtigt alle verbundenen Sender.

Fortschrittsanzeige

Die Anzeige des Wiedergabeorts mit einem Fortschrittsindikator auf dem Sendergerät ist für die meisten Apps erforderlich. Die Cast-APIs verwenden das Cast-Medienprotokoll, das den Bandbreitenverbrauch für dieses und andere Szenarien optimiert. Sie müssen also keine eigene Statussynchronisierung implementieren. Informationen zur korrekten Implementierung einer Fortschrittsanzeige für die Medienwiedergabe mit den APIs finden Sie in der Beispiel-App CastVideos-chrome.

CORS-Anforderungen

Für adaptives Media-Streaming sind CORS-Header für Google Cast erforderlich. Selbst einfache MP4-Media-Streams benötigen CORS, wenn sie Tracks enthalten. Wenn Sie Tracks für beliebige Medien aktivieren möchten, müssen Sie CORS sowohl für Ihre Track- als auch für Ihre Media-Streams aktivieren. Wenn Sie also keine CORS-Header für Ihre einfachen MP4-Medien auf Ihrem Server haben und dann einen einfachen Untertitel-Track hinzufügen, können Sie Ihre Medien nicht streamen, es sei denn, Sie aktualisieren Ihren Server, um die entsprechenden CORS-Header einzufügen.

Sie benötigen die folgenden Spaltenüberschriften: Content-Type, Accept-Encoding und Range. Die letzten beiden Header, Accept-Encoding und Range, sind zusätzliche Header, die Sie möglicherweise bisher 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 eine Domain anstelle eines Platzhalters verwendet werden.

Sitzung fortsetzen, ohne die Webseite neu zu laden

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

Die sessionId kann auf dem aktiven CastSession mit getSessionId() nach dem Aufrufen von loadMedia() gefunden werden.

Wir empfehlen folgende Vorgehensweise:

  1. Rufen Sie loadMedia() an, um die Sitzung zu starten.
  2. sessionId lokal speichern
  3. Bei Bedarf können Sie der Sitzung über 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 alle Funktionen abgedeckt, 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 entwickeln.

Zurück
Streamen integrieren