Ihrer Web Sender App erweiterte Funktionen hinzufügen

Werbeunterbrechungen

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

Weitere Informationen zur Funktionsweise von Werbeunterbrechungen findest du in der Übersicht über Werbeunterbrechungen für Web Receiver.

Werbeunterbrechungen 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-Empfänger anzugeben, um ein einheitliches Verhalten auf allen Plattformen zu gewährleisten.

Gib 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. Mit den Tracks APIs können Sie diese Objekte in Ihrer Anwendung verwenden.

Hinweis: Mit den Styled- und Default Media-Receivern können Sie nur die Text-Tracks mit der API verwenden. Wenn du mit Audio- und Videotracks arbeiten möchtest, musst du einen benutzerdefinierten Empfänger entwickeln.

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;

Eine Mediendatei kann mehrere Tracks enthalten, z. B. mehrere Untertitel (jeweils für eine andere Sprache) oder mehrere alternative Audiostreams (für verschiedene Sprachen).

MediaInfo ist die Klasse, die eine Mediendatei modelliert. Wenn Sie eine Sammlung von Track-Objekten mit einer Mediendatei 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;

Du kannst die aktiven Tracks in der Medienanfrage activeTrackIds festlegen.

Du kannst auch einen oder mehrere Tracks aktivieren, die mit der Mediendatei verknüpft waren, nachdem das Medium geladen wurde. Rufe dazu EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) auf und übergib die IDs der zu aktivierenden Tracks in opt_activeTrackIds. Beide Parameter sind optional. Sie können nach eigenem Ermessen entscheiden, ob Sie aktive Tracks oder Stile festlegen möchten. So aktivierst du beispielsweise die französischen Untertitel (2) und die französische Audiospur (3):

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

Wenn du alle Audio- oder Videotracks aus den aktuellen Medien entfernen möchtest, lege einfach mediaInfo.tracks=null (ein leeres Array) fest und lade die Medien neu.

Wenn du alle Text-Tracks aus den aktuellen Medien entfernen möchtest (z. B. Untertitel deaktivieren), hast du folgende Möglichkeiten:

• Aktualisieren Sie var activeTrackIds = [2, 3]; (oben gezeigt), sodass nur [3], der Audiotrack, enthalten ist.
• Legen Sie dazu mediaInfo.tracks=null fest. Beachte, dass es nicht erforderlich ist, die Medien neu zu laden, um Untertitel (track.hidden) zu deaktivieren. Wenn du ein activeTracksId-Array sendest, das einen zuvor aktivierten trackId nicht enthält, wird der Text-Track deaktiviert.

Texttracks gestalten

TextTrackStyle ist das Objekt, das die Stilinformationen eines Texttracks enthält. Nachdem Sie ein vorhandenes TextTrackStyle-Objekt erstellt oder aktualisiert haben, können Sie es auf die aktuell wiedergegebene Mediendatei anwenden. Rufen Sie dazu die Methode editTrackInfo 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 (entweder Erfolg oder Fehler) verfolgen und den ursprünglichen Absender entsprechend informieren.

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

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

• Vordergrundfarbe (Textfarbe) und Deckkraft
• Farbe und Transparenz des Hintergrunds
• Rahmentyp
• Rahmenfarbe
• Schriftskalierung
• 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

Mit RemotePlayer und RemotePlayerController kannst du die Lautstärke des Empfängers einstellen.

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

Die Sender-App sollte die folgenden Richtlinien zur Lautstärkeregelung einhalten:

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

Weitere Informationen findest du unter Lautstärkeregelung für Sender in der Design-Checkliste.

Senden von Mediennachrichten an den Empfänger

Media Messages kann vom Absender an den Empfänger gesendet werden. So sendest du 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 Sender mit demselben Empfänger verbunden sind, ist es wichtig, dass jeder Sender über die Änderungen am Empfänger informiert ist, auch wenn diese Änderungen von anderen Sendern initiiert wurden.

Hinweis : Dies ist für alle Apps wichtig, nicht nur für solche, die explizit mehrere Sender unterstützen, da einige Cast-Geräte Steuereingaben (Fernbedienungen, Tasten) haben, die sich wie virtuelle Sender verhalten und den Status auf dem Empfänger beeinflussen.

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

Hinweis: Die Liste der Tracks, die mit den aktuell geladenen Medien verknüpft sind, kann nicht geändert werden. Bei Bedarf musst du die Trackinformationen im MediaInfo-Objekt aktualisieren und die Medien neu laden.

Fortschrittsanzeige

Die Anzeige der Wiedergabeposition mit einer Fortschrittsanzeige auf dem Sender 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 mithilfe der APIs finden Sie in der Beispiel-App CastVideos-chrome.

CORS-Anforderungen

Für adaptives Medienstreaming sind bei Google Cast CORS-Header erforderlich. Aber auch für einfache MP4-Medienstreams ist CORS erforderlich, wenn sie Tracks enthalten. Wenn du Tracks für Medien aktivieren möchtest, musst du CORS sowohl für deine Track-Streams als auch für deine Medienstreams 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 erst streamen, wenn Sie Ihren Server so aktualisieren, dass er die entsprechenden CORS-Header enthält.

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 bisher nicht benötigt haben.

Platzhalter „*“ können nicht für den Header Access-Control-Allow-Origin 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 finden Sie auf der aktiven CastSession mit getSessionId(), nachdem Sie loadMedia() aufgerufen haben.

Die empfohlene Vorgehensweise ist:

1. Rufe loadMedia() an, um die Sitzung zu starten
2. sessionId lokal speichern
3. Bei Bedarf können Sie die Sitzung mit requestSessionById(sessionId) wieder aufrufen.

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

Das waren die Funktionen, die du deiner Web-Sender-App hinzufügen kannst. Du kannst jetzt eine Sender-App für eine andere Plattform (Android oder iOS) oder eine Empfänger-App erstellen.