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 wird jedoch empfohlen, 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.
nachdem die Medien geladen wurden, indem Sie
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 einactiveTracksId
-Array senden, das kein Zuvor aktiviertetrackId
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 Texttracks 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
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
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 Steuerung der Lautstärke die folgenden Richtlinien beachten:
- 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
undRemotePlayerEventType.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 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 Medienstreams. 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:
- Anruf
loadMedia()
um die Einheit zu starten sessionId
lokal speichern- 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