Topik ini menjelaskan cara mengintegrasikan Player SDK untuk Web ke dalam aplikasi web Anda dan menyelesaikan konfigurasi pemutaran video dasar.
Catatan penggunaan
Pada topik ini, Player SDK untuk Web V2.25.1 digunakan sebagai contoh. Kami menyarankan agar Anda menggunakan versi terbaru. Untuk informasi selengkapnya tentang versi terbaru Player SDK untuk Web, lihat URL Unduhan.
Player SDK untuk Web V2.14.0 atau yang lebih baru mendukung pemutaran video H.265, sedangkan Player SDK untuk Web V2.20.2 atau yang lebih baru mendukung pemutaran video H.266. Topik ini menjelaskan cara mengonfigurasi Player SDK untuk Web guna memutar video H.264. Untuk informasi selengkapnya tentang cara mengonfigurasi Player SDK untuk Web guna memutar video H.265 dan H.266, lihat Memutar video H.265 dan H.266.
Persiapan
Anda telah memperoleh nama domain dan kunci lisensi yang terikat pada situs web Anda. Untuk informasi selengkapnya, lihat Mengelola lisensi.
Integrasi cepat ApsaraVideo Player untuk Web
Langkah-langkah berikut menunjukkan cara mengintegrasikan dan mengonfigurasi Player SDK untuk Web dalam proyek web sederhana. Jika Anda menggunakan framework antarmuka depan seperti React atau Vue, Anda dapat memperoleh demo kode sumber dan merujuk pada kode contoh untuk integrasi. Untuk informasi selengkapnya, lihat Uji coba online dan kode sumber demo.
1. Impor Player SDK untuk Web
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 skrip
Jalur tempat penyimpanan file JavaScript dan CSS telah berubah untuk ApsaraVideo Player SDK untuk Web V2.16.3 atau yang lebih baru.
Jalur lama:
CSS: https://g.alicdn.com/de/prismplayer/version/skins/default/aliplayer-min.css
JS: https://g.alicdn.com/de/prismplayer/version/aliplayer-min.js
Jalur 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
<!--Pada topik ini, Player SDK untuk Web V2.25.1 digunakan sebagai contoh. Jika Anda ingin menggunakan versi lain, peroleh nomor versi tersebut dan ganti 2.25.1 dalam kode contoh dengan nomor versi yang diinginkan.-->
<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. Kode contoh:
<body>
<div id="J_prismPlayer"></div>
</body>3. Inisialisasi
Player SDK untuk Web menemukan node DOM dengan id="J_prismPlayer" dan merender UI pemutar pada node tersebut.
var player = new Aliplayer({
id: 'J_prismPlayer',
license: {
// Gunakan nama domain dan kunci lisensi yang diperoleh dalam persiapan
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
}
});Konfigurasi pemutaran
Bagian berikut menunjukkan konfigurasi parameter untuk pemutar dalam berbagai skenario.
Memutar video on-demand
Pemutaran berdasarkan URL
Untuk memutar video dari URL, Anda harus mengatur parameter source ke URL pemutaran. Anda dapat menentukan URL pemutaran file audio atau video yang disimpan di layanan VOD pihak ketiga atau di ApsaraVideo VOD.
Anda dapat memanggil operasi GetPlayInfo untuk memperoleh URL pemutaran file media yang disimpan di ApsaraVideo VOD. Kami menyarankan agar Anda mengintegrasikan SDK ApsaraVideo VOD untuk memperoleh URL pemutaran media, sehingga Anda tidak perlu melakukan perhitungan tanda tangan yang kompleks. Untuk informasi selengkapnya tentang operasi GetPlayInfo, kunjungi OpenAPI Explorer.
var player = new Aliplayer(
{
id: "J_prismPlayer",
source: "<your play URL>", // URL pemutaran file audio atau video yang disimpan di layanan VOD pihak ketiga atau di ApsaraVideo VOD.
},
function (player) {
console.log("Pemutar berhasil dibuat.");
}
);Pemutaran berdasarkan VID dan PlayAuth
Untuk memutar video berdasarkan VID dan PlayAuth, Anda harus mengatur parameter vid ke ID audio atau video dan mengatur parameter playauth ke kredensial pemutaran.
Setelah Anda mengunggah file audio atau video, Anda dapat masuk ke konsol ApsaraVideo VOD dan memilih File Media > Audio/Video untuk melihat ID file audio atau video tersebut. Atau, Anda dapat memanggil operasi SearchMedia untuk memperoleh ID tersebut.
Anda dapat memanggil operasi GetVideoPlayAuth untuk memperoleh kredensial pemutaran. Kami menyarankan agar Anda mengintegrasikan SDK ApsaraVideo VOD untuk memperoleh kredensial pemutaran media, sehingga Anda tidak perlu melakukan perhitungan tanda tangan yang kompleks. Untuk informasi selengkapnya tentang operasi GetVideoPlayAuth, kunjungi OpenAPI Explorer.
Kami menyarankan agar Anda menggunakan metode pemutaran ini. Dibandingkan dengan pemutaran berbasis STS, pemutaran berbasis VidAuth lebih mudah digunakan dan lebih aman. Untuk informasi selengkapnya tentang perbandingan antara kedua metode pemutaran tersebut, lihat Perbandingan antara kredensial dan STS.
var player = new Aliplayer(
{
id: "J_prismPlayer",
width: "100%",
vid: "<your video ID>", // Wajib. ID file audio atau video. Contoh: 1e067a2831b641db90d570b6480f****.
playauth: "<your PlayAuth>", // Wajib. Kredensial pemutaran.
// authTimeout: 7200, // Periode validitas URL pemutaran. Satuan: detik. Pengaturan ini menimpa 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
Jika Anda menggunakan pemutaran berbasis STS, token STS sementara digunakan, bukan kredensial pemutaran. Anda perlu memanggil operasi AssumeRole untuk memperoleh token STS terlebih dahulu. Untuk informasi selengkapnya, lihat Memperoleh 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 masuk 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 SDK ApsaraVideo VOD untuk memperoleh ID tersebut. Contoh: 1e067a2831b641db90d570b6480f****.
accessKeyId: "<your AccessKey ID>", // Wajib. ID AccessKey dikembalikan saat token STS sementara 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 sementara 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 menimpa 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. Untuk informasi selengkapnya tentang pemutaran terenkripsi, lihat Memutar video terenkripsi di browser web.
Untuk informasi selengkapnya tentang cara menginisialisasi ApsaraVideo Player untuk Web, lihat Parameter.
Memutar aliran langsung
Streaming langsung berbasis URL
Untuk melakukan streaming konten dari URL, Anda harus mengatur parameter source ke URL streaming dan parameter isLive ke true.
Anda dapat menentukan URL streaming aliran langsung dari layanan streaming langsung pihak ketiga atau dari ApsaraVideo Live. Konsol ApsaraVideo Live menyediakan Pembuat URL untuk membantu Anda menghasilkan URL streaming. Untuk informasi selengkapnya, lihat Pembuat URL.
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 langsung.
},
function (player) {
console.log("Pemutar berhasil dibuat.");
}
);Streaming langsung terenkripsi DRM
Untuk informasi selengkapnya tentang streaming langsung terenkripsi DRM, lihat Memutar video terenkripsi.
Streaming Real-Time (RTS)
RTS memungkinkan Anda memutar video dari URL tanpa perlu mengonfigurasi parameter tambahan.
Anda dapat menggunakan Pembuat URL di konsol ApsaraVideo Live untuk menghasilkan URL RTS. Untuk informasi selengkapnya, lihat Pembuat URL.
ApsaraVideo Player menerapkan pemutaran RTS dengan mengintegrasikan SDK RTS. Secara default, versi terbaru SDK RTS diintegrasikan. Anda juga dapat menentukan versi SDK RTS dengan mengonfigurasi parameter, misalnya rtsVersion: '2.2.1'.
Jika browser Anda tidak mendukung RTS atau penarikan aliran melalui RTS gagal, sistem secara otomatis memutar aliran melalui protokol degradasi seperti HTTP Live Streaming (HLS) atau HTTP Flash Video (HTTP-FLV). Jika browser Anda mendukung FLV, sistem akan memutar aliran melalui FLV terlebih dahulu.
var player = new Aliplayer(
{
id: "J_prismPlayer",
source: "<your play URL>", // URL pemutaran RTS. Protokol artc:// digunakan.
isLive: true, // Menentukan apakah akan memutar aliran langsung.
// 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 memutar aliran melalui HLS.
// rtsFallbackSource: '<your play URL>', // Opsional. Protokol degradasi yang ingin Anda gunakan.
// rtsVersion: 'x.x.x', // Opsional. Versi SDK RTS.
},
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);
});
Bacaan terkait
Untuk informasi selengkapnya tentang properti objek pemutar, metode, dan konfigurasi event, lihat Operasi API.