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

Reklam araları

Web Gönderen SDK'sı, belirli bir medya akışı içindeki 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ış bölümüne bakın.

Aralar hem gönderen hem de alıcı için belirtilebilir ancak platformlar arasında tutarlı bir davranış sağlanması için araların Web Alıcısı ve Android TV Alıcısı'nda belirtilmesi önerilir.

Web'de, BreakClip ve Break kullanarak 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)

Track API'lerini kullanma

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

Track nesnesi, SDK'daki bir kanalı temsil eder. Bir kanal yapılandırabilir ve kanala 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ısı (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. Track nesne 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;

Etkin kanalları medya activeTrackIds isteğinde ayarlayabilirsiniz.

Medya yüklendikten sonra EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) kodunu çağırıp opt_activeTrackIds ürününde etkinleştirilecek parçaların kimliklerini ileterek medya öğesiyle ilişkilendirilmiş bir veya daha fazla parçayı da etkinleştirebilirsiniz. Her iki parametrenin de isteğe bağlı olduğunu ve kendi takdirinize bağlı olarak hangi etkin kanalları veya stilleri ayarlayacağınızı seçebilirsiniz. Ö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) ayarlayıp medyayı yeniden yüklemeniz yeterlidir.

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

  • var activeTrackIds = [2, 3]; öğesini (daha önce gösterilen) yalnızca ses parçasını [3] içerecek şekilde güncelleyin.
  • mediaInfo.tracks=null ayarlayın. Metin altyazılarını (track.hidden) kapatmak için medyayı yeniden yüklemenin gerekli olmadığını unutmayın. Önceden etkinleştirilmiş bir trackId öğesi içermeyen bir activeTracksId dizisi gönderildiğinde metin parçası devre dışı bırakılır.

Metin kanalları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, şu anda oynatılan medya öğesine şu şekilde editTrackInfo yöntemini çağırarak bu öğeyi 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 sonucunu (başarılı veya hatalı) izleyebilir ve kaynak göndereni buna göre güncelleyebilirsiniz.

Uygulamalar, kullanıcıların sistem veya uygulamanın kendisi tarafından sağlanan ayarları kullanarak metin parçalarının stilini güncellemesine izin vermelidir.

Aşağıdaki metin parçası stil öğelerinin stilini belirleyebilirsiniz:

  • Ö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 saydamlıkla kırmızı olarak aşağıdaki gibi ayarlayın:

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

Ses düzeyi kontrolü

Alıcının 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üzeyinin denetlenmesiyle ilgili 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 ses düzeyini alıcıya göre bildirmelidir. Gönderende ses düzeyini 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 uygulamaları, ses düzeyini belirli, önceden tanımlanmış bir düzeye ayarlamamalı veya uygulama alıcıda yüklendiğinde ses düzeyini gönderenin cihazındaki zil/medya sesi olarak ayarlamamalıdır.

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

Alıcıya medya mesajları gönderiliyor

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

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

Bunun için uygulamanız gerekli tüm dinleyicileri RemotePlayerController'e kaydetmelidir. Mevcut medya öğesinin TextTrackStyle değeri 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ğırma işlemlerinde gönderenlere gönderilir. Bu durumda alıcı SDK'sı, yeni stilin önceki stilinden farklı olup olmadığını doğrulamaz ve ne olursa olsun bağlı tüm gönderenleri bilgilendirir.

İlerleme göstergesi

Çoğu uygulama için, oynatma konumunun gönderende bir ilerleme göstergesiyle birlikte gösterilmesi bir zorunluluktur. Cast API'leri, Cast medya protokolünü kullanarak bu ve diğer senaryolar için bant genişliği tüketimini optimize eder. Bu sayede kendi durum senkronizasyonunuzu uygulamanız gerekmez. API'leri kullanarak medya oynatma için 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 gerektirir. Herhangi bir medya için Parçalar'ı etkinleştirmek istiyorsanız hem izleme akışlarınız hem de medya akışlarınız için CORS'yi etkinleştirmeniz gerekir. Dolayısıyla, sunucunuzda basit mp4 medyanız için CORS başlıkları yoksa ve daha sonra, basit bir altyazı parçası eklerseniz sunucunuzu uygun CORS başlıklarını içerecek şekilde güncellemediğiniz sürece medya akışı yapamazsınız.

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

Access-Control-Allow-Origin başlığı için "*" joker karakterleri kullanılamaz. Sayfada korumalı 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 öğesini devam ettirmek için requestSessionById(sessionId) kısmını, katılmaya çalıştığınız oturumun sessionId kısmıyla birlikte kullanın.

sessionId, loadMedia() çağrısından sonra getSessionId() kullanılarak etkin CastSession üzerinde bulunabilir.

Önerilen yaklaşım:

  1. Oturumu başlatmak için loadMedia() numaralı telefonu arayın
  2. sessionId öğesini yerel olarak depolayın
  3. Gerektiğinde requestSessionById(sessionId) adresini 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 tamamlanmış olur. Artık başka bir platform (Android veya iOS) için bir gönderen uygulaması veya bir alıcı uygulaması oluşturabilirsiniz.