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 unter Übersicht über Werbeunterbrechungen für Webreceiver.

Werbeunterbrechungen können sowohl beim Sender als auch beim Empfänger angegeben werden. Wir empfehlen jedoch, sie beim Webempfänger und beim 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 Caption) oder ein Audio- oder Videostreamobjekt sein. Mit den Tracks APIs kannst du diese Objekte in deiner Anwendung verwenden.

Hinweis :Mit den Empfängern Styled und Default Media kannst du nur die Texttracks mit der API verwenden. Wenn du mit den Audio- und Videotracks arbeiten möchtest, musst du einen benutzerdefinierten Receiver entwickeln.

Ein Track-Objekt steht für einen Titel im SDK. So konfigurierst du einen Track und weist 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, z. B. 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 du eine Sammlung von Track-Objekten mit einem Medienelement verknüpfen möchtest, aktualisiere die Property tracks. Diese Verknüpfung muss hergestellt werden, 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;

Du kannst die aktiven Titel in der activeTrackIds-Anfrage für Medien festlegen.

Du kannst auch nach dem Laden der Medien einen oder mehrere Tracks aktivieren, die dem Medienelement zugeordnet wurden. Rufe dazu EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) auf und übergebe in opt_activeTrackIds die IDs der zu aktivierenden Tracks. Hinweis: Beide Parameter sind optional. Sie können auswählen, welche aktiven Titel oder Stile verwendet werden sollen. 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 du alle Audio- oder Videotracks aus den aktuellen Medien entfernen möchtest, setze einfach mediaInfo.tracks=null (ein leeres Array) und lade die Medien neu.

So entfernen Sie alle Texttracks aus den aktuellen Medien (z. B. Untertitel deaktivieren):

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

Texttracks stylen

TextTrackStyle ist das Objekt, das die Stilinformationen eines Texttracks enthält. Nachdem du ein TextTrackStyle-Objekt erstellt oder aktualisiert hast, kannst du es auf das aktuell wiedergegebene Medienelement anwenden, indem du die Methode editTrackInfo aufrufst. So gehts:

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 Rückrufe verfolgen, also ob sie erfolgreich war oder einen Fehler aufgetreten ist, und den ursprünglichen Absender entsprechend aktualisieren.

Nutzer sollten in Anwendungen den Stil für Texttracks aktualisieren können, entweder mit den Einstellungen des Systems oder der Anwendung selbst.

Du kannst die folgenden Stilelemente für den Untertitelstil festlegen:

• Farbe und Deckkraft des Vordergrunds (Text)
• Farbe und Transparenz des Hintergrunds
• Rahmentyp
• Rahmenfarbe
• Schriftskalierung
• Schriftfamilie
• Schriftstil

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 den Tasten RemotePlayer und RemotePlayerController können Sie die Lautstärke des Empfängers einstellen.

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

Die App des Absenders muss die folgenden Richtlinien für die Lautstärkeregelung einhalten:

• Die Senderanwendung muss mit dem Empfänger synchronisiert werden, damit die Lautstärke auf der Benutzeroberfläche des Senders immer dem Empfänger entspricht. Verwende den RemotePlayerEventType.VOLUME_LEVEL_CHANGED- und RemotePlayerEventType.IS_MUTED_CHANGED-Callback, um die Lautstärke beim Absender beizubehalten. Weitere Informationen finden Sie unter Statusaktualisierungen.
• Sender-Apps dürfen die Lautstärke nicht auf eine bestimmte, vordefinierte Lautstärke festlegen oder die Lautstärke auf die Klingelton-/Medienlautstärke des Sendergeräts festlegen, wenn die App auf dem Empfänger geladen wird.

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

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, muss jeder Absender über die Änderungen am Empfänger informiert sein, auch wenn diese Änderungen von anderen Absendern initiiert wurden.

Hinweis :Das ist nicht nur für Apps wichtig, die mehrere Sender explizit unterstützen, sondern für alle Apps. Einige Cast-Geräte haben Steuereingaben (Fernbedienung, Tasten), die sich wie virtuelle Sender verhalten und sich auf den Status des Empfängers auswirken.

Dazu müssen in Ihrer Anwendung alle erforderlichen Listener auf der RemotePlayerController registriert werden. Wenn sich das TextTrackStyle der aktuellen Medien ändert, werden alle verbundenen Absender benachrichtigt und die entsprechenden Eigenschaften der aktuellen Mediensitzung, z. B. activeTrackIds und textTrackStyle des Felds MediaInfo, werden in Callbacks an die Absender gesendet. In diesem Fall prüft das Empfänger-SDK nicht, ob sich der neue Stil vom vorherigen unterscheidet, und benachrichtigt alle verbundenen Absender.

Hinweis :Die Liste der Titel, die mit den aktuell geladenen Medien verknüpft sind, kann nicht geändert werden. Aktualisiere bei Bedarf die Informationen zu den Titeln im Objekt MediaInfo und lade die Medien neu.

Fortschrittsanzeige

Für die meisten Apps ist es erforderlich, den Wiedergabestandort mit einer Fortschrittsanzeige auf dem Sender anzuzeigen. Die Cast APIs verwenden das Cast-Medienprotokoll, das die Bandbreitennutzung 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 findest du in der Beispiel-App CastVideos-chrome.

CORS-Anforderungen

Für adaptives Medienstreaming sind CORS-Header erforderlich. Aber auch einfache MP4-Medienstreams erfordern CORS, wenn sie Tracks enthalten. Wenn du Tracks für Medien aktivieren möchtest, musst du CORS sowohl für deine Titelstreams als auch für deine Medienstreams aktivieren. Wenn du also keine CORS-Header für deine einfachen mp4-Medien auf deinem Server hast und dann einen einfachen Untertitel-Track hinzufügst, kannst du deine Medien nur streamen, wenn du deinen Server so aktualisierst, dass er die entsprechenden CORS-Header enthält.

Sie benötigen die folgenden Überschriften: 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 Wildcard-Symbols eine Domain 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 der aktiven CastSession mit getSessionId() gefunden werden, nachdem loadMedia() aufgerufen wurde.

Wir empfehlen Folgendes:

1. Drücken Sie auf loadMedia(), um die Sitzung zu starten.
2. sessionId lokal speichern
3. Tritt bei Bedarf über requestSessionById(sessionId) wieder der Sitzung bei.

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 war es mit den Funktionen, die Sie Ihrer Websender-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.