Interruzioni pubblicitarie
L'SDK Web Sender fornisce supporto per le interruzioni pubblicitarie e gli annunci companion all'interno di un determinato stream multimediale.
Per ulteriori informazioni sul funzionamento delle interruzioni pubblicitarie, consulta la Panoramica delle interruzioni pubblicitarie del ricevitore web.
Anche se è possibile specificare le interruzioni sia sul mittente sia sul destinatario, è consigliabile specificarle sul ricevitore web e sul ricevitore Android TV per mantenere un comportamento coerente tra le varie piattaforme.
Sul web, specifica le interruzioni pubblicitarie in un comando di caricamento utilizzando
BreakClip
e 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)
Utilizzo delle API delle tracce
Una traccia può essere un oggetto di testo (sottotitoli o didascalie) oppure un oggetto di streaming audio o video. Le API Track ti consentono di lavorare con questi oggetti nell'applicazione.
Un oggetto Track
rappresenta una traccia nell'SDK. Puoi configurare una traccia e assegnargli un ID univoco
come segue:
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;
Un elemento multimediale può avere più tracce, ad esempio può avere più sottotitoli (ciascuno per una lingua diversa) o più stream audio alternativi (per lingue diverse).
MediaInfo
è la classe che modella un elemento multimediale. Per associare una raccolta di oggetti Track
a un elemento multimediale, devi aggiornare la relativa proprietà tracks
. Questa associazione deve essere effettuata prima che il contenuto multimediale venga caricato sul destinatario:
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;
Puoi impostare le tracce attive nella richiesta
activeTrackIds
dei contenuti multimediali.
Puoi anche attivare una o più tracce associate all'elemento multimediale, dopo il caricamento dell'elemento multimediale, richiamando EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle)
e trasmettendo gli ID delle tracce da attivare in opt_activeTrackIds
. Tieni presente che entrambi i parametri sono facoltativi e puoi scegliere quali tracce o stili attivi impostare a tua discrezione. Ad esempio, ecco come attivare i sottotitoli in francese (2
) e l'audio in francese (3
):
var activeTrackIds = [2, 3];
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(activeTrackIds);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);
Per rimuovere tutte le tracce audio o video dai contenuti multimediali correnti, imposta semplicemente
mediaInfo.tracks=null
(un array vuoto) e ricarica i contenuti multimediali.
Per rimuovere tutte le tracce di testo dai contenuti multimediali correnti (ad esempio, disattivare i sottotitoli), procedi in uno dei seguenti modi:
- Aggiorna
var activeTrackIds = [2, 3];
(visualizzato in precedenza) in modo che includa solo [3] la traccia audio. - Imposta
mediaInfo.tracks=null
. Tieni presente che non è necessario ricaricare i contenuti multimediali per disattivare i sottotitoli di testo (track.hidden
). L'invio di un arrayactiveTracksId
che non contiene untrackId
abilitato in precedenza disattiva la traccia di testo.
Assegnazione di uno stile alle tracce di testo
TextTrackStyle
è l'oggetto che racchiude le informazioni di stile di una traccia di testo. Dopo aver creato o aggiornato un oggetto TextTrackStyle
esistente, puoi applicarlo all'elemento multimediale attualmente in riproduzione chiamando il relativo metodo editTrackInfo
, in questo modo:
var textTrackStyle = new chrome.cast.media.TextTrackStyle();
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(textTrackStyle);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);
Puoi monitorare lo stato della richiesta con il risultato dei callback (riuscito o errore) e aggiornare il mittente di origine di conseguenza.
Le applicazioni devono consentire agli utenti di aggiornare lo stile delle tracce di testo utilizzando le impostazioni fornite dal sistema o dall'applicazione stessa.
Puoi applicare uno stile ai seguenti elementi dello stile della traccia di testo:
- Colore e opacità del primo piano (testo)
- Colore dello sfondo e opacità
- Tipo di bordo
- Colore bordo
- Scala carattere
- Famiglia di caratteri
- Stile carattere
Ad esempio, imposta il colore del testo sul rosso con un'opacità del 75% come segue:
var textTrackStyle = new chrome.cast.media.TextTrackStyle();
textTrackStyle.foregroundColor = '#80FF0000';
Controllo del volume
Puoi usare RemotePlayer
e RemotePlayerController
per impostare il volume del ricevitore.
function changeVolume(newVolume) {
player.volumeLevel = newVolume;
playerController.setVolumeLevel();
// Update sender UI to reflect change
}
L'app del mittente deve rispettare le seguenti linee guida per il controllo del volume:
- L'applicazione del mittente deve sincronizzarsi con il destinatario in modo che la UI del mittente segnali sempre il volume in base al destinatario. Utilizza il callback
RemotePlayerEventType.VOLUME_LEVEL_CHANGED
eRemotePlayerEventType.IS_MUTED_CHANGED
per mantenere il volume sul mittente. Per ulteriori informazioni, consulta la sezione Aggiornamenti di stato. - Le app di mittenti non devono impostare il livello di volume a un livello specifico predefinito né impostare il livello di volume sul volume della suoneria/dei contenuti multimediali del dispositivo del mittente quando l'app viene caricata sul ricevitore.
Consulta i controlli del volume dei mittenti nell'elenco di controllo della progettazione.
Invio di messaggi multimediali al destinatario
Media Messages
può essere inviato dal mittente al ricevitore. Ad esempio, per inviare un messaggio SKIP_AD
al destinatario:
// 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
});
}
});
Aggiornamenti di stato
Quando più mittenti sono connessi allo stesso destinatario, è importante che ogni mittente sia a conoscenza delle modifiche sul destinatario, anche se queste modifiche sono state avviate da altri mittenti.
A questo scopo, l'applicazione deve registrare tutti i listener necessari nella
RemotePlayerController
.
Se il valore TextTrackStyle
dei contenuti multimediali correnti cambia, tutti i mittenti collegati riceveranno una notifica e le proprietà corrispondenti della sessione multimediale corrente, come activeTrackIds
e textTrackStyle
del campo MediaInfo
, verranno inviate ai mittenti nei callback. In questo caso, l'SDK ricevitore non verifica se il nuovo stile è diverso da quello precedente e invia comunque una notifica a tutti i mittenti collegati.
Indicatore avanzamento
Per la maggior parte delle app è necessario mostrare il luogo di riproduzione con un indicatore di avanzamento sul mittente. Le API Cast utilizzano il protocollo Cast media, che ottimizza il consumo di larghezza di banda per questo e per altri scenari, quindi non è necessario implementare una sincronizzazione dello stato personalizzata. Per la corretta implementazione di un indicatore di avanzamento per la riproduzione di contenuti multimediali utilizzando le API, consulta l'app di esempio CastVideo-chrome.
Requisiti CORS
Per lo streaming di contenuti multimediali adattivi, Google Cast richiede la presenza di intestazioni CORS, ma anche i semplici stream multimediali mp4 richiedono CORS se includono tracce. Se vuoi abilitare Tracks per qualsiasi contenuto multimediale, devi attivare CORS sia per gli stream di traccia che per gli stream multimediali. Pertanto, se sul server non disponi di intestazioni CORS per i tuoi semplici contenuti mp4 e aggiungi una semplice traccia di sottotitoli, non potrai trasmettere in streaming i contenuti multimediali a meno che non aggiorni il server includendo le intestazioni CORS appropriate.
Sono necessarie le seguenti intestazioni: Content-Type
, Accept-Encoding
e Range
.
Tieni presente che le ultime due intestazioni, Accept-Encoding
e Range
, sono intestazioni aggiuntive che potresti non aver bisogno in precedenza.
I caratteri jolly "*" non possono essere utilizzati per l'intestazione Access-Control-Allow-Origin
. Se la pagina include contenuti multimediali protetti, deve utilizzare un dominio anziché un carattere jolly.
Ripresa di una sessione senza ricaricare la pagina web
Per ripristinare un elemento CastSession
esistente, utilizza
requestSessionById(sessionId)
con il valore sessionId
della sessione a cui stai tentando di accedere.
Puoi trovare il sessionId
sul CastSession
attivo utilizzando
getSessionId()
dopo aver chiamato
loadMedia()
.
L'approccio consigliato è:
- Chiama il numero
loadMedia()
per avviare la sessione - Archivia
sessionId
localmente - Partecipa di nuovo alla sessione utilizzando
requestSessionById(sessionId)
quando necessario
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();
}
});
Passaggi successivi
Con questo si concluderanno le funzionalità che puoi aggiungere all'app Web Sender. Ora puoi creare un'app mittente per un'altra piattaforma (Android o iOS) o creare un'app di ricezione.