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

Reklam araları

Web Gönderme 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 edinmek için Web Alıcısı Reklam Aralarına Genel Bakış bölümüne bakın.

Aralar hem gönderende hem de alıcıda belirtilebilir ancak tüm platformlarda tutarlı bir davranış sağlamak için araların 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)

Kanal API'lerini kullanma

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

Not: Styled ve Default Media Alıcılar, API ile yalnızca metin parçalarını kullanmanıza olanak tanır. Ses ve video parçaları ile çalışmak için bir Özel Alıcı geliştirmeniz gerekir.

Track nesnesi, SDK'daki bir parçayı temsil eder. Bir parçayı yapılandırıp parçaya 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 kanalı 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 öğesinin modelini oluşturan sınıftır. Bir Track nesnesi koleksiyonunu medya öğesiyle ilişkilendirmek için tracks mülkünü güncelleyin. Medyanın alıcıya yüklenmeden önce bu ilişkilendirmenin 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;

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

Ayrıca, medya öğesi yüklendikten sonra EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) çağırıp opt_activeTrackIds içinde etkinleştirilecek parçaların kimliklerini ileterek medya öğesiyle ilişkilendirilmiş bir veya daha fazla kanalı etkinleştirebilirsiniz. Her iki parametrenin de isteğe bağlı olduğunu ve isteğe bağlı olarak hangi etkin parçaların veya stillerin ayarlanacağını seçebileceğinizi unutmayın. Ö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 parçalarını veya video parçalarını kaldırmak için mediaInfo.tracks=null düğmesini (boş dizi) ayarlayıp medyayı yeniden yüklemeniz yeterlidir.

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

• var activeTrackIds = [2, 3]; uygulamasını (daha önce gösterilen) yalnızca [3] ses parçasını içerecek şekilde güncelleyin.
• mediaInfo.tracks=null ayarla. Metin altyazılarını (track.hidden) kapatmak için medyayı yeniden yüklemeniz gerekmez. Daha önce içermeyen içermeyen activeTracksId dizisitrackId göndermek, metin parçasını devre dışı bırakır.

Metin parçalarının stilini ayarlama

TextTrackStyle, metin parçasının stil bilgilerini kapsayan nesnedir. Mevcut bir TextTrackStyle nesnesini oluşturduktan veya güncelledikten sonra, editTrackInfo yöntemini çağırarak bunu ş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);

İsteğin durumunu, geri çağırmaların sonucu olarak (başarılı veya hata) izleyebilir ve kaynak göndereni buna göre güncelleyebilirsiniz.

Uygulamalar, metin kanallarının stilini, sistem tarafından veya uygulamanın kendisi tarafından sağlanan ayarları kullanarak güncellemesine izin vermelidir.

Aşağıdaki metin izleme stili öğelerinin stilini belirleyebilirsiniz:

• Ön plan rengi (metin) ve opaklık
• Arka plan rengi ve şeffaflık
• Kenar türü
• Kenar Rengi
• Yazı Tipi Ölçeki
• Yazı Tipi Ailesi
• Yazı Tipi Stili

Örneğin, metin rengini aşağıdaki gibi% 75 opaklıkla kırmızı olarak ayarlayın:

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

Ses düzeyi kontrolü

Alıcı ses düzeyini ayarlamak için RemotePlayer ve RemotePlayerController değerlerini kullanabilirsiniz.

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

Gönderen uygulamanın ses düzeyini kontrol etmek için aşağıdaki kurallara uyması gerekir:

• Gönderen uygulamanın, alıcı başına her zaman sesi bildirebilmesi için, gönderen uygulaması alıcıyla senkronize edilmelidir. Gönderendeki hacmi korumak için RemotePlayerEventType.VOLUME_LEVEL_CHANGED ve RemotePlayerEventType.IS_MUTED_CHANGED geri çağırmasını kullanın. Daha fazla bilgi için Durum güncellemeleri bölümüne bakın.
• Gönderen uygulamalarda ses düzeyi belirli ve önceden tanımlanmış bir düzeyde olmamalı veya alıcı alıcıya yüklendiğinde, ses düzeyi gönderen cihazın zili çaldırılacak/medya ses düzeyi olarak ayarlanmamalıdır.

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

Alıcıya medya mesajı gönderme

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
    });
  }
});

Durum güncellemeleri

Aynı alıcıya birden fazla gönderici bağlandığında, bu değişiklikler diğer gönderenlerden başlatılmış olsa bile her gönderenin alıcıdaki değişikliklerden haberdar olması önemlidir.

Not: Bazı Yayın cihazlarında sanal gönderenler gibi davranan ve alıcıdaki durumu etkileyen kontrol girişleri (uzaktan kumandalar, düğmeler) olduğu için bu özellik yalnızca uygulamalar için önemlidir.

Bu nedenle, uygulamanız gereken tüm dinleyicileri RemotePlayerController ürününe kaydetmelidir. Geçerli medyanın TextTrackStyle değişirse bağlı tüm gönderenler bilgilendirilir ve geçerli medya oturumunun ilgili özellikleri (ör. MediaInfo alanının activeTrackIds ve textTrackStyle) geri çağırmalarındaki gönderenlere gönderilir. Bu durumda alıcı SDK'sı, yeni stilin öncekinden farklı olup olmadığını doğrulamaz ve tüm bağlı gönderenleri bağımsız olarak bilgilendirir.

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

İlerleme göstergesi

Çoğu konum için, gönderende ilerleme göstergesinin bulunduğu oynatma konumunun gösterilmesi bir zorunluluktur. Cast API'leri, bu ve diğer senaryolar için bant genişliği tüketimini optimize eden Yayın medya protokolünü kullanır. Böylece kendi durum senkronizasyonunuzu uygulamanız gerekmez. API'leri kullanarak medya oynatmaya ilişkin bir ilerleme göstergesinin doğru şekilde uygulanması için CastVideos-chrome örnek uygulamasına bakın.

CORS gereksinimleri

Google Cast, uyarlanabilir medya akışı için CORS başlıklarının bulunmasını gerektirir, ancak basit mp4 medya akışları bile Parçaları içeriyorsa CORS'u gerektirir. Herhangi bir medyada İzlemeleri etkinleştirmek isterseniz hem kanal yayınlarınız hem de medya yayınlarınız için CORS'yi etkinleştirmeniz gerekir. Sunucunuzdaki basit mp4 medyanız için CORS başlıkları 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ı oynatamazsı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ç duymadığınız 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 sayfada joker karakter yerine alan adı kullanılmalıdır.

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

Mevcut bir CastSession öğesini devam ettirmek için requestSessionById(sessionId) kullanmaya çalıştığınız oturumu sessionId içinde kullanın.

loadMedia() araması yapıldıktan sonra getSessionId() kullanılarak sessionId, etkin CastSession adresinde bulunabilir.

Önerilen yaklaşım aşağıdakilerden hangisidir?

1. Oturumu başlatmak için loadMedia() numaralı telefonu arayın
2. sessionId cihazını yerel olarak depola
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

Bu şekilde, Web Gönderen uygulamanıza ekleyebileceğiniz özellikler tamamlanmıştır. Artık başka bir platform (Android veya iOS) için gönderen uygulaması oluşturabilir veya alıcı uygulaması oluşturabilirsiniz.