All Products
Search
Document Center

ApsaraVideo VOD:Fitur dasar

Last Updated:Aug 27, 2026

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.

Catatan

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.

Catatan

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()
Catatan

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

Catatan
  • 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.

Catatan

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.

Catatan

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.

    Catatan

    Jika 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.

Catatan

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.

Catatan
  • 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:true

Contoh 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.

Referensi