Các bản cập nhật về nội dung nghe nhìn trong Chrome 73

François Beaufort
François Beaufort
GitHub

Trong bài viết này, tôi sẽ thảo luận về các tính năng đa phương tiện mới của Chrome 73, bao gồm:

Hỗ trợ Phím đa phương tiện phần cứng

Ngày nay, nhiều bàn phím có các phím để điều khiển các chức năng phát nội dung đa phương tiện cơ bản, chẳng hạn như phát/tạm dừng, bản nhạc trước và bản nhạc tiếp theo. Tai nghe cũng có các nút này. Cho đến nay, người dùng máy tính không thể sử dụng các phím đa phương tiện này để điều khiển việc phát âm thanh và video trong Chrome. Điều này sẽ thay đổi từ hôm nay!

Phím đa phương tiện trên bàn phím
Các phím phương tiện trên bàn phím

Nếu người dùng nhấn phím tạm dừng, thành phần nội dung đa phương tiện đang phát trong Chrome sẽ bị tạm dừng và nhận được sự kiện nội dung đa phương tiện "tạm dừng". Nếu bạn nhấn phím phát, thì phần tử nội dung đa phương tiện đã tạm dừng trước đó sẽ tiếp tục và nhận được sự kiện nội dung đa phương tiện "phát". Hoạt động bất kể Chrome đang chạy ở nền trước hay nền sau.

Trên ChromeOS, các ứng dụng Android sử dụng tâm điểm âm thanh hiện sẽ yêu cầu Chrome tạm dừng và tiếp tục phát âm thanh để tạo trải nghiệm đa phương tiện liền mạch giữa các trang web trên Chrome, Ứng dụng Chrome và Ứng dụng Android. Tính năng này hiện chỉ được hỗ trợ trên thiết bị ChromeOS chạy Android P.

Tóm lại, bạn nên luôn theo dõi các sự kiện đa phương tiện này và hành động tương ứng.

video.addEventListener('pause', function() {
  // Video is now paused.
  // TODO: Let's update UI accordingly.
});

video.addEventListener('play', function() {
  // Video is now playing.
  // TODO: Let's update UI accordingly.
});

Tuy nhiên, hãy đợi vì còn nhiều thứ khác nữa! Giờ đây, Media Session API đã có trên máy tính (trước đây chỉ hỗ trợ trên thiết bị di động), các nhà phát triển web có thể xử lý các sự kiện liên quan đến nội dung nghe nhìn, chẳng hạn như thay đổi bản nhạc do các phím nội dung nghe nhìn kích hoạt. Các sự kiện previoustrack và nexttrack hiện được hỗ trợ.

navigator.mediaSession.setActionHandler('previoustrack', function() {
  // User hit "Previous Track" key.
});

navigator.mediaSession.setActionHandler('nexttrack', function() {
  // User hit "Next Track" key.
});

Chrome sẽ tự động xử lý các phím phát và tạm dừng. Tuy nhiên, nếu hành vi mặc định không phù hợp với bạn, bạn vẫn có thể đặt một số trình xử lý thao tác cho "phát" và "tạm dừng" để ngăn chặn điều này.

navigator.mediaSession.setActionHandler('play', function() {
  // User hit "Play" key.
});

navigator.mediaSession.setActionHandler('pause', function() {
  // User hit "Pause" key.
});

Hỗ trợ Phím đa phương tiện phần cứng có trên ChromeOS, macOS và Windows. Linux sẽ ra mắt sau.

Tham khảo tài liệu hiện có của chúng tôi dành cho nhà phát triển và dùng thử các mẫu chính thức của Phiên truyền thông đa phương tiện.

Chromestatus Tracker | Lỗi Chromium

Phương tiện đã mã hoá: Kiểm tra chính sách HDCP

Nhờ API kiểm tra chính sách HDCP, giờ đây, nhà phát triển web có thể truy vấn xem có thể thực thi một chính sách cụ thể (ví dụ: yêu cầu HDCP) trước khi yêu cầu giấy phép Widevine và tải nội dung nghe nhìn hay không.

const status = await video.mediaKeys.getStatusForPolicy({ minHdcpVersion: '2.2' });

if (status == 'usable')
  console.log('HDCP 2.2 can be enforced.');

API này có trên tất cả các nền tảng. Tuy nhiên, các bước kiểm tra chính sách thực tế có thể không hoạt động trên một số nền tảng. Ví dụ: lời hứa kiểm tra chính sách HDCP sẽ từ chối bằng NotSupportedError trên Android và Android WebView.

Hãy xem tài liệu trước đây của chúng tôi dành cho nhà phát triển và dùng thử mẫu chính thức để xem tất cả các phiên bản HDCP được hỗ trợ.

Ý định phát hành | Trình theo dõi trạng thái Chrome | Lỗi Chromium

Thử nghiệm theo nguyên gốc cho chế độ Hình trong hình tự động đối với các PWA đã cài đặt

Một số trang có thể muốn tự động chuyển sang và thoát khỏi chế độ Hình trong hình cho một phần tử video; ví dụ: các ứng dụng web hội nghị truyền hình sẽ được hưởng lợi từ một số hành vi Hình trong hình tự động khi người dùng chuyển đổi qua lại giữa ứng dụng web và các ứng dụng hoặc thẻ khác. Rất tiếc, bạn không thể làm được việc này do yêu cầu về cử chỉ của người dùng. Vì vậy, chúng tôi xin giới thiệu Chế độ hình trong hình tự động!

Để hỗ trợ việc chuyển đổi ứng dụng và thẻ này, một thuộc tính autopictureinpicture mới sẽ được thêm vào phần tử <video>.

<video autopictureinpicture></video>

Dưới đây là cách hoạt động của tính năng này:

  • Khi tài liệu bị ẩn, phần tử video có thuộc tính autopictureinpicture được đặt gần đây nhất sẽ tự động chuyển sang chế độ Hình trong hình, nếu được cho phép.
  • Khi tài liệu hiển thị, phần tử video ở chế độ Hình trong hình sẽ tự động rời khỏi tài liệu.

Chỉ vậy thôi! Xin lưu ý rằng tính năng Tự động ở chế độ Hình trong hình chỉ áp dụng cho Ứng dụng web tiến bộ mà người dùng đã cài đặt trên máy tính.

Hãy xem thông số kỹ thuật để biết thêm thông tin chi tiết và thử sử dụng mẫu PWA chính thức.

Ý định thử nghiệm | Trình theo dõi trạng thái Chrome | Lỗi Chromium

Bản dùng thử theo nguyên gốc cho tính năng Bỏ qua quảng cáo trong cửa sổ Hình trong hình

Mô hình quảng cáo video thường bao gồm quảng cáo trước video. Trình cung cấp nội dung thường cho phép bỏ qua quảng cáo sau vài giây. Đáng tiếc là do cửa sổ Hình trong hình không có tính tương tác nên người dùng đang xem video ở chế độ Hình trong hình hiện không thể làm việc này.

Giờ đây, Media Session API đã có trên máy tính (trước đây chỉ hỗ trợ trên thiết bị di động), bạn có thể sử dụng thao tác phiên phát nội dung đa phương tiện skipad mới để cung cấp tuỳ chọn này trong chế độ Hình trong hình.

Nút Bỏ qua quảng cáo trong cửa sổ Hình trong hình
Nút "Bỏ qua quảng cáo" trong cửa sổ Hình trong hình

Để cung cấp tính năng này, hãy truyền một hàm có skipad khi gọi setActionHandler(). Để ẩn thẻ/vé, hãy truyền null. Như bạn có thể đọc ở bên dưới, cách làm khá đơn giản.

try {
  navigator.mediaSession.setActionHandler('skipad', null);
  showSkipAdButton();
} catch(error) {
    // The "Skip Ad" media session action is not supported.
}

function showSkipAdButton() {
  // The Picture-in-Picture window will show a "Skip Ad" button.
  navigator.mediaSession.setActionHandler('skipad', onSkipAdButtonClick);
}

function onSkipAdButtonClick() {
  // User clicked "Skip Ad" button, let's hide it now.
  navigator.mediaSession.setActionHandler('skipad', null);

  // TODO: Stop ad and play video.
}

Hãy dùng thử mẫu "Bỏ qua quảng cáo" chính thức và cho chúng tôi biết cách cải thiện tính năng này.

Ý định thử nghiệm | Trình theo dõi Chromestatus | Lỗi Chromium

Cấp quyền tự động phát cho PWA dành cho máy tính

Giờ đây, Ứng dụng web tiến bộ đã có trên tất cả các nền tảng máy tính, nên chúng tôi sẽ mở rộng quy tắc mà chúng tôi có trên thiết bị di động sang máy tính: tự động phát có âm thanh hiện được cho phép đối với các PWA đã cài đặt. Xin lưu ý rằng cách này chỉ áp dụng cho các trang trong phạm vi của tệp kê khai ứng dụng web.

Lỗi Chromium