All Products
Search
Document Center

ApsaraVideo VOD:Integrasikan ApsaraVideo Player SDK untuk Web

Last Updated:Sep 18, 2026

Integrasikan ApsaraVideo Player SDK untuk Web ke dalam aplikasi web Anda dan konfigurasikan pemutaran video dasar.

Catatan penggunaan

  • Topik ini menggunakan ApsaraVideo Player SDK untuk Web V2.25.1 sebagai contoh. Kami merekomendasikan versi terbaru. Untuk mengunduhnya, lihat Unduh ApsaraVideo Player SDK.

  • ApsaraVideo Player SDK untuk Web V2.14.0+ mendukung pemutaran video H.265, dan V2.20.2+ mendukung H.266. Topik ini membahas H.264. Untuk H.265 dan H.266, lihat Putar video H.265 dan H.266.

Persiapan

  • Anda telah memperoleh nama domain dan kunci lisensi untuk situs web Anda. Kelola lisensi.

Akses cepat menggunakan AI Skill

Jika Anda menggunakan alat pemrograman AI yang mendukung Agent Skills (seperti Qoder dan Claude Code), Anda dapat menginstal Skill resmi dari pemutar tersebut, dan AI akan menghasilkan kode integrasi yang dapat langsung dijalankan.

  1. Instalasi.

    Metode 1: Jalankan perintah berikut untuk menginstal secara otomatis di direktori root proyek.

    npx skills add https://player.alicdn.com/file/aliplayer-web-setup.tar.gz

    Metode 2: Unduh paket dekompresi secara manual dan letakkan di direktori skills alat pemrograman AI.

    Salin direktori aliplayer-web-setup ke direktori skills alat yang sesuai, misalnya:

    • Berlaku global: ~/.qoder/skills/aliplayer-web-setup/

    • Hanya berlaku untuk proyek saat ini: <Direktori Root Proyek>/.qoder/skills/aliplayer-web-setup/

    Untuk path direktori skills alat pemrograman AI lainnya, silakan merujuk ke dokumentasi resminya.

    Catatan

    Setelah instalasi dengan salah satu metode di atas selesai, alat pemrograman AI perlu direstart agar Skill tersebut aktif.

  2. Penggunaan.

    Jelaskan kebutuhan Anda dalam bahasa alami, misalnya:Bantu saya menghubungkan ke pemutar Aliyun dalam proyek React, putar video on-demand, perlu enkripsi privat。

    AI akan terlebih dahulu mengonfirmasi framework front-end, jenis siaran (on-demand/live), kebutuhan enkripsi, mode sumber video, dan informasi lainnya, lalu menghasilkan kode integrasi pemutar lengkap.

Catatan

Kode yang dihasilkan menggunakan lisensi uji coba secara default dan hanya terbatas untuk debugging lokal. Untuk peluncuran resmi, gantilah dengan lisensi resmi yang diajukan melalui Konsol. Untuk detailnya, lihat Kelola lisensi.

Akses Cepat Manual

Langkah-langkah berikut mengintegrasikan ApsaraVideo Player SDK untuk Web dalam proyek web dasar. Untuk React atau Vue, unduh demo dari Uji coba online dan kode sumber demo.

1. Impor Web SDK

Impor menggunakan Paket NPM

  1. Tambahkan dependensi aliyun-aliplayer ke proyek Anda.

    npm install aliyun-aliplayer --save
  2. Impor paket kode dan file style dalam kode Anda.

    import Aliplayer from 'aliyun-aliplayer';
    import 'aliyun-aliplayer/build/skins/default/aliplayer-min.css';

Impor menggunakan tag script

Catatan

Path penyimpanan file JavaScript dan CSS telah berubah mulai V2.16.3 dan versi setelahnya.

Asli:

CSS: https://g.alicdn.com/de/prismplayer/version/skins/default/aliplayer-min.css

JS: https://g.alicdn.com/de/prismplayer/version/aliplayer-min.js

Baru:

CSS: https://g.alicdn.com/apsara-media-box/imp-web-player/version/skins/default/aliplayer-min.css

JS: https://g.alicdn.com/apsara-media-box/imp-web-player/version/aliplayer-min.js

<!--Dalam topik ini, Web SDK V2.25.1 digunakan sebagai contoh. Jika Anda ingin menggunakan versi lain, peroleh nomor versinya dan ganti 2.25.1 dalam kode contoh.-->
<head>
  <link rel="stylesheet" href="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/skins/default/aliplayer-min.css" />  // Wajib. Anda harus menambahkan file CSS ini.
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/apsara-media-box/imp-web-player/2.25.1/aliplayer-min.js"></script>  // Wajib. Anda harus menambahkan file .js ini.
</head>

2. Sediakan elemen mount

Tambahkan tag <body> dan node <div> untuk memasang UI pemutar. Contoh kode:

<body>
  <div id="J_prismPlayer"></div>
</body>

3. Inisialisasi SDK

SDK menemukan node DOM dengan id="J_prismPlayer" dan merender UI pemutar.

var player = new Aliplayer({
  id: 'J_prismPlayer',
  license: {
    // Gunakan nama domain dan kunci lisensi yang telah disiapkan
    domain: "example.com", // Nama domain yang Anda tentukan saat mengajukan lisensi
    key: "example-key" // Kunci lisensi yang ditampilkan di Konsol ApsaraVideo VOD setelah Anda mengajukan lisensi
  }
});

Putar video

Konfigurasikan pemutar untuk skenario berbeda.

Putar video on-demand

Pemutaran berdasarkan URL

Atur parameter source ke URL pemutaran file media dari layanan pihak ketiga atau ApsaraVideo VOD.

Panggil operasi GetPlayInfo untuk memperoleh URL pemutaran file media di ApsaraVideo VOD. Kami merekomendasikan mengintegrasikan ApsaraVideo VOD SDK untuk menghindari perhitungan tanda tangan yang kompleks. Coba API di OpenAPI Explorer.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    source: "<your play URL>", // URL pemutaran file media yang disimpan di layanan VOD pihak ketiga atau di ApsaraVideo VOD.
  },
  function (player) {
    console.log("Pemutar berhasil dibuat.");
  }
);

Pemutaran berdasarkan VID dan PlayAuth

Atur vid ke ID media dan playauth ke kredensial pemutaran.

  1. Setelah mengunggah file media, temukan ID-nya di Konsol ApsaraVideo VOD di bawah File Media > Audio/Video. Atau, panggil operasi SearchMedia.

  2. Panggil operasi GetVideoPlayAuth untuk memperoleh kredensial pemutaran. Kami merekomendasikan mengintegrasikan ApsaraVideo VOD SDK untuk menghindari perhitungan tanda tangan yang kompleks. Coba API di OpenAPI Explorer.

Pemutaran berbasis VidAuth direkomendasikan dibandingkan STS karena lebih sederhana dan aman. Untuk perbandingan, lihat Metode kredensial vs. metode STS.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    width: "100%",
    vid: "<your video ID>", // Wajib. ID file media. Contoh: 1e067a2831b641db90d570b6480f****.
    playauth: "<your PlayAuth>", // Wajib. Kredensial pemutaran.
    // authTimeout: 7200, // Periode validitas URL pemutaran. Satuan: detik. Pengaturan ini menggantikan periode validitas yang Anda konfigurasikan di Konsol ApsaraVideo VOD. Jika Anda tidak mengisi parameter ini, nilai default 7200 akan digunakan. Periode validitas harus lebih panjang daripada durasi aktual video. Jika tidak, URL pemutaran kedaluwarsa sebelum pemutaran selesai.
  },
  function (player) {
    console.log("Pemutar berhasil dibuat.");
  }
);

Pemutaran berdasarkan VID dan STS

Pemutaran berbasis STS menggunakan token STS sementara alih-alih kredensial pemutaran. Panggil operasi AssumeRole untuk memperoleh token STS. Untuk informasi lebih lanjut, lihat Peroleh token STS.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    width: "100%",
    vid: "<your video ID>", // Wajib. Setelah Anda mengunggah file audio atau video, Anda dapat login ke Konsol ApsaraVideo VOD dan memilih File Media > Audio/Video untuk melihat ID file audio atau video tersebut. Atau, Anda dapat memanggil operasi SearchMedia yang disediakan oleh ApsaraVideo VOD SDK untuk memperoleh ID. Contoh: 1e067a2831b641db90d570b6480f****.
    accessKeyId: "<your AccessKey ID>", // Wajib. ID AccessKey dikembalikan saat token STS temporary dihasilkan.
    securityToken: "<your STS token>", // Wajib. Token STS. Untuk memperoleh token STS, panggil operasi AssumeRole.
    accessKeySecret: "<your AccessKey Secret>", // Wajib. Rahasia AccessKey dikembalikan saat token STS temporary dihasilkan.
    region: "<region of your video>", // Wajib. ID wilayah tempat aset media berada, seperti cn-shanghai, eu-central-1, atau ap-southeast-1.
    // authTimeout: 7200, // Periode validitas URL pemutaran. Satuan: detik. Pengaturan ini menggantikan periode validitas yang Anda konfigurasikan di Konsol ApsaraVideo VOD. Jika Anda tidak mengisi parameter ini, nilai default 7200 akan digunakan. Periode validitas harus lebih panjang daripada durasi aktual video. Jika tidak, URL pemutaran kedaluwarsa sebelum pemutaran selesai.
  },
  function (player) {
    console.log("Pemutar berhasil dibuat.");
  }
);

Pemutaran terenkripsi

ApsaraVideo VOD mendukung Enkripsi privat Alibaba Cloud dan Enkripsi DRM. Putar video terenkripsi di browser web.

Saat pemutar diinisialisasi menggunakan mode pemutaran VID, SDK Aliplayer mengirim permintaan GetPlayInfo ke vod.{region}.aliyuncs.com (vod-product.{region}.aliyuncs.com) untuk memperoleh alamat pemutaran. Jika jaringan tidak dapat mengakses nama domain tersebut (misalnya, di lingkungan intranet), permintaan akan timeout atau gagal. Pastikan vod.{region}.aliyuncs.com (vod-product.{region}.aliyuncs.com) dan nama domain CDN dapat diakses dari jaringan.

Catatan

Untuk semua opsi inisialisasi, lihat Parameter.

Putar aliran live

Streaming live berbasis URL

Atur source ke URL streaming dan isLive ke true.

URL streaming dapat berasal dari layanan pihak ketiga atau ApsaraVideo Live. Hasilkan URL dengan Pembuat URL di Konsol ApsaraVideo Live.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    source: "<your play URL>", // URL streaming dapat berupa URL streaming pihak ketiga atau URL streaming yang dihasilkan di ApsaraVideo Live.
    isLive: true, // Menentukan apakah akan memutar aliran live.
  },
  function (player) {
    console.log("Pemutar berhasil dibuat.");
  }
);

Streaming live terenkripsi DRM

Untuk streaming live terenkripsi DRM: Putar video terenkripsi.

Streaming Real-Time (RTS)

RTS memutar video dari URL tanpa parameter tambahan.

  1. Hasilkan URL RTS dengan Pembuat URL di Konsol ApsaraVideo Live.

  2. Pemutar mengintegrasikan RTS SDK untuk pemutaran RTS. Versi terbaru digunakan secara default. Timpa dengan parameter rtsVersion.

  3. Jika RTS tidak tersedia, pemutar akan fallback ke HLS atau HTTP-FLV. FLV diprioritaskan jika didukung.

var player = new Aliplayer(
  {
    id: "J_prismPlayer",
    source: "<your play URL>", // URL pemutaran RTS. Protokol artc:// digunakan.
    isLive: true, // Menentukan apakah akan memutar aliran live.
    // rtsFallback: false, //Opsional. Menentukan apakah akan mengaktifkan fitur degradasi pemutaran RTS. Nilai default: true.
    // rtsFallbackType: 'HLS', //Opsional. Protokol degradasi yang ingin Anda gunakan. Anda dapat menentukan HLS atau FLV. Secara default, parameter ini dibiarkan kosong. Dalam hal ini, kebijakan default digunakan dan sistem mencoba memutar aliran melalui FLV terlebih dahulu. Jika browser Anda tidak mendukung FLV, sistem akan memutar aliran melalui HLS.
    // rtsFallbackSource: '<your play URL>', // Opsional. Protokol degradasi yang ingin Anda gunakan.
    // rtsVersion: 'x.x.x', // Opsional. Versi RTS SDK.
  },
  function (player) {
    console.log("Pemutar berhasil dibuat.");
  }
);
// Event yang dipicu saat aliran ditarik melalui RTS. Dengarkan event ini untuk memperoleh TraceId. Dalam callback event, traceId menunjukkan TraceId yang digunakan untuk penarikan aliran dan source menunjukkan URL pemutaran aliran RTS.
player.on("rtsTraceId", function (event) {
  console.log("EVENT rtsTraceId", event.paramData);
});
// Event yang dipicu saat protokol degradasi digunakan untuk pemutaran. reason menunjukkan penyebab degradasi dan fallbackUrl menunjukkan URL alternatif.
player.on("rtsFallback", function (event) {
  console.log(" EVENT rtsFallback", event.paramData);
});

Referensi