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

Reklam Araları

Web Gönderen SDK'sı, 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ı Reklam Aralarına Genel Bakış başlıklı makaleyi inceleyin.

Reklam araları hem gönderende hem de alıcıda belirtilebilir ancak platformlar arasında tutarlı bir davranış sağlamak için Web Alıcısı ve Android TV Alıcısı'nda 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)

Tracks API'lerini kullanma

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

Not: Stil uygulanmış ve Varsayılan Medya Alıcıları, API ile yalnızca metin parçalarını kullanmanıza olanak tanır. Ses ve video parçalarıyla çalışmak için Özel Alıcı geliştirmeniz gerekir.

Track nesnesi, SDK'daki bir parçayı temsil eder. Bir kanalı yapılandırabilir ve benzersiz bir kimlik atayabilirsiniz. Bunu şu şekilde yapabilirsiniz:

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, medya öğesini modelleyen sınıftır. Bir Track nesnesi koleksiyonunu bir medya öğesiyle ilişkilendirmek için öğenin tracks özelliğini güncellersiniz. Bu ilişkilendirmenin, medya alıcıya yüklenmeden önce yapılması gerekir:

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;

Medya activeTrackIds isteğinde etkin parçaları ayarlayabilirsiniz.

Medya yüklendikten sonra EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) yöntemini çağırıp etkinleştirilecek parçaların kimliklerini opt_activeTrackIds parametresine ileterek medya öğesiyle ilişkili bir veya daha fazla parçayı da etkinleştirebilirsiniz. Her iki parametre de isteğe bağlıdır. Etkin parçaları veya stilleri dilediğiniz gibi ayarlayabilirsiniz. Örneğin, Fransızca altyazıyı (2) ve Fransızca sesi (3) şu şekilde etkinleştirebilirsiniz:

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

Mevcut medyadaki tüm ses veya video parçalarını kaldırmak için mediaInfo.tracks=null (boş bir dizi) değerini ayarlayıp medyayı yeniden yüklemeniz yeterlidir.

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

• var activeTrackIds = [2, 3]; (önceki örnekte gösterilen) öğesini yalnızca ses parçasını [3] içerecek şekilde güncelleyin.
• mediaInfo.tracks=null. küme 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önderildiğinde metin parçası devre dışı bırakılır.

Metin parçalarının stilini belirleme

TextTrackStyle, bir metin parçasının stil bilgilerini içeren nesnedir. Mevcut bir TextTrackStyle nesnesini oluşturduktan veya güncelledikten sonra, nesnenin editTrackInfo yöntemini çağırarak nesneyi o anda oynatılan medya öğesine uygulayabilirsiniz. Örneğin:

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

Geri çağırmaların sonucuyla (başarılı 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 sistem tarafından sağlanan ayarları veya uygulamanın kendi ayarlarını kullanarak güncellemesine izin vermelidir.

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

• Ö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ıkla 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ı ses seviyesini ayarlamak için RemotePlayer ve RemotePlayerController düğmelerini 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 kullanıcı arayüzünün her zaman alıcıya göre ses seviyesini bildirmesi için gönderen uygulamasının alıcıyla senkronize olması gerekir. Gönderen cihazda ses seviyesini korumak için RemotePlayerEventType.VOLUME_LEVEL_CHANGED ve RemotePlayerEventType.IS_MUTED_CHANGED geri çağırma işlevini kullanın. Daha fazla bilgi için Durum güncellemeleri bölümüne bakın.
• Gönderen uygulamalar, uygulama alıcıya yüklendiğinde ses düzeyini önceden tanımlanmış belirli bir düzeye veya 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

Gönderenden alıcıya Media Messages gönderilebilir. Ö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ı

Birden fazla gönderen aynı alıcıya bağlı olduğunda, her gönderenin alıcıdaki değişikliklerden haberdar olması önemlidir. Bu değişiklikler diğer gönderenler tarafından başlatılmış olsa bile.

Not: Bu, yalnızca birden fazla göndereni açıkça destekleyen uygulamalar için değil, tüm uygulamalar için önemlidir. Bunun nedeni, bazı Cast cihazlarında sanal gönderenler gibi davranan ve alıcıdaki durumu etkileyen kontrol girişlerinin (uzaktan kumandalar, düğmeler) bulunmasıdır.

Bu amaçla, uygulamanız RemotePlayerController üzerinde gerekli tüm dinleyicileri kaydetmelidir. Mevcut medyanın TextTrackStyle değeri 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 özellikleri) geri çağırmalarda gönderenlere iletilir. Bu durumda alıcı SDK'sı, yeni stilin önceki stilden farklı olup olmadığını doğrulamaz ve tüm bağlı gönderenleri bilgilendirir.

Not: Yüklü olan medyayla ilişkili parçaların listesi değiştirilemez. Gerekirse MediaInfo nesnesindeki parça bilgilerini güncelleyip medyayı yeniden yüklemeniz gerekir.

İlerleme göstergesi

Gönderen cihazda oynatma konumunu bir ilerleme göstergesiyle göstermek çoğu uygulama için zorunludur. Cast API'leri, bu ve diğer senaryolar için 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ı hakkında bilgi edinmek istiyorsanız CastVideos-chrome örnek uygulamasına göz atın.

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ı bile parça içeriyorsa CORS gerektirir. Herhangi bir medya için Parçalar'ı 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. Dolayısıyla, sunucunuzdaki basit MP4 medyanız için CORS başlıklarınız yoksa ve basit bir altyazı parçası eklerseniz sunucunuzu uygun CORS başlıklarını içerecek şekilde güncellemediğiniz sürece medyanızı yayınlayamazsınız.

Şu üstbilgileri kullanmanız gerekir: Content-Type,Accept-Encoding ve Range. Son iki başlık olan Accept-Encoding ve Range, daha önce ihtiyaç duymamış olabileceğiniz ek başlıklardır.

Access-Control-Allow-Origin üstbilgisi için "*" joker karakterleri kullanılamaz. Sayfada korumalı medya içeriği varsa joker karakter yerine bir alan adı kullanılmalıdır.

Web sayfasını yeniden yüklemeden oturumu devam ettirme

Mevcut bir CastSession oturumunu devam ettirmek için katılmaya çalıştığınız oturumun sessionId değeriyle birlikte requestSessionById(sessionId) komutunu kullanın.

sessionId, loadMedia() çağrısı yapıldıktan sonra getSessionId() kullanılarak etkin CastSession üzerinde 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 bu kadar. Artık başka bir platform (Android veya iOS) için gönderen uygulaması ya da bir alıcı uygulaması oluşturabilirsiniz.