Reklam araları
Web Sender SDK, veri akışı sağlar.
Bkz. Daha fazla bilgi için Web Alıcı Reklam Aralarına Genel Bakış reklam aralarının işleyiş şekli hakkında bilgi edinin.
Hem gönderen hem de alıcı için aralar belirtilse de araların hem gönderen hem de alıcı için belirtilmesi önerilir. Web Alıcısı'nda ve Tutarlılık için Android TV Alıcısı tespit etmiş olursunuz.
Web üzerinde, şunu kullanarak bir yükleme komutunda Reklam aralarını belirtin:
BreakClip
ve 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)
Parça API'lerini kullanma
Bir parça, bir metin (altyazı) nesnesi ya da bir ses veya video akışı olabilir nesnesini tanımlayın. Track API'leri, uygulamanızda bu nesnelerle çalışmanıza olanak tanır.
Track
nesnesi
SDK'daki bir kanalı temsil eder. Bir kanal yapılandırabilir ve benzersiz kimlik atayabilirsiniz
şu şekilde ekleyin:
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;
Bir medya öğesinde birden fazla parça olabilir; birden fazla Altyazı (her biri farklı bir dilde) veya birden fazla alternatif ses akışı (farklı diller için).
MediaInfo
bir medya öğesini modelleyen sınıftır. Bir koleksiyonu ilişkilendirmek için
Track
bir medya öğesi içeriyorsa ilgili medya öğesinin
tracks
Bu ilişkilendirmenin, medya henüz
alıcıya yüklendi:
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;
Medyadaki etkin parçaları ayarlayabilirsiniz
activeTrackIds
isteği gönderin.
Ayrıca medyayla ilişkilendirilmiş bir veya daha fazla kanalı da etkinleştirebilirsiniz.
öğesine medya yüklendikten sonra
EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle)
opt_activeTrackIds
içinde etkinleştirilecek kanalların kimliklerini iletmeniz gerekir. Not,
her iki parametre de isteğe bağlıdır. Etkin kanalları veya stilleri,
karar verebilirsiniz. Örneğin, Arkadaş Bitkiler projesinin
Fransızca altyazıyı (2
) ve Fransızca sesi (3
) etkinleştirin:
var activeTrackIds = [2, 3];
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(activeTrackIds);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);
Geçerli medyadaki tüm ses veya video parçalarını kaldırmak için,
mediaInfo.tracks=null
(boş bir dizi) ve medyayı yeniden yükleyin.
Geçerli medyadaki tüm metin parçalarını kaldırmak için (örneğin, altyazı) şunlardan birini yapın:
var activeTrackIds = [2, 3];
öğesini (daha önce gösterilen) güncelleyip Yalnızca [3] ses parçasını içerir.mediaInfo.tracks=null
ayarla. Projenin gidişatı boyunca metin altyazılarını kapatmak için medyayı yeniden yükleyin (track.hidden
). Aşağıdaki içermeyen biractiveTracksId
dizisi gönderiliyor: Önceden etkinleştirilmiş olantrackId
metin parçasını devre dışı bırakır.
Metin parçalarının stilini belirleme
TextTrackStyle
bir metin parçasının stil bilgilerini kapsayan nesnedir. Şu tarihten sonra:
veya mevcut bir TextTrackStyle
nesnesini güncellerseniz bunu
çağırarak o anda oynatılan medya öğesini
editTrackInfo
yöntemini kullanın:
var textTrackStyle = new chrome.cast.media.TextTrackStyle();
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(textTrackStyle);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);
Geri çağırma işleminin sonucuyla birlikte isteğin durumunu şu yöntemlerden biriyle izleyebilirsiniz: gönderin ve kaynak göndereni buna göre güncelleyin.
Uygulamalar, kullanıcılara metin parçalarının stilini güncelleme izni vermelidir: bu işlemi sistem veya uygulamanın kendisi tarafından sağlanan ayarları kullanarak yapabilirsiniz.
Aşağıdaki metin kanalı stili öğelerinin stilini belirleyebilirsiniz:
- Ön plan (metin) rengi ve opaklığı
- Arka plan rengi ve şeffaflık
- Kenar türü
- Kenar Rengi
- Yazı Tipi Ölçeklendirme
- Yazı Tipi Ailesi
- Yazı Tipi Stili
Örneğin, metin rengini aşağıdaki gibi% 75 opaklıkla kırmızıya ayarlayın:
var textTrackStyle = new chrome.cast.media.TextTrackStyle();
textTrackStyle.foregroundColor = '#80FF0000';
Ses düzeyi kontrolü
URL parametrelerinin Google tarafından nasıl ele alınmasını istediğinizi belirtmek için
RemotePlayer
ve
RemotePlayerController
alıcının ses düzeyini ayarlayın.
function changeVolume(newVolume) {
player.volumeLevel = newVolume;
playerController.setVolumeLevel();
// Update sender UI to reflect change
}
Gönderen uygulaması, ses düzeyini kontrol etmek için aşağıdaki yönergelere uymalıdır:
-
Gönderen kullanıcı arayüzü, her zaman alıcı başına hacmi bildirir. Şunu kullanın:
RemotePlayerEventType.VOLUME_LEVEL_CHANGED
ve Şunu sürdürmek içinRemotePlayerEventType.IS_MUTED_CHANGED
geri çağırması yapın: ses düzeyini görebilirsiniz. Durum güncellemeleri'ne bakın. konulu videomuzu izleyin. - Gönderen uygulamaları, ses düzeyini önceden tanımlanmış belirli bir düzeyde ayarlamamalıdır. veya Uygulama alıcıya yüklenir.
Görüntüleyin Gönderenin ses düzeyi kontrolleri Tasarım Kontrol Listesi'ne göz atın.
Medya mesajları alıcıya gönderiliyor
Media Messages
, gönderenden şu kişiye gönderilebilir:
alıcı. Örneğin, alıcıya SKIP_AD
mesajı göndermek için:
// 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
});
}
});
Gelişmelerin paylaşılması
Aynı alıcıya birden fazla gönderici bağlı olduğunda aşağıdakiler önemlidir: alıcıdaki değişikliklerden haberdar olması için diğer gönderenlerden başlatıldı.
Bu nedenle, başvurunuz, gerekli tüm dinleyicileri
RemotePlayerController
.
Öğe
TextTrackStyle
tüm bağlı gönderenlere bildirim gönderilir.
ve geçerli medya oturumuna karşılık gelen özellikleri (örneğin,
activeTrackIds
ve textTrackStyle
MediaInfo
alanı, geri çağırmalarda gönderenlere gönderilir. Bu durumda alıcı SDK
yeni stilin öncekinden farklı olup olmadığını doğrulamaz ve
tüm bağlı gönderenlere bildirim gönderir.
İlerleme göstergesi
Oynatma konumunu, gönderende ilerleme göstergesiyle birlikte göstermek, Google'a güveniyorlar. Cast API'leri, Google Cast API'sını kullanarak bu ve diğer senaryolar için bant genişliği tüketimini optimize eder. Dolayısıyla, kendi durum senkronizasyonunuzu uygulamanız gerekir. Doğru şekilde uygulanması için medya oynatmayla ilgili ilerleme göstergesinin durumunu görüntülemek için CastVideos-chrome örnek uygulaması.
CORS koşulları
Google Cast, uyarlanabilir medya akışı için CORS başlıklarının olmasını gerektirir. Ancak, Parçalar içeren basit mp4 medya akışları bile CORS'a ihtiyaç duyar. Şu durumda: herhangi bir medya için Track'leri etkinleştirmek istiyorsanız her iki kanalınız için de CORS'yi akışlarınız ve medya akışlarınız. CORS başlıkları yoksa, basit mp4 medyanız için oluşturuyor ve daha sonra, basit bir altyazı takip ederseniz, sunucunuzu güncellemediğiniz sürece başlık ekleyin.
Şu başlıklara ihtiyacınız vardır: Content-Type
,Accept-Encoding
ve Range
.
Son iki üstbilginin (Accept-Encoding
ve Range
) ek olduğunu unutmayın
daha önce ihtiyacınız olmayabilecek başlıklardan oluşur.
Joker karakterler "*" Access-Control-Allow-Origin
üstbilgisi için kullanılamaz. Eğer
sayfa korumalı medya içeriğine sahipse,
joker karakter.
Web sayfasını yeniden yüklemeden oturumu devam ettirme
Mevcut bir CastSession
işlemini devam ettirmek için şunu kullanın:
requestSessionById(sessionId)
Katılmaya çalıştığınız oturumun sessionId
ile.
sessionId
, etkin CastSession
üzerinde şunları kullanarak bulunabilir:
getSessionId()
aradıktan sonra
loadMedia()
.
Önerilen yaklaşım:
- Telefonla arama
loadMedia()
oturumu başlatmak için sessionId
cihazını yerel olarak depolayın- Oturuma şunu kullanarak yeniden katılın:
requestSessionById(sessionId)
gerektiğinde
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();
}
});
Sonraki adımlar
Web Sender uygulamanıza ekleyebileceğiniz özellikler burada sonlandırılmıştır. Artık başka bir platform için gönderen uygulaması oluşturabilirsiniz (Android veya iOS) veya bir alıcı uygulaması geliştirmelidir.