Remote Playback API

Khái niệm và cách sử dụng

Thiết bị phát lại từ xa là các thiết bị kết nối như TV, máy chiếu hoặc loa. API này tính đến các thiết bị có dây được kết nối qua HDMI hoặc DVI, và các thiết bị không dây, ví dụ Chromecast hoặc AirPlay.

API này cho phép một trang web, có phần tử media như video hoặc tệp âm thanh, khởi tạo và kiểm soát việc phát lại phương tiện đó trên thiết bị từ xa được kết nối. Ví dụ: phát video trên TV được kết nối.

Giao diện

RemotePlayback

Cho phép trang web phát hiện sự khả dụng của thiết bị phát lại từ xa, sau đó kết nối và kiểm soát việc phát trên các thiết bị đó.

Mở rộng các giao diện khác

HTMLMediaElement.disableRemotePlayback

Một giá trị boolean đặt hoặc trả về trạng thái phát lại từ xa, cho biết liệu phần tử media có được phép có giao diện người dùng phát lại từ xa hay không.

HTMLMediaElement.remote Read only

Trả về đối tượng RemotePlayback được liên kết với phần tử media.

Ví dụ

Ví dụ sau đây minh họa một trình phát với điều khiển tùy chỉnh hỗ trợ phát lại từ xa. Ban đầu nút dùng để chọn thiết bị bị ẩn.

<video id="videoElement" src="https://example.org/media.ext">
  <button id="deviceBtn" class="hidden">Pick device</button>
</video>

.hidden {
  display: none;
}

Phương thức RemotePlayback.watchAvailability() theo dõi các thiết bị phát lại từ xa có sẵn. Nếu có thiết bị, sử dụng callback để hiển thị nút.

const deviceBtn = document.getElementById("deviceBtn");
const videoElem = document.getElementById("videoElement");

function availabilityCallback(available) {
  // Hiển thị hoặc ẩn nút chọn thiết bị tùy thuộc vào sự khả dụng của thiết bị.
  if (available) {
    deviceBtn.classList.remove("hidden");
  } else {
    deviceBtn.classList.add("hidden");
  }
}

videoElem.remote.watchAvailability(availabilityCallback).catch(() => {
  // Nếu thiết bị không thể liên tục theo dõi sự khả dụng,
  // hiển thị nút để cho phép người dùng thử nhắc kết nối.
  deviceBtn.style.display = "inline";
});

Thông số kỹ thuật

Tương thích trình duyệt