Intervalos de anúncio
O SDK do web Sender fornece suporte para intervalos de anúncio e anúncios complementares em um em um determinado fluxo de mídia.
Consulte a Visão geral dos intervalos de anúncios do receptor da Web para mais informações sobre como funcionam os intervalos de anúncio.
Embora os intervalos possam ser especificados tanto para quem envia quanto para quem recebe, recomendamos que eles sejam especificado no Receptor da Web e Receptor do Android TV para manter a consistência do comportamento entre as plataformas.
Na Web, especifique intervalos de anúncio em um comando de carregamento usando
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)
Usar as APIs de faixas
Uma faixa pode ser um objeto de texto (legenda ou legenda) ou um stream de áudio ou vídeo objeto. As APIs Tracks permitem que você trabalhe com esses objetos em seu aplicativo.
Um objeto Track
representa uma faixa no SDK. É possível configurar uma faixa e atribuir um ID exclusivo
da seguinte forma:
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;
Um item de mídia pode ter várias faixas. por exemplo, pode ter várias legendas (cada um para um idioma diferente) ou vários streams de áudio alternativos (para idiomas diferentes).
MediaInfo
é a classe que modela um item de mídia. Para associar uma coleção de
Track
objetos a um item de mídia, você atualiza seu
tracks
. Essa associação precisa ser feita antes que a mídia seja
carregados no receptor:
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;
Você pode definir as faixas ativas no
activeTrackIds
solicitação.
Você também pode ativar uma ou mais faixas associadas à mídia
após o carregamento da mídia, chamando
EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle)
e transmitindo os IDs das faixas a serem ativadas no opt_activeTrackIds
. Observação:
ambos os parâmetros são opcionais, e você pode escolher quais faixas ou estilos ativos,
para definir a seu critério. Por exemplo, veja como
ativar o subtítulo em francês (2
) e o áudio em francês (3
):
var activeTrackIds = [2, 3];
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(activeTrackIds);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);
Para remover todas as faixas de áudio ou vídeo da mídia atual, basta definir
mediaInfo.tracks=null
(uma matriz vazia) e recarregue a mídia.
Para remover todas as faixas de texto da mídia atual (por exemplo, desativar legendas), siga um destes procedimentos:
- Atualize o
var activeTrackIds = [2, 3];
(mostrado anteriormente) para que ele inclui somente [3], a faixa de áudio. - Defina
mediaInfo.tracks=null
. Não é necessário atualize a mídia para desativar as legendas em texto (track.hidden
). Enviar uma matrizactiveTracksId
que não contém um ativada anteriormentetrackId
desativa a faixa de texto.
Definir o estilo de faixas de texto
TextTrackStyle
é o objeto que encapsula as informações de estilo de uma faixa de texto. Depois
criar ou atualizar um objeto TextTrackStyle
, é possível aplicar isso ao
o item de mídia em reprodução chamando
editTrackInfo
, da seguinte forma:
var textTrackStyle = new chrome.cast.media.TextTrackStyle();
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(textTrackStyle);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);
Você pode acompanhar o status da solicitação com o resultado dos callbacks. ou erro e atualizar o remetente de origem de acordo.
Os aplicativos devem permitir que os usuários atualizem o estilo das faixas de texto, seja usando as configurações fornecidas pelo sistema ou pelo próprio aplicativo.
Você pode estilizar os seguintes elementos de estilo da faixa de texto:
- Cor e opacidade do primeiro plano (texto)
- Cor e opacidade de segundo plano
- Tipo de borda
- Cor da borda
- Escala da fonte
- Família de fontes
- Estilo da fonte
Por exemplo, defina a cor do texto como vermelho com 75% de opacidade, da seguinte maneira:
var textTrackStyle = new chrome.cast.media.TextTrackStyle();
textTrackStyle.foregroundColor = '#80FF0000';
Controle do volume
Você pode usar o
RemotePlayer
e
RemotePlayerController
para definir o volume do receptor.
function changeVolume(newVolume) {
player.volumeLevel = newVolume;
playerController.setVolumeLevel();
// Update sender UI to reflect change
}
O app remetente precisa seguir estas diretrizes de controle de volume:
- O aplicativo remetente deve sincronizar com o destinatário para que a
interface do remetente sempre informa o volume por receptor. Use o
RemotePlayerEventType.VOLUME_LEVEL_CHANGED
eRemotePlayerEventType.IS_MUTED_CHANGED
para manter o volume no remetente. Consulte as atualizações de status. para mais informações. - Os apps de envio não podem definir o nível de volume em um nível específico e predefinido ou definir o nível de volume para o volume da campainha/mídia do dispositivo remetente quando que o app carrega no receptor.
Consulte Controles de volume do remetente na Lista de verificação de design.
Como enviar mensagens de mídia para o destinatário
Media Messages
podem ser enviadas pelo remetente para
receptor. Por exemplo, para enviar uma mensagem SKIP_AD
ao destinatário:
// 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
});
}
});
atualizações de status
Quando vários remetentes estão conectados ao mesmo destinatário, é importante que que cada remetente esteja ciente das alterações no destinatário, mesmo que elas foram iniciadas por outros remetentes.
Para isso, seu aplicativo deve registrar todos os listeners necessários no
RemotePlayerController
Se o
TextTrackStyle
das alterações de mídia atuais, todos os remetentes conectados serão notificados
e as propriedades correspondentes da sessão de mídia atual, como
activeTrackIds
e textTrackStyle
do
MediaInfo
será enviado aos remetentes em chamadas de retorno. Nesse caso, o SDK do receptor
não verifica se o novo estilo é diferente do anterior e
notifica todos os remetentes conectados.
Indicador de progresso
Mostrar o local da reprodução com um indicador de progresso no remetente é um requisito para a maioria dos aplicativos. As APIs Cast usam o protocolo Cast Media, que otimiza o consumo de largura de banda nesse e em outros cenários. Assim, você não precisa precisa implementar sua própria sincronização de status. Para uma implementação adequada, indicador de progresso para reprodução de mídia usando as APIs, consulte a App de exemplo CastVídeos-chrome.
Requisitos do CORS
Para o streaming de mídia adaptável, o Google Cast exige a presença de cabeçalhos CORS, mas até mesmo fluxos de mídia mp4 simples exigirão CORS se incluírem faixas. Se você quiser ativar as trilhas para qualquer mídia, ative o CORS para a faixa streams e de mídia. Portanto, se você não tiver cabeçalhos CORS disponíveis para sua mídia mp4 simples no servidor. Depois, você adiciona um subtítulo não será possível transmitir a mídia, a menos que você atualize o servidor para incluir os cabeçalhos CORS apropriados.
Você precisa dos seguintes cabeçalhos: Content-Type
, Accept-Encoding
e Range
.
Os dois últimos cabeçalhos, Accept-Encoding
e Range
, são recursos adicionais
cabeçalhos que talvez você não precisasse anteriormente.
Caracteres curinga "*" não pode ser usada para o cabeçalho Access-Control-Allow-Origin
. Se
a página tiver conteúdo de mídia protegido, deverá usar um domínio em vez de um
curinga.
Retomar uma sessão sem atualizar a página da Web
Para retomar um CastSession
existente, use
requestSessionById(sessionId)
pelo sessionId
da sessão de que você quer participar.
O sessionId
pode ser encontrado no CastSession
ativo usando
getSessionId()
Após a ligação
loadMedia()
A abordagem recomendada é:
- Ligação
loadMedia()
para iniciar a sessão - Armazenar o
sessionId
localmente - Volte para a sessão usando
requestSessionById(sessionId)
quando necessário
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();
}
});
Próximas etapas
Isso conclui os recursos que você pode adicionar ao app Web Sender. Agora você pode criar um app remetente para outra plataforma (Android ou iOS) ou criar um app receptor.