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 website Anda. Kelola lisensi.
Akses cepat menggunakan AI Skill
Jika Anda menggunakan tool 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 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 tool pemrograman AI.
Salin direktori aliplayer-web-setup ke direktori skills tool yang sesuai, misalnya:
Berlaku global:~/.qoder/skills/aliplayer-web-setup/
Hanya berlaku untuk item saat ini:<项目根目录>/.qoder/skills/aliplayer-web-setup/
Silakan merujuk ke dokumentasi resmi untuk mengetahui path direktori skills tool pemrograman AI lainnya.
CatatanSetelah instalasi kedua metode selesai, tool pemrograman AI perlu di-restart agar Skill tersebut berlaku.
Penggunaan.
Jelaskan kebutuhan 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, siaran on-demand/live, apakah perlu dienkripsi, 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. Peluncuran resmi harus menggunakan Lisensi resmi yang diajukan di Konsol. Untuk detailnya, lihat Kelola lisensi.
Akses Cepat Manual
Langkah-langkah ini 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 gaya 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 selanjutnya.
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 pada 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 mencari 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
}
});Mainkan video
Konfigurasikan pemutar untuk skenario berbeda.
Mainkan 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 melalui 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 dibanding 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 berbasis STS
Pemutaran berbasis STS menggunakan token STS temporary 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 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.");
}
);Saat Anda menginisialisasi pemutar dengan STS, ApsaraVideo Player SDK mengirim permintaan GetPlayInfo ke vod.{region}.aliyuncs.com untuk memperoleh URL pemutaran. Jika jaringan Anda tidak dapat mengakses domain ini (misalnya, di lingkungan intranet), permintaan akan timeout atau gagal, fungsi callback inisialisasi tidak dipanggil, dan Pemutar berhasil dibuat. tidak dicetak ke konsol. Pastikan jaringan Anda dapat mengakses vod.{region}.aliyuncs.com dan nama domain akselerasi CDN.
Pemutaran terenkripsi
ApsaraVideo VOD mendukung Enkripsi privat Alibaba Cloud dan Enkripsi DRM. Putar video terenkripsi di browser web.
Untuk semua opsi inisialisasi, lihat Parameter.
Mainkan 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 fallback 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 fallback 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. Di 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 fallback 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.