API Sematan Pemutar Video

Menggunakan API Pemutar Video Tersemat, Anda dapat mengontrolpemutar video tersemat serta mengamati peristiwa yang dipicu oleh pemutar tersebut. Sebagai contoh, Anda dapat mendengarkan peristiwa ketika video dijeda atau memulai pemutaran video menggunakan tombol khusus.

Untuk memulai, ikuti bagian-bagian berikut:

Penyiapan
Kontrol Pemutar
Berlangganan Peristiwa
Referensi Kontrol Pemutar

Penyiapan

1. Mengonfigurasi Plugin

Baca dokumentasi pemutar video tersemat untuk mempelajari cara menyiapkan plugin.

2. Mendapatkan Instance API Pemutar Video Tersemat

Untuk mendapatkan instance API pemutar video tersemat, dengarkan xfbml.ready. Jika type pesan adalah video, maka peristiwa ready telah dipicu oleh pemutar video tersemat.

var my_video_player;
FB.Event.subscribe('xfbml.ready', function(msg) {
  if (msg.type === 'video') {
    my_video_player = msg.instance;
  }
});

3. Contoh Kode Lengkap

Pada contoh kode di bawah, kami berasumsi Anda menggunakan ID aplikasi saat menginisialisasi SDK Facebook untuk JavaScript. Jika Anda belum memiliki ID aplikasi, baca dokumen tentang cara membuat ID aplikasi.

Pada contoh di bawah, ganti {your-app-id} dengan ID aplikasi Anda dan data-href dengan URL video Anda. Pastikan Anda memeriksa peristiwa xfbml.ready setelah memanggil fungsi FB.init().

<html>
<head>
  <title>Your Website Title</title>
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '{your-app-id}',
        xfbml      : true,
        version    : 'v3.2'
      });
    
      // Get Embedded Video Player API Instance
      var my_video_player;
      FB.Event.subscribe('xfbml.ready', function(msg) {
        if (msg.type === 'video') {
          my_video_player = msg.instance;
        }
      });
    };
  </script>
  <div id="fb-root"></div>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>

  <!-- Your embedded video player code -->
  <div  
    class="fb-video" 
    data-href="https://www.facebook.com/facebook/videos/10153231379946729/" 
    data-width="500" 
    data-allowfullscreen="true"></div>

</body>
</html>

Menangani Beberapa Pemutar

Jika menggunakan beberapa pemutar pada satu halaman, Anda dapat mengidentifikasi pemutar video dengan menambahkan atribut id ke tag pemutar video dan memeriksa id pada objek msg:

<div id="my-video-player-id" ... />
<script>
FB.Event.subscribe('xfbml.ready', function(msg) {
  if (msg.type === 'video' && msg.id === 'my-video-player-id') {
     // True for <div id="my-video-player-id" ...
     my_video_player = msg.instance;
  }
});
</script>

Kontrol Pemutar

Anda dapat memanggil serangkaian fungsi untuk mengontrol pemutar video atau mendapatkan statusnya saat ini, misalnya posisi pemutaran sekarang.

Contoh Penggunaan

// Start video playback
my_video_player.play();

// Check whether video is muted
if (my_video_player.isMuted()) {
  // Video is muted
}

// Jump to second 5 of the video
my_video_player.seek(5);

Referensi Kontrol Pemutar

Berlangganan Peristiwa

Fungsi subscribe() menambahkan fungsi pendengar untuk peristiwa tertentu, mis. startedPlaying.

var myEventHandler = my_video_player.subscribe('startedPlaying', function(e) {
  // Video started playing ...
});

Hapus Langganan Peristiwa

Fungsi subscribe() menghasilkan token beserta metode release yang ketika dipanggil akan menghapus lagi pendengar dari peristiwa.

myEventHandler.release('startedPlaying');

Referensi Peristiwa

Referensi Kontrol Pemutar

Anda dapat memanggil serangkaian fungsi untuk mengontrol pemutar video atau mendapatkan statusnya saat ini, misalnya posisi pemutaran sekarang.

Fungsi	Deskripsi	Argumen (Jenis)
`play()`	Memutar video.
`pause()`	Menjeda video.
`seek(seconds)`	Mencari posisi yang diinginkan.	`seconds` (`number`)
`mute()`	Mensenyapkan video.
`unmute()`	Batal mensenyapkan video.
`isMuted()`	`true` apabila video disenyapkan, `false` jika tidak.
`setVolume(volume)`	Mengatur volume ke angka yang sudah ditentukan (`float`, skala dari `0` hingga `1`).	`volume` (`float`)
`getVolume()`	Menghasilkan volume video saat ini (`float`, skala dari `0` hingga `1`).
`getCurrentPosition()`	Menghasilkan posisi waktu video saat ini dalam detik.
`getDuration()`	Menghasilkan durasi video dalam detik.
`subscribe(event, eventCallback)`	Menambahkan fungsi pendengar ke peristiwa tertentu. Untuk perincian tentang peristiwa, baca bagian Berlangganan Peristiwa. Menghasilkan token beserta metode `release` yang ketika dipanggil akan menghapus lagi pendengar dari peristiwa.	`event` (`string`), `eventCallback` (`function`)

Referensi Peristiwa

Acara	Deskripsi
`startedPlaying`	Diaktifkan ketika video mulai diputar.
`paused`	Diaktifkan ketika video dijeda.
`finishedPlaying`	Diaktifkan ketika video selesai diputar.
`startedBuffering`	Diaktifkan ketika video mulai buffering.
`finishedBuffering`	Diaktifkan ketika video pulih dari buffering.
`error`	Diaktifkan ketika terjadi kesalahan pada video.