Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris. # SDK Pemain IVS: Integrasi Video.js Dokumen ini menjelaskan fungsi terpenting yang tersedia di pemutar Video.js Amazon Interactive Video Service (IVS). **Versi terbaru dari integrasi pemain Video.js:** 1.51.0 ([Catatan Rilis](https://docs.aws.amazon.com/ivs/latest/LowLatencyUserGuide/release-notes.html#apr16-26-player-web-ll)) ## Memulai Dukungan Amazon IVS untuk Video.js diimplementasikan melalui [teknologi](https://videojs.com/guides/tech/) Video.js. Kami memberikan dukungan melalui tag skrip serta melalui modul npm. Amazon IVS mendukung Video.js versi 7.6.6 dan yang lebih baru 7\$1, dan 8\$1. Perhatikan bahwa saat membuat instance pemutar, [opsi sumber](https://videojs.com/guides/options/#sources) Video.js tidak didukung. Sebagai gantinya, buat instance player secara normal dan panggil fungsi Video.js`src()`. Jika putar otomatis diaktifkan, aliran akan mulai diputar; jika tidak, gunakan `play()` untuk memulai pemutaran. ### Demo Demo langsung berikut menunjukkan cara menggunakan integrasi Video.js dengan tag skrip dari Jaringan Pengiriman Konten kami: [integrasi Amazon IVS Player Video.js](https://codepen.io/amazon-ivs/pen/NWqewZo/bdc01e977102051eae5fb85482f88276). ### Pengaturan Dengan Tag Skrip Untuk mengatur teknologi Amazon IVS menggunakan `script` tag: 1. Sertakan tag berikut (untuk versi terbaru dari integrasi pemain). ``` ``` 1. Daftarkan teknologi menggunakan `registerIVSTech` fungsi: ``` registerIVSTech(videojs); ``` dimana `videojs` adalah objek yang disediakan oleh Video.js. 1. Saat membuat instance pemain, tambahkan `AmazonIVS` sebagai teknologi pertama Anda di `techOrder` opsi. Saat membuat instance pemutar, [opsi sumber](https://videojs.com/guides/options/#sources) Video.js tidak didukung. Sebagai gantinya, untuk mengatur sumber, buat instance pemutar secara normal, lalu panggil `src()` fungsi Video.js di atasnya. Jika putar otomatis diaktifkan, aliran akan mulai diputar; jika tidak, gunakan `play()` untuk memulai pemutaran. ### Kode Sampel Dalam contoh ini, `PLAYBACK_URL` adalah aliran sumber yang ingin Anda muat. Contoh menggunakan versi terbaru dari Amazon IVS Player. ```

``` ### Pengaturan Dengan NPM Untuk menggunakan pemutar Amazon IVS melalui npm: 1. Instal paket npm [video.js](https://www.npmjs.com/package/video.js/v/7.6.6) atau pastikan proyek Anda memiliki akses lain ke pustaka Video.js. 1. Instal paket `amazon-ivs-player` npm: ``` npm install amazon-ivs-player ``` 1. Saat Anda siap mendaftarkan teknologi Amazon IVS, impor `registerIVSTech` fungsinya: ``` import { registerIVSTech } from 'amazon-ivs-player'; ``` 1. Daftarkan teknologi menggunakan `registerIVSTech` fungsi: ``` registerIVSTech(videojs, options); ``` di mana: + `videojs`adalah objek yang disediakan oleh Video.js. + `options`adalah opsi untuk lapisan teknologi Amazon IVS. Opsi yang didukung adalah:. + `wasmWorker`: URL tempat `amazon-ivs-wasmworker.min.js` file di-host. + `wasmBinary`: URL tempat `amazon-ivs-wasmworker.min.wasm` file di-host. File pekerja ada di `node_modules/` folder Anda di bawah`amazon-ivs-player/dist/`. Anda perlu meng-host mereka, untuk menggunakan pemutar IVS. 1. Saat membuat instance pemain, tambahkan `AmazonIVS` sebagai teknologi pertama Anda di `techOrder` opsi: ``` const player = videojs('videojs-player', { techOrder: ["AmazonIVS"] }); ``` ### TypeScript Jika Anda menggunakan TypeScript, paket npm kami mencakup jenis berikut yang mungkin ingin Anda impor dan gunakan. + `VideoJSEvents`, yang menggambarkan struktur yang dikembalikan dari`getIVSEvents()`. + `VideoJSIVSTech`, yang menggambarkan antarmuka ke instance pemain yang menggunakan `AmazonIVS` teknologi. Ini dapat [berpotongan dengan `VideoJsPlayer` tipe yang diekspos](https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types) oleh paket [@types /video.js npm](https://www.npmjs.com/package/@types/video.js). + `TechOptions`, yang menjelaskan antarmuka yang menentukan opsi konfigurasi yang dapat Anda kirim. `registerIVSTech()` Untuk informasi selengkapnya tentang jenis ini, lihat [Amazon IVS Player SDK: Referensi Web](https://aws.github.io/amazon-ivs-player-docs/1.51.0/web/). ## Peristiwa Untuk mendengarkan acara Video.js standar, gunakan fungsi [on](https://docs.videojs.com/docs/api/player.html#Methodson) dari pemutar Video.js. Untuk mendengarkan acara yang khusus untuk Amazon IVS, tambahkan dan hapus pendengar acara di pemutar Web Amazon IVS: ``` player.getIVSPlayer().addEventListener(event, callback); player.getIVSPlayer().removeEventListener(event, callback); ``` di `callback` mana panggilan balik yang Anda tentukan, dan `event` merupakan salah satu dari: `PlayerEventType` atau`PlayerState`. Untuk informasi selengkapnya tentang peristiwa, lihat [Amazon IVS Player SDK: Referensi Web](https://aws.github.io/amazon-ivs-player-docs/1.51.0/web/). ## Kesalahan Untuk kesalahan Video.js umum, dengarkan `error` acara generik pada pemain: ``` player.on("error", callback); ``` Untuk kesalahan khusus untuk Amazon IVS, dengarkan di pemutar Amazon IVS untuk kesalahannya sendiri: ``` let playerEvent = player.getIVSEvents().PlayerEventType; player.getIVSPlayer().addEventListener(playerEvent.ERROR, callback); ``` Callback akan menerima objek dengan bidang berikut: | Bidang | Deskripsi | | --- | --- | | `type` | Jenis kesalahan. Sesuai dengan `ErrorType` acara. Untuk informasi selengkapnya, lihat [Amazon IVS Player SDK: Referensi Web](https://aws.github.io/amazon-ivs-player-docs/1.51.0/web/). | | `code` | Kode kesalahan. | | `source` | Sumber kesalahan. | | `message` | Pesan kesalahan yang dapat dibaca manusia. | ## Plugin Kami menyediakan plugin yang membuat sakelar UI untuk kualitas yang tersedia. Untuk menggunakan plugin ini, plugin harus dimuat dengan menyertakan `amazon-ivs-quality-plugin.min.js` file jika Anda menggunakan teknologi kami melalui `script` tag berikut (untuk versi terbaru dari IVS Player): ``` ``` Jika Anda menggunakan npm, impor `registerIVSQualityPlugin` dari `amazon-ivs-player` modul: ``` import { registerIVSQualityPlugin } from 'amazon-ivs-player'; ``` Kemudian, setelah Anda membuat instance pemutar Video.js Anda, panggilan berikut diperlukan untuk mendaftar dan mengaktifkannya: ``` registerIVSQualityPlugin(videojs); // where videojs is the video.js variable player.enableIVSQualityPlugin(); // where player is the instance of the videojs player ``` Ini akan membuat tombol menu UI yang memungkinkan Anda memilih kualitas untuk streaming. ### Plugin dan TypeScript Jika Anda menggunakan TypeScript, paket npm kami mencakup `VideoJSQualityPlugin` jenis yang mungkin ingin Anda impor dan gunakan dengan plugin kami. Plugin pada dasarnya adalah mixin, jadi antarmuka tipe ini akan digunakan sebagai [tipe persimpangan](https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types) dengan antarmuka TypeScript. `VideoJSIVSTech` ## Kebijakan Keamanan Konten Amazon IVS Video.js API dikonfigurasi untuk bekerja pada halaman yang menggunakan Kebijakan Keamanan Konten (CSP). Lihat bagian “Bekerja dengan Kebijakan Keamanan Konten” di[SDK IVS Player: Panduan Web](web-content-security-policy.md). ## Fungsi ### Pemutaran Amazon IVS Video.js API mendukung antarmuka yang diperlukan untuk penggunaan internal oleh framework Video.js. Aplikasi klien tidak mungkin perlu menggunakan metode ini secara langsung, karena Video.js melakukan integrasi yang diperlukan dan menyajikan antarmuka standar. Namun, jika diperlukan, salah satu cara untuk mengakses metode pemutar Video.js dan Amazon IVS internal adalah dengan menggunakan objek pemutar Video.js untuk mendapatkan pegangan objek yang diperlukan ke teknologi. Untuk mengakses API, ambil instance pemutar Video.js Anda seperti biasanya: ``` let player = videojs("videoTagId"); //replace videoTagId with your