SDK Pemain IVS: Integrasi Video.js - Amazon IVS
MemulaiPeristiwaKesalahanPluginKebijakan Keamanan KontenFungsiWaktu saat inibuangdurasimendapatkan IVSEventsmendapatkan IVSPlayermuatpementasanPlaybackRatedicari

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.37.0 (Catatan Rilis)

Memulai

Dukungan Amazon IVS untuk Video.js diimplementasikan melalui teknologi 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*, dan 8*.

Perhatikan bahwa saat membuat instance pemutar, opsi sumber Video.js tidak didukung. Sebagai gantinya, buat instance player secara normal dan panggil fungsi Video.jssrc(). 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.

Pengaturan Dengan Tag Skrip

Untuk mengatur teknologi Amazon IVS menggunakan script tag:

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

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

  2. Daftarkan teknologi menggunakan registerIVSTech fungsi:

    registerIVSTech(videojs);

    dimana videojs adalah objek yang disediakan oleh Video.js.

  3. Saat membuat instance pemain, tambahkan AmazonIVS sebagai teknologi pertama Anda di techOrder opsi.

Saat membuat instance pemutar, opsi sumber 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.

<!doctype html>
<html lang="en">
<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.14.3/video-js.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.14.3/video.min.js"></script>
    <script src="https://player.live-video.net/1.37.0/amazon-ivs-videojs-tech.min.js"></script>
</head>

<body>
    <div class="video-container">
        <video id="amazon-ivs-videojs" class="video-js vjs-4-3 vjs-big-play-centered" controls autoplay playsinline></video>
    </div>
    <style>
        body {
            margin: 0;
        }

        .video-container {
            width: 640px;
            height: 480px;
            margin: 15px;
        }
    </style>
    <script>
        (function play() {
            // Get playback URL from Amazon IVS API
            var PLAYBACK_URL = '';
            
            // Register Amazon IVS as playback technology for Video.js
            registerIVSTech(videojs);

            // Initialize player
            var player = videojs('amazon-ivs-videojs', {
               techOrder: ["AmazonIVS"]
            }, () => {
               console.log('Player is ready to use!');
               // Play stream
               player.src(PLAYBACK_URL);
            });
        })();
    </script>
</body>
</html>

Pengaturan Dengan NPM

Untuk menggunakan pemutar Amazon IVS melalui npm:

  1. Instal paket npm video.js atau pastikan proyek Anda memiliki akses lain ke pustaka Video.js.

  2. Instal paket amazon-ivs-player npm:

    npm install amazon-ivs-player

  3. Saat Anda siap mendaftarkan teknologi Amazon IVS, impor registerIVSTech fungsinya:

    import { registerIVSTech } from 'amazon-ivs-player';

  4. Daftarkan teknologi menggunakan registerIVSTech fungsi:

    registerIVSTech(videojs, options);

    di mana:

    • videojsadalah objek yang disediakan oleh Video.js.

    • optionsadalah 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 bawahamazon-ivs-player/dist/. Anda perlu meng-host mereka, untuk menggunakan pemutar IVS.

  5. 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 darigetIVSEvents().

  • VideoJSIVSTech, yang menggambarkan antarmuka ke instance pemain yang menggunakan AmazonIVS teknologi. Ini dapat berpotongan dengan VideoJsPlayer tipe yang diekspos oleh paket @types /video.js npm.

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

Peristiwa

Untuk mendengarkan acara Video.js standar, gunakan fungsi on 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 atauPlayerState. Untuk informasi selengkapnya tentang peristiwa, lihat Amazon IVS Player SDK: Referensi 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.

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): 

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

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 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” diSDK IVS Player: Panduan Web.

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 <video> tag’s id

Kemudian Anda dapat memanggil fungsi pada contoh itu.

Berikut ini adalah bagian dari fungsi Video.js yang diganti oleh lapisan teknologi Amazon IVS. Untuk daftar lengkap fungsi Video.js, lihat dokumentasi video.js API.

Fungsi Deskripsi dan Informasi Khusus Amazon IVS

Waktu saat ini

Mendapat atau mengatur waktu (dalam hitungan detik dari awal).

Amazon IVS: Kami tidak menyarankan pengaturan waktu saat ini untuk streaming langsung.

buang

Menghapus instance pemain

Amazon IVS: Ini juga menghapus backend teknologi Amazon IVS.

durasi

Mengembalikan durasi video, dalam hitungan detik.

Amazon IVS: Untuk streaming langsung, ini kembali. Infinity

muat

Mulai memuat src() data.

Amazon IVS: Ini adalah no-op.

pementasan

Memutar aliran yang diatur melalui src panggilan.

Amazon IVS: Jika streaming langsung dijeda, ini memutar streaming langsung dari bingkai terbaru, alih-alih melanjutkan dari tempat itu dijeda.

PlaybackRate

Mendapat atau menetapkan tingkat pemutaran video. 1.0 berarti kecepatan normal; 0,5, setengah kecepatan normal; 2.0, dua kali kecepatan normal; dan seterusnya.

Amazon IVS: Pada streaming langsung, get mengembalikan 1, dan satu set diabaikan.

dicari

TimeRangesMengembalikan media yang dapat dicari.

Amazon IVS: Untuk streaming langsung, memanggil end(0) return value (TimeRange) mengembalikan Infinity.

Amazon IVS Spesifik

Teknologi Amazon IVS Video.js memiliki fungsi tambahan untuk mengakses perilaku khusus untuk fitur Amazon IVS:

Fungsi Deskripsi

mendapatkan IVSPlayer

Mengembalikan instance pemutar Amazon IVS yang mendasarinya. API Web Amazon IVS Player lengkap tersedia melalui instance ini. Sebaiknya gunakan API pemutaran Video.js dasar sebanyak mungkin, dan gunakan fungsi ini hanya untuk mengakses fitur khusus Amazon IVS. Fungsi paling umum yang mungkin perlu Anda akses di instans pemutar Amazon IVS adalah setQuality() danaddEventListener()/removeEventListener().

mendapatkan IVSEvents

Mengembalikan objek yang menyimpan enum khusus Amazon IVS. Ini digunakan untuk mendengarkan kesalahan khusus Amazon IVS. Untuk informasi selengkapnya, silakan lihat Peristiwa dan Kesalahan.

Waktu saat ini

Mendapat atau mengatur waktu (dalam hitungan detik dari awal).

Amazon IVS: Kami tidak menyarankan pengaturan waktu saat ini untuk streaming langsung.

Tanda tangan

currentTime
currentTime(time)

Parameter

Parameter Jenis Deskripsi

time

number

Jika tidak time ada, dapatkan waktu saat ini. Jika time ada, atur pemutaran video ke waktu itu.

Nilai yang Ditampilkan

Tipe Deskripsi

number

Waktu saat ini, dalam hitungan detik dari awal.

buang

Menghapus instance pemain.

Amazon IVS: Ini juga menghapus backend teknologi Amazon IVS.

Tanda tangan

dispose()

Parameter

Tidak ada

Nilai yang Ditampilkan

Tidak ada

durasi

Mengembalikan durasi video, dalam hitungan detik.

Amazon IVS: Untuk streaming langsung, ini kembali. Infinity

Tanda tangan

duration()

Parameter

Tidak ada

Nilai yang Ditampilkan

Tipe Deskripsi

number

Durasi aliran, dalam hitungan detik. Untuk streaming langsung, nilai ini adalahInfinity.

mendapatkan IVSEvents

Mengembalikan objek yang menyimpan enum khusus Amazon IVS. Ini digunakan untuk mendengarkan kesalahan dan peristiwa khusus Amazon IVS. Untuk informasi selengkapnya, lihat:

Tanda tangan

getIVSEvents()

Parameter

Tidak ada

Nilai yang Ditampilkan

Tipe Deskripsi

object

Objek denganPlayerEventType,PlayerState, dan ErrorType kunci, yang memetakan ke enum terkait.

mendapatkan IVSPlayer

Mengembalikan instance pemutar Amazon IVS yang mendasarinya. API Web Amazon IVS Player lengkap tersedia melalui instance ini. Sebaiknya gunakan API pemutaran Video.js dasar sebanyak mungkin, dan gunakan fungsi ini hanya untuk mengakses fitur khusus Amazon IVS. Fungsi paling umum yang mungkin perlu Anda akses di instans pemutar Amazon IVS adalah setQuality() danaddEventListener()/removeEventListener().

Tanda tangan

getIVSPlayer()

Parameter

Tidak ada

Nilai yang Ditampilkan

Tipe Deskripsi

MediaPlayer

Contoh yang dibuat dari pemain.

muat

Mulai memuat src() data.

Amazon IVS: Ini adalah no-op.

Tanda tangan

load()

Parameter

Tidak ada

Nilai yang Ditampilkan

Tidak ada

pementasan

Memutar aliran yang diatur melalui src panggilan.

Amazon IVS: Jika streaming langsung dijeda, ini memutar streaming langsung dari bingkai terbaru, alih-alih melanjutkan dari tempat itu dijeda.

Tanda tangan

play()

Parameter

Tidak ada

Nilai yang Ditampilkan

Tidak ada

PlaybackRate

Mendapat atau menetapkan tingkat pemutaran video. 1.0 berarti kecepatan normal; 0,5, setengah kecepatan normal; 2.0, dua kali kecepatan normal; dan seterusnya.

Amazon IVS: Pada streaming langsung, get mengembalikan 1, dan satu set diabaikan.

Tanda tangan

playbackRate
playbackRate(rate)

Parameter

Parameter Jenis Deskripsi

rate

number

Tingkat pemutaran. Nilai yang valid: dalam kisaran [0.25, 2.0].

Nilai yang Ditampilkan

Tipe Deskripsi

number

Tingkat pemutaran.

dicari

TimeRangesMengembalikan media yang dapat dicari.

Amazon IVS: Untuk streaming langsung, memanggil end(0) return value (TimeRange) mengembalikan Infinity.

Tanda tangan

seekable()

Parameter

Tidak ada

Nilai yang Ditampilkan

Tipe Deskripsi

TimeRange

TimeRange dari media yang tersedia untuk dicari.