Ta strona została przetłumaczona przez Cloud Translation API.

Dodaj funkcje zaawansowane do aplikacji Web Sender

Przerwy na reklamę

Pakiet Web Sender SDK obsługuje przerwy na reklamy i reklamy towarzyszące w ramach danego strumienia multimediów.

Więcej informacji o działaniu przerw na reklamy znajdziesz w artykule Przerwy na reklamy w odbiorniku internetowym – omówienie.

Przerwy można określać zarówno na nadajniku, jak i odbiorniku, ale zalecamy określanie ich na odbiorniku internetowym i odbiorniku Androida TV, aby zachować spójne działanie na różnych platformach.

W internecie określ przerwy na reklamę w poleceniu wczytywania za pomocą tych tagów:BreakClip i 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)

Korzystanie z interfejsów API ścieżek

Ścieżka może być obiektem tekstowym (napisy) lub obiektem strumienia audio lub wideo. Interfejsy Tracks API umożliwiają pracę z tymi obiektami w aplikacji.

Obiekt Track reprezentuje ścieżkę w pakiecie SDK. Ścieżkę możesz skonfigurować i przypisać do niej unikalny identyfikator w ten sposób:

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;

Element multimedialny może mieć wiele ścieżek, np. wiele napisów (każde w innym języku) lub wiele alternatywnych strumieni audio (w różnych językach).

MediaInfo to klasa modelująca element multimedialny. Aby powiązać kolekcję obiektów Track z elementem multimedialnym, zaktualizuj jego właściwość tracks. To powiązanie musi zostać utworzone przed załadowaniem multimediów na odbiornik:

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;

Aktywne ścieżki możesz ustawić w żądaniu dotyczącym multimediów activeTrackIds.

Możesz też aktywować co najmniej 1 ścieżkę powiązaną z elementem multimedialnym po wczytaniu multimediów, wywołując funkcję EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) i przekazując identyfikatory ścieżek do aktywacji w opt_activeTrackIds. Uwaga: oba parametry są opcjonalne i możesz wybrać, które z nich chcesz ustawić: aktywne ścieżki czy style. Oto przykład aktywowania napisów w języku francuskim (2) i dźwięku w języku francuskim (3):

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

Aby usunąć wszystkie ścieżki audio lub wideo z bieżącego pliku multimedialnego, ustaw po prostu mediaInfo.tracks=null (pustą tablicę) i ponownie załaduj plik.

Aby usunąć wszystkie ścieżki tekstowe z bieżącego pliku multimedialnego (np. wyłączyć napisy), wykonaj jedną z tych czynności:

Zaktualizuj var activeTrackIds = [2, 3]; (pokazany wcześniej), aby zawierał tylko [3], czyli ścieżkę audio.
Ustaw mediaInfo.tracks=null. Pamiętaj, że aby wyłączyć napisy tekstowe (track.hidden), nie musisz ponownie wczytywać multimediów. Wysłanie tablicy activeTracksId, która nie zawiera wcześniej włączonego elementu trackId, wyłącza ścieżkę tekstową.

Stylizowanie ścieżek tekstowych

TextTrackStyle to obiekt, który zawiera informacje o stylu ścieżki tekstowej. Po utworzeniu lub zaktualizowaniu istniejącego obiektu TextTrackStyle możesz zastosować go do aktualnie odtwarzanego elementu multimedialnego, wywołując jego metodę editTrackInfo w ten sposób:

var textTrackStyle = new chrome.cast.media.TextTrackStyle();
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(textTrackStyle);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

Stan żądania możesz śledzić za pomocą wyników wywołań zwrotnych (powodzenie lub błąd) i odpowiednio informować nadawcę.

Aplikacje powinny umożliwiać użytkownikom aktualizowanie stylu ścieżek tekstowych za pomocą ustawień udostępnianych przez system lub samą aplikację.

Możesz dostosować te elementy stylu ścieżki tekstowej:

Kolor i przezroczystość pierwszego planu (tekstu)
kolor i przezroczystość tła;
Typ krawędzi
Kolor krawędzi
Skala czcionki
Rodzina czcionek
Styl czcionki

Na przykład ustaw kolor tekstu na czerwony z 75-procentową przezroczystością w ten sposób:

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

Sterowanie głośnością

Możesz użyć RemotePlayer i RemotePlayerController do ustawienia głośności odbiornika.

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

Aplikacja nadawcy powinna przestrzegać tych wytycznych dotyczących sterowania głośnością:

Aplikacja nadawcy musi być zsynchronizowana z odbiornikiem, aby interfejs nadawcy zawsze raportował głośność zgodnie z odbiornikiem. Użyj wywołania zwrotnego RemotePlayerEventType.VOLUME_LEVEL_CHANGED i RemotePlayerEventType.IS_MUTED_CHANGED, aby utrzymać głośność u nadawcy. Więcej informacji znajdziesz w sekcji Aktualizacje stanu.
Aplikacje wysyłające nie mogą ustawiać poziomu głośności na określony, zdefiniowany wcześniej poziom ani ustawiać poziomu głośności na głośność dzwonka lub multimediów urządzenia wysyłającego, gdy aplikacja jest wczytywana na urządzeniu odbierającym.

Więcej informacji znajdziesz w sekcji Sterowanie głośnością nadawcy na liście kontrolnej dotyczącej projektowania.

wysyłanie wiadomości z multimediami do odbiorcy;

Media Messages może być wysyłany od nadawcy do odbiorcy. Aby na przykład wysłać SKIP_AD wiadomość do odbiorcy:

// 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
    });
  }
});

Aktualności

Gdy wielu nadawców jest połączonych z tym samym odbiorcą, ważne jest, aby każdy nadawca był świadomy zmian u odbiorcy, nawet jeśli zostały one zainicjowane przez innych nadawców.

W tym celu aplikacja powinna zarejestrować wszystkie niezbędne odbiorniki na obiekcie RemotePlayerController. Jeśli zmieni się TextTrackStyle bieżącego medium, wszyscy połączeni nadawcy otrzymają powiadomienie, a odpowiednie właściwości bieżącej sesji multimedialnej, takie jak activeTrackIds i textTrackStyle pola MediaInfo zostaną wysłane do nadawców w wywołaniach zwrotnych. W takim przypadku pakiet SDK odbiornika nie sprawdza, czy nowy styl różni się od poprzedniego, i powiadamia o tym wszystkie połączone aplikacje wysyłające.

Wskaźnik postępu

Wyświetlanie lokalizacji odtwarzania ze wskaźnikiem postępu na urządzeniu wysyłającym jest wymagane w przypadku większości aplikacji. Interfejsy Cast API używają protokołu multimediów Cast, który optymalizuje zużycie przepustowości w tym i innych scenariuszach, więc nie musisz implementować własnej synchronizacji stanu. Aby dowiedzieć się, jak prawidłowo wdrożyć wskaźnik postępu odtwarzania multimediów za pomocą interfejsów API, zapoznaj się z przykładową aplikacją CastVideos-chrome.

Wymagania dotyczące CORS

W przypadku adaptacyjnego przesyłania strumieniowego multimediów Google Cast wymaga obecności nagłówków CORS, ale nawet proste strumienie multimediów mp4 wymagają CORS, jeśli zawierają ścieżki. Jeśli chcesz włączyć ścieżki dla dowolnych multimediów, musisz włączyć CORS zarówno w przypadku strumieni ścieżek, jak i strumieni multimediów. Jeśli na serwerze nie masz dostępnych nagłówków CORS dla prostego pliku mp4, a następnie dodasz prostą ścieżkę napisów, nie będziesz w stanie przesyłać strumieniowo multimediów, dopóki nie zaktualizujesz serwera, aby zawierał odpowiednie nagłówki CORS.

Wymagane są te nagłówki: Content-Type, Accept-Encoding i Range. Pamiętaj, że ostatnie 2 nagłówki, Accept-Encoding i Range, to dodatkowe nagłówki, które wcześniej nie były potrzebne.

W nagłówku Access-Control-Allow-Origin nie można używać symboli wieloznacznych „*”. Jeśli strona zawiera chronione treści multimedialne, musi używać domeny zamiast symbolu wieloznacznego.

Wznawianie sesji bez ponownego ładowania strony

Aby wznowić istniejącą sesję CastSession, użyj requestSessionById(sessionId) z sessionId sesji, do której próbujesz dołączyć.

sessionId znajdziesz na aktywnej karcie CastSession, korzystając z tych opcji: getSessionId() po nawiązaniu połączenia loadMedia().

Zalecane podejście:

ZadzwońloadMedia(), aby rozpocząć sesję
Przechowuj sessionId lokalnie
W razie potrzeby ponownie dołącz do sesji, korzystając z przycisku requestSessionById(sessionId).

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();
  }
});

Dalsze kroki

To wszystkie funkcje, które możesz dodać do aplikacji nadawcy internetowego. Możesz teraz utworzyć aplikację nadawcy na inną platformę (Android lub iOS) albo utworzyć aplikację odbiorcy.

Wstecz

Zintegruj przesyłanie