Saat menggunakan SDK Pemutar ApsaraVideo untuk Web, pengaturan fitur umum dapat bervariasi tergantung pada pemutar, metode pemutaran, atau lingkungan browser. Topik ini menjelaskan cara mengonfigurasi fitur dasar SDK Pemutar ApsaraVideo untuk Web.
Saat menggunakan SDK Pemutar ApsaraVideo untuk Web, pengaturan fitur umum dapat bervariasi tergantung pada pemutar, metode pemutaran, atau lingkungan browser. Topik ini menjelaskan cara mengonfigurasi fitur dasar SDK Pemutar ApsaraVideo untuk Web.
Pengaturan umum
Jika Anda ingin memutar video Flash Video (FLV) dan HTTP Live Streaming (HLS) menggunakan pemutar web, Anda harus mengonfigurasi Cross-Origin Resource Sharing (CORS). Untuk informasi selengkapnya, lihat Konfigurasi akses lintas asal.
Jika CORS tidak dikonfigurasi saat menggunakan pemutar web, pesan error berikut akan muncul selama pemutaran:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Setelah pemutaran layar penuh dimulai, Anda dapat mengonfigurasi input untuk mengatur posisi absolut agar keyboard virtual aktif.
Metode pemanggilan
Fitur dasar SDK Pemutar ApsaraVideo untuk Web diaktifkan melalui atribut atau metode.
Untuk informasi selengkapnya, lihat Referensi API Aliplayer.
Kode contoh berikut menunjukkan cara memanggil metode:
Panggil metode berikut dalam callback fungsi yang digunakan untuk membuat pemutar. Contoh kode:
var player = new Aliplayer({},function(player) {
player.setSpeed(2);
});Mengelola pemutaran media
SDK Pemutar ApsaraVideo untuk Web memungkinkan Anda memutar video dari titik waktu tertentu dan menjeda pemutaran.
Memutar video dari titik waktu tertentu
Anda dapat memanggil metode seek untuk memutar video dari titik waktu tertentu. Contoh kode:
// time menentukan titik waktu tertentu. Satuan: detik.
player.seek(time)Jeda pemutaran
Anda dapat memanggil metode pause untuk menjeda pemutaran. Contoh kode:
player.pause()Untuk menampilkan tombol putar besar, atur parameter ini ke true. Contoh: player.pause(true).
Hapus pemutar
Anda dapat memanggil metode dispose untuk menghapus pemutar. 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 lain menggunakan pemutar bawaan untuk pemutaran sehingga pengaturan tampilan tidak didukung.
Tentukan sudut rotasi
Panggil operasi setRotate untuk memutar gambar sesuai sudut yang ditentukan. Anda juga dapat menanyakan sudut rotasi tersebut. Contoh kode:
// Tentukan sudut rotasi. Nilai positif Angle menunjukkan rotasi searah jarum jam. Nilai negatif Angle menunjukkan 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 pencerminan vertikal. Contoh kode:
// Pencerminan horizontal.
player.setImage('horizon')
// Pencerminan vertikal.
player.setImage('vertical')SDK Pemutar ApsaraVideo untuk Web menyediakan atribut videoHeight dan videoWidth agar Anda dapat menentukan tinggi dan lebar video. Umumnya, tinggi dan lebar video lebih kecil daripada kontainer, sehingga mencegah video meluap dari kontainer induk selama rotasi dan pencerminan. Contoh kode:
width: '100', // Lebar kontainer.
height: '100%', // Tinggi kontainer.
videoHeight:"200px", // Tinggi video.Dapatkan informasi pemutaran
SDK Pemutar ApsaraVideo untuk Web memungkinkan Anda mendapatkan progres pemutaran saat ini dan durasi pemutaran.
Dapatkan progres pemutaran
Panggil getCurrentTime untuk mendapatkan progres pemutaran saat ini. Contoh kode:
// Waktu yang dikembalikan diukur dalam detik.
player.getCurrentTime()Dapatkan durasi pemutaran
Anda dapat menanyakan durasi total video. Durasi video hanya dapat ditanyakan setelah video dimuat, misalnya setelah event play terjadi. Panggil getDuration untuk mendapatkan durasi total video. Contoh kode:
player.getDuration()Dapatkan status pemutaran
Panggil getStatus untuk mendapatkan status pemutaran. Nilai kembalian:
init: Menginisialisasi.
ready: Siap.
loading: Memuat.
play: Memutar.
pause: Dijeda.
playing: Sedang memutar.
waiting: Buffering.
error: Error.
ended: Selesai.
Contoh kode:
player.getStatus()Tentukan volume
Anda dapat mengatur volume atau membisukan video.
Karena properti video.volume bersifat read-only di iOS dan beberapa sistem Android, metode getVolume dan setVolume yang disediakan oleh SDK Pemutar ApsaraVideo untuk Web tidak berfungsi di iOS dan beberapa sistem Android.
Atur volume
Panggil operasi setVolume untuk mengatur 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()Konfigurasi mode bisu
Panggil metode mute untuk membisukan video selama pemutaran. Contoh kode:
// Bisukan video.
player.mute();
// Nyalakan suara video.
player.unMute();Tentukan kecepatan pemutaran
Jika Anda menggunakan antarmuka pengguna (UI) default SDK Pemutar ApsaraVideo untuk Web, Anda dapat menggunakan fitur kecepatan pemutaran bawaan untuk mengatur kecepatan pemutaran saat menonton video. Jika Anda menggunakan UI kustom, Anda dapat memanggil operasi setSpeed untuk mengatur kecepatan pemutaran.
Untuk informasi selengkapnya tentang cara menonaktifkan pengaturan kecepatan pemutaran, lihat bagian setSpeed pada topik Referensi API Aliplayer.
Contoh kode:
// Tentukan kecepatan pemutaran. Contoh kode berikut menunjukkan cara mengatur kecepatan pemutaran menjadi dua kali lipat kecepatan saat ini.
player.setSpeed(2)Pemutaran multi-definisi
Anda dapat mengonfigurasi URL aliran dalam berbagai definisi untuk pemutaran multi-definisi.
Jika Anda menggunakan VID dan PlayAuth untuk pemutaran, tidak diperlukan pengaturan tambahan. SDK Pemutar ApsaraVideo untuk Web mendapatkan daftar definisi dari ApsaraVideo VOD. Anda dapat mengklik Settings pada halaman pemutaran untuk melihat daftar definisi.
CatatanJika Anda menggunakan VID dan PlayAuth untuk pemutaran, Anda dapat menentukan atribut format untuk menentukan apakah file media diputar dalam format MP4 atau MP3 untuk pemutar HTML5. Secara default, file media dalam format MP4 yang diputar.
Jika Anda menggunakan pemutaran berbasis URL, Anda harus mengonfigurasi pasangan kunci-nilai dalam atribut source untuk menentukan URL aliran dalam berbagai definisi. Pasangan kunci-nilai tersebut dalam format JSON. Setelah pengaturan diterapkan, Anda dapat mengklik Settings pada halaman pemutaran untuk melihat daftar definisi.
Jika Anda ingin mengubah cara daftar definisi ditampilkan, Anda dapat menggunakan komponen definisi. Untuk informasi selengkapnya mengenai contoh kode, lihat Functions.
Dalam mode pemutaran berbasis URL, pasangan kunci-nilai berikut dalam atribut source didukung:
"OD": "<Original quality URL>"
"FD": "<Low definition URL>"
"LD":"<Standard definition URL>"
"SD": "<High definition URL>"
"HD": "<Ultra-high definition URL>"
"2K": "<2K URL>"
"4K": "<4K URL>"Contoh kode berikut menunjukkan 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"}'SDK Pemutar ApsaraVideo 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 terendah.
Nilai asc menentukan urutan menaik dari definisi terendah ke tertinggi.
Pemutar menyimpan definisi yang Anda tentukan. Saat Anda memutar video berikutnya, definisi yang Anda tentukan sebelumnya akan digunakan. Jika Anda tidak menentukan definisi saat terakhir kali memutar video, definisi rendah akan digunakan untuk pemutaran.
Jika video gagal diputar dalam definisi yang ditentukan, pemutar secara otomatis beralih ke definisi yang lebih rendah berikutnya dan menampilkan pesan. Hanya pemutar HTML5 yang mendukung peralihan definisi.
Aktifkan putar ulang berulang
SDK Pemutar ApsaraVideo untuk Web memungkinkan Anda menentukan atribut rePlay atau mendengarkan event ended untuk putar ulang berulang.
Contoh kode untuk menentukan atribut rePlay
rePlay:trueContoh kode untuk mendengarkan event ended
player.on('ended',function(){
player.replay()
})Operasi gerakan pada perangkat seluler
SDK Pemutar untuk Web dioptimalkan untuk layar kecil pada perangkat seluler. Bilah progres lebih mudah ditarik. Dua fitur eksklusif disediakan: tekan lama untuk mempercepat dan klik ganda 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 apa pun pada pemutar kecuali bilah progres selama lebih dari 0,5 detik, video akan diputar dengan kecepatan lebih tinggi. Setelah Anda melepas, video akan kembali diputar dengan kecepatan semula.
Anda juga dapat menonaktifkan fitur ini dengan mengonfigurasi parameter longPressFastForward: false. Untuk informasi selengkapnya, lihat Referensi API Aliplayer.
Klik ganda untuk maju cepat atau mundur cepat
Secara default, fitur klik ganda untuk maju cepat atau mundur cepat diaktifkan pada perangkat seluler. Jika Anda mengklik ganda area sepertiga kiri pemutar, video akan mundur 10 detik. Jika Anda mengklik ganda area sepertiga kanan pemutar, video akan maju 10 detik.
Anda juga dapat menonaktifkan fitur ini dengan mengonfigurasi parameter dbClickSkip: false. Untuk informasi selengkapnya, lihat Referensi API Aliplayer.