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

Reklam araları

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

Ara verme işlemleri hem gönderen 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)

Parça API'lerini kullanma

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

Not: Stillendirilmiş 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 bir Özel Alıcı geliştirmeniz gerekir.

Track nesnesi, SDK'daki bir parçayı temsil eder. Bir kanalı yapılandırıp aşağıdaki gibi benzersiz bir kimlik atayabilirsiniz:

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 öğesinin birden fazla parçası 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 nesnesi koleksiyonunu bir medya öğesiyle ilişkilendirmek için tracks mülkünü güncellemeniz gerekir. 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.

Ayrıca, medya öğesiyle ilişkilendirilmiş bir veya daha fazla parçayı, medya yüklendikten sonra EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) işlevini çağırarak ve 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ı (2) ve Fransızca ses (3) özelliklerini etkinleştirmek için:

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ın ve medyayı yeniden yükleyin.

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

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

Metin parçalarına stil uygulama

TextTrackStyle, bir metin parçasının stil bilgilerini kapsayan nesnedir. Mevcut bir TextTrackStyle nesnesini oluşturduktan veya 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 aramaların sonucunu (başarı veya hata) kullanarak isteğin durumunu takip edebilir ve göndereni buna göre güncelleyebilirsiniz.

Uygulamalar, kullanıcıların sistem veya uygulama tarafından sağlanan ayarları kullanarak altyazı stillerini güncellemelerine izin vermelidir.

Aşağıdaki altyazı stili öğelerine stil uygulayabilirsiniz:

• Ön plan (metin) rengi ve şeffaflık
• 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ğıdakileri yapı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 uygulaması, 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 sesi bildirmesi için gönderen uygulamasının alıcıyla senkronize olması gerekir. Gönderenin ses seviyesini korumak için RemotePlayerEventType.VOLUME_LEVEL_CHANGED ve RemotePlayerEventType.IS_MUTED_CHANGED geri arama işlevini kullanın. Daha fazla bilgi için Durum güncellemeleri bölümüne bakın.
• Gönderen uygulamaları, ses düzeyini önceden tanımlanmış belirli bir düzeye ayarlamaması veya uygulama alıcıya yüklendiğinde ses düzeyini gönderen cihazın zil/medya sesine ayarlamaması gerekir.

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

Alıcının medya mesajları göndermesi

Media Messages, gönderenden alıcıya 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ı

Aynı alıcıya birden fazla gönderen bağlıysa bu 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.

Not: Bazı Cast cihazlarında sanal gönderen gibi davranan ve alıcıdaki durumu etkileyen kontrol girişleri (uzaktan kumandalar, düğmeler) bulunduğundan bu, yalnızca birden fazla göndereni açıkça destekleyenler değil, tüm uygulamalar için ö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 MediaInfo alanındaki activeTrackIds ve textTrackStyle gibi ilgili özellikleri geri çağırmalarda gönderenlere gönderilir. Bu durumda alıcı SDK'sı, yeni stilin öncekinden farklı olup olmadığını doğrulamaz ve bağlı olan tüm gönderenleri bilgilendirir.

Not: Şu anda yüklü medyayla ilişkili parçaların listesi değiştirilemez. Gerekirse MediaInfo nesnesinde parça bilgilerini güncellemeniz ve medyayı yeniden yüklemeniz gerekir.

İlerleme göstergesi

Oynatma konumunu, gönderen tarafında 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 üzere CastVideos-chrome örnek uygulamasına bakın.

CORS koşulları

Google Cast, uyarlanabilir medya aktarımı için CORS başlıklarının kullanılmasını gerektirir. Ancak basit mp4 medya akışları bile parça içeriyorsa CORS'u 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, sunucunuzda basit mp4 medyanız için CORS başlıkları 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 medyanızı aktaramazsınız.

Şu üstbilgilerin kullanılması gerekir: Content-Type,Accept-Encoding ve Range. Son iki başlığın (Accept-Encoding ve Range), daha önce ihtiyaç duymadığınız ek başlıklar olduğunu unutmayın.

Access-Control-Allow-Origin başlığı için "*" joker karakterleri kullanılamaz. Sayfada korunan medya içeriği varsa joker karakter yerine alan adı kullanılmalıdır.

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

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

sessionId, loadMedia() arandıktan sonra getSessionId() kullanılarak etkin CastSession'te bulunabilir.

Önerilen yaklaşım şu şekildedir:

1. Oturumu başlatmak için loadMedia() numaralı telefonu arayın
2. sessionId dosyasını yerel olarak depolama
3. Gerekirse requestSessionById(sessionId) simgesini kullanarak oturuma yeniden katılabilirsiniz.

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 kadardır. Artık başka bir platform (Android veya iOS) için gönderen uygulaması veya alıcı uygulaması oluşturabilirsiniz.