ApsaraVideo Live memungkinkan Anda mengintegrasikan ApsaraVideo Player SDK untuk berbagai platform dan menyediakan metode ingest aliran yang sesuai dengan perangkat yang berbeda. Anda dapat menggunakan ApsaraVideo Player SDK dengan metode ingest apa pun untuk memenuhi kebutuhan dalam berbagai skenario bisnis. Topik ini menjelaskan cara menyiarkan langsung di halaman web.
Prasyarat
ApsaraVideo Live telah diaktifkan. Untuk informasi lebih lanjut, lihat Memulai dengan ApsaraVideo Live.
Domain ingest dan domain streaming yang digunakan untuk siaran langsung telah dikonfigurasi. Untuk informasi lebih lanjut, lihat Langkah 1: Tambahkan domain ingest dan domain streaming, Langkah 2: Tambahkan Record CNAME untuk mengaktifkan akselerasi, dan Langkah 3: Asosiasikan domain streaming dengan domain ingest.
Langkah 1: Hasilkan URL ingest dan URL streaming
URL ingest digunakan untuk mengirim aliran langsung, sedangkan URL streaming digunakan untuk menarik aliran langsung untuk diputar. Untuk informasi tentang cara menghasilkan URL ingest dan URL streaming, lihat Pembuat URL Langsung.
Langkah 2: Ingest aliran langsung
Ingest aliran langsung adalah proses pengiriman aliran audio dan video yang dikumpulkan ke pusat siaran langsung ApsaraVideo Live. Prosedur berikut memberikan contoh cara mengingest aliran menggunakan OBS Studio.
Streaming standar tidak menyediakan SDK ingest aliran untuk web. Anda dapat menggunakan OBS Studio atau Push SDK untuk mengingest aliran. Untuk informasi tentang cara menggunakan alat ingest aliran yang berbeda untuk mengingest aliran, lihat Ingest Aliran Langsung.
Unduh dan instal OBS Studio. Tautan unduhan: OBS Studio.
Jalankan OBS Studio.
Di bilah menu, pilih .
Di halaman Pengaturan, klik Stream dan konfigurasikan parameter berikut.
Parameter
Deskripsi
Layanan
Pilih Custom....
Server
Masukkan URL ingest yang ditandatangani yang telah dihasilkan. Contoh:
rtmp://demo.aliyundoc.com/app/stream?auth_key=1543302081-0-0-9c6e7c8190c10bdfb3c0************.Kunci Stream
Biarkan parameter ini kosong.
Buka halaman utama OBS Studio. Temukan bagian Sources, tambahkan sumber, lalu klik Start Streaming.
Di konsol ApsaraVideo Live, buka halaman Manajemen Stream. Di tab Active Streams, Anda dapat melihat dan mengelola aliran audio atau video yang telah diingest.
Langkah 3: Putar aliran langsung
Anda dapat menggunakan ApsaraVideo Player SDK untuk Web untuk memutar aliran langsung. Untuk informasi lebih lanjut, lihat ApsaraVideo Player SDK untuk Web.
Prosedur berikut menjelaskan cara mengintegrasikan ApsaraVideo Player SDK untuk Web guna memutar aliran langsung di halaman web.
Tambahkan file .js tertentu ke proyek Anda.
ApsaraVideo Player SDK untuk Web tidak bergantung pada library .js frontend. Anda dapat menambahkan file .js tertentu ke proyek Anda untuk menginisialisasi pemain.
<head> <link rel="stylesheet" href=" https://g.alicdn.com/apsara-media-box/imp-web-player/2.28.3/skins/default/aliplayer-min.css" /> // Opsional. Jika Anda ingin menggunakan pemain HTML5 untuk pemutaran, tambahkan file .css ke proyek Anda. <script charset="utf-8" type="text/javascript" src=" https://g.alicdn.com/apsara-media-box/imp-web-player/2.28.3/aliplayer-min.js"></script> // Diperlukan. Impor file .js. </head>Tentukan wadah untuk pemain.
<body> <div id="J_prismPlayer"></div> </body>Buat instance pemain.
Untuk menyiarkan konten dari URL, Anda harus menyetel parameter source ke URL streaming dan parameter isLive ke true. Untuk informasi tentang cara mendapatkan URL streaming Alibaba Cloud, lihat Langkah 1: Hasilkan URL Ingest dan URL Streaming.
Contoh kode untuk streaming dari URL:
<script> var player = new Aliplayer({ id: 'J_prismPlayer', source: '<your play URL>'// URL streaming yang dihasilkan di ApsaraVideo Live. isLive: true,// Tentukan apakah akan memutar aliran langsung. },function(player){ console.log('Pemain telah dibuat.') }); </script>
Uji coba online dan kode sumber demo
Coba demo untuk PC
ApsaraVideo Player SDK untuk Web menyediakan uji coba online yang divisualisasikan. Anda dapat mengajukan permohonan uji coba online di halaman Pengaturan Online. Anda dapat mengonfigurasi fitur pemutaran dasar dan menyetel tata letak UI secara online.
Jika Anda menggunakan pemain HTML5 untuk memutar aliran langsung, URL streaming dapat berupa format ApsaraVideo Real-time Communication (ARTC), Flash Video (FLV), atau HTTP Live Streaming (HLS). Format URL streaming dalam protokol Real-Time Messaging Protocol (RTMP) tidak didukung.
Coba demo untuk perangkat seluler
Untuk mendapatkan demo untuk browser seluler, gunakan aplikasi DingTalk di perangkat seluler Anda untuk memindai kode QR berikut.
Di perangkat Android, browser internal di WeChat dan QQ mungkin mengubah pengaturan ApsaraVideo Player SDK tanpa otorisasi atau pengetahuan Anda. Dalam hal ini, fitur tertentu dari ApsaraVideo Player SDK tidak dapat digunakan.
Kode sumber terkait fitur demo
Anda dapat menggunakan fitur ApsaraVideo Player SDK untuk Web dan melihat kode sumber yang sesuai di halaman Fungsi situs web Aliplayer. Untuk informasi lebih lanjut tentang fitur dasar, komponen, dan fitur lanjutan, kunjungi halaman Fungsi.
Kode sumber demo untuk integrasi dengan Vue
ApsaraVideo Player SDK untuk Web menyediakan kode sumber demo untuk Anda mengintegrasikan SDK dengan framework Vue.
Untuk informasi lebih lanjut tentang demo, lihat Demo ApsaraVideo Player Berbasis Vue.
Program mini WeChat
Program mini WeChat tidak memiliki API DOM dan API BOM. Dalam hal ini, library umum yang biasa digunakan dalam pengembangan frontend, seperti jQuery dan Zepto, tidak dapat dimuat di program mini WeChat. Demikian juga, ApsaraVideo Player SDK untuk Web, yang bergantung pada dukungan browser, tidak dapat dijalankan di program mini WeChat. Oleh karena itu, Anda harus menggunakan komponen video default yang disediakan oleh program mini WeChat untuk memutar video. Untuk informasi lebih lanjut, kunjungi vod-mini-program.
Referensi
Saat menggunakan ApsaraVideo Player SDK untuk Web, pengaturan fitur yang sering digunakan mungkin bervariasi tergantung pada pemain, metode pemutaran, atau lingkungan browser. Anda dapat mengonfigurasi fitur-fitur ini berdasarkan kebutuhan bisnis Anda. Untuk informasi lebih lanjut, lihat Fitur Dasar.
ApsaraVideo Player SDK untuk Web juga menyediakan beberapa fitur lanjutan, termasuk fitur untuk kontrol pemutaran dan pemutaran video panjang. Untuk informasi lebih lanjut, lihat Fitur Lanjutan.
Untuk informasi tentang operasi API ApsaraVideo Player SDK untuk Web, lihat Deskripsi API Aliplayer.
Untuk jawaban atas beberapa pertanyaan umum tentang ApsaraVideo Player SDK untuk Web, lihat FAQ tentang Player SDK untuk Web.