Coupures publicitaires
Le SDK Web Sender est compatible avec les coupures publicitaires et les annonces associées dans un flux multimédia donné.
Pour en savoir plus sur leur fonctionnement, consultez la page Présentation des coupures publicitaires Web Receiver.
Bien que les coupures puissent être spécifiées à la fois sur l'émetteur et sur le récepteur, il est recommandé de le faire sur le Web Receiver et le récepteur Android TV afin de maintenir un comportement cohérent sur l'ensemble des plates-formes.
Sur le Web, spécifiez les coupures publicitaires dans une commande de chargement à l'aide de BreakClip
et 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)
Utiliser les API Tracks
Une piste peut être un objet texte (sous-titres ou sous-titres), ou un objet de flux audio ou vidéo. Les API Tracks vous permettent d'utiliser ces objets dans votre application.
Un objet Track
représente une piste dans le SDK. Vous pouvez configurer une piste et lui attribuer un identifiant unique comme ceci:
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 élément multimédia peut avoir plusieurs pistes. Par exemple, il peut comporter plusieurs sous-titres (chacun pour une langue différente) ou plusieurs autres flux audio (pour différentes langues).
MediaInfo
est la classe qui modélise un élément multimédia. Pour associer une collection d'objets Track
à un élément multimédia, mettez à jour sa propriété tracks
. Cette association doit être effectuée avant le chargement du contenu multimédia sur le récepteur:
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;
Vous pouvez définir les canaux actifs dans la requête média activeTrackIds
.
Vous pouvez également activer une ou plusieurs pistes associées à l'élément multimédia, une fois le contenu multimédia chargé, en appelant EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle)
et en transmettant les ID des pistes à activer dans opt_activeTrackIds
. Notez que ces deux paramètres sont facultatifs et que vous pouvez choisir les pistes ou styles actifs que vous souhaitez définir à votre guise. Par exemple, voici comment activer le sous-titre français (2
) et l'audio français (3
):
var activeTrackIds = [2, 3];
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(activeTrackIds);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);
Pour supprimer toutes les pistes audio ou vidéo du contenu multimédia actuel, il vous suffit de définir mediaInfo.tracks=null
(un tableau vide) et d'actualiser le contenu multimédia.
Pour supprimer toutes les pistes de texte du contenu multimédia en cours (par exemple, en désactivant les sous-titres), effectuez l'une des opérations suivantes:
- Modifiez
var activeTrackIds = [2, 3];
(comme indiqué précédemment) pour qu'il n'inclue que [3] la piste audio. - Définissez
mediaInfo.tracks=null
. Notez qu'il n'est pas nécessaire d'actualiser le contenu multimédia pour désactiver les sous-titres (track.hidden
). L'envoi d'un tableauactiveTracksId
qui ne contient pas detrackId
précédemment activé désactive la piste de texte.
Appliquer un style aux pistes de texte
TextTrackStyle
est l'objet qui encapsule les informations de style d'une piste de texte. Après avoir créé ou mis à jour un objet TextTrackStyle
existant, vous pouvez l'appliquer à l'élément multimédia en cours de lecture en appelant sa méthode editTrackInfo
, comme suit:
var textTrackStyle = new chrome.cast.media.TextTrackStyle();
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(textTrackStyle);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);
Vous pouvez suivre l'état de la requête avec le résultat des rappels, qu'ils aient abouti ou une erreur, et mettre à jour l'expéditeur d'origine en conséquence.
Les applications doivent permettre aux utilisateurs de mettre à jour le style des pistes de texte, soit à l'aide des paramètres fournis par le système, soit par l'application elle-même.
Vous pouvez appliquer un style aux éléments de style de piste de texte suivants:
- Couleur et opacité du premier plan (texte)
- Couleur et opacité de l'arrière-plan
- Type de contour
- Couleur du contour
- Échelle de police
- Famille de polices
- Style de police
Par exemple, définissez la couleur du texte sur rouge avec une opacité de 75% comme suit:
var textTrackStyle = new chrome.cast.media.TextTrackStyle();
textTrackStyle.foregroundColor = '#80FF0000';
Contrôle du volume
Vous pouvez utiliser RemotePlayer
et RemotePlayerController
pour définir le volume du récepteur.
function changeVolume(newVolume) {
player.volumeLevel = newVolume;
playerController.setVolumeLevel();
// Update sender UI to reflect change
}
L'application émettrice doit respecter les consignes suivantes pour contrôler le volume:
- L'application émettrice doit se synchroniser avec le récepteur afin que l'UI de l'émetteur indique toujours le volume par récepteur. Utilisez les rappels
RemotePlayerEventType.VOLUME_LEVEL_CHANGED
etRemotePlayerEventType.IS_MUTED_CHANGED
pour maintenir le volume sur l'émetteur. Pour en savoir plus, consultez Mises à jour de l'état. - Les applications d'envoi ne doivent pas régler le volume à un niveau spécifique prédéfini, ni régler le volume sur le volume de la sonnerie/du contenu multimédia de l'appareil émetteur lors du chargement de l'application sur le récepteur.
Consultez la section Contrôles du volume de l'émetteur dans la checklist de conception.
Envoyer des messages multimédias au destinataire
Media Messages
peut être envoyé de l'expéditeur au destinataire. Par exemple, pour envoyer un message SKIP_AD
au destinataire:
// 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
});
}
});
Informations sur votre actualité
Lorsque plusieurs expéditeurs sont connectés au même destinataire, il est important que chaque expéditeur soit informé des modifications apportées au destinataire, même si ces modifications ont été lancées par d'autres expéditeurs.
À cette fin, votre application doit enregistrer tous les écouteurs nécessaires sur RemotePlayerController
.
Si le TextTrackStyle
du contenu multimédia actuel change, tous les expéditeurs connectés en seront informés, et les propriétés correspondantes de la session multimédia en cours, telles que activeTrackIds
et textTrackStyle
du champ MediaInfo
, seront envoyées aux expéditeurs dans les rappels. Dans ce cas, le SDK du récepteur ne vérifie pas si le nouveau style est différent du précédent et informe tous les expéditeurs connectés.
Indicateur de progression
Pour la plupart des applications, il est obligatoire d'afficher le contexte de lecture avec un indicateur de progression sur l'expéditeur. Les API Cast utilisent le protocole multimédia Cast, qui optimise la consommation de bande passante pour ce cas de figure et d'autres. Vous n'avez donc pas besoin d'implémenter votre propre synchronisation d'état. Pour savoir comment implémenter correctement un indicateur de progression pour la lecture de contenus multimédias à l'aide des API, consultez l'application exemple CastVideos-chrome.
Exigences CORS
Pour le streaming multimédia adaptatif, Google Cast nécessite la présence d'en-têtes CORS, mais même les flux multimédias mp4 simples nécessitent CORS s'ils incluent des titres. Si vous souhaitez activer les pistes pour n'importe quel contenu multimédia, vous devez activer CORS pour vos flux de pistes et pour vos flux multimédias. Ainsi, si aucun en-tête CORS n'est disponible pour votre contenu MP4 simple sur votre serveur et que vous ajoutez ensuite une piste de sous-titres simple, vous ne pourrez pas diffuser votre contenu multimédia, sauf si vous mettez à jour votre serveur pour inclure les en-têtes CORS appropriés.
Vous avez besoin des en-têtes suivants: Content-Type
, Accept-Encoding
et Range
.
Notez que les deux derniers en-têtes, Accept-Encoding
et Range
, sont des en-têtes supplémentaires dont vous n'avez peut-être pas besoin auparavant.
Les caractères génériques "*" ne peuvent pas être utilisés dans l'en-tête Access-Control-Allow-Origin
. Si la page comporte du contenu multimédia protégé, elle doit utiliser un domaine au lieu d'un caractère générique.
Reprendre une session sans actualiser la page Web
Pour reprendre une CastSession
existante, utilisez requestSessionById(sessionId)
avec le sessionId
de la session à laquelle vous essayez de rejoindre.
Vous pouvez trouver le sessionId
sur le CastSession
actif à l'aide de getSessionId()
après avoir appelé loadMedia()
.
L'approche recommandée est la suivante:
- Appelez
loadMedia()
pour démarrer la session - Stocker
sessionId
localement - Si nécessaire, rejoignez la session à l'aide de
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();
}
});
Étapes suivantes
Les fonctionnalités que vous pouvez ajouter à votre application émettrice Web sont maintenant terminées. Vous pouvez désormais créer une application émettrice pour une autre plate-forme (Android ou iOS) ou une application réceptrice.