Menambahkan Fitur Lanjutan ke Aplikasi Pengirim Web Anda

Jeda Iklan

Web Sender SDK memberikan dukungan untuk Jeda Iklan dan iklan pengiring dalam streaming media tertentu.

Lihat Ringkasan Jeda Iklan Penerima Web untuk mengetahui informasi selengkapnya informasi tentang cara kerja Jeda Iklan.

Meskipun jeda dapat ditentukan pada pengirim dan penerima, sebaiknya keduanya yang ditentukan di Penerima Web dan Penerima Android TV untuk menjaga konsistensi perilaku lintas platform.

Di web, tentukan Jeda Iklan dalam perintah pemuatan menggunakan BreakClip dan 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)

Menggunakan API jalur

Trek dapat berupa objek teks (subtitel atau teks), atau streaming audio atau video . Track API memungkinkan Anda bekerja dengan objek ini di aplikasi.

Objek Track mewakili jalur di SDK. Anda dapat mengonfigurasi jalur dan menetapkan ID unik menjadi seperti ini:

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;

Item media dapat memiliki beberapa trek; misalnya, dapat memiliki beberapa subtitel (masing-masing untuk bahasa yang berbeda) atau beberapa streaming audio alternatif (untuk bahasa yang berbeda).

MediaInfo adalah class yang memodelkan item media. Untuk mengaitkan kumpulan Track dengan item media, Anda memperbarui tracks saat ini. Asosiasi ini perlu dilakukan sebelum media dimuat ke penerima:

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;

Anda dapat menyetel jalur aktif di media activeTrackIds permintaan.

Anda juga dapat mengaktifkan satu atau beberapa trek yang terkait dengan media setelah media dimuat, dengan memanggil EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) dan meneruskan ID jalur yang akan diaktifkan di opt_activeTrackIds. Catatan: kedua parameter bersifat opsional dan Anda dapat memilih gaya atau trek aktif, untuk ditetapkan sesuai kebijaksanaan Anda. Sebagai contoh, berikut adalah cara aktifkan subtitel bahasa Prancis (2) dan audio bahasa Prancis (3):

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

Untuk menghapus semua trek audio atau video dari media saat ini, cukup setel mediaInfo.tracks=null (array kosong) lalu muat ulang media.

Untuk menghapus semua trek teks dari media saat ini (misalnya, menonaktifkan sub judul), lakukan salah satu hal berikut:

  • Perbarui var activeTrackIds = [2, 3]; (ditampilkan sebelumnya) agar hanya menyertakan [3], trek audio.
  • Setel mediaInfo.tracks=null. Perhatikan bahwa tidak perlu muat ulang media untuk menonaktifkan teks keterangan (track.hidden). Mengirim array activeTracksId yang tidak berisi trackId yang sebelumnya diaktifkan akan menonaktifkan trek teks.

Menata gaya trek teks

TextTrackStyle adalah objek yang merangkum informasi gaya visual trek teks. Sesudah membuat atau memperbarui objek TextTrackStyle yang ada, Anda dapat menerapkannya ke item media yang sedang diputar dengan memanggil editTrackInfo , seperti ini:

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

Anda bisa melacak status permintaan dengan hasil callback, keberhasilan atau kesalahan, dan memperbarui pengirim asal sebagaimana mestinya.

Aplikasi harus memungkinkan pengguna untuk memperbarui gaya untuk trek teks, baik menggunakan pengaturan yang disediakan oleh sistem atau oleh aplikasi itu sendiri.

Anda dapat menata gaya elemen gaya trek teks berikut:

  • Warna dan opasitas latar depan (teks)
  • Warna dan opasitas latar belakang
  • Jenis tepi
  • Warna Tepi
  • Skala Font
  • Jenis Font
  • Gaya Font

Misalnya, setel warna teks menjadi merah dengan opasitas 75% sebagai berikut:

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

Kontrol volume

Anda dapat menggunakan RemotePlayer dan RemotePlayerController untuk menyetel volume penerima.

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

Aplikasi pengirim harus mematuhi panduan berikut untuk mengontrol volume:

  • Aplikasi pengirim harus melakukan sinkronisasi dengan penerima sehingga UI pengirim selalu melaporkan volume per penerima. Gunakan RemotePlayerEventType.VOLUME_LEVEL_CHANGED dan Callback RemotePlayerEventType.IS_MUTED_CHANGED untuk mempertahankan volume pesan pada pengirim. Lihat Pembaruan status untuk informasi selengkapnya.
  • Aplikasi pengirim tidak boleh menyetel level volume pada tingkat tertentu yang telah ditentukan sebelumnya atau atur tingkat volume ke volume pendering/media perangkat pengirim saat aplikasi dimuat di penerima.

Lihat Kontrol volume pengirim di Checklist Desain.

Mengirim pesan media ke penerima

Media Messages dapat dikirim dari pengirim ke penerima. Misalnya, untuk mengirim pesan SKIP_AD ke penerima:

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

Pembaruan status

Ketika beberapa pengirim terhubung ke penerima yang sama, penting untuk setiap pengirim mengetahui perubahan pada penerima bahkan jika perubahan itu dimulai dari pengirim lain.

Untuk mencapainya, aplikasi Anda harus mendaftarkan semua pemroses yang diperlukan pada RemotePlayerController Jika TextTrackStyle perubahan media saat ini, maka semua pengirim yang terhubung akan diberi tahu dan properti sesi media yang sesuai, seperti activeTrackIds dan textTrackStyle dari MediaInfo akan dikirim ke pengirim dalam callback. Dalam hal ini, SDK penerima tidak memverifikasi apakah gaya baru berbeda dari gaya sebelumnya dan memberi tahu semua pengirim yang terhubung.

Indikator kemajuan

Menampilkan lokasi pemutaran dengan indikator progres pada pengirim adalah persyaratan untuk sebagian besar aplikasi. Cast API menggunakan protokol media Cast, yang mengoptimalkan konsumsi bandwidth untuk skenario ini dan skenario lainnya, sehingga Anda tidak perlu menerapkan sinkronisasi status Anda sendiri. Untuk penerapan yang tepat tentang indikator kemajuan untuk pemutaran media menggunakan API, lihat Aplikasi contoh CastVideo-chrome.

Persyaratan CORS

Untuk streaming media adaptif, Google Cast memerlukan keberadaan header CORS, tetapi streaming media mp4 sederhana pun memerlukan CORS jika menyertakan Trek. Jika Anda ingin mengaktifkan Trek untuk media apa pun, Anda harus mengaktifkan CORS untuk kedua jalur tersebut streaming dan media Anda. Jadi, jika header CORS Anda belum tersedia untuk media mp4 sederhana di server, lalu tambahkan teks Anda tidak akan bisa streaming media kecuali Anda memperbarui server untuk menyertakan header CORS yang sesuai.

Anda memerlukan header berikut: Content-Type,Accept-Encoding, dan Range. Perhatikan bahwa dua header terakhir, Accept-Encoding dan Range, adalah tambahan {i>header<i} yang mungkin tidak Anda perlukan sebelumnya.

Karakter pengganti "*" tidak dapat digunakan untuk header Access-Control-Allow-Origin. Jika laman memiliki konten media yang dilindungi, laman harus menggunakan domain, bukan karakter pengganti.

Melanjutkan sesi tanpa memuat ulang halaman web

Untuk melanjutkan CastSession yang ada, gunakan requestSessionById(sessionId) dengan sessionId sesi yang Anda coba ikuti.

sessionId dapat ditemukan di CastSession yang aktif menggunakan getSessionId() setelah menelepon loadMedia()

Pendekatan yang direkomendasikan adalah:

  1. Telepon loadMedia() untuk memulai sesi
  2. Simpan sessionId secara lokal
  3. Bergabunglah kembali dalam sesi menggunakan requestSessionById(sessionId) saat diperlukan
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();
  }
});

Langkah berikutnya

Inilah fitur yang dapat Anda tambahkan ke aplikasi Web Sender. Sekarang Anda dapat membangun aplikasi pengirim untuk platform lain (Android atau iOS), atau membangun aplikasi penerima.

Sebelumnya
Integrasikan Cast