Web Gönderen Uygulamanıza Gelişmiş Özellikler Ekleyin

Reklam araları

Web Sender SDK, belirli bir medya akışında reklam araları ve tamamlayıcı reklamlar için destek sağlar.

Reklam aralarının işleyiş şekli hakkında daha fazla bilgi için Web alıcısında reklam aralarına genel bakış başlıklı makaleyi inceleyin.

Aranın hem gönderende hem de alıcıda belirtilmesi mümkün olsa da platformlar arasında tutarlı davranış sergilenmesi için aranın Web Receiver ve Android TV Receiver'da belirtilmesi önerilir.

Web'de, BreakClip ve Break kullanarak bir yükleme komutunda reklam aralarını belirtin:

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

Parça, metin (altyazı) nesnesi veya ses ya da video akışı nesnesi olabilir. Parça API'leri, uygulamanızda bu nesnelerle çalışmanıza olanak tanır.

Track nesnesi, SDK'daki bir parçayı temsil eder. Bir kanal yapılandırabilir ve buna benzersiz bir kimlik atayabilirsiniz. Örneğin:

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. Örneğin, birden fazla altyazı (her biri farklı bir dil için) veya birden fazla alternatif ses akışı (farklı diller için) olabilir.

MediaInfo bir medya öğesini modelleyen sınıftır. Bir Track nesne koleksiyonunu bir medya öğesiyle ilişkilendirmek için tracks özelliğini güncellersiniz. Bu ilişkilendirme, medya alıcıya yüklenmeden önce yapılmalıdır:

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;

Etkin parçaları medya activeTrackIds isteğinde ayarlayabilirsiniz.

Medya öğesi yüklendikten sonra, medya öğesiyle ilişkilendirilmiş bir veya daha fazla parçayı EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle)'ı çağırıp opt_activeTrackIds içinde etkinleştirilecek parçaların kimliklerini ileterek de etkinleştirebilirsiniz. Her iki parametrenin de isteğe bağlı olduğunu ve etkin parçaları veya stilleri kendi tercihinize göre ayarlayabileceğinizi unutmayın. Örneğin, Fransızca altyazıyı (2) ve Fransızca sesi (3) etkinleştirme adımlarını aşağıda bulabilirsiniz:

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

Mevcut medyadan tüm ses veya video parçalarını kaldırmak için mediaInfo.tracks=null (boş bir dizi) ayarlayın ve medyayı yeniden yükleyin.

Mevcut medyadan tüm metin parçalarını kaldırmak için (ör. altyazıları kapatmak) aşağıdakilerden birini yapın:

  • var activeTrackIds = [2, 3]; (daha önce gösterilmişti) öğesini yalnızca ses parçası olan [3] öğesini içerecek şekilde güncelleyin.
  • mediaInfo.tracks=null olarak ayarlayın. Metin altyazıları (track.hidden) kapatmak için medyayı yeniden yüklemeniz gerekmez. Daha önce etkinleştirilmiş bir trackId içermeyen bir activeTracksId dizisi göndermek metin parçasını devre dışı bırakır.

Metin parçalarına stil uygulama

TextTrackStyle bir metin parçasının stil bilgilerini kapsayan nesnedir. TextTrackStyle nesnesi oluşturduktan veya mevcut bir nesneyi güncelledikten sonra, editTrackInfo yöntemini çağırarak bu nesneyi şu anda oynatılan medya öğesine uygulayabilirsiniz:

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

Geri arama sonuçlarıyla (başarı veya hata) isteğin durumunu takip edebilir ve göndereni buna göre güncelleyebilirsiniz.

Uygulamalar, kullanıcıların metin parçalarının stilini sistemin veya uygulamanın kendisinin sağladığı ayarları kullanarak güncellemesine izin vermelidir.

Aşağıdaki metin parçası stil öğelerini şekillendirebilirsiniz:

  • Ön plan (metin) rengi ve opaklığı
  • Arka plan rengi ve şeffaflık
  • Kenar türü
  • Kenar rengi
  • Yazı tipi ölçeği
  • Yazı Tipi Ailesi
  • Yazı Tipi Stili

Örneğin, metin rengini% 75 opaklıkta kırmızı olarak ayarlamak için aşağıdaki kodu kullanın:

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

Ses düzeyi kontrolü

Alıcı sesini ayarlamak için RemotePlayer ve RemotePlayerController simgelerini kullanabilirsiniz.

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

Gönderen uygulama, ses düzeyini kontrol etmek için aşağıdaki yönergelere uymalıdır:

  • Gönderen uygulamasının, alıcıyla senkronize olması gerekir. Böylece gönderen kullanıcı arayüzü, her zaman alıcıya göre ses seviyesini bildirir. Gönderendeki ses seviyesini korumak için RemotePlayerEventType.VOLUME_LEVEL_CHANGED ve RemotePlayerEventType.IS_MUTED_CHANGED geri aramalarını kullanın. Daha fazla bilgi için Durum güncellemeleri bölümüne bakın.
  • Gönderen uygulamaları, ses düzeyini belirli ve önceden tanımlanmış bir düzeye ayarlamamalı veya uygulama alıcıda yüklendiğinde ses düzeyini gönderen cihazın zil sesi/medya ses düzeyine ayarlamamalıdır.

Tasarım Kontrol Listesi'ndeki Gönderen ses düzeyi kontrolleri bölümüne bakın.

Alıcıya medya mesajları gönderme

Media Messages, gönderenden alıcıya gönderilebilir. Örneğin, alıcıya SKIP_AD iletisi 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önderen bağlandığında, değişiklikler diğer gönderenler tarafından başlatılmış olsa bile her gönderenin alıcıdaki değişikliklerden haberdar olması önemlidir.

Bu amaçla, uygulamanız RemotePlayerController üzerinde gerekli tüm dinleyicileri kaydetmelidir. Mevcut medyanın TextTrackStyle değişirse bağlı tüm gönderenlere bildirim gönderilir ve mevcut medya oturumunun ilgili özellikleri (ör. MediaInfo alanının activeTrackIds ve textTrackStyle) geri çağırmalarda gönderenlere gönderilir. Bu durumda, alıcı SDK'sı yeni stilin önceki stilden farklı olup olmadığını doğrulamaz ve bağlı tüm gönderenleri buna bakılmaksızın bilgilendirir.

İlerleme göstergesi

Gönderende ilerleme göstergesiyle oynatma konumunu göstermek çoğu uygulama için zorunludur. Cast API'leri, bu ve diğer senaryolarda bant genişliği tüketimini optimize eden Cast medya protokolünü kullanır. Bu nedenle, kendi durum senkronizasyonunuzu uygulamanız gerekmez. API'leri kullanarak medya oynatma için ilerleme göstergesinin doğru şekilde uygulanmasıyla ilgili bilgileri CastVideos-chrome örnek uygulamasında bulabilirsiniz.

CORS koşulları

Google Cast, uyarlanabilir medya akışı için CORS başlıklarının bulunmasını gerektirir. Ancak basit MP4 medya akışları, parça içeriyorsa CORS gerektirir. Parçaları herhangi bir medyada etkinleştirmek istiyorsanız hem parça akışlarınız hem de medya akışlarınız için CORS'u etkinleştirmeniz gerekir. Bu nedenle, sunucunuzdaki basit mp4 medyanız için CORS başlıklarınız yoksa ve ardından basit bir altyazı parçası eklerseniz sunucunuzu uygun CORS başlıklarını içerecek şekilde güncellemediğiniz sürece medyayı yayınlayamazsınız.

Şu başlıklara ihtiyacınız var: Content-Type, Accept-Encoding ve Range. Son iki başlığın (Accept-Encoding ve Range) daha önce ihtiyaç duymamış olabileceğiniz ek başlıklar olduğunu unutmayın.

"*" joker karakterleri, Access-Control-Allow-Origin başlığı için kullanılamaz. Sayfada korumalı medya içeriği varsa joker karakter yerine alan adı kullanması gerekir.

Web sayfasını yeniden yüklemeden oturuma devam etme

Mevcut bir CastSession oturumuna devam etmek için requestSessionById(sessionId) ile katılmaya çalıştığınız oturumun sessionId kullanın.

sessionId, arama yapıldıktan sonra getSessionId() kullanılarak etkin CastSession üzerinde loadMedia() bulunabilir.

Önerilen yaklaşım şudur:

  1. Oturumu başlatmak için loadMedia() numaralı telefonu arayın.
  2. sessionId öğesini yerel olarak depolama
  3. Gerektiğinde requestSessionById(sessionId) kullanarak oturuma yeniden katılın.
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 gönderen uygulamanıza ekleyebileceğiniz özellikler burada sona eriyor. Artık başka bir platform için gönderen uygulaması (Android veya iOS) oluşturabilir ya da alıcı uygulaması oluşturabilirsiniz.

Önceki
Cast'i entegre et