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
<a name="web-getting-started"></a>

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
<a name="web-demo"></a>

Demo langsung berikut menunjukkan cara menggunakan pemutar Web dengan `script` tag dari Jaringan Pengiriman Konten kami: [Sampel Amazon IVS Player](https://codepen.io/amazon-ivs/pen/QWbzORP/c3b13a2df34b60ada7756f3a2af8d2f0). Demo termasuk menyiapkan pendengar acara.

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

## Pengaturan Dengan Tag Skrip
<a name="web-setup-script-tag"></a>

Untuk mengatur pemutar Amazon IVS menggunakan `script` tag:

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

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

1. 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.

1. 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
<a name="web-sample-code"></a>

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

```
<script src="https://player.live-video.net/1.50.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/](https://webkit.org/blog/6784/new-video-policies-for-ios/).

## Pengaturan Dengan NPM
<a name="web-setup-npm"></a>

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

**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
<a name="web-typescript"></a>

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](https://aws.github.io/amazon-ivs-player-docs/1.50.0/web/).

## Menyiapkan Pekerja Layanan
<a name="web-service-worker"></a>

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](player.md#player-reducing-latency).

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.50.0/amazon-ivs-service-worker.min.js');
   ```

1. 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'
      }
   });
   ```

1. Pada elemen video, atur `crossOrigin` atribut ke`anonymous`. 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](https://github.com/aws-samples/amazon-ivs-player-web-sample)

## Pemutaran Hanya Audio
<a name="web-audio-only-playback"></a>

Kualitas audio saja harus dipilih secara manual dengan metode ini`setQuality()`. Perhatikan bahwa pemain tidak mendukung `true` nilai untuk argumen kedua`adaptive`, jadi secara default, argumen ini adalah`false`.

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
<a name="web-optimize-background-playback"></a>

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\$1only 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
   }
});
```