Memulai dengan SDK Pemutar Web IVS - Amazon IVS
DemoPengaturan Dengan Tag SkripKode SampelPengaturan Dengan NPMTypeScriptMenyiapkan Pekerja LayananPemutaran Hanya AudioMengoptimalkan Pemutaran Latar Belakang

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Memulai dengan SDK Pemutar Web IVS

Dokumen ini membawa Anda melalui langkah-langkah yang terlibat dalam memulai dengan Amazon IVS Web player SDK.

Kami memberikan dukungan melalui script tag serta melalui modul npm.

Demo

Demo langsung berikut menunjukkan cara menggunakan pemutar Web dengan script tag dari Jaringan Pengiriman Konten kami: Sampel Amazon IVS Player. Demo termasuk menyiapkan pendengar acara.

Lihat juga https://github.com/aws-samples/amazon-ivs-player-web-sample untuk pilihan demo pemutar Web tambahan.

Pengaturan Dengan Tag Skrip

Untuk mengatur pemutar Amazon IVS menggunakan script tag:

  1. Sertakan tag berikut (untuk versi terbaru pemain).

    <script src="https://player.live-video.net/1.47.0/amazon-ivs-player.min.js"></script>

  2. Setelah amazon-ivs-player.min.js dimuat, ia menambahkan IVSPlayer variabel ke konteks global. Ini adalah perpustakaan yang akan Anda gunakan untuk membuat instance pemain. Pertama, periksa isPlayerSupported untuk menentukan apakah browser mendukung pemutar IVS:

    if (IVSPlayer.isPlayerSupported) { ... }

    Kemudian, untuk membuat instance pemain, panggil create fungsi pada IVSPlayer objek.

    const player = IVSPlayer.create();

    Amazon IVS Web player SDK menggunakan pekerja web untuk mengoptimalkan pemutaran video.

  3. Muat dan mainkan aliran menggunakan play fungsi load dan pada instance pemain:

    player.load("PLAYBACK_URL");
player.play();

    di PLAYBACK_URL mana URL dikembalikan dari Amazon IVS API saat kunci aliran diminta.

Kode Sampel

Dalam contoh ini, ganti PLAYBACK_URL dengan URL aliran sumber yang ingin Anda muat. Contoh menggunakan versi terbaru dari pemutar Amazon IVS.

<script src="https://player.live-video.net/1.47.0/amazon-ivs-player.min.js"></script>
<video id="video-player" playsinline></video>
<script>
  if (IVSPlayer.isPlayerSupported) {
    const player = IVSPlayer.create();
    player.attachHTMLVideoElement(document.getElementById('video-player'));
    player.load("PLAYBACK_URL");
    player.play();
  }
</script>

Di <video> tag, playsinline diperlukan untuk pemutaran inline di iOS Safari. Lihat https://webkit. org/blog/6784/new-video-policies-for-ios/.

Pengaturan Dengan NPM

Untuk panduan, termasuk contoh file konfigurasi Webpack, lihat repositori berikut: -sample. https://github.com/aws-samples/ amazon-ivs-player-web

Catatan: Saat menghosting aset statis pemain dari domain Anda sendiri, Anda harus menyetel header respons “Content-Type” untuk WebAssembly binary (amazon-ivs-wasmworker.min.wasm) ke “application/wasm.” Anda juga harus gzip aset Anda untuk mengurangi byte yang diunduh melalui kabel dan meningkatkan waktu pemain untuk memulai pemutaran.

TypeScript

Jika Anda menggunakan TypeScript, paket npm menyertakan jenis yang mungkin ingin Anda impor dan gunakan. Untuk informasi tentang jenis ini, lihat Amazon IVS Player SDK: Referensi Web.

Menyiapkan Pekerja Layanan

Untuk menurunkan latensi lebih lanjut saat bermain melalui browser yang hanya mendukung pemutaran asli (terutama iOS Safari), pekerja layanan dapat diatur dan dikonfigurasi. Untuk konteks selengkapnya, lihat Mengurangi Latensi di Pemain Pihak Ketiga.

Untuk mengatur pemutar Amazon IVS agar menggunakan service worker:

  1. Buat file untuk memuat pekerja layanan IVS dari CDN. Ini diperlukan karena pekerja layanan harus di-host pada domain yang sama dengan halaman yang menarik mereka masuk.

    Buat file bernama amazon-ivs-service-worker-loader.js atau serupa dan tambahkan baris berikut:

    importScripts('https://player.live-video.net/1.47.0/amazon-ivs-service-worker.min.js');

  2. Saat membuat instance pemain, teruskan serviceWorker konfigurasi berikut yang mereferensikan amazon-ivs-service-worker-loader.js file:

    const player = IVSPlayerPackage.create({
   serviceWorker: {
      url: 'amazon-ivs-service-worker-loader.js'
   }
});

  3. Pada elemen video, atur crossOrigin atribut keanonymous. Ini diperlukan untuk memungkinkan pekerja layanan membuat perubahan pada manifes.

Catatan: Untuk menguji service worker secara lokal, halaman harus dilayani dari localhost atau https.

Untuk demo langsung, lihat contoh service worker di repositori berikut:

https://github.com/aws-samples/amazon-ivs-player-web-sampel

Pemutaran Hanya Audio

Kualitas audio saja harus dipilih secara manual dengan metode inisetQuality(). Perhatikan bahwa pemain tidak mendukung true nilai untuk argumen keduaadaptive, jadi secara default, argumen ini adalahfalse.

Untuk mengatur kualitas ke audio saja sebelum pemutaran dimulai, panggil setQuality() di dalam acara: READY

player.addEventListener(PlayerState.READY, () => {
   const qualities = player.getQualities();
   const audioOnly = qualities.find(q => q.name === 'audio_only');
   if (audioOnly) {
      player.setQuality(audioOnly);
   }
});

Mengatur kualitas dalam READY berfungsi untuk mode putar otomatis dan non-putar otomatis.

Mengoptimalkan Pemutaran Latar Belakang

Dimulai dengan SDK versi 1.45.0, klien dapat dikonfigurasi untuk mengoptimalkan penggunaan data saat bermain di tab latar belakang. Ketika fitur ini diaktifkan, maka setelah durasi yang ditentukan, pemain memilih kualitas video SD tertinggi yang tersedia, dengan maksimum 480p. Pemain selalu memilih video; audio_only tidak dipilih. Ini berlaku untuk mode manual dan otomatis. Ketika tab berada di latar depan, pemain secara otomatis beralih kembali ke pengaturan sebelumnya.

Untuk mengaktifkan fitur ini:

const player = IVSPlayer.create({
   optimizeBackgroundPlayback: {
      enabled: true,
      switchDelayMs: 60 * 1000,   // Optional, defaults to 60s
   }
});