全部产品
Search
文档中心

ApsaraVideo VOD:Fitur Dasar

更新时间:Jan 30, 2026

Pengaturan fitur Web Player yang umum dapat bervariasi tergantung pada mode pemutaran, metode pemutaran, dan lingkungan browser. Topik ini menyediakan contoh penggunaan fitur dasar Web Player.

Pengaturan umum

SDK Web Player memerlukan konfigurasi akses lintas domain untuk memutar video FLV dan HLS. Untuk informasi selengkapnya tentang cara mengonfigurasi akses lintas domain, lihat Configure cross-domain access.

  • Jika akses lintas domain tidak dikonfigurasi, browser akan melaporkan error berikut selama pemutaran:

    No 'Access-Control-Allow-Origin' header is present on the requested resource.

Catatan

Setelah masuk ke mode layar penuh, Anda harus mengatur input agar menggunakan posisi absolut untuk menampilkan keyboard virtual.

Aturan pemanggilan API

Fitur dasar Web Player diimplementasikan melalui properti atau API.

Catatan

Untuk informasi selengkapnya tentang properti dan API, lihat Aliplayer API reference.

Aturan untuk memanggil API adalah sebagai berikut:

Panggil API dalam fungsi callback dari konstruktor player. Kode berikut memberikan contohnya:

var player = new Aliplayer({},function(player) {
    player.setSpeed(2);
 });

Kontrol pemutaran

Web Player mendukung operasi seperti memulai pemutaran dari waktu tertentu dan menjeda pemutaran.

Mulai pemutaran dari waktu tertentu

Fitur ini melompat ke waktu tertentu untuk pemutaran dan diimplementasikan melalui API seek. Kode berikut memberikan contohnya:

// time adalah waktu yang ditentukan dalam detik.
player.seek(time)

Jeda pemutaran

Fitur ini menjeda pemutaran video dan diimplementasikan melalui API pause. Kode berikut memberikan contohnya:

player.pause()
Catatan

Untuk menampilkan tombol putar besar, berikan parameter true. Contohnya: player.pause(true).

Hancurkan pemutar

Fitur ini menghapus instans player dan diimplementasikan melalui API dispose. Kode berikut memberikan contohnya:

player.dispose()

Atur mode tampilan

Catatan
  • Didukung di browser desktop dan iOS.

  • Didukung di Android (Chrome dan Firefox).

  • Fitur ini tidak didukung di WeChat dan sebagian besar browser karena mereka mengintersepsi pemutaran video dan menggunakan player mereka sendiri.

Putar

Fitur ini memutar video dengan sudut tertentu dan diimplementasikan melalui API setRotate. Setelah mengatur rotasi, Anda juga dapat menanyakan sudut rotasi tersebut. Kode berikut memberikan contohnya:

// Atur sudut rotasi. Nilai positif untuk <angle> menunjukkan rotasi searah jarum jam, dan nilai negatif menunjukkan rotasi berlawanan arah jarum jam. Misalnya, player.setRotate(180) memutar video 180 derajat searah jarum jam.
player.setRotate(<angle>)
// Dapatkan sudut rotasi.
player.getRotate()

Cermin

Fitur ini mendukung pencerminan horizontal dan vertikal serta diimplementasikan melalui API setImage. Kode berikut memberikan contohnya:

// Pencerminan horizontal
player.setImage('horizon')
// Pencerminan vertikal
player.setImage('vertical')

Selain itu, Web Player menyediakan properti videoHeight dan videoWidth untuk mengatur tinggi dan lebar video. Tinggi dan lebar biasanya diatur ke nilai yang lebih kecil daripada dimensi kontainer guna mencegah video meluap dari kontainer induk selama rotasi dan pencerminan. Kode berikut memberikan contohnya:

 width: '100%', // Ukuran kontainer
 height: '100%', // Ukuran kontainer
 videoHeight:"200px", // Tinggi video

Dapatkan informasi pemutaran

Web Player memungkinkan Anda mengambil progres pemutaran saat ini dan durasi total.

Dapatkan progres pemutaran saat ini

Fitur ini mengambil waktu pemutaran saat ini dan diimplementasikan melalui API getCurrentTime. Kode berikut memberikan contohnya:

// API mengembalikan waktu dalam detik.
player.getCurrentTime()

Dapatkan durasi pemutaran

Fitur ini mengambil durasi total video. Anda hanya dapat mengambil durasi setelah video dimuat, yaitu setelah event play. Fitur ini diimplementasikan melalui API getDuration. Kode berikut memberikan contohnya:

player.getDuration()

Pantau status pemutaran

Fitur ini memantau status player dan diimplementasikan melalui API getStatus. Nilai kembali mencakup hal-hal berikut:

  • init: Diinisialisasi.

  • ready: Siap.

  • loading: Memuat.

  • play: Putar.

  • pause: Dijeda.

  • playing: Sedang diputar.

  • waiting: Menunggu buffer.

  • error: Error.

  • ended: Selesai.

Kode berikut memberikan contohnya:

player.getStatus()

Atur volume

Mengatur volume mencakup penyesuaian volume dan pembisuan.

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.

Sesuaikan volume

Fitur ini menyesuaikan tingkat volume dan diimplementasikan melalui API setVolume. Setelah mengatur volume, Anda juga dapat mengambil informasi volumenya. Kode berikut memberikan contohnya:

// Nilai volume adalah bilangan real antara 0 dan 1.
player.setVolume(0)
// Dapatkan informasi volume.
player.getVolume()

Pengaturan Bisu

Fitur ini membisukan video yang sedang diputar dan diimplementasikan melalui API mute. Kode berikut memberikan contohnya:

// Bisukan video
player.mute();
// Nyalakan kembali suara video
player.unMute();

Kontrol kecepatan pemutaran

UI default SDK Web Player mencakup fitur kontrol kecepatan pemutaran. Penonton dapat memilih kecepatan pemutaran dari antarmuka. Jika Anda menggunakan UI kustom, Anda dapat mengimplementasikan fitur kontrol kecepatan pemutaran menggunakan API setSpeed.

Catatan

Untuk menonaktifkan pengaturan kecepatan pemutaran, lihat Aliplayer API Reference untuk deskripsi setSpeed.

Contohnya:

// Contoh berikut mengatur kecepatan pemutaran menjadi dua kali kecepatan saat ini.
player.setSpeed(2)

Pemutaran multi-definisi

Fitur ini memungkinkan pemutaran multi-definisi dengan mengatur alamat beberapa aliran definisi.

  • Jika Anda menggunakan metode pemutaran VID+PlayAuth, tidak diperlukan pengaturan tambahan. SDK Web Player mengambil daftar definisi dari layanan ApsaraVideo VOD. Penonton dapat mengklik tombol Settings di bilah kontrol antarmuka pemutaran untuk melihat daftar definisi.

    Catatan

    Saat menggunakan metode VID+PlayAuth, Anda dapat mengatur properti `format` dalam mode pemutaran H5 untuk memilih format MP4 atau MP3. Format default adalah MP4.

  • Jika Anda menggunakan metode pemutaran URL dengan mengatur properti source, Anda harus menentukan alamat beberapa aliran definisi sebagai pasangan kunci-nilai dalam struktur JSON properti source. Setelah menerapkan pengaturan tersebut, penonton dapat mengklik tombol Settings di bilah kontrol antarmuka pemutaran untuk melihat daftar definisi.

Catatan

Anda dapat menyesuaikan UI daftar definisi menggunakan komponen definisi. Untuk contoh kode, lihat Feature Demo.

Saat menggunakan metode pemutaran URL, pasangan kunci-nilai dalam struktur JSON untuk properti `source` mencakup hal-hal berikut:

   "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>"

Kode berikut memberikan contoh cara mengatur definisi untuk metode pemutaran URL:

// Contoh ini mengatur alamat untuk Ultra High Definition dan High Definition.
source:'{"HD":"http://******/player/hdexample.mp4","SD":"http://******/player/sdexample.mp4"}'

Web Player juga mendukung properti `qualitySort` untuk mengurutkan definisi secara menaik atau menurun.

  • desc: Mengurutkan secara menurun (dari tertinggi ke terendah).

  • asc: Mengurutkan secara menaik (dari terendah ke tertinggi).

Catatan
  • Player mengingat pilihan definisi pengguna. Saat pengguna membuka kembali video, player akan memprioritaskan definisi yang terakhir dipilih. Jika definisi yang terakhir dipilih tidak tersedia, player akan memilih definisi yang lebih rendah secara default.

  • Jika definisi yang dipilih tidak dapat diputar, player secara otomatis beralih ke definisi berikutnya yang tersedia dan menampilkan prompt. Fitur ini hanya didukung di H5.

Putar ulang berulang

Web Player mendukung putar ulang berulang dengan mengatur properti rePlay atau dengan mendengarkan event ended.

Contoh pengaturan properti rePlay

rePlay:true

Contoh mendengarkan event ended

player.on('ended',function(){
   player.replay()
})

Kontrol gerakan di perangkat seluler

Web Player dioptimalkan untuk layar kecil di perangkat seluler dan mencakup bilah progres yang lebih mudah diseret. Fitur ini juga menyediakan dua fitur khusus seluler: tekan lama untuk maju cepat dan ketuk ganda untuk mencari.

Kontrol kecepatan tekan lama

Secara default, fitur tekan lama untuk maju cepat diaktifkan di perangkat seluler. Anda dapat menekan lama area mana pun di player kecuali bilah progres selama sekitar 0,5 detik untuk memulai maju cepat. Lepaskan jari Anda untuk melanjutkan kecepatan pemutaran asli.

Untuk menonaktifkan fitur ini, atur parameter longPressFastForward: false. Untuk informasi selengkapnya, lihat Aliplayer API reference.

Ketuk ganda untuk mencari

Secara default di perangkat seluler, pemutar web mencakup fitur ketuk ganda untuk maju cepat dan mundur cepat. Mengklik ganda sepertiga kiri layar pemutaran akan melewati 10 detik ke depan, dan mengklik ganda sepertiga kanan akan melewati 10 detik ke belakang.

Untuk menonaktifkan fitur ini, atur parameter dbClickSkip: false. Untuk informasi selengkapnya, lihat Aliplayer API reference.

Referensi