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

Reklam araları

Web Sender SDK, veri akışı sağlar.

Bkz. Daha fazla bilgi için Web Alıcı Reklam Aralarına Genel Bakış reklam aralarının işleyiş şekli hakkında bilgi edinin.

Hem gönderen hem de alıcı için aralar belirtilse de araların hem gönderen hem de alıcı için belirtilmesi önerilir. Web Alıcısı'nda ve Tutarlılık için Android TV Alıcısı tespit etmiş olursunuz.

Web üzerinde, şunu kullanarak bir yükleme komutunda Reklam aralarını belirtin: BreakClip ve Break:

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

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

Track nesnesi SDK'daki bir kanalı temsil eder. Bir kanal yapılandırabilir ve benzersiz kimlik atayabilirsiniz şu şekilde ekleyin:

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 öğesinde birden fazla parça olabilir; birden fazla Altyazı (her biri farklı bir dilde) veya birden fazla alternatif ses akışı (farklı diller için).

MediaInfo bir medya öğesini modelleyen sınıftır. Bir koleksiyonu ilişkilendirmek için Track bir medya öğesi içeriyorsa ilgili medya öğesinin tracks Bu ilişkilendirmenin, medya henüz alıcıya yüklendi:

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;

Medyadaki etkin parçaları ayarlayabilirsiniz activeTrackIds isteğinde bulunabilirsiniz.

Ayrıca medyayla ilişkilendirilmiş bir veya daha fazla kanalı da etkinleştirebilirsiniz. öğesine medya yüklendikten sonra EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) opt_activeTrackIds içinde etkinleştirilecek parçaların kimliklerini iletmek. Not, her iki parametre de isteğe bağlıdır. Etkin kanalları veya stilleri, karar verebilirsiniz. Örneğin, Arkadaş Bitkiler projesinin Fransızca altyazıyı (2) ve Fransızca sesi (3) etkinleştirin:

var activeTrackIds = [2, 3];
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(activeTrackIds);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

Geçerli medyadaki tüm ses veya video parçalarını kaldırmak için, mediaInfo.tracks=null (boş bir dizi) ve medyayı yeniden yükleyin.

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

  • var activeTrackIds = [2, 3]; öğesini (daha önce gösterilen) güncelleyip Yalnızca [3] ses parçasını içerir.
  • mediaInfo.tracks=null ayarla. Projenin gidişatı boyunca metin altyazılarını kapatmak için medyayı yeniden yükleyin (track.hidden). Aşağıdaki içermeyen bir activeTracksId dizisi gönderiliyor: Önceden etkinleştirilmiş olan trackId metin parçasını devre dışı bırakır.

Metin parçalarının stilini belirleme

TextTrackStyle bir metin parçasının stil bilgilerini kapsayan nesnedir. Şu tarihten sonra: veya mevcut bir TextTrackStyle nesnesini güncellerseniz bunu çağırarak o anda oynatılan medya öğesini editTrackInfo yöntemini kullanın:

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

Geri çağırma işleminin sonucuyla birlikte isteğin durumunu şu yöntemlerden biriyle izleyebilirsiniz: gönderin ve kaynak göndereni buna göre güncelleyin.

Uygulamalar, kullanıcılara metin parçalarının stilini güncelleme izni vermelidir: bu işlemi sistem veya uygulamanın kendisi tarafından sağlanan ayarları kullanarak yapabilirsiniz.

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ü

URL parametrelerinin Google tarafından nasıl ele alınmasını istediğinizi belirtmek için RemotePlayer ve RemotePlayerController alıcının ses düzeyini ayarlayın.

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ü, her zaman alıcı başına hacmi bildirir. Şunu kullanın: RemotePlayerEventType.VOLUME_LEVEL_CHANGED ve Şunu sürdürmek için RemotePlayerEventType.IS_MUTED_CHANGED geri çağırması yapın: ses düzeyini görebilirsiniz. Durum güncellemeleri'ne bakın. konulu videomuzu izleyin.
  • Gönderen uygulamaları, ses düzeyini önceden tanımlanmış belirli bir düzeyde ayarlamamalıdır. veya Uygulama alıcıya yüklenir.

Görüntüleyin Gönderenin ses düzeyi kontrolleri Tasarım Kontrol Listesi'ne göz atın.

Medya mesajları alıcıya gönderiliyor

Media Messages, gönderenden şu kişiye gönderilebilir: alıcı. Ö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önderici bağlı olduğunda aşağıdakiler önemlidir: alıcıdaki değişikliklerden haberdar olması için diğer gönderenlerden başlatıldı.

Bu nedenle, başvurunuz, gerekli tüm dinleyicileri RemotePlayerController. Öğe TextTrackStyle tüm bağlı gönderenlere bildirim gönderilir. ve geçerli medya oturumuna karşılık gelen özellikleri (örneğin, activeTrackIds ve textTrackStyle MediaInfo alanı, geri çağırmalarda gönderenlere gönderilir. Bu durumda alıcı SDK yeni stilin öncekinden farklı olup olmadığını doğrulamaz ve tüm bağlı gönderenlere bildirim gönderir.

İlerleme göstergesi

Oynatma konumunu, gönderende ilerleme göstergesiyle birlikte göstermek, Google'a güveniyorlar. Cast API'leri, Google Cast API'sını kullanarak bu ve diğer senaryolar için bant genişliği tüketimini optimize eder. Dolayısıyla, kendi durum senkronizasyonunuzu uygulamanız gerekir. Doğru şekilde uygulanması için medya oynatmayla ilgili ilerleme göstergesinin durumunu görüntülemek için CastVideos-chrome örnek uygulaması.

CORS koşulları

Google Cast, uyarlanabilir medya akışı için CORS başlıklarının olmasını gerektirir. Ancak, Parçalar içeren basit mp4 medya akışları bile CORS'a ihtiyaç duyar. Şu durumda: herhangi bir medya için Track'leri etkinleştirmek istiyorsanız her iki kanalınız için de CORS'yi akışlarınız ve medya akışlarınız. CORS başlıkları yoksa, basit mp4 medyanız için oluşturuyor ve daha sonra, basit bir altyazı takip ederseniz, sunucunuzu güncellemediğiniz sürece başlık ekleyin.

Şu başlıklara ihtiyacınız vardır: Content-Type,Accept-Encoding ve Range. Son iki üstbilginin (Accept-Encoding ve Range) ek olduğunu unutmayın daha önce ihtiyacınız olmayabilecek başlıklardan oluşur.

Joker karakterler "*" Access-Control-Allow-Origin üstbilgisi için kullanılamaz. Eğer sayfa korumalı medya içeriğine sahipse, joker karakter.

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

Mevcut bir CastSession işlemini devam ettirmek için şunu kullanın: requestSessionById(sessionId) Katılmaya çalıştığınız oturumun sessionId ile.

sessionId, etkin CastSession üzerinde şunları kullanarak bulunabilir: getSessionId() aradıktan sonra loadMedia().

Önerilen yaklaşım:

  1. Telefonla arama loadMedia() oturumu başlatmak için
  2. sessionId cihazını yerel olarak depolayın
  3. Oturuma şunu kullanarak yeniden katılın: requestSessionById(sessionId) gerektiğinde
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 sonlandırılmıştır. Artık başka bir platform için gönderen uygulaması oluşturabilirsiniz (Android veya iOS) veya bir alıcı uygulaması geliştirmelidir.

Önceki
Cast'i entegre et