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

Reklam araları

Web Sender SDK, belirli bir medya akışı içinde 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ış'a göz atın.

Hem gönderen hem de alıcı için aralar belirtilebilir. Bununla birlikte, platformlar arasında tutarlı davranışı sürdürmek 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)

Kanallar API'lerini kullanma

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

Not: Styled ve Default Media Alıcıları, API ile yalnızca metin kanallarını kullanmanıza izin verir. Ses ve video kanallarıyla çalışmak için bir Özel Alıcı geliştirmeniz gerekir.

Track nesnesi, SDK'daki bir kanalı temsil eder. Bir kanalı aşağıdaki gibi yapılandırabilir ve 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 çok parçası olabilir. Örneğin, birden çok altyazısı (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. Track nesne koleksiyonunu bir medya öğesiyle ilişkilendirmek için 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ğinden ayarlayabilirsiniz.

Medya yüklendikten sonra, EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) yöntemini çağırıp opt_activeTrackIds ürününde etkinleştirilecek parçaların kimliklerini ileterek medya öğesiyle ilişkilendirilmiş bir veya daha fazla kanalı da etkinleştirebilirsiniz. Her iki parametrenin de isteğe bağlı olduğunu ve istediğiniz etkin parçaları veya stilleri 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 medyadan 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 ayarla. Metin altyazılarını (track.hidden) kapatmak için medyanın yeniden yüklenmesinin gerekli olmadığını unutmayın. Daha önce etkinleştirilmiş bir trackId içermeyen bir activeTracksId dizisi göndermek, metin kanalını devre dışı bırakır.

Metin parçalarının stilini belirleme

TextTrackStyle bir metin kanalının stil bilgilerini kapsülleyen nesnedir. Mevcut bir TextTrackStyle nesnesini oluşturduktan veya güncelledikten sonra, bu nesnenin editTrackInfo yöntemini çağırarak şu anda oynatılan medya öğesine şu şekilde uygulayabilirsiniz:

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

Geri çağırmaların sonucuna (başarılı veya hatalı) göre isteğin durumunu izleyebilir ve kaynak göndereni buna göre güncelleyebilirsiniz.

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

Aşağıdaki metin izleme stili öğ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 opaklık ile 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ı ses düzeyini ayarlamak için RemotePlayer ve RemotePlayerController tuşlarını 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önderenin kullanıcı arayüzünün, her zaman alıcı başına ses düzeyini bildirmesi için, gönderen uygulamanın alıcıyla senkronize olması gerekir. Gönderenin ses düzeyini 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ı, ses düzeyini önceden tanımlanmış belirli bir düzeye ayarlamamalı veya uygulama alıcıya yüklendiğinde ses düzeyini gönderen cihazın zil/medya ses düzeyine 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
    });
  }
});

Gelişmelerin paylaşılması

Birden fazla gönderen aynı alıcıya bağlı olduğunda, bu değişiklikler diğer gönderenlerden başlamış olsa bile, her bir gönderenin alıcıdaki değişikliklerden haberdar olması önemlidir.

Not: Bazı Cast cihazlarının sanal göndericiler gibi davranan ve alıcının durumunu etkileyen kontrol girişleri (uzaktan kumandalar, düğmeler) olduğ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 gerekli tüm işleyicileri RemotePlayerController'a kaydetmelidir. Mevcut medya içeriğinin TextTrackStyle değeri değişirse bağlı tüm gönderenler bilgilendirilir ve geçerli medya oturumunun MediaInfo alanındaki activeTrackIds ve textTrackStyle gibi karşılık gelen ö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ğımsız olarak tüm bağlı gönderenleri bilgilendirir.

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

İlerleme göstergesi

Çoğu uygulama için oynatma konumunun, gönderen üzerinde bir ilerleme göstergesiyle birlikte gösterilmesi bir zorunluluktur. 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 sayede kendi durum senkronizasyonunuzu uygulamanız gerekmez. API'leri kullanarak medya oynatmaya ilişkin ilerleme durumu göstergesinin doğru bir ş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 parça akışlarınız hem de medya akışlarınız için CORS'yi etkinleştirmeniz gerekir. Bu nedenle, 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 medyanızın akışını gerçekleştiremezsiniz.

Ş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 bir alan adı kullanmalıdır.

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

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

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

Önerilen yaklaşım şöyledir:

1. Oturumu başlatmak için loadMedia() numaralı telefonu arayın
2. sessionId cihazını yerel olarak depolayın
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 Sender uygulamanıza ekleyebileceğiniz özellikler tamamlandı. Artık başka bir platform (Android veya iOS) için gönderen uygulaması oluşturabilir veya alıcı uygulama oluşturabilirsiniz.