View a markdown version of this page

IVS Player SDK: Integrasi Video.js - Amazon IVS
MemulaiPeristiwaKesalahanPluginKebijakan Keamanan KontenFungsiWaktu saat inibuangdurasiGetivEventsGetivsPlayermuatpementasanPlaybackRatedicari

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

IVS Player SDK: Integrasi Video.js

Dokumen ini menjelaskan fungsi terpenting yang tersedia di pemutar Amazon Interactive Video Service (IVS) Video.js .

Versi terbaru integrasi Video.js pemain: 1.55.0 (Catatan R ilis)

Memulai

Dukungan Amazon IVS untuk Video.js diimplementasikan melalui Video.js teknologi. 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 Video.js sumber tidak didukung. Sebagai gantinya, buat instance pemain secara normal dan panggil fungsinya. Video.js src() Jika autoplay diaktifkan, streaming akan mulai diputar; jika tidak, gunakan play() untuk memulai pemutaran.

Demo

Demo langsung berikut menunjukkan cara menggunakan Video.js integrasi dengan tag skrip dari Jaringan Pengiriman Konten kami: Video.js integrasi https://codepen.io/amazon-ivs/pen/NWqewZo/bdc01e977102051eae5fb85482f88276 Amazon IVS Player.

Pengaturan Dengan Tag Script

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.55.0/amazon-ivs-videojs-tech.min.js"></script>

  2. Daftarkan teknologi menggunakan registerIVSTech fungsi:

    registerIVSTech(videojs);

    Dim videojs ana objek yang disediakan oleh Video.js.

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

Saat membuat instance pemain, opsi Video.js sumber tidak didukung. Sebagai gantinya, untuk mengatur sumber, buat instance pemutar secara normal, lalu panggil Video.js src() fungsi di atasnya. Jika autoplay diaktifkan, streaming 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 ini 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.55.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 bahwa proyek Anda memiliki beberapa akses lain ke per Video.js pustakaan.

  2. Instal paket amazon-ivs-player npm:

    npm install amazon-ivs-player

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

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

      • wasmBinary: URL tempat amazon-ivs-wasmworker.min.wasm file dihosting.

      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 menjelaskan antarmuka ke instance pemain yang menggunakan AmazonIVS teknologi. Ini dapat ber potongan dengan VideoJsPlayer tipe yang di ekspos oleh paket npm @ types/video .js.

  • TechOptions, yang menjelaskan antarmuka yang menentukan opsi konfigurasi yang dapat Anda kirimregisterIVSTech().

Untuk informasi selengkapnya tentang jenis ini, lihat Amazon IVS Player SDK: Refer ensi Web.

Peristiwa

Untuk mendengarkan Video.js acara standar, gunakan fungsi on dari Video.js pemain.

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

callbackdimana callback yang Anda tentukan, dan event merupakan salah satu dari: PlayerEventType atauPlayerState. Untuk informasi selengkapnya tentang acara, lihat Amazon IVS Player SDK: Refer ensi Web.

Kesalahan

Untuk Video.js kesalahan umum, dengarkan error acara generik pada pemain:

player.on("error", callback);

Untuk kesalahan khusus untuk Amazon IVS, dengarkan pemutar Amazon IVS untuk kesalahannya sendiri:

let playerEvent = player.getIVSEvents().PlayerEventType;
player.getIVSPlayer().addEventListener(playerEvent.ERROR, callback);

Panggilan balik akan menerima objek dengan bidang berikut:

Bidang Deskripsi

type

Jenis kesalahan. Sesuai dengan ErrorType peristiwa. Untuk informasi selengkapnya, lihat Amazon IVS Player SDK: Refer ensi 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, itu harus dimuat dengan memasukkan amazon-ivs-quality-plugin.min.js file jika Anda menggunakan teknologi kami melalui script tag berikut (untuk versi terbaru IVS Player): 

<script src="https://player.live-video.net/1.55.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 Video.js pemain 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 menyertakan 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 VideoJSIVSTech TypeScript.

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” diIVS Player SDK: Panduan Web.

Fungsi

Pemutaran

Amazon IVS Video.js API mendukung antarmuka yang diperlukan untuk penggunaan internal oleh Video.js kerangka kerja. 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 internal Video.js dan Amazon IVS adalah dengan menggunakan objek Video.js pemain untuk mendapatkan penanganan objek yang diperlukan ke teknologi.

Untuk mengakses API, ambil instance Video.js pemain Anda seperti biasanya:

let player = videojs("videoTagId"); //replace videoTagId with your <video> tag’s id

Kemudian Anda dapat memanggil fungsi pada instance itu.

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

Fungsi Deskripsi dan IVS-Specific Informasi Amazon

Waktu saat ini

Mendapat atau mengatur waktu (dalam detik dari awal).

Amazon IVS: Kami tidak merekomendasikan 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 kembaliInfinity.

muat

Mulai memuat src() data.

Amazon IVS: Ini adalah no-op.

pementasan

Memutar streaming yang telah diatur melalui src panggilan.

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

PlaybackRate

Mendapat atau mengatur kecepatan 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

Meng TimeRanges embalikan media yang dapat dicari.

Amazon IVS: Untuk streaming langsung, memanggil nilai pengem end(0) balian (TimeRange) mengembalikan Infinity.

Khusus Amazon IVS

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

Fungsi Deskripsi

GetivsPlayer

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

GetivEvents

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

Waktu saat ini

Mendapat atau mengatur waktu (dalam detik dari awal).

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

Tanda tangan

currentTime
currentTime(time)

Parameter

Parameter Jenis Deskripsi

time

number

Jika time tidak 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 kembaliInfinity.

Tanda tangan

duration()

Parameter

Tidak ada

Nilai yang Ditampilkan

Tipe Deskripsi

number

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

GetivEvents

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

Tanda tangan

getIVSEvents()

Parameter

Tidak ada

Nilai yang Ditampilkan

Tipe Deskripsi

object

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

GetivsPlayer

Mengembalikan instance pemutar Amazon IVS yang mendasarinya. Amazon IVS Player Web API lengkap tersedia melalui instance ini. Sebaiknya gunakan API Video.js pemutaran dasar sebanyak mungkin, dan menggunakan fungsi ini hanya untuk mengakses IVS-specific fitur Amazon. Fungsi paling umum yang mungkin perlu Anda akses pada instance 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 streaming yang telah diatur melalui src panggilan.

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

Tanda tangan

play()

Parameter

Tidak ada

Nilai yang Ditampilkan

Tidak ada

PlaybackRate

Mendapat atau mengatur kecepatan 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

Meng TimeRanges embalikan media yang dapat dicari.

Amazon IVS: Untuk streaming langsung, memanggil nilai pengem end(0) balian (TimeRange) mengembalikan Infinity.

Tanda tangan

seekable()

Parameter

Tidak ada

Nilai yang Ditampilkan

Tipe Deskripsi

TimeRange

TimeRange dari media yang tersedia untuk dicari.