Diese Seite wurde von der Cloud Translation API übersetzt.

Ihrer Web Sender App erweiterte Funktionen hinzufügen

Werbeunterbrechungen

Das Web Sender SDK unterstützt Werbeunterbrechungen und Companion-Anzeigen innerhalb eines bestimmten Mediastreams.

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

Pausen können zwar sowohl beim Sender als auch beim Empfänger angegeben werden. Es wird jedoch empfohlen, diese auf Web Receiver und Android TV Receiver anzugeben, um ein einheitliches Verhalten auf allen Plattformen aufrechtzuerhalten.

Im Web geben Sie 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)

Track-APIs verwenden

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

Ein Track-Objekt steht für einen Track im SDK. 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 Medienelement kann mehrere Spuren haben, zum Beispiel mehrere Untertitel (jeweils für eine andere Sprache) oder mehrere alternative Audiostreams (für verschiedene Sprachen).

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 tracks-Attribut. 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 Tracks in der Medien-activeTrackIds-Anfrage festlegen.

Du kannst auch einen oder mehrere mit dem Medienelement verknüpfte Tracks aktivieren, nachdem die Medien geladen wurden. Rufe dazu EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) auf und übergib die IDs der zu aktivierenden Tracks in opt_activeTrackIds. Beide Parameter sind optional und Sie können nach eigenem Ermessen auswählen, welche aktiven Tracks oder Stile Sie festlegen möchten. So aktivieren Sie beispielsweise die französische Untertitel (2) und die französische Audiodatei (3):

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

Um alle Audio- oder Videotracks vom aktuellen Medium zu entfernen, legen Sie einfach mediaInfo.tracks=null (ein leeres Array) fest und laden Sie die Medien neu.

Um alle Texttracks vom aktuellen Medium zu entfernen (z. B. Untertitel zu deaktivieren), führe einen der folgenden Schritte aus:

Aktualisieren Sie var activeTrackIds = [2, 3]; (siehe oben), sodass nur der Audiotrack [3] enthalten ist.
Legen Sie dazu mediaInfo.tracks=null fest. Die Medien müssen nicht neu geladen werden, um die Textuntertitel 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 festlegen

TextTrackStyle ist das Objekt, das die Stilinformationen eines Text-Tracks einschließt. Nachdem du ein vorhandenes TextTrackStyle-Objekt erstellt oder aktualisiert hast, kannst du es auf das aktuell wiedergegebene Medienelement anwenden, indem du die zugehörige Methode editTrackInfo so aufrufst:

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 mit dem Ergebnis der Callbacks (Erfolg oder Fehler) verfolgen und den ursprünglichen Absender entsprechend aktualisieren.

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

Sie können die folgenden Texttrack-Stilelemente gestalten:

Farbe und Deckkraft des Vordergrunds (Text)
Farbe und Transparenz des Hintergrunds
Rahmentyp
Rahmenfarbe
Schriftgröße
Schriftfamilie
Schriftart

Sie können die Textfarbe beispielsweise wie folgt auf Rot mit einer Deckkraft von 75% einstellen:

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 beachten:

Die Absenderanwendung muss sich mit dem Empfänger synchronisieren, damit die Absender-UI immer das Volumen pro Empfänger meldet. Verwenden Sie die Callbacks RemotePlayerEventType.VOLUME_LEVEL_CHANGED und RemotePlayerEventType.IS_MUTED_CHANGED, um die Lautstärke auf dem Absender beizubehalten. Weitere Informationen finden Sie unter Statusupdates.
Absender-Apps dürfen die Lautstärke nicht auf eine bestimmte, vordefinierte Stufe einstellen und die Lautstärke nicht auf die Klingelton-/Medienlautstärke des Senders einstellen, wenn die App auf dem Empfänger geladen wird.

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

Mediennachrichten an den Empfänger senden

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 Sender über die Änderungen beim 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 an die Absender in Callbacks gesendet. In diesem Fall prüft das Receiver SDK nicht, ob sich der neue Stil vom vorherigen unterscheidet, und benachrichtigt alle verbundenen Absender unabhängig davon.

Fortschrittsanzeige

Bei den meisten Apps muss der Wiedergabeort mit einer Fortschrittsanzeige auf dem Absender angezeigt werden. Die Cast APIs verwenden das Cast Media-Protokoll, das die Bandbreitennutzung für dieses und andere Szenarien optimiert, sodass Sie keine eigene Statussynchronisierung implementieren müssen. Die korrekte Implementierung einer Fortschrittsanzeige für die Medienwiedergabe über die APIs finden Sie in der Beispiel-App CastVideos-chrome.

CORS-Anforderungen

Für adaptives Medienstreaming erfordert Google Cast das Vorhandensein von CORS-Headern. Auch einfache MP4-Medienstreams erfordern CORS, wenn sie Titel 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 Mediastreams aktivieren. Wenn Sie also keine CORS-Header für Ihre einfachen MP4-Medien auf Ihrem Server haben und dann einen einfachen Untertiteltrack hinzufügen, können Sie Ihre Medien nur streamen, wenn Sie Ihren Server so aktualisieren, dass er die entsprechenden CORS-Header einfügt.

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 zuvor möglicherweise 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.

Fortsetzen einer Sitzung ohne Aktualisieren der Webseite

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

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

Der empfohlene Ansatz sieht so aus:

Rufen Sie loadMedia() auf, um die Sitzung zu starten.
sessionId lokal speichern
Nehmen Sie bei Bedarf mit requestSessionById(sessionId) wieder an der Sitzung teil

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 beendet, die Sie Ihrer Web Sender App hinzufügen können. Sie können jetzt eine Absender-App für eine andere Plattform (Android oder iOS) oder eine Empfänger-App erstellen.

Zurück

Streamen integrieren