API Trình phát video được nhúng

Với API trình phát video được nhúng, bạn có thể kiểm soát trình phát video được nhúng cũng như xem các sự kiện do trình phát kích hoạt. Ví dụ: bạn có thể nghe sự kiện khi video tạm dừng hoặc bắt đầu phát lại video bằng cách sử dụng nút tùy chỉnh.

Để bắt đầu, hãy làm theo các phần sau:

Thiết lập
Điều khiển trình phát
Đăng ký Sự kiện
Tham chiếu điều khiển trình phát

Thiết lập

1. Định cấu hình plugin

Đọc tài liệu về trình phát video được nhúng để tìm hiểu cách thiết lập plugin.

2. Lấy phiên bản API trình phát video được nhúng

Để lấy phiên bản API trình phát video được nhúng, hãy nghe xfbml.ready. Nếu type thông báo là video, sự kiện ready đã được kích hoạt bởi trình phát video được nhúng.

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

3. Ví dụ về mã đầy đủ

Trong mẫu mã bên dưới, chúng tôi giả định bạn đang sử dụng ID ứng dụng khi khởi tạo Facebook SDK dành cho JavaScript. Nếu bạn chưa có ID ứng dụng, hãy đọc tài liệu để biết cách tạo ID ứng dụng.

Trong mẫu mã bên dưới, thay thế {your-app-id} bằng ID ứng dụng và data-href bằng URL video của bạn. Đảm bảo bạn kiểm tra sự kiện xfbml.ready sau khi gọi hàm 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>

Sử dụng nhiều trình phát

Nếu đang sử dụng nhiều trình phát trên một trang, bạn có thể xác định trình phát video bằng cách thêm thuộc tính id vào thẻ trình phát video và kiểm tra id trong đối tượng 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>

Điều khiển trình phát

Bạn có thể gọi một tập hợp các hàm để điều khiển trình phát video hoặc nhận trạng thái hiện tại của trình phát, ví dụ: vị trí phát lại hiện tại.

Ví dụ về cách sử dụng

// 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);

Tham chiếu điều khiển trình phát

Đăng ký sự kiện

Hàm subscribe() sẽ thêm hàm listener cho sự kiện đã chỉ định, ví dụ: startedPlaying.

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

Xóa đăng ký sự kiện

Hàm subscribe() trả về một mã với phương thức release mà khi được gọi, sẽ lại xóa listener khỏi sự kiện.

myEventHandler.release('startedPlaying');

Tham chiếu sự kiện

Tham chiếu điều khiển trình phát

Bạn có thể gọi một tập hợp các hàm để điều khiển trình phát video hoặc nhận trạng thái hiện tại của trình phát, ví dụ: vị trí phát lại hiện tại.

Hàm	Mô tả	Đối số (Loại)
`play()`	Phát video.
`pause()`	Tạm dừng video.
`seek(seconds)`	Chuyển đến vị trí đã chỉ định.	`seconds` (`number`)
`mute()`	Tắt tiếng video.
`unmute()`	Bật tiếng video.
`isMuted()`	`true` nếu video bị tắt tiếng, `false` nếu video không bị tắt tiếng.
`setVolume(volume)`	Đặt âm lượng ở mức đã chỉ định (`float`, thang từ `0` đến `1`).	`volume` (`float`)
`getVolume()`	Trả về âm lượng hiện tại của video (`float`, thang từ `0` đến `1`).
`getCurrentPosition()`	Trả về vị trí thời gian hiện tại của video tính bằng giây.
`getDuration()`	Trả về thời lượng của video tính bằng giây.
`subscribe(event, eventCallback)`	Thêm hàm listener cho sự kiện đã chỉ định. Để biết chi tiết về sự kiện, hãy tham khảo phần Đăng ký sự kiện. Trả về một mã với phương thức `release` mà khi được gọi, sẽ lại xóa listener khỏi sự kiện.	`event` (`string`), `eventCallback` (`function`)

Tham chiếu sự kiện

Sự kiện	Mô tả
`startedPlaying`	Được kích hoạt khi video bắt đầu phát.
`paused`	Được kích hoạt khi video tạm dừng.
`finishedPlaying`	Được kích hoạt khi video phát xong.
`startedBuffering`	Được kích hoạt khi video bắt đầu lưu vào bộ đệm.
`finishedBuffering`	Được kích hoạt khi video khôi phục từ quá trình lưu vào bộ đệm.
`error`	Được kích hoạt khi xảy ra lỗi trên video.