Ihrer Web Sender App erweiterte Funktionen hinzufügen

Werbeunterbrechungen

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

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

Pausen können zwar sowohl beim Sender als auch beim Empfänger angegeben werden, es ist jedoch empfehlenswert, Web Receiver und Android TV-Receiver für einheitliches Design auf verschiedenen Plattformen.

Im Web geben Sie Werbeunterbrechungen in einem Ladebefehl mit BreakClip und Break:

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 Videostream sein. -Objekt enthält. Über die Tracks APIs können Sie in Ihrer Anwendung mit diesen Objekten arbeiten.

Ein Track-Objekt für einen Track im SDK steht. Sie können einen Track konfigurieren und eine eindeutige ID zuweisen wie folgt hinzufügen:

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 über mehrere Tracks verfügen. 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. Um eine Sammlung von Track mit einem Medienelement hinzufügen, aktualisieren Sie dessen tracks Property. Diese Verknüpfung muss hergestellt werden, bevor die Medien in den Empfänger geladen:

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 den Medien festlegen. activeTrackIds

Du kannst auch einen oder mehrere Tracks aktivieren, die mit den Medien verknüpft waren. nach dem Laden der Medien über den Aufruf EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) und die IDs der zu aktivierenden Titel in opt_activeTrackIds übergeben. Hinweis: Beide Parameter sind optional und Sie können auswählen, welche aktiven Tracks oder Stile die Sie nach eigenem Ermessen festlegen. Hier erfahren Sie zum Beispiel, Aktiviere 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, mediaInfo.tracks=null (leeres Array) und laden Sie die Medien neu.

Alle Texttracks vom aktuellen Medium entfernen (z. B. durch Führe einen der folgenden Schritte aus:

  • var activeTrackIds = [2, 3]; (zuvor gezeigt) aktualisieren, damit enthält nur [3], den Audiotrack.
  • Legen Sie dazu mediaInfo.tracks=null fest. Beachten Sie, dass es nicht notwendig ist, aktualisiere die Medien, um die Untertitel zu deaktivieren (track.hidden). Wenn Sie ein activeTracksId-Array senden, das kein Zuvor aktivierte trackId deaktiviert den Texttrack.

Stile für Texttracks festlegen

TextTrackStyle ist das Objekt, das die Stilinformationen eines Text-Tracks einschließt. Nachher Wenn Sie ein TextTrackStyle-Objekt erstellen oder aktualisieren, können Sie dies auf des gerade wiedergegebenen Medienelements, indem Sie dessen editTrackInfo wie hier gezeigt:

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 Rückrufe verfolgen, entweder und aktualisieren Sie den Absender entsprechend.

Die Apps sollten es Nutzern ermöglichen, den Stil von Text-Tracks zu aktualisieren, entweder Verwenden Sie die vom System oder von der Anwendung selbst vorgegebenen Einstellungen.

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

So stellen Sie die Textfarbe beispielsweise auf Rot mit einer Deckkraft von 75% ein:

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

Lautstärkeregelung

Sie können die RemotePlayer und RemotePlayerController um die Empfängerlautstärke einzustellen.

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

Die Absender-App sollte zur Kontrolle der Lautstärke folgende Richtlinien einhalten:

  • Die Senderanwendung muss sich mit dem Empfänger synchronisieren, damit der Die Absender-UI meldet immer das Volumen pro Empfänger. Verwenden Sie die Methode RemotePlayerEventType.VOLUME_LEVEL_CHANGED und RemotePlayerEventType.IS_MUTED_CHANGED-Callback zum Beibehalten des auf dem Sender. Siehe Statusupdates .
  • Absender-Apps dürfen keine bestimmte, vordefinierte Lautstärke einstellen oder stellen Sie die Lautstärke auf die Klingelton-/Medienlautstärke des Absendergeräts ein, die App auf dem Empfänger geladen wird.

Weitere Informationen finden Sie unter Lautstärkeregelung des Absenders in der Design-Checkliste.

Mediennachrichten an den Empfänger senden

Media Messages kann vom Absender gesendet werden an Empfänger. 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 Sender mit demselben Empfänger verbunden sind, ist es wichtig, alle Sender über die Änderungen beim Empfänger zu informieren, auch wenn diese Änderungen die von anderen Absendern initiiert wurden.

Zu diesem Zweck sollte Ihre Anwendung alle erforderlichen Listener auf der RemotePlayerController Wenn die TextTrackStyle werden alle verbundenen Absender benachrichtigt und die entsprechenden Eigenschaften der aktuellen Mediensitzung, wie z. B. activeTrackIds und textTrackStyle von MediaInfo wird in Callbacks an Absender gesendet. In diesem Fall wird das Empfänger-SDK wird nicht überprüft, ob sich der neue Stil vom vorherigen unterscheidet alle verbundenen Absender trotzdem benachrichtigt.

Fortschrittsanzeige

Die Anzeige des Wiedergabeorts mit einer Fortschrittsanzeige auf dem Sender ist eine Anforderung für die meisten Apps. Die Cast APIs nutzen das Cast-Media-Protokoll, den Bandbreitenverbrauch für dieses und andere Szenarien optimiert, müssen Sie Ihre eigene Statussynchronisierung implementieren. Für die korrekte Implementierung einer Fortschrittsanzeige für die Medienwiedergabe mithilfe der APIs finden Sie unter Beispiel-App CastVideos-chrome:

CORS-Anforderungen

Für adaptives Medienstreaming erfordert Google Cast das Vorhandensein von CORS-Headern, aber auch für einfache MP4-Medien-Streams ist CORS erforderlich, wenn sie Titel enthalten. Wenn Sie Um Tracks für beliebige Medien zu aktivieren, müssen Sie CORS für beide Tracks aktivieren. und Ihre Mediastreams. Wenn keine CORS-Header verfügbar sind, für Ihre einfachen MP4-Medien auf Ihrem Server. Sie fügen dann eine einfache Unterüberschrift müssen Sie Ihren Server aktualisieren, um Ihre Medien zu streamen. um die entsprechenden CORS-Header einzufügen.

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

Platzhalter „*“ kann nicht für den Access-Control-Allow-Origin-Header verwendet werden. Wenn die Seite geschützte Medieninhalte enthält, muss statt einer Domain eine Domain verwenden.

Fortsetzen einer Sitzung ohne Aktualisieren der Webseite

Um ein bestehendes CastSession-Gerät fortzusetzen, verwenden Sie requestSessionById(sessionId) durch den sessionId der Sitzung, der Sie beitreten möchten.

Die sessionId kann auf der aktiven CastSession mit folgendem Befehl gefunden werden: getSessionId() nach dem Anruf loadMedia()

Der empfohlene Ansatz sieht so aus:

  1. Anruf loadMedia() um die Einheit zu starten
  2. sessionId lokal speichern
  3. Nehmen Sie wieder an der Sitzung teil mit requestSessionById(sessionId) bei Bedarf
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. Du kannst jetzt eine Absender-App für eine andere Plattform erstellen (Android oder iOS) oder eine Empfänger-App erstellen

Zurück
Streamen integrieren