Menambahkan Dukungan Ad Breaks API ke Penerima Web

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

1. Ringkasan

Logo Google Cast

Codelab ini akan mengajari Anda cara membuat aplikasi Penerima Web Kustom yang menggunakan Cast Ad Breaks API.

Apa itu Google Cast?

Google Cast memungkinkan pengguna mentransmisikan konten dari perangkat seluler ke TV. Pengguna kemudian dapat menggunakan perangkat seluler sebagai remote control untuk pemutaran media di TV.

Google Cast SDK memungkinkan Anda memperluas aplikasi untuk mengontrol TV atau sistem suara. SDK Cast memungkinkan Anda menambahkan komponen UI yang diperlukan berdasarkan Checklist Desain Google Cast.

Checklist Desain Google Cast disediakan untuk menyederhanakan pengalaman pengguna Cast dan membuatnya dapat diprediksi di semua platform yang didukung.

Apa yang akan kita buat?

Setelah menyelesaikan codelab ini, Anda akan membuat Penerima Cast yang memanfaatkan Break API baru.

Yang akan Anda pelajari

  • Cara menyertakan jeda VMAP dan VAST dalam konten untuk Cast
  • Cara melewati klip jeda
  • Cara menyesuaikan perilaku jeda default di pencarian

Yang akan Anda butuhkan

Pengalaman

  • Anda harus memiliki pengetahuan pengembangan web sebelumnya.
  • Pengalaman sebelumnya membuat aplikasi pengirim & amp; penerima Cast.

Bagaimana Anda akan menggunakan tutorial ini?

Hanya membacanya Membacanya dan menyelesaikan latihan

Bagaimana Anda menilai pengalaman membuat aplikasi web?

Pemula Menengah Fasih

2. Mendapatkan kode contoh

Anda dapat mendownload semua kode contoh ke komputer Anda...

dan mengekstrak file zip yang didownload.

3. Men-deploy penerima secara lokal

Agar dapat menggunakan penerima web dengan perangkat Cast, perangkat harus dihosting di suatu tempat yang dapat dijangkau oleh perangkat Cast. Jika Anda sudah memiliki server yang mendukung https, lewati petunjuk berikut dan catat URL karena Anda akan memerlukannya di bagian berikutnya.

Jika tidak memiliki server yang tersedia untuk digunakan, Anda dapat menggunakan Firebase Hosting atau ngrok.

Menjalankan server

Setelah layanan pilihan Anda disiapkan, buka app-start dan mulai server Anda.

Catat URL untuk penerima yang dihosting. Anda akan menggunakannya di bagian berikutnya.

4. Mendaftarkan aplikasi di Konsol Developer Cast

Anda harus mendaftarkan aplikasi agar dapat menjalankan penerima khusus, seperti yang dibuat dalam codelab ini, di perangkat Chromecast. Setelah mendaftarkan aplikasi, Anda akan menerima ID aplikasi yang harus digunakan aplikasi pengirim untuk melakukan panggilan API, seperti meluncurkan aplikasi penerima.

Gambar Konsol Developer Google Cast SDK dengan tombol 'Tambahkan Aplikasi Baru' yang ditandai

Klik "Tambahkan aplikasi baru"

Gambar layar 'Aplikasi Penerima Baru' dengan opsi 'Penerima Kustom' ditandai

Pilih "Custom Receiver", ini yang sedang kita buat.

Gambar layar 'Penerima Kustom Baru' yang menampilkan URL yang diketik seseorang di kolom 'URL Aplikasi Penerima'

Masukkan detail penerima baru, pastikan untuk menggunakan URL yang Anda gunakan

di bagian terakhir. Catat ID Aplikasi yang ditetapkan untuk penerima baru Anda.

Anda juga harus mendaftarkan perangkat Google Cast agar dapat mengakses aplikasi penerima sebelum memublikasikannya. Setelah Anda memublikasikan aplikasi penerima, aplikasi tersebut akan tersedia untuk semua perangkat Google Cast. Untuk tujuan codelab ini, sebaiknya Anda menggunakan aplikasi penerima yang tidak dipublikasikan.

Gambar Konsol Developer Google Cast SDK dengan tombol 'Tambahkan Perangkat Baru' ditandai

Klik "Tambahkan Perangkat baru"

Gambar dialog 'Tambahkan Perangkat Penerima Cast'

Masukkan nomor seri yang dicetak di bagian belakang perangkat Cast dan beri nama deskriptif. Anda juga dapat menemukan nomor seri dengan mentransmisikan layar di Chrome saat mengakses Konsol Developer SDK Google Cast

Butuh waktu 5-15 menit bagi penerima dan perangkat untuk siap melakukan pengujian. Setelah menunggu 5-15 menit, Anda harus memulai ulang perangkat Cast.

5. Menyiapkan Project Awal

Sebelum memulai codelab ini, sebaiknya tinjau panduan developer iklan yang memberikan ringkasan fungsi iklan baru.

Kita perlu menambahkan dukungan untuk Google Cast ke aplikasi awal yang Anda download. Berikut adalah beberapa terminologi Google Cast yang akan kita gunakan dalam codelab ini:

  • aplikasi pengirim berjalan di perangkat seluler atau laptop,
  • aplikasi penerima berjalan di perangkat Google Cast.

Sekarang Anda siap mem-build berdasarkan project awal menggunakan editor teks favorit Anda:

  1. Pilih direktori ikon folderapp-start dari download kode contoh.
  2. Buka js/receiver.js dan index.html

Perlu diperhatikan bahwa saat Anda mengerjakan codelab ini, http-server akan mengambil perubahan yang Anda buat. Jika tidak, coba hentikan dan mulai ulang http-server.

Untuk pengirim, kami akan menggunakan Juga Melakukan Debug Penerima Penerima CAF untuk memulai sesi Transmisi. Penerima dirancang untuk mulai memutar streaming secara otomatis.

Desain Aplikasi

Aplikasi penerima melakukan inisialisasi sesi Cast dan akan menunggu hingga permintaan LOAD (yaitu perintah untuk memutar media) dari pengirim tiba.

Aplikasi ini terdiri dari satu tampilan utama, yang ditentukan dalam index.html dan satu file JavaScript yang disebut js/receiver.js yang berisi semua logika untuk membuat penerima kita berfungsi.

index.html

File html ini akan berisi semua UI untuk aplikasi penerima. Untuk saat ini, file ini pada dasarnya kosong.

penerima.js

Skrip ini akan mengelola semua logika untuk aplikasi penerima. Saat ini, skrip ini berisi penerima CAF dasar.

6. Menambahkan VMAP ke Konten Anda

Untuk memulai, buka pengirim web di Chrome. Masukkan ID Aplikasi Penerima yang tersedia di Cast SDK Developer Console, lalu klik 'Setel''.

Pada penerima, kita perlu menambahkan beberapa logika untuk menyertakan iklan dalam konten.

Salin baris berikut ke dalam file js/receiver.js Anda. Halaman ini berisi contoh link tag VMAP dari DoubleClick dan beberapa pengacakan.

const vmapUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=" + Math.floor(Math.random() * Math.pow(10, 10));

Di js/receiver.js file, cari fungsi playerManager.setMessageInterceptor dan tambahkan hal berikut sebelum baris return request; terakhir di fungsi.

request.media.vmapAdsRequest = {
    adTagUrl: vmapUrl,
};

Catatan: Objek yang ditetapkan ke vmapAdsRequest di atas adalah versi singkat dari objek VastAdsRequest.

Simpan perubahan pada js/receiver.js dan mulai sesi Transmisi di pengirim web dengan mengklik kanan di mana saja pada halaman dan memilih 'Transmisikan'. Streaming iklan akan segera mulai diputar.

7. Menambahkan VAST ke Konten

Jika Anda telah menerapkan kode VMAP dari atas, beri komentar. Berikut ini kita akan membahas cara menerapkan iklan VAST di konten.

Salin kode berikut ke dalam file js/receiver.js Anda. Format ini berisi enam klip jeda VAST dari DoubleClick dan beberapa pengacakan. Klip jeda ini ditetapkan ke 5 jeda. Selain itu, posisi setiap jeda ditentukan.

const addVASTBreaksToMedia = (mediaInformation) => {
    mediaInformation.breakClips = [
        {
            id: "bc1",
            title: "bc1 (Pre-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&vad_type=linear&vpos=preroll&pod=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc2",
            title: "bc2 (Mid-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc3",
            title: "bc3 (Mid-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc4",
            title: "bc4 (Mid-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc5",
            title: "bc5 (Mid-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        },
        {
            id: "bc6",
            title: "bc6 (Post-roll)",
            vastAdsRequest: {
                adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&vad_type=linear&vpos=postroll&pod=3&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
            }
        }
    ];
    mediaInformation.breaks = [
        {
            id: "b1",
            breakClipIds: ["bc1"],
            position: 0
        },
        {
            id: "b2",
            breakClipIds: ["bc2"],
            position: 15
        },
        {
            id: "b3",
            breakClipIds: ["bc3","bc4"],
            position: 60
        },
        {
            id: "b4",
            breakClipIds: ["bc5"],
            position: 100
        },
        {
            id: "b5",
            breakClipIds: ["bc6"],
            position: -1
        }
    ];
};

Catatan: Properti breakClipIds dari jeda adalah array. Artinya, beberapa klip jeda dapat ditetapkan ke setiap jeda.

Di js/receiver.js file, temukan intersep pesan LOAD, dengan kata lain, baris yang dimulai dengan playerManager.setMessageInterceptor, dan tambahkan kode berikut sebelum baris return request; terakhir di fungsi.

addVASTBreaksToMedia(request.media);

Simpan perubahan pada js/receiver.js dan mulai sesi Transmisi di pengirim web dengan mengklik kanan di mana saja pada halaman dan memilih 'Transmisikan'. Streaming iklan akan segera mulai diputar.

8. Melewati Jeda Iklan

CAF memiliki kelas baru yang disebut BreakManager yang membantu Anda menerapkan aturan bisnis kustom untuk perilaku iklan. Anggaplah Anda ingin mengaktifkan masa tenggang untuk melewati iklan setelah jangka waktu tertentu.

Pengirim dalam contoh kami tidak memiliki kontrol media. Mari kita tambahkan offset awal 10 detik agar streaming memulai pemutaran setelah pre-roll, tetapi sebelum Jeda mid-roll pertama muncul pada 15 detik.

Temukan playerManager.setMessageInterceptor dan tambahkan baris berikut sebelum return request.

request.currentTime = 10;

Simpan file receiver.js dan mulai sesi Transmisi. Anda akan melihat konten dimuat selama 10 detik, lalu memutar iklan 5 detik kemudian.

Sekarang, mari kita tambahkan aturan untuk melewati mid-roll pada detik ke-15.

Anda memerlukan instance BreakManager untuk menetapkan intersepsi untuk pemuatan jeda. Salin baris berikut ke dalam file js/receiver.js Anda, setelah baris yang berisi variabel context dan playerManager.

const breakManager = playerManager.getBreakManager();

Sekarang, mari kita siapkan intersep dengan aturan untuk mengabaikan jeda iklan yang terjadi sebelum 30 detik. Pencegat ini berfungsi seperti interseptor LOAD di PlayerManager, kecuali interseptor ini khusus untuk memuat BreakClips.

Salin kode berikut ke dalam file js/receiver.js Anda.

breakManager.setBreakClipLoadInterceptor((breakClip, breakCtx) => {
  /** Below code will skip playback of break clips if the break position is less than 30 **/
  let breakObj = breakCtx.break;
  if(breakObj.position < 30)
    return null;
  else
    return breakClip;
});

Catatan: Kami menampilkan null di sini untuk BreakClip yang harus dilewati.

Simpan perubahan pada js/receiver.js dan mulai sesi Transmisi di pengirim web dengan mengklik kanan di mana saja pada halaman dan memilih 'Transmisikan'.

Streaming seharusnya dimulai, tetapi pemblokiran iklan yang sebelumnya kita lihat pada 15 detik akan dilewati.

9. Menyesuaikan Perilaku Mencari Jeda

Jika pengguna mencari maju, jeda terakhir yang belum diputar antara seekFrom dan seekTo diputar sebelum pemutaran konten mulai diputar dari posisi seekTo. Saat pengguna mencari kembali, tidak ada jeda yang diputar. Ini adalah perilaku jeda default.

Untuk menyesuaikan jeda yang ada dalam pencarian, kami memanfaatkan BreakManager. Kita menggunakan setBreakSeekInterceptor dari BreakManager untuk menentukan perilaku kustom yang kita inginkan. setBreakSeekInterceptor dipanggil setiap kali operasi pencarian dilakukan.

Kita meneruskan fungsi callback ke setBreakSeekInterceptor. Fungsi callback mendapatkan objek yang berisi semua jeda antara posisi seekFrom dan posisi seekTo.

Sekarang, mari siapkan intersep dengan aturan untuk memutar jeda yang belum ditonton antara posisi seekFrom dan posisi seekTo.

Salin kode berikut ke dalam file js/receiver.js Anda.

breakManager.setBreakSeekInterceptor(function(breakSeekData) {
     /**
     *
     * Below code will play an unwatched break between seekFrom and seekTo position
     * Note: If the position of a break is less than 30 then it will be skipped due to the setBreakClipLoadInterceptor code
     */

    let breakToPlay;
    for (let i = 0; i < breakSeekData.breaks.length; i++) {
        if (!breakSeekData.breaks[i].isWatched) {
            breakToPlay = breakSeekData.breaks[i];
        }
    }
    if (breakToPlay){
        breakSeekData.breaks = [breakToPlay];
        return breakSeekData;
    }
});

Catatan: Jika kita tidak menampilkan apa pun/null, tidak akan ada jeda yang diputar. Jika kita mengembalikan breakSeekData sebagaimana adanya, semua jeda antara seekFrom hingga seekTo akan diputar.

Simpan perubahan pada js/receiver.js dan mulai sesi Transmisi di pengirim web dengan mengklik kanan di mana saja pada halaman dan memilih 'Transmisikan'. Streaming iklan akan segera mulai diputar.

10. Selamat

Kini Anda telah mengetahui cara menambahkan iklan ke aplikasi penerima menggunakan SDK Penerima Cast terbaru.

Untuk mengetahui detail selengkapnya, lihat panduan developer Jeda Iklan.