Saat menggunakan ApsaraVideo Player SDK untuk Web, pengaturan fitur yang sering digunakan dapat bervariasi tergantung pada pemain, metode pemutaran, atau lingkungan browser. Topik ini menjelaskan cara mengonfigurasi fitur dasar ApsaraVideo Player SDK untuk Web.
Pengaturan Umum
Untuk memutar video Flash Video (FLV) dan HTTP Live Streaming (HLS) menggunakan pemain web, Anda harus mengonfigurasi Berbagi Sumber Daya Lintas Domain (CORS). Untuk informasi lebih lanjut, lihat Konfigurasi CORS.
Jika CORS tidak dikonfigurasi saat menggunakan pemain web, pesan kesalahan berikut akan muncul selama pemutaran:
'Access-Control-Allow-Origin' header tidak ada pada sumber daya yang diminta.
Setelah pemutaran layar penuh dimulai, Anda dapat mengonfigurasi input untuk menetapkan posisi absolut guna mengaktifkan keyboard lunak.
Metode Panggilan
Fitur dasar ApsaraVideo Player SDK untuk Web diaktifkan melalui atribut atau metode.
Untuk informasi lebih lanjut, lihat Deskripsi API Aliplayer.
Berikut adalah contoh kode untuk memanggil metode:
Panggil metode berikut dalam callback fungsi yang digunakan untuk membuat pemain. Contoh kode:
var player = new Aliplayer({},function(player) {
player.setSpeed(2);
});Kelola Pemutaran Media
ApsaraVideo Player SDK untuk Web memungkinkan Anda memutar video dari titik waktu tertentu dan menjeda pemutaran.
Putar video dari titik waktu tertentu
Anda dapat memanggil metode seek untuk memutar video dari titik waktu tertentu. Contoh kode:
// time menentukan titik waktu tertentu. Unit: detik.
player.seek(time)Jeda Pemutaran
Anda dapat memanggil metode pause untuk menjeda pemutaran. Contoh kode:
player.pause()Untuk menampilkan tombol putar besar, Anda harus menetapkan parameter ini ke true. Contoh: player.pause(true).
Hapus Pemain
Anda dapat memanggil metode dispose untuk menghapus pemain. Contoh kode:
player.dispose()Tentukan Mode Tampilan
Browser PC dan iOS mendukung pengaturan tampilan.
Chrome dan Firefox untuk Android mendukung pengaturan tampilan.
WeChat dan sebagian besar browser lainnya menggunakan pemain bawaan untuk pemutaran. Oleh karena itu, pengaturan tampilan tidak didukung.
Tentukan Sudut Rotasi
Panggil operasi setRotate untuk memutar gambar berdasarkan sudut tertentu. Anda juga dapat menanyakan sudut rotasi. Contoh kode:
// Tentukan sudut rotasi. Nilai positif Angle menentukan rotasi searah jarum jam. Nilai negatif Angle menentukan rotasi berlawanan arah jarum jam. Misalnya, player.setRotate(180) menentukan rotasi searah jarum jam sebesar 180 derajat.
player.setRotate(<Angle>)
// Dapatkan sudut rotasi.
player.getRotate()Tentukan Mode Pencerminan
Panggil setImage untuk mengonfigurasi mode pencerminan. Mode yang didukung: pencerminan horizontal dan vertikal. Contoh kode:
// Pencerminan horizontal.
player.setImage('horizon')
// Pencerminan vertikal.
player.setImage('vertical')ApsaraVideo Player SDK untuk Web menyediakan atribut videoHeight dan videoWidth untuk menentukan tinggi dan lebar video. Dalam banyak kasus, tinggi dan lebar video lebih kecil daripada wadah, mencegah video meluap dari wadah induk selama rotasi dan pencerminan. Contoh kode:
width: '100', // Lebar wadah.
height: '100%', // Tinggi wadah.
videoHeight:"200px", // Tinggi video.Dapatkan Informasi Pemutaran
ApsaraVideo Player SDK untuk Web memungkinkan Anda mendapatkan kemajuan pemutaran saat ini dan durasi pemutaran.
Dapatkan Kemajuan Pemutaran
Panggil getCurrentTime untuk mendapatkan kemajuan pemutaran saat ini. Contoh kode:
// Waktu yang dikembalikan diukur dalam detik.
player.getCurrentTime()Dapatkan Durasi Pemutaran
Anda dapat menanyakan durasi total video setelah video dimuat. Misalnya, Anda dapat menanyakan durasi video setelah peristiwa pemutaran terjadi. Panggil getDuration untuk mendapatkan durasi total video. Contoh kode:
player.getDuration()Dapatkan Status Pemutaran
Panggil getStatus untuk mendapatkan status pemutaran. Nilai kembali:
init: Inisialisasi.
ready: Siap.
loading: Memuat.
play: Putar.
pause: Jeda.
playing: Sedang diputar.
waiting: Menunggu buffering.
error: Kesalahan.
ended: Selesai.
Contoh kode:
player.getStatus()Tentukan Volume
Anda dapat menyesuaikan volume atau membisukan video.
Properti video.volume bersifat hanya-baca di iOS dan sistem Android tertentu. Oleh karena itu, metode getVolume dan setVolume yang disediakan oleh Player SDK untuk Web tidak valid untuk iOS dan sistem Android tertentu.
Atur Volume
Panggil operasi setVolume untuk menyesuaikan volume. Anda juga dapat mendapatkan volume saat ini. Contoh kode:
// Atur volume ke bilangan real dari 0 hingga 1.
player.setVolume(0)
// Dapatkan volume saat ini.
player.getVolume()Konfigurasikan Mode Bisu
Panggil metode mute untuk membisukan video selama pemutaran. Contoh kode:
// Membisukan video.
player.mute();
// Menghidupkan suara video.
player.unMute();Tentukan Kecepatan Pemutaran
Jika Anda menggunakan antarmuka pengguna (UI) default ApsaraVideo Player SDK untuk Web, Anda dapat menggunakan fitur kecepatan pemutaran bawaan untuk menyesuaikan kecepatan pemutaran saat menonton video. Jika Anda menggunakan UI kustom, Anda dapat memanggil operasi setSpeed untuk menyesuaikan kecepatan pemutaran.
Untuk informasi lebih lanjut tentang cara menonaktifkan pengaturan kecepatan pemutaran, lihat bagian setSpeed dari topik Deskripsi API Aliplayer.
Contoh kode:
// Tentukan kecepatan pemutaran. Contoh kode berikut memberikan contoh cara menyetel kecepatan pemutaran menjadi dua kali kecepatan saat ini.
player.setSpeed(2)Pemutaran Multi-definisi
Anda dapat mengonfigurasi URL aliran dalam beberapa definisi untuk pemutaran multi-definisi.
Jika Anda menggunakan VID dan PlayAuth untuk pemutaran, tidak diperlukan pengaturan tambahan. ApsaraVideo Player SDK untuk Web mendapatkan daftar definisi dari ApsaraVideo VOD. Anda dapat mengklik Settings di halaman pemutaran untuk melihat daftar definisi.
CatatanJika Anda menggunakan VID dan PlayAuth untuk pemutaran, Anda dapat menentukan atribut format untuk menentukan apakah akan memutar file media dalam format MP4 atau MP3 untuk pemain HTML5. Secara default, file media dalam format MP4 diputar.
Jika Anda menggunakan pemutaran berbasis URL, Anda harus mengonfigurasi pasangan kunci-nilai dalam atribut sumber untuk menentukan URL aliran dalam beberapa definisi. Pasangan kunci-nilai tersebut dalam format JSON. Setelah pengaturan berlaku, Anda dapat mengklik Settings di halaman pemutaran untuk melihat daftar definisi.
Jika Anda ingin mengubah cara daftar definisi ditampilkan, Anda dapat menggunakan komponen definisi. Untuk informasi lebih lanjut tentang contoh kode, lihat Functions.
Dalam mode pemutaran berbasis URL, pasangan kunci-nilai berikut dalam atribut sumber didukung:
"OD": "<URL Kualitas Asli>"
"FD": "<URL Definisi Rendah>"
"LD":"<URL Definisi Standar>"
"SD": "<URL Definisi Tinggi>"
"HD": "<URL Definisi Ultra-Tinggi>"
"2K": "<URL 2K>"
"4K": "<URL 4K>"Contoh kode berikut memberikan contoh cara mengonfigurasi definisi dalam mode pemutaran berbasis URL:
// Contoh berikut menunjukkan cara mengonfigurasi URL definisi tinggi dan ultra-tinggi.
source:'{"HD":"http://******/player/hdexample.mp4","SD":"http://******/player/sdexample.mp4"}'ApsaraVideo Player SDK untuk Web juga memungkinkan Anda menentukan atribut qualitySort untuk mencantumkan definisi dalam urutan menaik atau menurun.
Nilai desc menentukan urutan menurun dari definisi tertinggi ke definisi terendah.
Nilai asc menentukan urutan menaik dari definisi terendah ke definisi tertinggi.
Pemain tetap menggunakan definisi yang Anda tentukan. Saat Anda memutar video berikutnya, definisi yang Anda tentukan terakhir kali digunakan. Jika Anda tidak menentukan definisi terakhir kali Anda memutar video, definisi rendah digunakan untuk pemutaran.
Jika video gagal diputar dalam definisi yang ditentukan, pemain secara otomatis beralih ke definisi lebih rendah berikutnya dan menampilkan pesan. Hanya pemain HTML5 yang mendukung pergantian definisi.
Aktifkan Pemutaran Ulang Berulang
ApsaraVideo Player SDK untuk Web memungkinkan Anda menentukan atribut rePlay atau mendengarkan peristiwa ended untuk pemutaran ulang berulang.
Contoh kode yang digunakan untuk menentukan atribut rePlay
rePlay:trueContoh kode yang digunakan untuk mendengarkan peristiwa ended
player.on('ended',function(){
player.replay()
})Operasi Gestur pada Perangkat Seluler
Player SDK untuk Web dioptimalkan untuk layar kecil pada perangkat seluler. Bilah kemajuan lebih mudah untuk diseret. Dua fitur eksklusif disediakan: tekan lama untuk mempercepat dan klik dua kali untuk maju cepat atau mundur cepat.
Tekan Lama untuk Mempercepat
Secara default, fitur tekan lama untuk mempercepat diaktifkan pada perangkat seluler. Jika Anda mengetuk dan menahan area mana pun dari pemain kecuali bilah kemajuan selama lebih dari 0,5 detik, video diputar dengan kecepatan lebih cepat. Setelah Anda melepaskan, video diputar dengan kecepatan aslinya.
Anda juga dapat menonaktifkan fitur ini dengan mengonfigurasi parameter longPressFastForward: false. Untuk informasi lebih lanjut, lihat Deskripsi API Aliplayer.
Klik Dua Kali untuk Maju Cepat atau Mundur Cepat
Secara default, fitur klik dua kali untuk maju cepat atau mundur cepat diaktifkan pada perangkat seluler. Jika Anda mengklik dua kali area sepertiga kiri pemain, video melompat mundur sebesar 10 detik. Jika Anda mengklik dua kali area sepertiga kanan pemain, video melompat maju sebesar 10 detik.
Anda juga dapat menonaktifkan fitur ini dengan mengonfigurasi parameter dbClickSkip: false. Untuk informasi lebih lanjut, lihat Deskripsi API Aliplayer.