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.
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.gzMetode 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.
CatatanSetelah instalasi dengan salah satu metode di atas selesai, alat pemrograman AI perlu direstart agar Skill tersebut aktif.
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.
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
Tambahkan dependensi
aliyun-aliplayerke proyek Anda.npm install aliyun-aliplayer --saveImpor 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
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.
Setelah mengunggah file media, temukan ID-nya di Konsol ApsaraVideo VOD di bawah File Media > Audio/Video. Atau, panggil operasi SearchMedia.
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.
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.
Hasilkan URL RTS dengan Pembuat URL di Konsol ApsaraVideo Live.
Pemutar mengintegrasikan RTS SDK untuk pemutaran RTS. Versi terbaru digunakan secara default. Timpa dengan parameter rtsVersion.
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
Untuk properti, metode, dan event pemutar, lihat Referensi API Aliplayer.