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 nasıl çalıştığı hakkında daha fazla bilgi için Web Alıcı 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ış sürdürebilmek 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)

Parça API'lerini kullanma

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

Track nesnesi, SDK'daki bir kanalı temsil eder. Şu şekilde bir parça yapılandırabilir ve ona 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. 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ğinde ayarlayabilirsiniz.

Ayrıca, medya öğesiyle ilişkilendirilmiş bir veya daha fazla kanalı, medya yüklendikten sonra EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) çağrısı yaparak ve opt_activeTrackIds içinde etkinleştirilecek parçaların kimliklerini ileterek etkinleştirebilirsiniz. Her iki parametrenin de isteğe bağlı olduğunu ve etkin parçaları veya stilleri seçebileceğinizi unutmayın. Örneğin, Fransızca altyazı (2) ve Fransızca ses (3) şu şekilde etkinleştirilebilir:

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.

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

  • var activeTrackIds = [2, 3]; öğesini (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üklemenin gerekmediğini unutmayın. Önceden etkinleştirilmiş bir trackId içermeyen bir activeTracksId dizisi gönderdiğinizde metin kanalı 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, editTrackInfo yöntemini çağırarak bunu şu 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ğırma sonucuna göre isteğin durumunu (başarılı veya hata) 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 yollarının stilini güncellemesine izin vermelidir.

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

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

Örneğin, metin rengini aşağıdaki gibi% 75 opaklıkla kırmızıya 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ü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ı başına hacmi bildirebilmesi için gönderen uygulama alıcıyla senkronize edilmelidir. Gönderenin hacmini 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üzeyde ayarlamamalı veya alıcı cihaza yüklendiğinde ses düzeyini gönderen cihazın zil/medya ses düzeyine ayarlamamalıdır.

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

Medya mesajları alıcıya 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ı

Aynı alıcıya birden fazla gönderen bağlandığında, bu değişiklikler diğer gönderenlerden yapılmış olsa bile her gönderenin, alıcıdaki değişikliklerin farkında olması önemlidir.

Bu doğrultuda, uygulamanız gerekli tüm dinleyicileri RemotePlayerController üzerinde kaydetmelidir. Mevcut medyanın TextTrackStyle değeri değişirse tüm bağlı gönderenlere bildirim gönderilir ve geçerli medya oturumunun ilgili özellikleri (ör. MediaInfo alanının activeTrackIds ve textTrackStyle) geri çağırmalarda gönderenlere gönderilir. Bu durumda alıcı SDK, yeni stilin öncekinden farklı olup olmadığını doğrulamaz ve bundan bağımsız olarak tüm bağlı gönderenleri bilgilendirir.

İlerleme göstergesi

Oynatma konumunu gönderende ilerleme göstergesiyle birlikte 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. Böylece kendi durum senkronizasyonunuzu uygulamanız gerekmez. API'leri kullanarak medya oynatmayla ilgili ilerleme göstergesinin doğru şekilde uygulanması için CastVideos-chrome örnek uygulamasına bakın.

CORS koşulları

Uyarlanabilir medya akışı için Google Cast, CORS başlıklarının olmasını gerektirir ancak basit mp4 medya akışları bile Parçalar içeriyorsa CORS'a ihtiyaç duyar. Herhangi bir medya için Parçalar'ı etkinleştirmek isterseniz hem parça akışlarınız hem de medya akışlarınız için CORS'yi etkinleştirmeniz gerekir. Bu nedenle, sunucunuzdaki basit mp4 medyanız için kullanılabilir 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ıklara ihtiyacınız vardır: Content-Type,Accept-Encoding ve Range. Son iki başlığın (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ı kullanmalıdır.

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

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

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

Önerilen yaklaşım:

  1. Oturumu başlatmak için loadMedia() 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 burada tamamlanıyor. Artık başka bir platform (Android veya iOS) için bir gönderen uygulaması ya da bir alıcı uygulaması geliştirebilirsiniz.

Önceki
Cast'i entegre et