Memulai dengan Pemutar IVS Web SDK - Amazon IVS
DemoPengaturan Dengan Tag SkripKode SampelSetup Dengan NPMTypeScriptMengatur Pekerja LayananPemutaran Hanya Audio

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

Memulai dengan Pemutar IVS Web SDK

Dokumen ini membawa Anda melalui langkah-langkah yang terlibat dalam memulai dengan pemutar IVS Web AmazonSDK.

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 IVS pemutar Amazon menggunakan script tag:

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

    <script src="https://player.live-video.net/1.35.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 IVS pemain:

    if (IVSPlayer.isPlayerSupported) { ... }

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

    const player = IVSPlayer.create();

    Pemutar IVS Web Amazon 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 yang URL dikembalikan dari Amazon IVS API saat kunci aliran diminta.

Kode Sampel

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

<script src="https://player.live-video.net/1.35.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/.

Setup 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 PlayerSDK: Referensi Web.

Mengatur 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 IVS pemutar Amazon agar menggunakan service worker:

  1. Buat file untuk memuat IVS service worker dari fileCDN. 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.35.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.